/* setup */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* 
font-family: "Poppins", serif;
*/

:root {
  --main: rgb(21, 21, 21);
  --highlight: rgb(8,113,66);
  --highlight-bright: rgb(4, 221, 123);
  --highlight-dark: rgb(2, 53, 30);
  --footer-color: black;

  --deep: rgb(21, 21, 21);
  --shallow: white;
  --misty: rgba(73, 73, 73, 0.5);
  --misty-solid: rgb(155, 155, 155);

  --shallow-op: rgb(255, 255, 255, .25);
  --deep-op: rgb(0, 0, 0, .25);
}

* {
  font-family: "Poppins", sans-serif;
}

::selection {
  color: var(--deep);
  background: var(--highlight);
}

a {
  text-decoration: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 p {
  margin: 0;
  color: var(--shallow);
}

.numType {
  font-family: sans-serif;
}

.current {
  display: flex;
}

.reserve {
  display: none;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-150px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-150px);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(150px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(150px);
  }
}

@keyframes fadeInTop {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInSimple {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes moveUnder {
  from {
    opacity: 1;
  }

  to {
    transform: translateY(400px);
    opacity: 0;
  }
}

@keyframes moveOver {
  from {
    transform: translateY(400px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes loadingRotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.inViewAnimation {
  animation: fadeInLeft 1.5s;
}

.mainButton,
.secondaryButton,
.tertiaryButton,
.quaternaryButton {
  z-index: 99;
  width: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--highlight-dark);
  height: 50px;
  transition: all .3s;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid var(--highlight-dark);
  color: var(--shallow);
}

.wideButton {
  width: 300px;
}

.smallButton {
  width: 50px;
}

.secondaryButton {
  background: transparent;
  border: 2px solid var(--shallow);
  color: var(--shallow);
}

.tertiaryButton {
  background: var(--shallow);
  color: var(--highlight-dark);
}

.quaternaryButton {
  background: transparent;
  border: 2px solid var(--shallow);
  color: var(--shallow);
}

.quaternaryButtonNegative {
  background: var(--highlight);
  border: 2px solid var(--highlight);
}

.mainButton span,
.secondaryButton span,
.tertiaryButton span,
.quaternaryButton span {
  color: var(--shallow);
  font-weight: 600;
  transition: all .3s;
  font-size: 18px;
  user-select: none;
  display: flex;
  align-items: center;
  text-align: center;
}

.secondaryButton span {
  color: var(--shallow);
}

.tertiaryButton span {
  color: var(--main);
}

.quaternaryButton span {
  color: var(--shallow);
}

.quaternaryButtonNegative span {
  color: var(--deep);
}

.smallButton span {
  font-size: 40px;
  font-weight: 300;
}

.mainButton:hover,
.secondaryButton:hover,
.tertiaryButton:hover,
.quaternaryButton:hover {
  background-color: var(--highlight);
  transform: scale(1.05);
  border: 2px solid var(--highlight);
}

.mainButton:hover>span,
.secondaryButton:hover>span,
.tertiaryButton:hover>span,
.quaternaryButton:hover>span,
.mainButton:hover>span span,
.secondaryButton:hover>span span,
.tertiaryButton:hover>span span,
.quaternaryButton:hover>span span {
  color: var(--deep);
}

#backToTop {
  align-items: center;
  position: fixed;
  background-color: var(--highlight);
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  border-radius: 8px;
  right: 40px;
  cursor: pointer;
  bottom: 50px;
  transition: all .3s;
  border: 1px solid var(--highlight);
}

#backToTop span {
  color: var(--deep);
  font-weight: 500;
  font-size: 20px;
  transition: all .3s;
}

#backToTop:hover {
  width: 32px;
  height: 32px;
  box-shadow: 1px 1px var(--highlight-dark);
}

#backToTop:hover>span {
  font-weight: 700;
  font-size: 22px;
}

.disabledButton {
  pointer-events: none;
  filter: brightness(0.5);
}

/* nav */

nav {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  z-index: 999;
  animation: fadeInTop 1.5s;
  /* border-bottom: 1px solid var(--highlight); */
}

.navbar {
  display: flex;
}

.navbar a {
  color: var(--shallow);
  transition: all .3s;
  font-size: 21px;
  font-weight: 500;
  margin: 0px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.navbar a:hover {
  color: var(--highlight);
}

#languageMenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 17px;
  top: 70px;
  background: var(--shallow);
  padding: 10px;
  justify-content: space-between;
  animation: fadeInRight .5s;
  border-radius: 8px;
}

#languageMenu span {
  font-weight: 600;
  cursor: pointer;
}

#languageMenu a {
  color: var(--deep);
}

#languageMenu a:hover {
  color: var(--main);
}

#serviceMenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 450px;
  top: 70px;
  background: var(--footer-color);
  padding: 10px;
  justify-content: space-between;
  animation: fadeInTop .5s;
  transition: all .3s;
}

#serviceMenu span {
  font-weight: 500;
  cursor: pointer;
  transition: all .3s;
}

#serviceMenu a {
  color: var(--shallow);
  transition: all .3s;
  font-size: 20px;
  margin: 10px 10px;
}

#serviceMenu a:hover {
  color: var(--shallow);
  padding-left: 5px;
  font-size: 20px;
  border-left: 1px solid var(--shallow);
}

