/* setup */
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script:wght@400;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* 
font-family: "Oleo Script", serif;
font-family: "Open Sans", sans-serif;
*/

:root {
  --main: rgb(21, 21, 21);
  --highlight: rgb(8,113,66);
  --highlight-bright: rgb(4, 221, 123);
  --accent: rgb(91,58,44);
  --accent-bright: rgb(228,194,157);
  --footer-color: black;
  --negative: rgb(175, 27, 27);

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

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

* {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

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

a {
  text-decoration: none;
}

body {
  background: var(--shallow);
  /* background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%); */
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form {
  margin: 0;
}

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

.current {
  display: flex !important;
}

.reserve {
  display: none !important;
}

.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* animations */

@keyframes changeBg {

  0%,
  100% {
    background: url('img/GiRo_Fapikom-1011.jpg');
    background-size: cover;
    background-position: center;
  }

  34% {
    background: url('img/GiRo_Fapikom-1011.jpg');
    background-size: cover;
    background-position: center;
  }

  67% {
    background: url('img/GiRo_Fapikom-1011.jpg');
    background-size: cover;
    background-position: center;
  }
}

@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 slideInRight {
  from {
    transform: translateX(150px);
  }

  to {
    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);
  }
}

@keyframes slide {
  to {
    transform: translateX(calc(-180% - 2000px));
  }
}

@keyframes logMessage {
  0%, 100% {
    opacity: 0;
    transform: translateX(150px);
    display: flex;
  }

  10%, 90% {
    opacity: 1;
    transform: translateX(0px);
    display: flex;
  }
}


.inViewAnimation {
  animation: fadeInLeft 1.5s;
}

/* nav */

.mainNavMenu .quaternaryButton {
  width: 120px;
}

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

.mainNavMenu {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 60%;
}

.mainNavMenu a {
  cursor: pointer;
}

nav {
  height: 100px;
  width: 100%;
  margin-top: 50px;
  position: absolute;
  display: flex;
  justify-content: center;
}

.navWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 80%;
  height: 100%;
  z-index: 15;
  animation: fadeInTop 1.5s;
  /* background: var(--shallow-op); */
  gap: 15px;
  border-radius: 4px;
  padding: 0px 60px;
  /* box-shadow: 0px 8px 7px -5px var(--misty);
  backdrop-filter: blur(5px); */
}

.navbar {
  display: flex;
  background: var(--shallow);
  box-shadow: 0px 2px 5px 1px var(--deep-op);
  padding: 0px 25px;
  gap: 35px;
  height: 47px;
  align-items: center;
  border-radius: 30px;
  border: 2px solid var(--accent);
  width: auto;
}

.navbarSmall{
  display: flex;
  background: var(--shallow);
  box-shadow: 0px 2px 5px 1px var(--deep-op);
  padding: 0px 25px;
  gap: 15px;
  height: 47px;
  align-items: center;
  border-radius: 30px;
  border: 2px solid var(--accent);
  width: auto;
}

.navbar a, .navbarSmall a {
  color: var(--accent);
  transition: all .3s;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.navbar a:hover, .navbar a:hover {
  color: var(--accent);
  text-shadow: none;
}

.navbar .mainButton,
.navbar #languageMenu a {
  text-shadow: none;
}

.navbar .dropMenuTrigger {
  font-weight: 700;
}

.navItems {
  display: flex;
  gap: 50px;
  width: 100%;
  justify-content: space-around;
}

.navIcons {
  display: flex;
  gap: 10px;
}

.navIcons a,
.languageMenuButton {
  color: var(--accent);
  transition: all .3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.navIcons a:hover,
.languageMenuButton:hover {
  color: var(--accent);
}

.languageMenuButton span {
  pointer-events: none;
}

#languageMenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  background: var(--accent);
  padding: 10px;
  justify-content: space-between;
  animation: fadeInTop .5s;
  border-radius: 4px;
  gap: 10px;
  margin-top: 30px;
  right: 138px;
}

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

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

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

.secondaryNav {
  position: fixed;
  z-index: 15;
}

.secondaryNav .navbar {
  background: var(--shallow);
}

.secondaryNav .languageMenuButton,
.secondaryNav .navIcons a {
  color: var(--accent);
}

#serviceMenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 328px;
  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(--main);
  transition: all .3s;
  font-size: 20px;
  margin: 10px 10px;
}

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

.logo {
  height: 100px;
  transition: all .3s;
}

.logo:hover {
  transform: scale(1.1);
  filter: brightness(1.3);
}

/* application form */
.applicationFormWrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 50px;
  padding: 100px 0px;
  margin-top: 200px;
}

.applicationForm{
  background: var(--shallow);
  width: 40%;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 0px;
}

.applicationForm form{
  width: 80%;
}

.applicationForm h3{
  width: 100%;
  font-size: 26px;
  padding-bottom: 20px;
}

