:root {
  --yell: #fabb2e;
  --purp: #59547d;
  --placehold: grey;
  --textPlacehold: grey;
  --frame: 620px;
  --mobile: 960px;
  --display: 'initial';
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}


@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Regular.ttf");
  font-weight: 500;
}


* {
  box-sizing: border-box;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;

}

body {
  min-height: 100vh;
  background-color: grey !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

#gdprMain {
  background-color: rgb(232, 232, 232);
  padding-top: 20vh;
  padding-bottom: 20vh;
}

#navigation {
  opacity: 90%;
  /* padding-top: 84px; */
}


.navColor {
  background-color: #311d57
}

.nav-item {

  font-weight: 600;
  font-size: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.nav-link {
  color: white !important;
  color: var(--yell) !important;
  text-shadow: 1px 1px 10px black;
}

.nav-link:hover {
  color: rgb(207, 177, 255) !important
}

#domain {
  text-align: center;
  color: var(--yell);
  position: fixed;
  top: 18px;
  right: 30px;
  font-size: 20px;
  font-weight: 600;
  z-index: 10000;
}

#domain a {
  text-decoration: none !important;
  color: var(--yell) !important;
  cursor: pointer;
  ;
}



.navbar-dark .navbar-toggler-icon {
  background-image: none !important;
}

.navbar-toggler {
  border: none !important;
  padding: 0 !important;
  padding-top: 4px !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  box-shadow: none;
}


.effect {
  opacity: 0;
  transform: translateY(100px);
}


/*-------HERO---------------*/

#hero {
  background-color: #311d57;
}

#heroBackground {
  background-color: #311d57;
  /* background-image: url("./assets/enchas1.jpg"); */
  position: relative;
  overflow: hidden;
}

#heroBackground img {
  width: 100%;
}



#heroContainerWrapper {
  position: absolute;
  width: 100%;
  transform: translateY(-100vh);
}


#heroContainer {
  padding-top: 34vh;
  color: white !important;
}

#heroTexts {
  padding-left: 0.5rem;
  width: 60%;
  position: relative;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  /* text-shadow: 1px 1px 10px rgb(23, 11, 56); */

}

#lightning {
  position: absolute;
}

#lightning img {
  width: 130%;
  opacity: 90%;
  transform: translate(-286px, -220px);
  z-index: 0;
}

#heroTexts h1 {
  font-size: 72px !important;
  font-weight: 700;
  z-index: 10;
  position: relative;
  margin-bottom: -0.75rem;
}

#heroTexts h2 {
  font-size: 54px !important;
  font-weight: 700;
  z-index: 10;
  position: relative;
}

#heroTexts h2 span {
  color: white;
}

#heroTexts h3 {
  font-size: 28px !important;
  font-weight: 600;
  z-index: 10;
  position: relative;
  color: var(--yell);
}

#heroTexts h4 {
  font-size: 24px !important;
  font-weight: 600;
  width: 95%;
  z-index: 10;
  position: relative;
}

#heroTexts h4 span {}

#ctaButton,
#lastButton {
  border: none !important;
  background-color: var(--yell);
  color: black !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 32px !important;
  padding: 12px !important;
  font-weight: 700 !important;
  border-radius: 12px;
  margin-top: 32px;
  border: black solid 1px !important;
  z-index: 10;
  position: relative;

}

#lastButton {
  margin-top: 8px;
}


/*-------------------second-------------------------------*/



#second {
  min-height: 100vh;
  background-color: white;
  padding-top: 30vh;

}

#secondTitle {
  padding-left: 0.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 64px;
  text-align: right;
  text-shadow: 1px 1px 100px rgb(101, 38, 201);
}

.secondTitles {
  font-weight: 700;
}

.secondTooltips {
  font-style: oblique;
}

.secondRowTop {
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 20px;
  font-weight: 500;
  padding-left: 0.5rem;
  margin-bottom: 1rem;
}

.secondRowBottom {
  display: flex;
  justify-content: space-between;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  padding-left: 0.5rem;
  padding-bottom: 100px;
  transform: translateY(-40px);
}


.secondRowTop img {
  width: 100%;
  border-radius: 128px;
}

#secondRowImage {
  transform: translateY(-50px);
}


.secondBoxes {
  padding-top: 32px;
  min-height: 300px;
}