.logo {
  height: 40%;
  padding-left: 30px;
  transition: all .3s;
}

.logo:hover {
  transform: scale(1.1);
  filter: invert(100%);
}

/* product categories */
.categoryDropMenu {
  right: 0;
  width: 100%;
  z-index: 9999;
  transition: all .3s;
  display: flex;
  height: 730px;
  justify-content: center;
}

.categoryWrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px 50px;
  transition: all 2s;
  flex: 1;
}

.categoryWrap a {
  color: var(--shallow);
  text-shadow: none;
  font-size: 15px;
  gap: 25px;
}

.categoryWrap a:hover {
  color: var(--main);
  font-size: 15px;
  cursor: pointer;
}

.categoryWrap h3 {
  font-weight: 500;
  margin: 10px 0px;
  font-size: 20px;
  color: var(--shallow);
  transition: all .2s;
}

.categoryWrap h3:hover {
  color: var(--highlight);
}

.categoryWrap h4,
.categoryWrap h5 {
  font-weight: 200;
  font-size: 22px;
  color: var(--shallow);
}

.categoryWrap h4:hover,
.categoryWrap h5:hover {
  color: var(--highlight);
}

.categoryWrap h5 {
  text-indent: 20px;
}

.categoryWrap .shortAboutWrap {
  padding: 0;
}

.categoryWrap img {
  border: 1px solid var(--shallow);
  width: 120px;
  max-height: 75px;
  object-fit: cover;
}

.categoryColumn {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 730px;
}

/* region */

.regionWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.regionWrap h2 {
  padding: 0px;
}

.regionDropdownHeader {
  cursor: pointer;
  background: var(--highlight-dark);
  padding: 10px 25px;
  border-radius: 8px;
  width: 300px;
  height: 30px;
  transition: all .3s;
}

.regionDropdownHeader h1 {
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: all .3s;
}

.regionDropdownHeader:hover h1 {
  font-size: 22px;
}

.regionDropdown {
  flex-direction: column;
  width: inherit;
  position: absolute;
  margin-top: 10px;
}

.regionDropdown a {
  padding: 10px 25px;
  font-size: 25px;
  color: var(--shallow);
  z-index: 99;
  background: var(--main);
  transition: all .3s;
}

.regionDropdown a:hover {
  background: var(--deep);
  color: var(--shallow);
}

.inputRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

#finalPrice {
  font-size: 30px;
  font-weight: 500;
  margin-top: 10px;
}

#usedCouponCode {
  font-size: 25px;
  font-weight: 500;
  margin-top: 10px;
}

.productsButton {
  margin-top: 30px;
  width: 250px;
}

.showProductListButton {
  cursor: pointer;
  transition: all .2s;
}

.showProductListButton:hover {
  color: var(--highlight-brighter);
}

.showProductListButton .mainButton {
  height: 35px;
  width: 98.5%;
}

#macroInputsWrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

#macroInputsWrap .cartProduct {
  display: flex;
  justify-content: space-between;
}

#macroInputsWrap h1 {
  font-size: 25px;
  font-weight: 500;
}

.inputColumn {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 60vh;
}

#editImgLabel {
  width: 150px;
  border-radius: 8px;
}

/* home / fooldal / otthon PAGE*/

.welcomeSection {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 150px;
}

.welcomeSection img {
  width: 100%;
  object-fit: cover;
  position: fixed;
  z-index: -100;
}