.applicationForm input{
  width: 100%;
  border: 1px solid var(--highlight);
  color: var(--highlight);
  border-radius: 30px;
  height: 40px;
  padding-left: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.applicationForm .mainButton{
  color: var(--shallow);
}

.applicationForm label{
  font-weight: 200;
  font-size: 15px;
  margin-bottom: 5px;
}

.applicationFormAuxiliary{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.applicationFormAuxiliary img{
  width: 355px;
  height: 355px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: all .3s;
}

.applicationFormAuxiliary img:hover{
  transform: scale(1.02);
}

.applicationForm span{
  color: var(--highlight);
  font-weight: 300;
}

.applicationForm h1{
  width: 100%;
  font-size: 45px;
}

.applicationForm p{
  margin-top: 20px;
}

/* dropmenu */
.dropMenuTrigger:hover+.categoryDropMenu,
.categoryDropMenu:hover {
  height: 280px;
}

.dropMenuTrigger:hover+.categoryDropMenu .categoryWrap {
  opacity: 1;
}

.categoryDropMenu:hover .categoryWrap {
  opacity: 1;
}

.categoryDropMenu {
  height: 0px;
  overflow: hidden;
  width: 70%;
  background: var(--shallow);
  backdrop-filter: blur(5px);
  margin-top: 75px;
  box-shadow: 0px 5px 10px var(--main);
  position: absolute;
  z-index: 15;
  transition: all .3s;
  display: flex;
  justify-content: center;
  border-radius: 30px;
}

.secondaryNav .categoryDropMenu {
  background: var(--shallow);
}

.secondaryNav .categoryWrap a:hover {
  color: var(--accent);
}

.categoryWrap {
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  opacity: 0;
  transition: all 2s;
  flex: 1;
  align-items: center;
}

.categoryWrap a {
  color: var(--accent);
  text-shadow: none;
  font-size: 15px;
  margin: 0px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  text-align: center;
}

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

.categoryColumn {
  width: 90%;
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.categoryColumn img {
  max-height: 115px;
  border: 2px solid var(--deep);
  border-radius: 10px;
  /* filter: invert(1); */
}

.categoryWrap h3 {
  font-weight: 700;
  margin: 10px 0px;
  font-size: 15px;
  display: flex;
  align-items: center;
  font-family: "Oleo Script", serif;
}

.categoryWrap h4,
.categoryWrap h5 {
  font-weight: 300;
  font-size: 15px;
}

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

.categoryWrap .shortAboutWrap {
  padding: 0;
}

.loadDropdownTrigger h3 {
  font-weight: 700;
  margin: 15px 10px;
  font-size: 18px;
}

.shopFieldWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 97%;
  margin-top: 150px;
}

.shopFieldWrap h2 {
  color: var(--main);
  padding: 20px 30px;
}

#actualCategory {
  height: 97%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.catalogWrap {
  display: flex;
  width: 40%;
  justify-content: space-between;
}

.catalogLink {
  display: flex;
  flex-direction: column;
}

.catalogLink img {
  width: 250px;
}

/* home / fooldal / otthon PAGE*/

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

.welcomeSection {
  width: 100%;
  /* display: flex; */
  z-index: 10;
  position: relative;
  justify-content: space-around;
  align-items: center;
}

.imageShowcase {
  background: url('img/GiRo_Fapikom-1011.jpg');
  background-size: 100% 120%;
  background-position: center;
  animation: changeBg 30s infinite;
  animation-delay: 5s;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  filter: brightness(0.85) grayscale(.1);
}

.imageShowcase img {
  width: 100%;
  object-fit: contain;
  transition: all 1s;
  filter: drop-shadow(10px 10px 20px var(--deep));
  animation: fadeInSimple 2s;
}

.welcomeText {
  z-index: 5;
  color: var(--main);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.welcomeText h1 {
  font-size: 41px;
  font-weight: 800;
  animation: fadeInRight 1.5s;
  color: var(--shallow);
  font-family: "Oleo Script", sans-serif;
  align-self: center;
}

.welcomeText h3 {
  font-size: 24px;
  font-weight: 400;
  animation: fadeInRight 1.5s;
  color: var(--shallow);
  align-self: center;
}

.welcomeText h4 {
  font-size: 32px;
  font-weight: 200;
  padding: 10px 0px 20px 0px;
  animation: moveOver 1.5s;
  color: var(--shallow);
}

.welcomeText h5 {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 0px;
  animation: fadeInRight 1.5s;
  color: var(--shallow);
}

.welcomeText img {
  width: 300px;
  animation: moveOver 1.5s;
  padding: 30px 0px;
}

.welcomeText .ctaSectionFlex div,
.welcomeText .ctaSectionFlex a {
  padding: 0px 10px;
}

.welcomeText .ctaSectionFlex {
  margin-top: 50px;
}

.welcomeSide {
  height: 100%;
  width: 30%;
  animation: fadeInTop 1.5s;
}

.welcomeImg {
  width: 100%;
  object-fit: cover;
  transition: all .3s;
  cursor: pointer;
  border-radius: 4px;
}

.welcomeImg:hover {
  transform: scale(1.05);
  filter: drop-shadow(1px 4px 15px var(--highlight));
}

.welcomeHeadlines {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 100px;
}

.welcomeHeadlineBox {
  width: 200px;
  height: 130px;
  background: var(--shallow-op);
  box-shadow: 0px 8px 7px -5px var(--misty);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 50px;
  border-radius: 4px;
  gap: 10px;
}

.welcomeHeadlineBox h3 {
  font-size: 30px;
  color: var(--shallow);
  font-family: "Oleo Script", serif;
}

.welcomeHeadlineBox p {
  font-size: 16px;
  color: var(--shallow);
  text-align: center;
  font-weight: 200;
}

.ctaSection {
  display: grid;
  grid-template-columns: repeat(2, .2fr);
  gap: 20px;
  animation: moveOver 1.5s;
  margin-top: 20px;
  align-items: center;
}

.ctaSectionFlex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  animation: moveOver 1.5s;
  align-self: start;
}

.ctaSectionFlexProduct {
  display: flex;
  align-items: center;
}

.ctaSectionFlexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.ctaSectionSolo {
  width: 100%;
  display: flex;
  justify-content: start;
  margin: 30px 0px;
}

.ctaSectionSoloCenter {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 30px 0px;
}

.shortAboutWrap {
  display: flex;
  flex-direction: column;
  color: white;
  padding: 50px 0px;
  align-items: center;
  background: url('img/whitebg.png');
  background-size: cover;
  /* background-position: center; */
}

.shortAboutWrapFavourites {
  display: flex;
  flex-direction: column;
  color: white;
  /* padding: 50px 0px; */
  align-items: center;
}

.bgAboutWrap {
  animation: changeBg 30s infinite;
  padding: 0px;
}

.bgAboutWrap .shortAbout {
  backdrop-filter: brightness(.65);
}

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

.shortAbout .shopField {
  margin-bottom: 50px;
}

.homeDescription {
  width: 100%;
  animation: fadeInLeft 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.homeDescription h2 {
  font-size: 40px;
  color: var(--shallow);
  font-family: "Oleo Script", serif;
  padding: 0px 0px 10px 0px;
  text-align: center;
}

.homeDescription p {
  color: var(--shallow);
  font-size: 20px;
  margin-top: 20px;
  font-weight: 400;
  text-align: justify;
  width: 60%;
  text-align: center;
}

.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: end;
  transition: all 1s;
  animation: fadeInRight 1s;
  cursor: pointer;
}

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

.homeDescriptionLogo img {
  width: 500px;
  height: 450px;
  object-fit: cover;
  border-radius: 4px;
}

.homeDescription h3 {
  color: var(--highlight);
  font-size: 35px;
  width: fit-content;
}

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

.homeDescriptionContact {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 50px;
}

.homeDescriptionContact a {
  background: var(--main);
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all .3s;
}

.homeDescriptionContact a:hover {
  transform: scale(1.1);
  filter: brightness(1.3);
}

.homeDescriptionContact a img {
  width: 75%;
}

.homeDescriptionContact a span {
  color: var(--shallow);
  font-size: 65px;
}

.dealign {
  align-items: start !important;
}

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

.aboutCta .material-symbols-outlined {
  color: var(--main);
  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(--main);
}

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

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

.visitorShowcase {
  background: url("./img/toilets.jpg");
}

.partnerShowcaseWrap {
  padding: 0px;
}

.partnersShowcase {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

.partnerWrapper {
  background-size: cover;
  background-position: 60% 40%;
  width: 100%;
}

.tabShowcase {
  background-color: var(--main);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.placesOfInterestWrap {
  display: flex;
  width: 100%;
  justify-content: end;
}

.placePhoto {
  z-index: 1;
  position: absolute;
  height: 100vh;
  max-width: 100%;
  transition: all .4s;
  object-fit: cover;
}

.tabShowcase .placeTitle {
  z-index: 10;
  font-size: 40px;
  color: var(--main);
  font-weight: 800;
  filter: drop-shadow(3px 3px 3px black);
  position: absolute;
  padding: 50px 0px;
}

.tabShowcase .placeInfo {
  position: relative;
  z-index: 10;
  color: var(--main);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 80%;
}

.tabShowcase .placeInfo {
  font-size: 32px;
}

.tabShowcase .placeInfo span {
  font-size: 28px;
}

.tabShowcase .placeInfo h1,
.tabShowcase .placeInfo span {
  transition: all .4s;
}

.tabShowcase .placesOfInterest {
  height: 100vh;
  width: 45%;
  background: linear-gradient(270deg, rgba(38, 33, 30, 1) 90%, rgba(255, 255, 255, 0) 100%);
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: end;
  padding-right: 100px;
  transition: all 1s;
}

.placeControls {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 12;
  height: 100%;
  align-items: center;
}

.placeControls span {
  font-size: 50px;
  color: var(--main);
  filter: drop-shadow(3px 3px 3px black);
  font-weight: 800;
  padding: 0px 50px;
  cursor: pointer;
  transition: all .3s;
}

.placeControls span:hover {
  color: var(--darken);
}

.logMessage {
  position: fixed;
  padding: 10px;
  background: var(--shallow);
  border: 1px solid var(--highlight);
  border-radius: 4px;
  color: var(--highlight);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  animation: logMessage 10s;
  top: 20%;
  right: 50px;
  z-index: 100;
}

/* 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(--highlight);
  color: var(--highlight);
}

.profileData .serviceWrapper {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-top: 20px;
}

.profileData .serviceWrapper h2 {
  font-size: 25px;
  border: none;
}

.serviceWrapper h4 {
  font-size: 40px;
  color: var(--highlight);
  font-family: "Oleo Script", serif;
  ;
}

.serviceWrapper p {
  width: 70%;
  font-size: 20px;
  text-align: center;
  color: var(--accent);
  font-weight: 400;
}

.services-containerWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.services-containerWrapper .material-symbols-outlined {
  color: var(--highlight);
  font-size: 60px;
  cursor: pointer;
  transition: all .3s;
  user-select: none;
}

.services-containerWrapper .material-symbols-outlined:hover {
  color: black;
}

.cartButton .material-symbols-outlined {
  font-size: 24px;
  color: white;
}

.services-container {
  width: 1400px;
  margin: 50px 0px;
  display: flex;
  overflow: hidden;
  /* grid-template-columns: repeat(4, 1fr); */
  text-align: center;
  align-items: stretch;
  gap: 20px;
  cursor: grab;
}

.services-container-partners {
  width: 100%;
  margin: 50px 0px;
  display: flex;
  overflow: hidden;
  text-align: center;
  align-items: center;
  gap: 100px;
  flex-shrink: 0;
}

.partners-list {
  display: flex;
  gap: 2rem;
  width: 100%;
  overflow: hidden;
}

.partners-list .service {
  padding: 20px 0px;
  width: auto;
  height: auto;
  background: transparent;
  transition: all .3s;
}

.partners-list .service:hover {
  transform: scale(1.1);
  box-shadow: none;
}

.partners-list .service a {
  transition: all .3s;
}

.services-container-partners a {
  animation: slide 80s linear infinite;
  min-width: 240px;
}

.services-container-partners a img {
  object-fit: contain;
}

.services-duality {
  display: flex;
  width: 100%;
  margin: 30px 0px;
}

.serviceOne,
.serviceTwo {
  width: 50%;
  height: 350px;
  cursor: pointer;
  transition: all .3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.serviceOne img,
.serviceTwo img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.serviceOne {
  background: var(--main);
}

.serviceOne:hover {
  transform: scale(.98);
  box-shadow: inset 0px 0px 30px var(--main);
}

.serviceTwo:hover {
  transform: scale(.98);
  box-shadow: inset 0px 0px 30px var(--main);
}

.serviceOne h1,
.serviceOne p {
  color: var(--main);
}

.serviceTwo h1,
.serviceTwo p {
  color: var(--main);
}

.service {
  background: var(--shallow);
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  transition: all 0.3s;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  border-radius: 30px;
  width: 100%;
}

.secService{
  background: var(--shallow);
  border: 3px solid var(--accent);
}

.service .serviceInfoWrapper {
  position: absolute;
}

.service:hover {
  transform: scale(1.05);
  /* filter: drop-shadow(0px 0px 40px var(--accent)); */
}

.service img {
  object-fit: cover;
  width: 100%;
  height: 250px;
  background: none;
  border-radius: 30px;
  border-bottom: 2px solid var(--accent);
}

.service h3 {
  color: var(--accent);
  /* padding: 5px 0px 20px 0px; */
  font-size: 18px;
  width: 90%;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 1s;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 80px;
  font-family: "Oleo Script", serif;
}

.service-list {
  flex-direction: column;
  justify-content: center;
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 0px;
  transition: all .3s;
  overflow: hidden;
  position: absolute;
}

.service:hover .service-list {
  height: 200px;
  overflow: visible;
  background: var(--main);
  z-index: 15;
}

.service span {
  color: var(--main);
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  max-height: 100px;
  overflow: hidden;
}

.service p {
  font-weight: 300;
  font-size: 15px;
  color: var(--deep);
  transition: all 1s;
  padding: 0px;
  height: 100px;
  text-align: left;
  width: 90%;
  overflow: hidden;
  text-align: justify;
}

.service:hover>.service-list p {
  border-bottom: 1px solid var(--highlight);
  border-radius: 4px;
}

.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(--main));
  user-select: none;
}

.homeDescriptionWrap {
  width: 80%;
  display: flex;
  flex-direction: column;
  padding: 100px 0px;
}

/* details tab */

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

.detailsWrap h2 {
  font-size: 40px;
  color: white;
  font-weight: 800;
  filter: drop-shadow(3px 3px 3px black);
}

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

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

.details div {
  text-align: center;
}

.details img {
  height: 70px;
}

.details h3 {
  font-size: 45px;
  color: var(--highlight);
  font-weight: 800;
  font-family: "Oleo Script", serif;
}

.details span {
  font-size: 25px;
  color: var(--accent);
  font-weight: 200;
}


/* about / rolunk PAGE */
.secondaryWelcome {
  width: 100%;
  display: flex;
  background: var(--shallow);
}

.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: 10;
  padding: 180px 0px 0px 130px;
  color: var(--main);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.secWelcomeText h1 {
  font-size: 50px;
  font-weight: 700;
  animation: fadeInLeft 1.5s;
  color: var(--main);
}

.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: 90%;
  font-size: 50px;
  border-bottom: 3px solid var(--highlight);
  padding: 0px 0px 30px 0px;
  color: var(--highlight);
  filter: drop-shadow(3px 3px 3px black);
}

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

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

.value {
  width: 33%;
  height: 475px;
  background: var(--main);
  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(--highlight);
  margin: 20px 0px;
  font-size: 30px;
}

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

.aboutPageTop {
  padding-top: 100px;
}

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

.serviceLeft {
  color: var(--main);
  align-items: start;
}

.serviceRight {
  color: var(--main);
  align-items: end;
  flex-direction: row-reverse;
  justify-content: end;
}

.serviceLeft,
.serviceRight {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

.serviceLeft img,
.serviceLeft img {
  width: 100%;
}

.serviceLeft .serviceDescWrap {
  display: flex;
  width: 80%;
  justify-content: space-between;
}

.serviceRight .serviceDescWrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 80%;
}

.serviceDescImg {
  width: 40%;
  height: 350px;
  display: flex;
  justify-content: end;
  align-items: center;
  cursor: pointer;
}

.serviceDescImg img {
  width: 100%;
  height: 100%;
  transition: all .3s;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  transition: all 1s;
}

.serviceDescImg img:hover {
  transform: scale(1.02);
}

.serviceDescImg a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  object-fit: cover;
}

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

.serviceDescImgGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.serviceDescImgGrid img {
  /* height: 400px;  */
  height: 200px;
}

.serviceDescWrap {
  padding: 100px 0px;
  display: flex;
  grid-template-columns: repeat(4, 300px);
  gap: 20px;
  border-radius: 4px;
}

.categTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}

.categTitle h4{
  font-size: 24px;
}

.categInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  border-left: 1px solid var(--shallow);
  pointer-events: none;
}

.categInfo .material-symbols-outlined {
  color: var(--highlight);
  transition: all 1s;
  font-size: 30px;
}

.descWrap .categInfo .material-symbols-outlined {
  color: var(--deep);
  border: 1px solid var(--deep);
}

.categInteractive {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 80px;
}

.dualImage {
  justify-content: space-around;
}

.dualImage img {
  width: 40%;
}

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

.calendarWrap p {
  padding-top: 50px;
}

.serviceLeft h2 {
  color: white;
  border-bottom: 3px solid white;
}

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

.serviceDescription {
  width: 40%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.serviceDescription p {
  margin-top: 20px;
  color: var(--highlight);
  font-size: 14px;
  font-weight: 400;
}

.serviceLeft .serviceDescription p {
  text-align: start;
}

.serviceRight h3,
.serviceRight h5 {
  font-size: 35px;
  color: var(--highlight);
  font-family: "Oleo Script", serif;
  font-weight: 700;
  text-align: start;
}

.serviceLeft h3,
.serviceLeft h5 {
  font-size: 35px;
  color: var(--highlight);
  font-family: "Oleo Script", serif;
  font-weight: 700;
  text-align: end;
}

.serviceRight h5,
.serviceLeft h5 {
  font-size: 20px;
}

.serviceLeft .serviceDescription {
  justify-content: end;
}

.serviceRight .serviceDescription {
  justify-content: start;
}

.serviceDescWrapSmall {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 4px;
  background: transparent;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}

.serviceDescWrapSmall img {
  height: 160px;
  object-fit: contain;
}

.serviceDescWrapSmall h3 {
  font-size: 25px;
}

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

.descWrap p {
  color: var(--highlight);
}

.serviceDescWrapSmall:hover {
  filter: brightness(120%);
}

.serviceDescWrapSmall:hover .categInteractive h5 {
  display: flex;
  animation: fadeInRight 1s;
}

.descWrap:hover .categInteractive h5 {
  color: var(--highlight);
}

.serviceDescWrapSmall:hover .categInteractive .material-symbols-outlined {
  transform: scale(1.2);
}

.descWrap:hover .categInteractive .material-symbols-outlined {
  color: var(--highlight);
  background: var(--deep);
}

/* category page */
.categoryPage {
  display: flex;
  width: 100%;
  background: var(--shallow);
  min-height: 100vh;
}

.categoryRoster {
  border-right: 3px solid var(--main);
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-bottom: 50px;
  padding-left: 30px;
  padding-top: 10px;
}

.categoryRoster h3 {
  font-weight: 700;
  margin: 10px 0px;
  transition: all .3s;
}

.categoryRoster h4 {
  transition: all .3s;
  font-weight: 500;
  padding-left: 5px;
}

.categoryRoster h5 {
  transition: all .3s;
  font-weight: 300;
  padding-left: 20px;
  font-size: 17px;
}

.categoryRoster h3:hover,
.categoryRoster h4:hover,
.categoryRoster h5:hover {
  transform: scale(1.02);
}

.categoryRoster a {
  color: var(--main);
  transition: all .2s;
}

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

.subCatOpener {
  color: var(--main);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}

.subCatOpener:hover {
  color: var(--highlight)
}

.subCatOpener span {
  transition: all .5s;
}

.subcategoryBox {
  overflow: hidden;
  transition: all 1s;
  height: auto;
}

.shopField {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  justify-items: center;
}

.indexShopFieldWrap {
  width: 100%;
}

.indexShopFieldWrap .shopField {
  width: 100%;
  display: flex;
  justify-content: center;
}

.notFound {
  color: var(--main);
  padding: 50px;
}

.productBox {
  background: var(--shallow);
  /* padding: 20px 10px; */
  border: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .3s;
  filter: drop-shadow(1px 1px 5px var(--footer-color-light));
  border-radius: 30px;
  width: 100%;
}

.productBox img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  border-radius: 30px 30px 0px 0px;
}