/*--------------THIRD---------------------------------*/


#third {
  min-height: 100vh;
  background-color: var(--yell);
  background: url("./assets/thirdbg2.jpg");
  background-size: 100%;
  padding-top: 20vh;
  padding-bottom: 200px;
}

#thirdTitle {
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 48px;
  margin-bottom: 100px;
  text-align: center;
}

.thirdRowTop {
  display: flex;
  justify-content: center;
}

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


.thirdRowBottom img {
  width: 100%;
}


.thirdBoxes {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-align: center;
}

.thirdTitles {
  font-size: 24px;
  font-weight: 700;
  color: black;
}

.thirdTooltip {
  font-size: 22px;
  font-weight: 500;
  color: black;
}

#thirdButtonWrapper {
  display: flex;
  justify-content: center;
}

#thirdButton {
  border: none !important;
  background-color: var(--purp);
  color: white !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 40px !important;
  padding: 12px !important;
  font-weight: 700 !important;
  border-radius: 12px;
  margin-top: 32px;
  border: solid black 2px !important;
}



/*--------forth--------------------*/


#forth {
  min-height: 100vh;
  background-color: #6b6197;
  background-image: url("./assets/gyikback1.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  padding-bottom: 10vh;
  padding-top: 16vh;
  transition: ease;
}


#forth h2 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 56px;
  color: white;
  font-weight: 800;
  margin-bottom: 84px;
}

.forthRow {
  display: flex;
  justify-content: space-between;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.question {
  font-size: 32px;
  font-weight: 700;
  color: var(--yell);
  /* font-style: oblique; */
}

.answer {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 0px;
}


.faqItems {
  padding: 12px;
  box-shadow: 1px 1px 80px 2px rgb(90, 64, 132);
  margin-bottom: 20px;
  border-radius: 20px;
  margin-bottom: 64px;
  padding-top: 20px;
  padding-bottom: 24px;

}




#fifth {
  min-height: 100vh;
  background-color: white;
  background-image: url("./assets/bank2.jpg");
  background-position-y: 50px;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 16vh;
}

#partnersImage {
  display: none;
}

#fifthTitle {
  font-weight: 700;
  color: black;
  font-size: 64px;
  text-align: center;
  margin-bottom: 128px;
}

.fifthRow {
  display: flex;
  justify-content: center;
}

.fifthRow img {
  width: 100%;
}









#sixth {
  min-height: 100vh;
  background-color: rgb(233, 233, 233);
  background-image: url("./assets/quo.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 15vh;
  padding-bottom: 128px;
}

#sixthTitle {
  font-size: 48px;
  color: black;
  font-weight: 700;
  margin-bottom: 128px;
  text-align: center;
}



.sixthRowTop {
  display: flex;
  justify-content: center;
}

.sixthRowBottom {
  display: flex;
  justify-content: center;
}


.testemonials {
  border-radius: 20px;
  border: solid 2px var(--purp);
  background-color: white;
  background: linear-gradient(178deg, rgb(255, 255, 255) 50%, rgb(207, 177, 255) 100%);
  padding-top: 10px;
  padding-bottom: 24px;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 32px;
  box-shadow: 1px 1px 96px 2px rgb(87, 56, 170)
}


.opinion {
  font-weight: 600;
  margin-bottom: 32px;
  font-style: oblique;
  font-size: 18px;
  color: black !important;
}

.author {
  font-weight: 700;
  font-size: 20px;
  color: black !important;
}




#seventh {
  min-height: 100vh;
  background-color: #dca74b;
  background-image: url("./assets/calc.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 15vh;
  padding-bottom: 15vh;
}

#seventhTitle {
  font-size: 56px;
  text-align: center;
  color: black;
  font-weight: 700;
  margin-bottom: 128px;
}


#last {
  min-height: 110vh;
  background-color: #311d57;
  background-image: url("./assets/lastlast.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 25vh;
  border-top: 24px solid rgb(16, 12, 32);
  ;
}

#lastTitle {
  font-size: 36px;
  padding-top: 32px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  margin-bottom: 48px;
  text-shadow: 1px 1px 10px black;
}

.lastRow img {
  width: 100%;
  transform: translateY(8px);
  margin-bottom: 32px;
}

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







#contact {
  min-height: 100vh;
  background-color: white;
  background-image: url("./assets/contacts4.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 20vh;
  padding-bottom: 100px;
}