.welcomeText {
  z-index: 99;
  padding: 300px 0px 250px 0px;
  color: var(--shallow);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcomeText h1 {
  font-size: 70px;
  font-weight: 700;
  animation: fadeInLeft 1.5s;
}

.welcomeText h3 {
  font-size: 40px;
  font-weight: 500;
  animation: fadeInRight 1.5s;
}

.welcomeText h4 {
  font-size: 25px;
  font-weight: 200;
  font-style: italic;
  animation: moveOver 1.5s;
}

.ctaSection {
  display: grid;
  grid-template-columns: repeat(2, .1fr);
  gap: 20px;
  animation: fadeInSimple 1.5s;
  margin-top: 50px;
}

.ctaSectionThree {
  display: grid;
  grid-template-columns: repeat(3, .1fr);
  gap: 20px;
  animation: fadeInSimple 1.5s;
  margin-top: 50px;
}

.ctaSectionFlex {
  display: flex;
  align-items: center;
  gap: 20px;
  /* margin-top: 10px; */
}

.shortAboutWrap {
  display: flex;
  flex-direction: column;
  background: var(--deep);
  color: var(--shallow);
  padding: 50px 0px;
  align-items: center;
}

.cartProduct {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cartProduct img {
  width: 10%;
}

.cartProduct h1 {
  font-size: 17px;
}

.cartProduct h2 {
  font-size: 25px;
  color: var(--main1);
  transition: all .1s;
  cursor: pointer;
}

.cartProduct h2:hover {
  color: white;
}

.opaquebg {
  background: var(--deep-op);
}

.shortAbout {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 90%;
}

.homeDescription {
  width: 40%;
  animation: fadeInLeft 1s;
}

.homeDescription h2 {
  font-size: 50px;
  border-bottom: 3px solid var(--shallow);
  padding: 0px 0px 10px 0px;
  margin: 0px 0px 50px 0px;
}

.homeDescription p {
  margin-top: 20px;
  font-weight: 300;
  text-align: justify;
}

.homeDescription p:nth-child(1) {
  animation: fadeInLeft .5s;
}

.homeDescription p:nth-child(2) {
  animation: fadeInLeft 1s;
}

.homeDescription p:nth-child(3) {
  animation: fadeInLeft 1.5s;
}

.homeDescription p:nth-child(4) {
  animation: fadeInLeft 2s;
}

.homeDescription p:nth-child(5) {
  animation: fadeInLeft 2.5s;
}

.homeDescriptionLogo {
  width: 40%;
  display: flex;
  justify-content: center;
  transition: all 1s;
  animation: fadeInRight 1s;
}

.homeDescriptionLogo:hover {
  transform: scale(1.2);
}

.homeDescription h3 {
  font-size: 35px;
  width: fit-content;
}

.homeDescription h4 {
  margin: 5px 0px 50px 0px;
  color: var(--shallow);
  font-weight: 400;
  font-size: 20px;
}

.dealign {
  align-items: start;
}

.aboutCta {
  margin: 30px 0px;
  display: flex;
  align-items: center;
}

.aboutCta .material-symbols-outlined {
  color: var(--shallow);
  font-size: 40px;
}

.aboutCta img {
  width: 60px;
  margin-right: 20px;
  transition: all .3s;
}

.aboutCta img:hover {
  width: 70px;
}

.aboutCta div span {
  font-weight: 700;
  font-size: 30px;
  color: var(--shallow);
}

.homeDescription .mainButton span {
  font-weight: 600;
  font-size: 15px;
}

.homeDescription .mainButton:hover>span {
  font-size: 17px;
}

/* service tab */

.serviceWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.serviceWrapper h2 {
  font-size: 50px;
  border-bottom: 3px solid var(--shallow);
  padding: 50px 0px 30px 0px;
}

.serviceWrapper p {
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 30px;
  text-align: justify;
}

.services-container {
  width: 100%;
  margin: 50px 0px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}

.service {
  width: 22.5%;
  background: var(--highlight-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
  cursor: pointer;
  min-height: 500px;
}

.service:hover {
  transform: translateX(-20px) translateY(-20px);
  box-shadow: 20px 20px var(--shallow);
}

.service img {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

.service h3 {
  color: var(--shallow);
  padding: 22px 0px 5px 0px;
  margin-bottom: 10px;
  font-size: 25px;
  font-weight: 900;
  text-transform: uppercase;
  border-bottom: 3px solid var(--deep);
  transition: all 1s;
}

.service-list {
  flex-direction: column;
  justify-content: center;
  display: flex;
  align-items: center;
  text-align: center;
  width: 80%;
}

.service span {
  color: var(--shallow);
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
}

.service p {
  margin-top: 30px;
  font-weight: 800;
  font-size: 20px;
  color: var(--shallow);
  transition: all 1s;
  padding: 3px 12px;
}

.service:hover>.service-list p {
  border: 1px solid var(--shallow);
}

.service:hover>h3 {
  border-bottom: 3px solid var(--shallow);
}

.serviceSwiper {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.serviceSwiper .material-symbols-outlined {
  font-size: 50px;
  cursor: pointer;
  transition: all .3s;
}

.serviceSwiper .material-symbols-outlined:hover {
  font-size: 52px;
  filter: drop-shadow(1px 1px 5px var(--shallow));
  user-select: none;
}


/* details tab */

.detailsWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 75px 0px;
}

.detailsWrap h2 {
  font-size: 40px;
  color: var(--shallow);
  font-weight: 800;
}

.detailsWrap span {
  font-size: 20px;
  color: var(--shallow);
  font-weight: 300;
}

.details {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 50px 0px 0px 0px;
}

.details div {
  text-align: center;
}

.details h3 {
  color: var(--deep);
  font-size: 45px;
}

.details span {
  font-size: 25px;
  font-weight: 600;
}


/* about / rolunk PAGE */
.secondaryWelcome {
  width: 100%;
  display: flex;
}

.secondaryWelcome img {
  width: 100%;
  object-fit: cover;
  position: fixed;
  filter: contrast(.75) grayscale(.4) brightness(.8);
  z-index: -100;
  object-position: 0px -250px;
}

.secWelcomeText {
  z-index: 99;
  padding: 300px 0px 50px 150px;
  color: var(--shallow);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.secWelcomeText h1 {
  font-size: 70px;
  font-weight: 700;
  animation: fadeInLeft 1.5s;
}

.secWelcomeText h3 {
  font-size: 40px;
  font-weight: 300;
  animation: fadeInRight 1.5s;
}

.valuesWrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 50px 0px;
}

.valuesWrap h2 {
  width: 80%;
  font-size: 50px;
  border-bottom: 3px solid var(--highlight);
  padding: 0px 0px 30px 0px;
  color: var(--highlight);
}

.valuesTab {
  width: 80%;
  margin: 40px 0px;
}

.valueRow {
  display: flex;
  justify-content: space-between;
}

.value {
  width: 33%;
  height: 475px;
  background: var(--highlight);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 1s;
}

.value:hover {
  transform: scale(1.02);
}

.value img {
  width: 100%;
}

.value h3 {
  color: var(--main);
  margin: 20px 0px;
  font-size: 30px;
}

.value p {
  color: var(--main);
  width: 80%;
  text-align: justify;
  font-weight: 300;
  font-style: italic;
}

/* services / szolgaltatasok PAGE */
.secondaryWelcome .serviceBg {
  object-position: 0px -80px;
}

.serviceLeft {
  color: var(--shallow);
}

.serviceRight {
  color: var(--shallow);
}

.serviceLeft,
.serviceRight {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0px;
  margin: 0px 0px 60px 0px;
}

.serviceLeft .serviceDescWrap {
  display: flex;
}

.serviceRight .serviceDescWrap {
  display: flex;
  flex-direction: row-reverse;
}

.serviceDescImg {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.serviceDescImg a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.serviceDescImg span {
  color: var(--shallow);
  position: absolute;
  font-weight: 700;
  font-size: 30px;
  transition: all 1s;
  opacity: 0;
}

.serviceDescImg:hover a img,
.serviceDescImg:hover img {
  filter: blur(10px);
}

.serviceDescImg:hover a span,
.serviceDescImg:hover span {
  opacity: 1;
}

.serviceDescWrap {
  width: 100%;
  padding: 40px 0px;
}

.serviceDescWrap img {
  width: 80%;
  display: flex;
  justify-content: center;
  transition: all 1s;
}

.serviceLeft h2,
.serviceRight h2 {
  width: fit-content;
  font-size: 50px;
  padding: 0px 0px 30px 0px;
}

.serviceLeft h2 {
  color: var(--shallow);
  border-bottom: 3px solid var(--shallow);
}

.serviceRight h2 {
  color: var(--main);
  border-bottom: 3px solid var(--main);
}

.serviceDescription {
  width: 40%;
}

.serviceRight h3 {
  font-size: 35px;
  border-bottom: 3px solid var(--shallow);
}

.serviceLeft h3 {
  font-size: 35px;
  border-bottom: 3px solid var(--shallow);
}

.serviceDescription p {
  font-size: 20px;
  margin: 20px 0px;
  text-align: justify;
}

/* products / termekek PAGE */
.secondaryWelcome .productsBg {
  object-position: 0px -80px;
}


/* projects / projektek PAGE */
.secondaryWelcome .projectsBg {
  object-position: 0px -130px;
}

.smallGallery {
  display: grid;
  grid-template-columns: repeat(3, .4fr);
  width: 100%;
  gap: 20px
}

.smallGallery img {
  width: 100%;
  cursor: pointer;
}

.smallGallery img:hover {
  transform: scale(1.1);
}

.miniNavWrap {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.miniNav {
  display: flex;
  justify-content: space-around;
  width: 90%;
  border-radius: 8px;
  border-bottom: 1px solid var(--highlight-dark);
}

.miniNav h3 {
  color: var(--main);
  font-size: 25px;
  margin: 15px 0px;
  transition: all .3s;
  cursor: pointer;
  user-select: none;
}

.miniNav .selectedMininav {
  color: var(--shallow);
}

.miniNav h3:hover {
  color: var(--shallow);
}

.unselectService {
  animation: moveUnder 1s;
}

.selectService {
  animation: moveOver 1s;
}

.projectsWrapper {
  flex-direction: column;
}

/* contact / kapcsolat PAGE */
.secondaryWelcome .contactBg {
  object-position: 0px -80px;
}

.contactForm {
  display: flex;
  flex-direction: column;
  padding: 20px 0px;
}

.contactForm label {
  color: var(--shallow);
  font-size: 25px;
  margin-top: 10px;
}

.contactForm input {
  height: 40px;
  width: 500px;
  font-weight: 600;
  font-size: 17.5px;
  padding-left: 15px;
}

.contactForm .message {
  height: 150px;
  width: 500px;
  font-weight: 600;
  font-size: 15px;
  padding: 15px;
}

/* gallery css */
.modal {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.modal .exit {
  width: 90%;
  display: flex;
  justify-content: end;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
}

#close {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 28px;
  font-weight: bold;
  padding: 5px 13px 5px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .3s;
  right: 0;
}

#close:hover {
  color: var(--deep);
}

#largeGallery {
  display: grid;
  grid-template-columns: repeat(4, 300px);
  gap: 20px;
}

#largeGallery img {
  width: 100%;
  cursor: pointer;
  transition: all .3s;
}

#largeGallery img:hover {
  transform: scale(1.05);
}

/* Carousel */
.slideshow {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.slideshow .slide {
  transition: all .3s;
  display: flex;
  justify-content: center;
}

.slideshow .slide img {
  width: 50vw;
}

.carouselWrap {
  display: flex;
  justify-content: center;
  width: 90%;
}

#prev,
#next {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--shallow);
  font-weight: bold;
  font-size: 60px;
  transition: all 0.6s;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

#prev:hover,
#next:hover {
  color: #777;
}

.slideshow-dots {
  margin-top: 30px;
  display: flex;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 8px;
  transition: all 0.1s;
}

.currentDot {
  background-color: #444;
}

.dot:hover {
  background-color: #444;
}

/* contact */
.contactWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 0px 100px 0px;
  animation: moveOver 1s;

}

.contact {
  display: flex;
  justify-content: space-around;
  width: 70%;
}

.contact a {
  width: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--shallow);
  text-align: center;
}