.productBox h3 {
  color: var(--shallow);
  text-align: center;
  border-bottom: none;
}

.productBox h4 {
  color: var(--highlight);
  font-size: 27px;
}

.productBox:hover {
  filter: drop-shadow(1px 1px 10px var(--main));
  transform: scale(1.02);
}

.productBox .mainButton {
  bottom: 0;
  width: 160px;
  height: 44px;
}

.productBox .productButtons {
  margin: 0px 20px 20px 20px;
  gap: 20px;
}

.productField {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  gap: 40px;
  padding-top: 50px;
}

.productFieldFavourites {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  gap: 80px;
  padding-top: 50px;
}

.miniProductField {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: start;
  gap: 80px;
  margin-top: 30px;
}

.miniProduct {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.miniProductImgWrap {
  width: 120px;
  height: 120px;
  background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
  border-radius: 4px;
}

.miniProduct img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  transition: all .5s;
}

.miniProduct h3 {
  color: var(--shallow);
  transition: all .5s;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
}

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

.miniProduct:hover img {
  transform: scale(1.02);
  filter: brightness(110%);
}

.productTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--shallow);
  pointer-events: none;
  border-radius: 30px;
}

.productInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  pointer-events: none;
  background-color: var(--shallow);
  border-radius: 0px 0px 30px 30px;
}

.productInfoBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  width: 100%;
}

.productPageInfo {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  width: 40%;
}

.productPageInfoBlock {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
}

.productPageInfoBlock h2 {
  margin: 20px 0px;
  color: var(--shallow);
}

.productPageInfoBlock2 {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  gap: 15px;
}

.productPageInfoBlock2 h5 {
  font-size: 30px;
  font-weight: 800;
  color: var(--highlight);
}

.productPageInfoBlock2 h6 {
  font-size: 20px;
  font-weight: 400;
  color: var(--highlight);
}

.productPageInfoBlock2 .oldPrice {
  font-size: 18px;
  font-weight: 500;
  color: var(--misty-solid);
  text-decoration: line-through;
}

.favoriteIcon {
  color: var(--highlight);
  font-variation-settings: 'fill' 1;
}

.addToCart {
  padding: 0px 20px;
}

.productPageInfoBlock .material-symbols-outlined {
  color: var(--highlight);
  padding-left: 10px;
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.productInfo .material-symbols-outlined {
  color: var(--shallow);
  transition: all 1s;
  font-size: 30px;
}

.productInfo h3 {
  color: var(--accent);
  /* padding: 15px 0px; */
  font-family: "Oleo Script", serif;
  font-size: 20px;
  width: 100%;
  text-align: center;
  padding: 20px 0px;
}

.productInfo .currentPrice {
  color: var(--accent);
  /* padding: 15px 0px; */
  font-family: "Oleo Script", serif;
  font-size: 20px;
  width: 100%;
  text-align: center;
  padding: 0px;
}

.productInfo .oldPrice {
  color: var(--misty-solid);
  padding-top: 15px;
  padding-bottom: 0px;
  font-family: "Oleo Script", serif;
  font-size: 18px;
  width: 100%;
  text-align: left;
  text-decoration: line-through;
}

.productInfo p {
  color: var(--accent);
  text-align: justify;
  width: 80%;
  font-size: 14px;
  height: 73px;
  overflow: hidden;
  padding: 10px;
}

.productPageInfo h3 {
  color: var(--accent);
  padding: 15px 0px;
  font-family: "Oleo Script", serif;
  font-size: 24px;
}

.productPageInfo p {
  color: var(--accent);
  text-align: justify;
  width: 100%;
  font-size: 14px;
}

/* product page */
.secWelcomeText a {
  color: var(--highlight);
  transition: all .2s;
  display: flex;
  gap: 10px;
  font-weight: 600;
}

.secWelcomeText h5 {
  color: var(--accent);
  display: flex;
  gap: 10px;
  font-weight: 300;
}

.secWelcomeText a:hover {
  color: var(--highlight-bright)
}

.productWrap {
  display: flex;
  background: var(--shallow);
  background-position: center;
  background-size: cover;
  padding: 80px 0px;
  margin: 30px 0px;
  justify-content: center;
  /* box-shadow: inset 0px 0px 22px 20px var(--deep); */
}

.productTab {
  width: 50%;
  display: flex;
  justify-content: space-between;
}

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

.productImg,
.productPageImg {
  width: auto;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  width: 80%;
  flex-direction: row-reverse;
}

.productExtraImageRow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width: 90%;
  cursor: pointer;
  padding: 8px;
}

.productExtraImageRow img {
  object-fit: contain;
  height: 100px;
  width: 100%;
  cursor: pointer;
  transition: all .3s;
  background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
  border-radius: 4px;
}

.productExtraImageRow img:hover {
  transform: scale(1.02);
}

.productImg img,
.productPageImg img {
  object-fit: cover;
  height: 325px;
  /* width: 85%; */
  cursor: pointer;
  transition: all .3s;
  background: transparent;
  border-radius: 4px;
  text-align: center;
  filter: drop-shadow(13px 16px 70px var(--shallow));
  border-radius: 30px;
  border: 2px solid var(--accent);
}

.productImg img:hover,
.productPageImg img:hover {
  transform: scale(1.05);
}

.productPageSmallImg {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 45px;
  width: 10%;
}

.productPageSmallImg img {
  width: 100%;
  height: 25%;
  max-height: 110px;
}

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

.productOption {
  padding: 10px 10px;
  border: 2px solid var(--highlight);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all .3s;
  color: var(--highlight);
}

.productOption:hover {
  background: var(--main);
  color: var(--shallow);
}

.selectedOption {
  background: var(--main);
  color: var(--shallow);
}

.documentsWrap {
  width: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100px;
}

.documentsWrap a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
  width: 200px;
  height: 200px;
  border-radius: 4px;
  transition: all .3s;
}

.documentsWrap a h3 {
  color: var(--shallow);
}

.documentsWrap a:hover {
  filter: brightness(1.2);
  transform: scale(1.02);
}

.documentsWrap h2 {
  width: 80%;
  color: var(--main);
  font-size: 30px;
  padding-bottom: 50px;
}

.documentsWrap .material-symbols-outlined {
  color: var(--shallow);
  padding: 5px;
}

.documentsRow {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.secondaryWelcome .productsBg {
  object-position: 0px -80px;
}


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

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

.smallGallery img {
  width: 350px;
  height: 200px;
  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: 98%;
  border-radius: 4px;
  border-bottom: 1px solid var(--main);
  background: var(--shallow);
}

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

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

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

.unselectService {
  animation: moveUnder 1s;
}

.selectService {
  animation: moveOver 1s;
}

.projectsWrapper {
  flex-direction: column;
}
/* 
#tertiaryBackground{
  background: url(./img/productbg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#tertiaryBackground .secondaryWelcome{
  background: transparent;
} */

.projectsGridWrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 200px 0px 50px 0px;
}

.projectsGridWrap h2 {
  font-size: 40px;
  color: var(--highlight);
  font-family: "Oleo Script", serif;
  user-select: none;
}

.projectsGridWrap p {
  width: 70%;
  font-size: 22px;
  text-align: center;
  color: var(--accent);
}

.secondaryBackground .projectsGridWrap h2 {
  color: var(--highlight-dark);
}

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

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

.contactForm label {
  color: var(--main);
  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;
}

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

.contactCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 400px;
  width: 300px;
  justify-content: center;
  gap: 10px;
  transition: all .3s;
  background: var(--main);
  border-radius: 4px;
}

.contactCard:hover {
  box-shadow: inset 0px 5px 15px var(--shallow);
  transform: scale(1.02);
}

.contactCard span {
  font-size: 25px;
  padding: 10px;
  color: var(--shallow);
}