#contactTitle {
  font-size: 56px;
  text-align: center;
  color: black;
  font-weight: 700;
  margin-bottom: 128px;
}




.inputWrapper {
  display: flex;
  justify-content: left;
  margin-bottom: 16px;

}

.formInputs {
  display: flex;
  flex-direction: column;
  margin-right: 16px;
  margin-bottom: 4px;
  width: 100%;

}

#message {
  width: 75%;
  height: 170px;
  resize: none;
  border: none !important;
  border: solid 1px var(--purp) !important;
  box-shadow: 1px 1px 32px 2px rgb(232, 232, 232);
  border-radius: 2px;
  padding-left: 0.5rem;
}

#salaryLabel {
  width: 60%;
  padding-top: 5px;
}

.rowInputs {
  display: flex;
  flex-direction: row;
}

#gdpr {
  margin-right: 12px;
}

#gdprLabel {
  font-size: 19.5px;
}

#salary {
  cursor: pointer;
}

#formChecker {
  padding-top: 20px;
}


#formButton {
  border: none !important;
  background-color: var(--purp);
  color: white !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 24px !important;
  padding: 12px !important;
  font-weight: 700 !important;
  border-radius: 12px;
  margin-top: 32px;
  border: solid black 2px !important;
}

/* #formButton:hover {
  background-color: var(--yell)!important;
  color:black!important;
  border-color: var(--yell)!important;
} */



input,
select {
  border-radius: 2px !important;
  border: none !important;
  border: solid 1px var(--purp) !important;
  box-shadow: 1px 1px 32px 2px rgb(232, 232, 232);
  padding-left: 0.5rem !important;
}

label {
  color: black;
  font-weight: 700;
}

input::placeholder {
  color: var(--placehold);
}


textarea::placeholder {
  color: var(--textPlacehold);
}


select:invalid {
  color: red;
  /* Vagy piros, ha azt szeretnéd jelezni, hogy hibás */
}


#gdprLabel a {
  color: unset;
  text-decoration: none !important;
}


#footerItems {
  display: flex;
  justify-content: space-between;
  padding-top: 64px;
}

footer {
  background-color: rgb(44, 44, 44);
  text-decoration: none !important;
  color: white !important;
}

footer a {
  text-decoration: none !important;
  color: white !important;
}



/*--------------COOOKIE-------------------------*/


.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff7d6;
  /* világos sárga háttér */
  color: #4b0082;
  /* sötét lila szöveg */
  padding: 1rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  font-size: 0.95rem;
}

.cookie-banner a {
  color: #4b0082;
  text-decoration: underline;
}

.cookie-banner button {
  background-color: #4b0082;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cookie-banner button:hover {
  background-color: #36005e;
}


iframe {
  border-radius: 12px;
  width: 75.0%;
  max-height: var(--frame);
}


#frameLayer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0%;
  z-index: 200;
  display: var(--display);
  cursor: pointer;
}





/*--------------media------------------------*/


@media screen and (max-width: 1920px) {
  #heroTexts h1 {
    font-size: 4vw !important;
    font-weight: 700;
    z-index: 10;
    position: relative;
  }

  #heroTexts h2 {
    font-size: 2.9vw !important;
    font-weight: 700;
    z-index: 10;
    position: relative;
  }

  #heroTexts h2 span {
    color: white;
  }

  #heroTexts h3 {
    font-size: 1.4vw !important;
    font-weight: 600;
    z-index: 10;
    position: relative;
  }

  #heroTexts h4 {
    font-size: 1.2vw !important;
    font-weight: 600;
    width: 90%;
    z-index: 10;
    position: relative;
  }
}


@media screen and (max-width: 1580px) {
  #hero {
    padding-bottom: 128px;
  }
}


@media screen and (max-width: 1280px) {


  #lightning img {
    width: 80%;
    opacity: 90%;
    transform: translate(-48px, -140px);
    z-index: 0;
  }

  #domain {
    right: 32px;
    top: 10px;
  }

  #heroTexts {
    width: 100%;
  }

  #heroTexts h4 {
    width: 38%;
  }
}