.contact a img,
.contact a span {
  transition: all .3s;
  width: 100%;
}

.contact a span {
  font-size: 50px;
}

.contact a:hover {
  font-weight: 800;
}

.contact a:hover>img,
.contact a:hover>span {
  transform: scale(1.2);
  filter: drop-shadow(1px 1px 5px var(--shallow));
}

.contact a p {
  position: absolute;
  font-size: 25px;
  margin-top: 100px;
}

.contact img {
  position: relative;
  filter: none;
  z-index: 1;
}

.pageViews {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pageViews img {
  width: 10%;
}

.pageViews span {
  font-size: 30px;
  font-weight: 500;
}

/* partners / partnerek */
.service a {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.service a:hover>.service-list p {
  border: 1px solid var(--shallow);
}

.service a:hover>h3 {
  border-bottom: 3px solid var(--shallow);
}

.fol {
  animation: fadeOutLeft 1s;
}

.for {
  animation: fadeOutRight 1s;
}

.fil {
  animation: fadeInLeft 1s;
}

.fir {
  animation: fadeInRight 1s;
}




/* dash projects */
.projectWindowWrap {
  margin-top: 200px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.projectWindow {
  width: 80%;
}

.category h1 {
  color: var(--shallow);
  width: 100%;
  border-bottom: 1px solid var(--shallow);
}

.categoryGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 50px 0px;
}

.reference {
  background-color: var(--highlight-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  cursor: pointer;
  transition: all .5s;
  border-radius: 8px;
}

.reference img {
  max-width: 150px;
}

.reference h2 {
  color: var(--shallow);
}

.reference:hover {
  transform: scale(1.02);
  filter: drop-shadow(1px 1px 5px var(--highlight));
}

/* crud */
.crudWrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.crudTable {
  width: 85%;
  margin-bottom: 100px;
}

.crudTable h2 {
  margin-bottom: 25px;
}

.crudHeader {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
}

.crudHeader h1 {
  color: var(--shallow);
}


.deleteConfirmation div {
  display: flex;
  flex-direction: column;
  background: var(--highlight-dark);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.deleteConfirmation div h1 {
  color: var(--shallow);
  font-size: 28px;
}

.deleteConfirmation div div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.deleteConfirmation .secondaryButton,
.deleteConfirmation .tertiaryButton {
  padding: 0;
}

.deleteConfirmation .tertiaryButton {
  background: var(--shallow);
}

.emailForm div,
.emailForm2 div {
  display: flex;
  flex-direction: column;
  background: var(--highlight-dark);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.emailForm div h1,
.emailForm2 div h1 {
  color: var(--shallow);
}

.emailForm div div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.emailForm .secondaryButton,
.emailForm .tertiaryButton {
  padding: 0;
}

.emailForm2 .secondaryButton,
.emailForm2 .tertiaryButton {
  padding: 0;
}

.emailForm .tertiaryButton {
  background: var(--shallow);
}

.emailForm2 .tertiaryButton {
  background: var(--shallow);
}

.confirmationTransport div {
  display: flex;
  flex-direction: column;
  background: var(--highlight-dark);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

.confirmationTransport div h1 {
  color: var(--shallow);
}

.confirmationTransport div div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.confirmationTransport .secondaryButton,
.confirmationTransport .tertiaryButton {
  padding: 0;
}

.confirmationTransport .tertiaryButton {
  background: var(--shallow);
}

/* kulcsos forms */

#uploadForm,
#editForm,
.deleteConfirmation,
#uploadFormSingle,
#editFormSingle,
#emailForm,
#emailForm2,
#confirmationTransport {
  background: rgb(0, 0, 0, .5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}

#showMessageForm,
#showReviewForm {
  background: rgb(0, 0, 0, .5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}

#confirmationTransport {
  z-index: 99999999;
}

#uploadForm form,
#editForm form,
#uploadFormSingle form,
#editFormSingle form,
#emailForm form,
#emailForm2 form,
#confirmationTransport form {
  display: flex;
  flex-direction: column;
  background: var(--highlight-dark);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 30px;
  width: 85%;
  margin: 0px;
}

#showMessageForm form,
#showReviewForm form {
  display: flex;
  flex-direction: column;
  background: var(--highlight-dark);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 30px;
  width: 85%;
  margin: 0px;
}

#showMessageForm .reviewData,
#showReviewForm .reviewData {
  margin-bottom: 20px;
}

#uploadForm label,
#editForm label,
#uploadFormSingle label,
#editFormSingle label,
#emailForm label,
#emailForm2 label,
#confirmationTransport label {
  color: var(--shallow);
}

#uploadForm form h2,
#editForm form h2,
#uploadFormSingle h2,
#editFormSingle h2,
#emailForm h2,
#emailForm2 h2,
#confirmationTransport h2 {
  color: var(--shallow);
  padding-bottom: 30px;
  font-weight: 900;
  font-size: 22px;
}