.contactCard .openInNew {
  font-size: 20px;
  background: var(--main);
  border-radius: 4px;
  padding: 5px;
  transition: all .3s;
}

.contactCard .openInNew:hover {
  background: var(--highlight);
}

.contactCard h1 {
  color: var(--shallow);
  font-weight: 600;
  font-size: 28px;
  font-family: "Oleo Script", serif;
  padding: 0px 15px 5px 15px;
  border-bottom: 2px solid var(--shallow);
}

.contactCard h2 {
  font-size: 22px;
  font-weight: 400;
  color: var(--shallow);
}

.contactCard a {
  color: var(--shallow);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* gallery css */
.modal {
  position: fixed;
  z-index: 15;
  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%;
}

#modalOffer {
  position: relative;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.offerWrap {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 50px;
  gap: 10px;
  border-radius: 4px;
  background: var(--main);
}

.offerWrap input,
.offerWrap textarea,
.offerWrap select {
  width: 100%;
  padding: 10px 15px;
  border-radius: 4px;
  border: none;
}

.submitButton {
  cursor: pointer;
  background: transparent;
  border: 3px solid var(--shallow) !important;
  color: white;
  border: none;
  height: 50px;
  font-size: 25px;
  transition: all .3s;
  padding: 0px !important;
}

.submitButton:hover {
  background: var(--deep);
  transform: scale(1.05);
}

.offerWrap label {
  color: var(--highlight);
}

.offerWrap textarea {
  width: 100%;
  min-height: 50px;
  resize: vertical;
}

.offerWrap h1 {
  color: var(--highlight);
  font-size: 30px;
  transition: all .3s;
  font-family: "Oleo Script", serif;
}

.offerWrap span {
  color: var(--main);
  width: 100%;
  display: flex;
  justify-content: space-between;
  transition: all .2s;
  cursor: pointer;
  font-weight: 800;
}

.offerWrap span:hover {
  color: black;
}

.offerWrap .mainButton {
  width: 100%;
}

.offerWrap .mainButton span {
  justify-content: center;
}

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

#close:hover {
  color: black;
}

.largeGallery {
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 175px;
}

.largeGallery img {
  width: 100%;
  cursor: pointer;
  transition: all .3s;
  height: 100px;
  border: 1px solid var(--footer-color-light);
}

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

.extraProductsWrap {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 100px;
  align-items: center;
}

.extraProductsWrap h2 {
  color: var(--highlight);
  font-size: 30px;
}

.extraProductsWrap h4 {
  color: var(--highlight);
  font-size: 35px;
  padding: 60px 0px;
}

.extraProductsWrap h5 {
  color: var(--accent);
  font-size: 20px;
}

.extraProducts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 80%;
  gap: 20px;
  padding-bottom: 100px;
}

.extraProduct {
  display: flex;
  transition: all .3s;
  gap: 15px;
  max-height: 115px;
  overflow: hidden;
  background: transparent;
  border-radius: 4px;
  align-items: center;
  border: 2px solid var(--accent);
  padding: 25px;
  border-radius: 30px;
}

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

.extraProduct div {
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
}

.extraProduct img {
  height: 80px;
}

.extraProduct h3 {
  color: var(--accent);
  font-size: 13px;
  font-weight: 400;
}

.extraProduct p {
  color: var(--accent);
  font-weight: 600;
}

.extraProduct .oldPrice{
  color: var(--misty-solid);
  padding-top: 10px;
  font-size: 15px;
  text-decoration: line-through;
}

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

.commentSectionWrap h4 {
  color: var(--highlight);
  font-size: 35px;
  padding: 40px 0px;
}

.commentRating {
  width: 80%;
  display: flex;
  margin: 50px 0px;
  gap: 50px;
}

.commentRatingMain {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.commentSection {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.commentSection form {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
}

.commentSection form textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 500px;
  height: 200px;
  background: var(--shallow);
  border-radius: 4px;
  border: 2px solid var(--highlight);
  color: var(--highlight);
  font-weight: 400;
  padding: 10px;
}

.commentSection form h5 {
  font-size: 25px;
  color: var(--shallow);
  font-weight: 700;
}

.commentSectionTab {
  display: flex;
  flex-direction: column;
  width: 50%;
}

#reviewTab {
  display: flex;
  flex-direction: column;
}

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

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

.commentSectionPages span {
  color: var(--shallow);
  font-size: 18px;
  transition: all .3s;
  cursor: pointer;
}

.commentSectionPages span:hover {
  color: var(--highlight);
  text-decoration: underline;
}

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

.commentRatingNumber h5 {
  color: var(--accent);
  font-weight: 700;
  font-size: 27px;
  border: 3px solid var(--highlight);
  border-radius: 50%;
  padding: 25px 20px;
}

.commentRatingNumber span {
  color: var(--accent);
  font-size: 27px;
}

.commentRatingNumber h6 {
  color: var(--shallow);
  font-size: 14px;
}

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

.commentRatingGraphNode {
  display: flex;
  color: var(--accent);
  width: 100%;
  gap: 15px;
  justify-content: start;
  align-items: center;
}

.commentRatingGraphNode span {
  color: var(--accent);
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.commentRatingStarsDetails {
  display: flex;
}

.commentRatingStarsDetails p {
  color: var(--accent);
  font-size: 22px;
  font-weight: 700;
  margin-left: 20px;
}

.commentRatingGraphNode p {
  text-align: center;
  font-size: x-large;
  width: 20px;
}

.ratingLine {
  width: 50%;
  background: var(--shallow);
  height: 5px;
  border-radius: 4px;
}

.clickableRating {
  color: var(--highlight);
  transition: all .3s;
  cursor: pointer;
}

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

.review {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 30px 0px;
  padding: 20px 0px;
  gap: 20px;
  border-bottom: 1px solid var(--accent);
}

.review p {
  font-weight: 400;
  color: var(--accent);
  font-size: 22px;
}

.review span {
  font-weight: 200;
  color: var(--accent);
  font-size: 30px;
}

.reviewJoint {
  display: flex;
  gap: 20px;
}

.reviewJoint h6 {
  font-weight: 600;
  color: var(--accent);
  font-size: 20px;
}

.reviewJoint span {
  color: var(--accent);
  font-size: 25px;
}

.filledIcon {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.tableWrap {
  width: 87%;
  display: flex;
}

.tableWrap table {
  width: 55%;
  background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
  border-radius: 4px;
  padding: 40px;
}

.tableWrap tr {
  height: 40px;
}

.tableWrap th {
  display: flex;
}

.tableWrap td {
  font-size: 18px;
  color: var(--shallow);
}

/* searchbar / search bar */
#searchSystem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 110px;
  width: 42.5%;
  left: 30%;
  animation: fadeInTop .3s;
}

#searchBarWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--shallow);
  padding: 10px;
  width: 100%;
  border-radius: 30px;
}

.resultsIn {
  border-radius: 30px 30px 0px 0px !important;
}

#searchBar {
  border: none;
  padding: 20px;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
}

#searchBar::placeholder {
  color: var(--accent);
}

#searchBar:focus-visible {
  border: none;
  outline: none;
}

#searchbarClose {
  cursor: pointer;
  transition: all .3s;
  color: var(--accent);
}

#searchbarClose:hover {
  font-weight: 800;
}

#searchbarResults {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  background: var(--shallow);
  max-height: 50vh;
  overflow-y: scroll;
  border-radius: 0px 0px 10px 30px;
}

#searchbarResults a {
  background: transparent;
  color: var(--accent);
  padding: 10px;
  transition: all .3s;
  font-weight: 600;
  animation: fadeInTop .2s;
}

#searchbarResults a:hover {
  font-weight: 900;
}

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

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

.slideshow .slide img {
  max-width: 50vw;
  max-height: 85vh;
}

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

#prev,
#next {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--main);
  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: 50%;
  transition: all 0.1s;
}

.currentDot {
  background-color: #444;
}

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

/* privacy policy */
.privacyPolicyWrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 200px;
}

.privacyPolicyWrap h1,
.privacyPolicy a {
  color: var(--highlight);
  transition: all .3s;
}

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

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

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

.formAgreement {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.formAgreement a {
  color: var(--shallow);
  transition: all .3s;
}

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

.offerWrap {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 30px;
  gap: 10px;
  border-radius: 10px;
}

.offerWrap input,
.offerWrap textarea,
.offerWrap select {
  width: 100%;
  padding: 10px 15px;
  border-radius: 10px;
  border: none;
}

.offerWrap input[type="checkbox"] {
  width: auto;
}

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

.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(--main);
  text-align: center;
}

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