@media screen and (max-width: 991px) {
  #heroBackground {
    padding-bottom: 12px;
    position: relative;
    padding-top: 6px;
  }

  #heroBackground img {
    width: 180%;
    transform: translateX(-43%);
  }

  #heroContainerWrapper {
    position: relative;
    width: 100%;
    transform: translateY(0vh);
  }

  #heroContainer {
    padding-top: 0vh;
  }

  #lightning img {
    width: 70%;
    opacity: 90%;
    transform: translate(-48px, -180px);
    z-index: 0;
  }

  #domain {
    right: 32px;
    top: 10px;
  }

  #heroTexts {
    width: 100%;
  }

  #heroTexts h1 {
    font-size: 9.8vw !important;
    text-align: left;
    text-shadow: 1px 1px 10px black;
    margin-bottom: 0px;
  }

  #heroTexts h2 {
    font-size: 7.1vw !important;
    text-shadow: 1px 1px 10px black;
  }

  #heroTexts h3 {
    text-shadow: 1px 1px 10px black;
    font-size: 7.5vw !important;
    color: var(--yell);
  }

  #heroTexts h4 {
    margin-top: 32px;
    text-shadow: 1px 1px 10px rgb(87, 56, 170);
    font-size: 4.6vw !important;
    width: 100%;
  }


  #lastButton {
    margin-top: 8px;
  }



  #second {
    padding-top: 15vh;
  }

  #secondTitle {
    font-size: 32px !important;
    text-align: left;
    margin-bottom: 120px;
  }

  #thirdTitle {
    font-size: 40px !important;
  }

  .thirdBoxes {
    margin-bottom: 64px;
  }

  #forth h2 {
    font-size: 40px !important;
  }

  .question {
    font-size: 28px !important;
  }

  #fifthTitle {
    font-size: 15vw !important;
    transform: translateY(-20px);
    margin-bottom: 100px;
  }

  #fifth {
    background-position-y: 48px;
    padding-top: 4vh;
  }

  #sixthTitle {
    font-size: 36px !important;
  }

  .sixthRowTop,
  .sixthRowBottom {
    padding: 0.5rem;
  }

  .testemonials {
    margin-bottom: 32px;
    box-shadow: 1px 1px 96px 2px rgb(87, 56, 170)
  }

  .lastRow {
    flex-direction: column-reverse;
  }

  #last {
    padding-top: 40vh;
    padding-bottom: 96px;
    background-size: 150%;
    background-position-x: -50vw;
  }

  #contactTitle {
    font-size: 40px !important;
  }

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

  #message {
    width: 100%;
  }

  #gdprLabel {
    font-size: 16px;
  }

  #footerItems {
    text-align: center !important;
  }

  iframe {
    border-radius: 12px;
    width: 100%;
    max-height: var(--mobile);
  }

  #frameLayer {
    height: 1200px;
  }


}



@media screen and (max-width: 576px) {
  #heroTexts {
    padding-left: 0px;
  }

  #heroTexts h1 {
    /* font-size: 2.2rem !important; */
    font-size: 9.66vw !important;
  }

  #heroTexts h2 {
    /* font-size: 1.6rem !important; */
    font-size: 7.1vw !important;
  }

  #heroTexts h3 {
    font-size: 7.5vw !important;
    margin-top: 12px;
    color: var(--yell);
    padding-bottom: 0px;
  }

  #heroTexts h4 {
    margin-top: 0.5rem;
    font-size: 4.8vw !important;
    font-weight: 500;
    width: 100%;
  }

  #second {
    padding-top: 25vh;
  }

  #thirdTitle {
    font-size: 22px !important;
  }

  .thirdRowBottom img {
    margin-bottom: 1rem;
  }

  #secondTitle {
    font-size: 24px !important;
    text-align: left;
    margin-bottom: 100px;
  }

  #contact {
    background-size: 200%;
    background-position-x: -100vw;
    padding-top: 55vh;
  }

  #lastTitle {
    font-size: 20px;
    padding-top: 5rem;
  }

  #fifth {
    background-image: url("/assets/fiftybg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-position-y: -2px;
    background-position-x: 0px;
    padding-top: 100px;
  }

  #partnersImage {
    display: initial;
  }

  #partnersImage img {
    width: 100%;
  }

  #ctaButton,
  #lastButton,
  #thirdButton,
  #formButton {
    font-size: 24px !important;
    padding: 8px !important;
    font-weight: 700 !important;
    border-radius: 8px;
    margin-top: 32px;
  }

}