#uploadForm form input,
#editForm form input,
#uploadFormSingle form input,
#editFormSingle form input,
#emailForm form input,
#emailForm2 form input,
#confirmationTransport form input,
textarea {
  margin: 3px 0px;
  color: var(--deep);
  background: var(--shallow);
  font-weight: 400;
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  font-size: 12px;
  max-width: 23%;
}

#emailForm form textarea,
#emailForm2 form textarea {
  margin: 3px 0px;
  color: var(--deep);
  background: var(--shallow);
  font-weight: 600;
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  font-size: 20px;
  width: 100%;
  height: 150px;
}

#emailForm form input,
#emailForm2 form input {
  margin: 3px 0px;
  color: var(--deep);
  background: var(--shallow);
  font-weight: 600;
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  font-size: 20px;
  width: 100%;
  height: 50px;
}

#uploadDataSingle input[type="checkbox"],
#editDataSingle input[type="checkbox"] {
  width: 40px;
}

#uploadDataSingle input[type="checkbox"] .c_visible {
  width: 19%;
}

#uploadDataSingle .radioButtons input[type="number"],
#editDataSingle .radioButtons input[type="number"] {
  width: 25%;
  padding: 5px 10px;
}

#uploadForm input[type="file"],
#editForm input[type="file"],
#uploadFormSingle input[type="file"],
#editFormSingle input[type="file"],
#emailForm input[type="file"],
#emailForm2 input[type="file"] {
  color: var(--deep);
}