.contactDesk {
  display: flex;
  justify-content: space-between;
  padding: 60px;
  background: transparent;
  filter: drop-shadow(0px 3px 4px var(--highlight));
  border-radius: 4px;
  border: 2px solid var(--highlight);
  width: 90%;
}

.contactDeskHalf {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 60px;
  width: 45%;
}

.contactDeskHalf img {
  width: 100%;
}

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

.contactDeskHalf a {
  color: var(--highlight);
  font-weight: 600;
  font-size: 20px;
  transition: all .3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

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

.contact a span {
  color: var(--highlight);
  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(--main));
}

.contact a p {
  position: absolute;
  font-size: 25px;
  margin-top: 100px;
  color: var(--highlight);
}

.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;
}

.contactWrap .homeDescriptionContact {
  margin: 0px;
}

.contactWrap .homeDescriptionContact a {
  background: var(--deep);
}

/* 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(--main);
}

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

.fol {
  animation: fadeOutLeft 1s;
}

.for {
  animation: fadeOutRight 1s;
}

.fil {
  animation: fadeInLeft 1s;
}

.fir {
  animation: fadeInRight 1s;
}

/* map */
#mapwrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#mapwrapper h4 {
  font-size: 50px;
  color: var(--main);
  font-family: "Oleo Script", serif;
  padding-top: 50px;
}

#mapwrapper p {
  font-size: 25px;
  color: var(--main);
}

#mapbase {
  width: 60%;
}

#mapbase path {
  fill: var(--main);
  transition: all .3s;
}

#mapbase path:hover {
  fill: var(--deep);
}

#mapbase text {
  pointer-events: none;
  user-select: none;
}

.contactBox {
  width: 50%;
  height: 50%;
  background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px;
  border-radius: 4px;
  gap: 50px;
}

.contactBox h3 {
  font-size: 50px;
  color: var(--shallow);
  font-family: "Oleo Script", serif;
}

.contactBox h4 {
  font-size: 25px;
  color: var(--shallow);
  font-family: "Oleo Script", serif;
}

.contactAgentData {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0px;
}

.contactAgentData #contactTel {
  height: 200px;
  width: 45%;
  border: 3px solid var(--shallow);
  transition: all .5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  gap: 10px;
}

.contactAgentData #contactTel h5 {
  color: var(--shallow);
  font-weight: 600;
  font-size: 30px;
  transition: all .5s;
}

.contactAgentData #contactTel span {
  color: var(--shallow);
  font-weight: 200;
  font-size: 24px;
  transition: all .5s;
  display: flex;
  align-items: center;
}

.contactAgentData #contactTel:hover {
  background: var(--main);
  border: 3px solid var(--main);
}

.contactAgentData #contactTel:hover h5,
.contactAgentData #contactTel:hover span {
  color: var(--shallow);
}

.contactAgentData #contactEmail {
  height: 200px;
  width: 45%;
  background: transparent;
  border: 3px solid var(--shallow);
  transition: all .5s;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contactAgentData #contactEmail h5 {
  color: var(--shallow);
  font-weight: 600;
  font-size: 30px;
  margin: 20px;
  transition: all .5s;
}

.contactAgentData #contactEmail span {
  color: var(--shallow);
  font-weight: 400;
  font-size: 24px;
  margin: 20px;
  transition: all .5s;
}

.contactAgentData #contactEmail:hover {
  background: var(--highlight);
  border: 3px solid var(--highlight);
}

.contactAgentData #contactEmail:hover h5,
.contactAgentData #contactEmail:hover span {
  color: var(--shallow);
}

/* calendar */
.calendar {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.week {
  display: flex;
}

.day,
.calendar .dayname {
  width: 14%;
  height: 75px;
  background-color: var(--main);
  color: var(--main);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  /* border: 1px solid var(--main); */
  cursor: pointer;
  transition: all .15s;
}

.day span,
.day div,
.day input {
  pointer-events: none;
}

.calendar .dayname {
  background-color: var(--highlight);
  cursor: default;
}

.calendar .monthControl {
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.calendar .monthControl:hover {
  box-shadow: inset 1px 1px 15px var(--main);
}

.calendar #increaseMonth span,
.calendar #decreaseMonth span {
  font-size: 40px;
}

.day:hover {
  box-shadow: inset 1px 1px 10px var(--main);
}

.dateControlMenu {
  flex-direction: column;
  position: absolute;
  background: var(--highlight);
  padding: 20px;
  animation: fadeInTop 1s;
  z-index: 10;
}

.dateControlMenu span {
  font-size: 20px;
  color: var(--main);
  transition: all .3s;
  cursor: pointer;
}

.dateControlMenu span:hover {
  text-decoration: underline;
}

#dateControlMenu1 {
  margin-top: 70px;
}

#dateControlMenu2 {
  margin-left: 110px;
  margin-top: 70px;
}


.calendar .otherMonth {
  filter: contrast(.9);
}

.calendarInfo {
  width: 40%;
  background: var(--main);
  min-height: 300px;
  transition: all .3s;
}

.calendarInfo div {
  padding: 50px;
  transition: all .3s;
}

.calendarInfo div .statusExplain {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 20px;
}

.calendarInfo div .statusExplain div {
  padding: 0;
}

.calendarInfo div h1 {
  color: var(--main);
  font-size: 25px;
  transition: all .3s;
  padding-bottom: 20px;
}

.calendarInfo div h4 {
  color: var(--main);
  font-size: 18px;
  transition: all .3s;
}

.calendarInfo div h2 {
  color: var(--main);
}

.calendarInfo div .mainButton,
.calendarInfo div .secondaryButton {
  height: 50px;
  width: 150px;
  padding: 0;
  margin: 20px 0px 0px 0px;
}

.calendarInfo div p {
  color: var(--main);
  padding: 10px;
  display: flex;
  align-items: center;
  font-weight: 200;
}

.calendarInfo div p span {
  margin-left: 20px;
  font-weight: 600;
}

.calendarInfo div p div {
  padding: 0;
  margin-left: 20px;
}

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

.status-yellow {
  background: orange;
}

.status-red {
  background: red;
}

.day-unavailable {
  filter: contrast(0.8) brightness(.9);
  cursor: default;
  pointer-events: none;
}

.day-unavailable:hover {
  box-shadow: none;
}

.day-unavailable-selection {
  filter: contrast(0.7) brightness(0.6);
  pointer-events: none;
  cursor: default;
}

.day-unavailable-selection:hover {
  box-shadow: none;
}

.day-start-selection {
  filter: contrast(1.5);
  cursor: default;
  pointer-events: none;
}

.day-mid-selection {
  filter: contrast(1.04);
  cursor: default;
  pointer-events: none;
}

.day-end-selection {
  filter: contrast(1.5);
  cursor: default;
  pointer-events: none;
}

#form_start_date {
  pointer-events: none;
  display: none;
}

#form_end_date {
  pointer-events: none;
  display: none;
}

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

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

.crudHeader {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--main);
  padding: 10px 0px;
}

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

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

.crudBody {
  display: flex;
}

.crudBodyTable {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

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

#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: 20;
}

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

.deleteConfirmation div h1 {
  color: var(--main);
}

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

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

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

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

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

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

.deleteReviewConfirmationModal .tertiaryButton {
  background: transparent;
}

.deleteReviewConfirmationModal {
  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;
  margin-top: 5px;
}

#uploadForm form,
#editForm form,
#uploadFormSingle form,
#editFormSingle form {
  display: flex;
  flex-direction: column;
  background: var(--main);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 50px;
  width: 60%;
}

#uploadForm label,
#editForm label,
#uploadFormSingle label,
#editFormSingle label {
  color: var(--main);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

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

#uploadForm form input,
#editForm form input,
#uploadFormSingle form input,
#editFormSingle form input {
  margin: 10px 0px;
  color: var(--main);
  background: var(--main);
  font-weight: 600;
  border-radius: 4px;
  border: none;
  padding: 10px 20px;
  font-size: 15px;
  width: 100%;
  color: var(--main);
}

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

.radioButtons {
  display: flex;
  width: 100%;
  padding: 5px 0px;
}

.radioButtons input {
  width: auto !important;
  transform: scale(1.5);
  margin: 0px 20px !important;
}

.kulcsosRow,
.kulcsosRow2 {
  width: 100%;
  display: flex;
}

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

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