.uploadOwnership {
  width: 100%;
  height: 30px;
}

select {
  font-size: 12px;
  font-weight: 500;
  max-width: 23%;
  padding: 10px 20px;
  border-radius: 8px;
}

.status-green,
.status-yellow,
.status-red {
  height: 7px;
  width: 7px;
  border-radius: 8px;
  background: darkgreen;
}

.status-yellow {
  background: orange;
}

.status-red {
  background: red;
}

/* cafe forms */

.uploadForm,
.editForm,
.deleteConfirmation,
.uploadFormSingle,
.editFormSingle {
  background: rgb(0, 0, 0, .5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}

.uploadForm form,
.editForm form,
.uploadFormSingle form,
.editFormSingle form {
  display: flex;
  flex-direction: column;
  background: var(--highlight-dark);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 50px;
  width: 60%;
  max-height: 80vh;
  overflow-y: scroll;
}

.uploadForm label,
.editForm label,
.uploadFormSingle label,
.editFormSingle label {
  color: var(--shallow);
}

.uploadForm form h2,
.editForm form h2,
.uploadFormSingle h2,
.editFormSingle h2 {
  color: var(--shallow);
}

.uploadForm form input,
.editForm form input,
.uploadFormSingle form input,
.editFormSingle form input {
  margin: 3px 0px;
  color: var(--deep);
  background: var(--shallow);
  font-weight: 400;
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  font-size: 12px;
  max-width: 23%;
}

#programForm form input {
  margin: 2px 0px;
}

#programForm,
#uploadForm,
#editForm,
.deleteConfirmation,
#uploadFormSingle,
#editFormSingle,
#confirmationTransport .ctaSection {
  margin-top: 5px;
}

.uploadDataSingle input[type="checkbox"],
.editDataSingle input[type="checkbox"] {
  width: 40px;
}

.uploadDataSingle input[type="checkbox"] .c_visible {
  width: 19%;
}

.uploadDataSingle .radioButtons input[type="number"],
.editDataSingle .radioButtons input[type="number"] {
  width: 10%;
}

.uploadForm input[type="file"],
.editForm input[type="file"],
.uploadFormSingle input[type="file"],
.editFormSingle input[type="file"] {
  color: var(--shallow);
}

.uploadForm select,
.editForm select {
  font-size: 20px;
  font-weight: 600;
}

#editOptions .ctaSectionFlex .secondaryButton.uploadSpecsButton,
#editOptions .ctaSectionFlex .tertiaryButton.editSpecsButton,
#editSpecs .ctaSectionFlex .secondaryButton.uploadSpecsButton,
#editSpecs .ctaSectionFlex .tertiaryButton.editSpecsButton{
  margin-top: 10px;
}

#macroInputsWrapSpecs .macroInputs select,
#macroInputsWrapOptions .macroInputs select {
  font-size: 12px;
  width: 173px;
  font-weight: normal;
  max-width: 100%;
}

#macroInputsWrapSpecs .macroInputs input,
#macroInputsWrapOptions .macroInputs input {
  width: 173px;
  max-width: 100%;
  height: 44.4px;
  margin: 0;
}

.editProgramButton {
  cursor: pointer;
  transition: all .2s;
}

.editProgramButton:hover {
  color: var(--deep);
}

#macroInputsWrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.macroInputs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}


/* kulcsos */

.actionTabWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 15%;
  right: 30px;
  z-index: 20;
}

.actionTab {
  width: 97%;
  display: flex;
  justify-content: start;
  align-items: end;
  flex-direction: column;
}

.actionWindow {
  position: fixed;
  width: auto;
  background: var(--highlight-dark);
  padding: 10px 20px;
  gap: 15px;
  border-radius: 8px;
  margin-right: 75px;
  animation: fadeInRight .3s;
}

.actionShortcuts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#actionTabButton {
  margin: 10px 0px;
}

.actionWindow input {
  border-radius: 10px;
}

.kulcsosRow {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--highlight-dark);
  height: 200px;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: all .3s;
  transform: scale(1);
  position: relative;
  z-index: 15;
}

.kulcsosRow:hover {
  transform: scale(1.05);
  box-shadow: 0px 0pc 10px var(--shallow);
}

.kulcsosRow span img {
  max-width: 80px;
  max-height: 60px;
}

.kulcsosRow span a {
  color: var(--shallow);
  text-decoration: underline;
  transition: all .3s;
}

.kulcsosRow span a:hover {
  color: var(--deep);
}

.kulcsosRow span {
  color: var(--shallow);
  padding: 10px;
  font-weight: 600;
  /* width: 160px; */
  /* text-wrap: wrap; */
  /* word-wrap: break-word; */
}

.kulcsosRowWrap {
  width: 100%;
}

.kulcsosTitle {
  padding: 10px 0px 0px 10px;
  display: flex;
  gap: 15px;
  position: relative;
  z-index: 10;
  width: 100%;
  flex-wrap: wrap;
}

.kulcsosTitle h3 {
  color: var(--shallow);
  font-weight: 600;
  padding: 0px;
  font-size: 20px;
  text-wrap: wrap;
  word-wrap: break-word;
}

.kulcsosTitle h5 {
  color: var(--shallow);
  font-weight: 600;
  padding: 0px;
  font-size: 13px;
  text-wrap: wrap;
  word-wrap: break-word;
  max-width: 230px;
}

.kulcsosTitle .inputColumn {
  height: auto;
}

.kulcsosIcon {
  width: 100%;
  display: flex;
  justify-content: end;
  position: relative;
  z-index: 10;
}

.crudButtons {
  width: 25%;
  display: flex;
  justify-content: space-between;
}

.crudBody h4 {
  color: var(--shallow);
  padding: 50px;
  font-size: 25px;
}

.crudBody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.crudBody form {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  gap: 20px;
  transition: all .3s;
}

.crudBody h2 {
  color: var(--shallow);
  width: 100%;
}

.crudBodyTable {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.kulcsosRow .kulcsosImageSwitch {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.kulcsosImageBg .kulcsosRow .kulcsosImageSwitch {
  display: flex;
  filter: brightness(0.75);
  z-index: 5;
  border-radius: 8px;
  transition: all .3s;
}

.kulcsosImageBg .kulcsosRow:hover .kulcsosImageSwitch {
  filter: brightness(1);
}

.kulcsosCompactView .crudBody form {
  grid-template-columns: repeat(25, 1fr);
}

.kulcsosCompactView .kulcsosRow {
  height: 50px;
}

.kulcsosCompactView .kulcsosRow span {
  display: none;
}

.kulcsosCompactView .kulcsosTitle h5 {
  display: none;
}

.kulcsosCompactView .kulcsosTitle h3 {
  font-size: 20px;
}

.kulcsosCompactView .kulcsosRowWrap {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detailView {
  display: none;
  background: var(--highlight-dark);
  padding: 10px;
  flex-direction: column;
  position: absolute;
  width: 200px;
  margin-top: 40px;
  border-radius: 8px;
}

.detailView h5 {
  color: var(--shallow);
  font-size: 22px;
}

.detailView img {
  width: 100%;
  height: 100%;
}

.kulcsosCompactView .kulcsosRow:hover {
  z-index: 20;
}

.kulcsosCompactView .kulcsosRow:hover .detailView {
  display: flex;
}

.deleteCheckboxWrap {
  height: 20px;
  width: 140px;
  background: var(--highlight-dark);
  padding: 10px;
  transform: translateY(-7px);
  border-radius: 8px;
  display: flex;
  gap: 15px;
}

.deleteCheckboxWrap .material-symbols-outlined {
  font-size: 24px;
  color: var(--shallow);
}

.deleteCheckbox,
.emailCheckbox {
  /* transform: scale(2); */
  height: 20px;
  width: 20px;
}

.kulcsosCompactView .deleteCheckbox,
.kulcsosCompactView .emailCheckbox {
  height: 10px;
  width: 10px;
}

#deleteEnabler {
  margin: 10px 0px;
}

.radioGroup {
  display: flex;
  margin-top: 30px;
  gap: 30px;
}

.uploaderMessageWrap {
  width: 100%;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.uploaderMessage {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--highlight-dark);
  border-radius: 8px;
  gap: 20px;
}

.uploaderMessage h1,
.uploaderMessage span {
  color: var(--shallow);
  font-size: 40px;
  font-weight: 600;
}

.uploaderMessage span {
  animation: loadingRotation 1s infinite;
}

/* cafe row */

.cafeRow,
.cafeRow2,
.cafeRow3,
.cafeRow4 {
  width: 100%;
  display: flex;
}

.cafeRow span {
  color: var(--shallow);
  font-size: 15px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--shallow);
  padding: 5px 10px;
  background: var(--highlight-dark);
}

.cafeRow span img {
  max-width: 80px;
  max-height: 60px;
}

.cafeRow span a {
  color: var(--shallow);
  text-decoration: underline;
  transition: all .3s;
}

.cafeRow span a:hover {
  color: var(--deep);
}

.cafeRow span:nth-child(1) {
  width: 3%;
}

.cafeRow span:nth-child(2) {
  width: 25%;
}

.cafeRow span:nth-child(3) {
  width: 15%;
  overflow-wrap: anywhere;
}

.cafeRow span:nth-child(4) {
  width: 12%;
}

.cafeRow span:nth-child(5) {
  width: 15%;
}

.cafeRow span:nth-child(6) {
  width: 4%;
}

.cafeRow span:nth-child(7) {
  width: 4%;
}

.cafeRow .material-symbols-outlined {
  cursor: pointer;
  transition: all .3s;
  font-size: 20px;
}

.cafeRow .material-symbols-outlined:hover {
  color: var(--deep);
}

.cafeRow2 span {
  color: var(--shallow);
  font-size: 15px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--shallow);
  padding: 5px 10px;
  background: var(--highlight-dark);
}