.kulcsosRow span a {
  color: white;
  text-decoration: underline;
  transition: all .3s;
}

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

/* banner */
.messageBanner {
  width: 100%;
  height: 300px;
  background: var(--highlight);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.secondaryBackground .messageBanner {
  background: var(--shallow);
}

.messageWrap {
  display: flex;
  flex-direction: column;
  width: 55%;
}

.messageWrap h2 {
  font-size: 39px;
  font-weight: 700;
  color: var(--shallow);
  padding-bottom: 10px;
  width: 100%;
}

.messageWrap p {
  font-size: 14px;
  color: var(--shallow);
  font-weight: 500;
  width: 100%;
}

.secondaryBackground .messageWrap h2,
.secondaryBackground .messageWrap p {
  color: var(--highlight);
}

.ctaFlexBetween {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 15px;
}

.ctaFlexBetween .mainButton,
.ctaFlexBetween .tertiaryButton,
.ctaFlexBetween .secondaryButton,
.ctaFlexBetween .quaternaryButton {
  min-width: 0px;
  width: 45px;
  height: 35px;
}

.ctaFlexBetween .cartButton {
  width: 35px;
  height: 35px;
}

/* message form */
.messageFormWrap {
  background: linear-gradient(90deg, var(--main) 0%, var(--highlight) 100%);
  height: 110vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.messageForm {
  width: 40%;
  background: var(--shallow);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 0px;
}

.messageForm form {
  width: 80%;
}

.messageForm h3 {
  width: 100%;
  font-size: 26px;
  padding-bottom: 20px;
  font-family: "Oleo Script", serif;
  color: var(--highlight);
}

.messageForm input {
  width: 100%;
  border: 1px solid var(--main);
  border-radius: 4px;
  height: 35px;
  padding-left: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.messageForm textarea {
  width: 100%;
  border: 1px solid var(--main);
  border-radius: 4px;
  height: 100px;
  padding-top: 7px;
  padding-left: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.messageForm .mainButton {
  border: 0px;
  width: 150px;
  padding: 0px;
  min-width: 0px;
}

.messageForm label {
  font-weight: 200;
  font-size: 15px;
  margin-bottom: 5px;
}

.messageFormAuxiliary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.messageFormAuxiliary img {
  width: 355px;
  height: 355px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: all .3s;
}

.messageFormAuxiliary img:hover {
  transform: scale(1.02);
}

.messageForm span {
  color: var(--main);
  font-weight: 300;
}

.messageForm h1 {
  width: 100%;
  font-size: 45px;
}

.messageForm p {
  margin-top: 20px;
}

/* footer */
footer {
  display: flex;
  flex-direction: column;
  background: var(--shallow);
  width: 100%;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0px;
}

footer img {
  width: 40px;
  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(--highlight);
  font-weight: 300;
  font-size: 14px
}

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

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

.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;
}

.footerListWrap {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin: 100px 0px 50px 0px;
}

.footerList {
  display: flex;
  flex-direction: column;
}

.footerList a {
  color: var(--highlight);
  transition: all .3s;
}

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

.footerList ul {
  padding-left: 25px;
  margin: 5px 0px;
}

.footerList li::marker {
  color: var(--highlight);
}

.footerIcons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 10px;
}

.footerIcons a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: var(--highlight);
  transition: all .3s;
  width: 600px;
}

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

/* cart */
.uploaderMessage {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: black;
  background: var(--shallow);
}

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

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

#itemQuantity {
  height: 45px;
  width: 50px;
  border-radius: 4px;
  border: 2px solid var(--main);
  padding-left: 10px;
}

.shoppingCartIcon .material-symbols-outlined {
  color: var(--shallow);
  cursor: pointer;
  transition: all .3s;
  font-size: 30px;
}

.shoppingCartIcon:hover .material-symbols-outlined {
  color: var(--highlight);
}

.secondaryNav .shoppingCartIcon .material-symbols-outlined {
  color: var(--highlight);
}

.secondaryNav .shoppingCartIcon:hover .material-symbols-outlined {
  color: var(--highlight);
}

.cartMenu {
  display: none;
  flex-direction: column;
  height: auto;
  width: 40%;
  background: var(--shallow-op);
  right: 0;
  top: 0;
  animation: fadeInRight 1s;
  position: fixed;
  height: 100%;
  box-shadow: -10px 0px 40px var(--main);
  z-index: 17;
  backdrop-filter: blur(5px);
}

.cartMenu a {
  color: var(--highlight);
  font-size: 10px;
  margin: 20px 0px 20px 20px;
  font-weight: 600;
  border-left: 5px solid var(--main);
}

.cartMenu .closeButton {
  color: var(--highlight);
  font-size: 50px;
  font-weight: 600;
  border: 0;
  box-shadow: none;
  margin-left: 20px;
  cursor: pointer;
  transition: all .3s;
}

.cartMenu .closeButton:hover {
  color: var(--highlight);
}

.itemWrapper {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: scroll;
}

.itemWrapper h1 {
  font-weight: 400;
  color: var(--highlight);
}

.itemWrapper+.ctaSectionFlex {
  padding: 20px;
  justify-content: start;
}

.cartTotal {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  width: 90%;
}

.cartTotal h2 {
  color: var(--highlight);
}

#itemDescription {
  overflow: hidden;
  margin-bottom: 20px;
}

#itemDescriptionMore,
#itemDescriptionLess {
  cursor: pointer;
  border: 2px solid var(--highlight);
  border-radius: 4px;
  padding: 3px 8px;
  align-items: center;
  display: flex;
  font-size: 12px;
  color: var(--highlight);
  margin: 10px;
}

#itemDescriptionButtons {
  width: 100%;
  display: flex;
  justify-content: start;
}

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

.cartProduct img {
  width: 15%;
}

.cartProduct h1 {
  font-size: 25px;
  color: var(--highlight);
  text-wrap: nowrap;
}

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

.cartProduct .cartQuantityInc,
.cartProduct .cartQuantityDec {
  color: var(--shallow);
}

.cartProduct a {
  margin: 0px;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 55%;
  flex-wrap: wrap;
}

.cartProduct a h1 {
  font-size: 12px;
  color: var(--shallow);
  transition: all .3s;
  font-weight: 700;
  font-family: "Oleo Script", serif;
  width: 92px;
  flex-wrap: wrap;
  display: flex;
  word-wrap: break-word;
  overflow: hidden;
  text-wrap: wrap;
}

.deleteCartItem {
  cursor: pointer;
  color: var(--shallow);
  transition: all .2s;
}

.cartCounter {
  background: var(--highlight);
  height: 25px;
  width: 25px;
  border-radius: 4px;
  color: var(--deep);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(10px, -45px);
  cursor: pointer;
}

.checkoutWrap .deleteCartItem {
  font-size: 40px;
  color: var(--deep);
}

.checkoutWrap .cartProduct a h1 {
  font-size: 20px;
  color: var(--deep);
}

.checkoutWrap .cartProduct .cartQuantityInc,
.checkoutWrap .cartProduct .cartQuantityDec {
  font-size: 40px;
  color: var(--deep);
}

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

.cartProduct a:hover h1,
.cartProduct a:hover h2 {
  color: var(--highlight);
}

.cartProduct h2:hover {
  color: var(--highlight);
}

.invisibleForm {
  display: none;
}

#modalProductList {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  margin: 0px;
  width: 80%;
}

#modalProductList p,
#modalProductList li {
  color: black;
}

#modalProductList li {
  width: 80%;
  padding-left: 10px;
}

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

.loginBox {
  color: var(--main);
  padding: 50px;
  margin: 50px;
  border-radius: 4px;
  background: transparent;
  border: 5px solid var(--highlight);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.loginBox form,
.passwordResetForm form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.loginBox form label,
.passwordResetForm form label {
  color: var(--highlight);
  width: 100%;
}

.loginBox form input,
.passwordResetForm form input {
  border-radius: 4px;
  border: 3px solid var(--highlight);
  padding: 10px;
  width: 450px;
}

.loginBox h3,
.passwordResetForm h3 {
  color: var(--highlight);
}

.loginBox .mainButton {
  width: 200px;
  color: var(--main);
  font-weight: 700 !important;
  font-size: 17.5px;
}

.failedMessage {
  padding: 300px;
  color: var(--highlight);
}

#registrationSwitch a,
#loginSwitch a,
#passwordResetLink a {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all .3s;
  color: var(--highlight);
  font-weight: 600;
}