.cafeRow2 span img {
  max-width: 80px;
  max-height: 60px;
}

.cafeRow2 span a {
  color: var(--shallow);
  text-decoration: underline;
  transition: all .3s;
}

.cafeRow2 span a:hover {
  color: var(--deep);
}

.cafeRow2 span:nth-child(1) {
  width: 3%;
}

.cafeRow2 span:nth-child(2) {
  width: 20%;
}

.cafeRow2 span:nth-child(3) {
  width: 20%;
  overflow-wrap: anywhere;
}

.cafeRow2 span:nth-child(4) {
  width: 6%;
}

.cafeRow2 span:nth-child(5) {
  width: 5%;
}

.cafeRow2 span:nth-child(6) {
  width: 7%;
}

.cafeRow2 span:nth-child(7) {
  width: 9%;
}

.cafeRow2 span:nth-child(8) {
  width: 3%;
  word-break: break-all;
}

.cafeRow2 span:nth-child(9) {
  width: 5%;
  overflow-wrap: anywhere;
}

.cafeRow2 span:nth-child(10) {
  width: 3%;
}

.cafeRow2 span:nth-child(11) {
  width: 3%;
}

.cafeRow2 .material-symbols-outlined {
  cursor: pointer;
  transition: all .3s;
  font-size: 20px;
}

.cafeRow2 .material-symbols-outlined:hover {
  color: var(--deep);
}

.cafeRow3 span {
  color: var(--shallow);
  font-size: 15px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--shallow);
  padding: 5px 10px;
  background: var(--highlight-dark);
}

.cafeRow3 span img {
  max-width: 80px;
  max-height: 60px;
}

.cafeRow3 span a {
  color: var(--shallow);
  text-decoration: underline;
  transition: all .3s;
}

.cafeRow3 span a:hover {
  color: var(--deep);
}

.cafeRow3 span:nth-child(1) {
  width: 1%;
}

.cafeRow3 span:nth-child(2) {
  width: 9%;
}

.cafeRow3 span:nth-child(3) {
  width: 20%;
}

.cafeRow3 span:nth-child(4) {
  width: 9%;
}

.cafeRow3 span:nth-child(5) {
  width: 9%;
  overflow: hidden;
}

.cafeRow3 span:nth-child(6) {
  width: 5%;
}

.cafeRow3 span:nth-child(7) {
  width: 6%;
}

.cafeRow3 span:nth-child(8) {
  width: 6%;
  word-break: break-all;
}

.cafeRow3 span:nth-child(9) {
  width: 10%;
  overflow-wrap: anywhere;
}

.cafeRow3 span:nth-child(10) {
  width: 3%;
}

.cafeRow3 span:nth-child(11) {
  width: 5%;
}

.cafeRow3 .material-symbols-outlined {
  cursor: pointer;
  transition: all .3s;
  font-size: 20px;
}

.cafeRow3 .material-symbols-outlined:hover {
  color: var(--deep);
}

.cafeRow4 span {
  color: var(--shallow);
  font-size: 15px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--shallow);
  padding: 5px 10px;
  background: var(--highlight-dark);
}

.cafeRow4 span img {
  max-width: 80px;
  max-height: 60px;
}

.cafeRow4 span a {
  color: var(--shallow);
  text-decoration: underline;
  transition: all .3s;
}

.cafeRow4 span a:hover {
  color: var(--deep);
}

.cafeRow4 span:nth-child(1) {
  width: 4%;
}

.cafeRow4 span:nth-child(2) {
  width: 40%;
}

.cafeRow4 span:nth-child(3) {
  width: 12%;
}

.cafeRow4 span:nth-child(4) {
  width: 12%;
}

.cafeRow4 span:nth-child(5) {
  width: 12%;
}

.cafeRow4 span:nth-child(6) {
  width: 12%;
}

.cafeRow4 .material-symbols-outlined {
  cursor: pointer;
  transition: all .3s;
  font-size: 20px;
}

.cafeRow4 .material-symbols-outlined:hover {
  color: var(--deep);
}

/* login */
.loginWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.loginBox {
  color: var(--shallow);
  padding: 70px;
  border-radius: 8px;
  background: var(--highlight-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.loginBox form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.loginBox form label {
  color: var(--shallow);
}

.loginBox form input {
  border-radius: 8px;
  border: 0px;
  padding: 10px;
}

/* footer */
footer {
  display: flex;
  background: var(--footer-color);
  width: 100%;
  justify-content: space-around;
  padding: 10px 0px;
}

footer img {
  width: 75px;
  transition: all 1s;
  margin: 0px 30px;
}

footer img:hover {
  transform: scale(1.1);
}

.footerLogo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footerLogo span {
  color: var(--shallow);
  font-weight: 300;
  font-size: 14px
}

.footerLogo a {
  color: var(--shallow);
  font-weight: 600;
  transition: all .3s;
}

.footerLogo a:hover {
  color: var(--main);
}

.footerNav {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

footer .navbar a {
  font-size: 18px;
  font-weight: 400;
  margin: 3px 0px;

}

footer .navbar a:hover {
  font-size: 19px;
}

/* mobile */
.navbar-mobile {
  display: none;
}

#mobileMenuIcon {
  display: none;
}

.backwardsButtonMobile {
  display: none;
}