#registrationSwitch a:hover,
#loginSwitch a:hover,
#passwordResetLink a:hover {
  transform: scale(1.05);
  color: var(--highlight);
}

#errorMessageLog,
#errorMessageReg {
  color: var(--highlight);
  display: flex;
  align-items: center;
}

.profileWrap {
  min-height: 100vh;
  width: 100%;
  background: url("img/gradientbg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 150px;
  gap: 30px;
}

.profileData {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 4px;
  padding: 50px;
  background: transparent;
  border: 2px solid var(--highlight);
  gap: 20px;
  width: 80%;
}

.profileData h1 {
  color: var(--highlight);
  font-family: "Oleo Script", serif;
}

.profileData h2 {
  color: var(--highlight);
}

.profileData a {
  color: var(--highlight);
  transition: all .3s;
}

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

.productListRow a {
  color: var(--highlight);
  display: flex;
  gap: 5px;
  transition: all .3s;
  align-items: center;
}

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

.productListRow a img {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  object-fit: contain;
}

.orderDetails {
  display: flex;
  justify-content: space-between;
  background: var(--shallow);
  padding: 10px 0px;
  border-radius: 4px;
  padding: 20px;
}

.orderDetails p {
  font-size: 20px;
}

.productListRow h3 {
  font-size: 28px;
  color: var(--shallow);
}

.productListRow h4 {
  padding: 10px 0px;
  font-size: 27px;
}

.productList {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--shallow);
  border-radius: 4px;
  padding: 20px;
  background: var(--main);
}

.productListWrap {
  display: flex;
  flex-direction: column;
}

.productListRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--deep);
  padding: 5px;
}

.productList p {
  margin: 5px 0px;
  color: var(--shallow);
}

.productList .orderDetails p {
  margin: 5px 0px;
  color: var(--deep);
}

.profileOrders {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: 20px 0px;
}

.checkoutWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 75px 35px;
  gap: 35px;
  width: 80%;
}

.checkoutData {
  width: 100%;
  border-radius: 4px;
  border: 2px solid var(--highlight);
}

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

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

#mobileMenuIcon {
  display: none;
}

#openCategoryRoster {
  display: none;
}

/* ORDER */

.companyInfo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.companyInfo input {
  width: 100%;
}

.cartProduct div h1,
.cartProduct h2 {
  font-size: 25px;
  color: var(--deep);
  font-weight: 700;
  font-family: "Oleo Script", serif;
}

.activityViewWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.activityView {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  color: var(--shallow);
}









/* buttons */

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

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

.tertiaryButton {
  background: transparent;
  border: 2px solid var(--accent);
}

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

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

.secondaryButton span {
  color: var(--shallow) !important;
  font-weight: 700;
}

.tertiaryButton span {
  color: var(--accent) !important;
  font-weight: 700;
}

.quaternaryButton span {
  color: var(--main) !important;
  font-weight: 700;
}

.mainButton:hover,
.secondaryButton:hover,
.tertiaryButton:hover,
.quaternaryButton:hover {
  transform: scale(1.02);
}

.welcomeText .ctaSectionFlex .specialCta {
  background: var(--highlight);
  color: var(--shallow);
  border: none;
  padding: 2px 20px;
}

.cartButton {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--highlight);
  height: 50px;
  width: 50px;
  transition: all .3s;
  border-radius: 4px;
}

.cartButton span {
  color: white;
  transition: all .3s;
}

.cartButton:hover {
  background: black;
}

.cartButton:hover span {
  color: var(--highlight);
}

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

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

#backToTop:hover {
  transform: scale(.9);
  box-shadow: 1px 1px var(--main);
}

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

.arrowButton {
  border-radius: 50%;
  border: 2px solid var(--highlight);
  padding: 10px;
  color: var(--shallow);
  cursor: pointer;
  transition: 1s all;
  animation: moveOver 1.5s;
}

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

.servicePageLeft {
  color: white;
  background: black;
}

.servicePageRight {
  color: white;
}

.servicePageLeft,
.servicePageRight {
  display: flex;
  flex-direction: column;
  align-items: end;
  width: 85%;
  padding: 0px 100px 60px 0px;
  animation: moveOver 1s;
}

.servicePageLeft {
  align-items: center;
  padding: 0px 0px 60px 0px;
  width: 100%;
}

.servicePageLeft .serviceDescWrap {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 20px;
}

.servicePageLeft h2,
.servicePageRight h2 {
  width: fit-content;
  font-size: 50px;
  padding: 50px 0px 0px 0px;
  font-family: "Comfortaa", sans-serif;
}

.servicePageLeft h2 {
  color: white;
  border-bottom: 3px solid white;
}

.servicePageLeft h3 {
  font-size: 35px;
  border-bottom: 3px solid white;
}

.servicePageLeft span {
  font-size: 12px;
  font-weight: 100;
}

.servicePageLeft p {
  font-size: 20px;
  font-weight: 200;
  margin: 20px 0px;
  text-align: center;
  line-height: 30px;
  width: 75%;
}

#bobWelcome {
  background: linear-gradient(270deg, rgba(0, 0, 0, 1) 8%, rgba(12, 9, 121, 0) 70%);
}

#bobContent {
  background: linear-gradient(270deg, rgba(0, 0, 0, 1) 8%, rgba(12, 9, 121, 0) 70%);
  align-items: center;
}

#bobContent .contact {
  padding: 80px 0px;
  width: 100%;
}

#bobContent h2 {
  color: white;
  font-size: 65px;
  text-decoration: underline;
}

.playForward {
  border: 2px solid white;
  border-radius: 50%;
  margin: 20px 0px;
}

.playForward .material-symbols-outlined {
  font-size: 35px;
  cursor: pointer;
}

.playForward:hover .material-symbols-outlined {
  filter: drop-shadow(1px 1px 5px white);
}

.largeGalleryNoJs {
  padding: 50px 0px;
  display: grid;
  grid-template-columns: repeat(4, 300px);
  gap: 20px;
}

.largeGalleryNoJs img {
  width: 100%;
  cursor: pointer;
  transition: all .3s;
  max-height: 200px;
  object-fit: cover;
  max-width: 400px;
  object-position: center;
}

.largeGalleryNoJs img:hover {
  transform: scale(1.05);
}

.powerPointSlide {
  transition: all .1s;
}

.powerPointSlideAnimLeft {
  animation: fadeInRight 2s;
}

.powerPointSlideAnimRight {
  animation: fadeInLeft 2s;
}

.navToFapicomSectionTitle {
  padding-top: 15vh;
  padding-bottom: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
  width: 87.5vw;
  flex-wrap: wrap;
}

.navToFapicomSectionTitle h1 {
  padding-left: 6.25vw;
  color: var(--shallow);
}

.navToFapicom {
  padding-bottom: 15vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 87.5vw;
  margin: 0 auto;
  gap: 20px;
  flex-wrap: wrap;
}

.navToFapicom a {
  text-decoration: none;
}

.FapicomImage {
  background-color: var(--shallow);
  border-radius: 4px;
  padding: 20px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.FapicomImage:hover {
  transform: scale(1.1);
}

.FapicomImage img {
  max-width: 100%;
  height: 30vh;
  display: block;
  border-radius: 4px;
}

.navToGym {
  padding-top: 20px;
  flex: 1;
  min-width: 300px;
  transition: transform 0.3s ease;
}

.navToGym h1 {
  color: var(--shallow);
  text-align: center;
}

.navToGym:hover {
  transform: scale(1.1);
}

.hiddenTextArea {
  display: none;
}

.modifCommentSectionBtnText {
  color: var(--shallow);
  padding-right: 10px;
}

.modifCommentSection {
  display: flex;
  flex-direction: row;
  justify-content: left;
  gap: 20px;
}

#subToNewsletterForm {
  width: 20vw;
  height: 50%;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

#newsletterEmailBox {
  padding: 20px !important;
  border-radius: 5px !important;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 100px;
  height: 50px;
  background: var(--shallow);
  border-radius: 4px;
  border: 2px solid var(--highlight);
  color: var(--accent);
  font-weight: 400;
  padding: 10px; 
}

#newsletterEmailBox::placeholder {
  color: var(--accent);
  opacity: 1;
}

#newsletterEmailBox::-webkit-input-placeholder {
  color: var(--accent);
}

#newsletterEmailBox::-moz-placeholder {
  color: var(--accent);
  opacity: 1;
}

#newsletterEmailBox:-ms-input-placeholder {
  color: var(--accent);
}