@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

* {
  padding: 0;
  margin: 0;
  font-family: Lato;
  box-sizing: border-box;
  
}

*::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}

*::-webkit-scrollbar-thumb {
  background-color: #F90;
  /* background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); */
}

body {
  background-color: #121212;
  padding-top: 65px;
}

main{
  transition: all 0.3s ease;
}


.navbar {
  position: fixed;
  font-family: Lato;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8%;
  box-sizing: border-box;
  background-color: #181818;
  transition: background-color 0.3s ease;
}

.navbar a {
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  padding: 0 20px;
}


.navbar a > .logo:hover{
  text-decoration: none;
  font-size: 30px;
  font-weight: 700;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.navbar li {
  font-size: 15px;
  list-style: none;
  display: inline-block;
  transition: all 0.4s ease;
}

.navbar li span{
  color: #e29700;
}

.navbar li:hover {
  text-decoration: underline;
  text-decoration-color: #e29700;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  text-decoration-skip-ink: none;
  text-decoration-style: solid;
  transition: all 0.4s ease;
}

.navbar .logo {
  display: flex;
  width: 53px;
  height: auto;
  transition: all 0.3s ease;
}

.navbar .logo img{
  width: 100%;
  height: 100%;
}

.content{
  display: flex;
  width: 90vw;
  height: 50vw;
  margin-top: 20vw;
  margin-left: 5vw;
  background-color: #fff;
}

.openMenu{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  margin-right: 12px;
  justify-content: center;
}
.openMenu:hover{
  cursor: pointer;
}

.gg-menu-right {
  transform: scale(var(--ggs,1.4))
}
.gg-menu-right,
.gg-menu-right::after,
.gg-menu-right::before {
  box-sizing: border-box;
  position: relative;
  display: none;
  width: 20px;
  height: 2px;
  border-radius: 3px;
  background: currentColor
}
.gg-menu-right::after,
.gg-menu-right::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 0;
  width: 10px;
  height: 2px;
}
.gg-menu-right::after {
  top: 6px;
  width: 14px
}

.gg-close {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1.7));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 40px
}
.gg-close::after,
.gg-close::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  border-radius: 5px;
  top: 8px;
  left: 1px
}
.gg-close::after {
  transform: rotate(-45deg)
}
.gg-close:hover{
  cursor: pointer;
}

.menuBurger{
  display: none;
}

.questionSection{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
}

.questions{
  width: 750px;
  border-radius: 20px;
  background-color: #e29700;
  padding: 5vw 5vw;
  padding-top: 4vw;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.questions h1{
  font-size: 35px;
  padding-bottom: 30px;
  color: #fff;
  font-weight: 900;
}

.questions h1 span{
  color: #000;
}

.question{
  position: relative;
  background: #ffffff;
  padding: 0 20px 20px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.05);
  border-radius: 5px;
  overflow: hidden;
}

.question input{
  width: 10px;
  height: 10px;
  visibility: hidden;
}

.question label {
  display: flex;
  align-items: center;
}

.question label::after{
  content: '+';
  position: absolute;
  right: 20px;
  font-size: 25px;
  color: #000000;
  transition: transform 1s ease, color 0.3s ease;
}

.question:hover label{
  cursor: pointer;
}
.question:hover label::after{
  color: #e29700;
}
.question input:checked ~ label::after{
  transform: rotate(135deg);
  color: #000;
}
  
.question label h2{
  width: 35px;
  height: 35px;
  background: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  border-radius: 5px;
  margin-right: 15px;
}

.question:nth-child(2) label h2{
  background: linear-gradient(135deg, #ffbf00,#efb300);
}
.question:nth-child(3) label h2{
  background: linear-gradient(135deg, #efb300,#dfa701);
}
.question:nth-child(4) label h2{
  background: linear-gradient(135deg, #dfa701,#d39e00);
}
.question:nth-child(5) label h2{
  background: linear-gradient(135deg, #d39e00,#c49300);
}

.question label h3{
  position: relative;
  font-weight: 500;
  color: #000;
  font-size: 17px;
  z-index: 2;
  transition: all 0.3s ease;
}

.question input:checked ~ label h3{
  font-weight: 900;
  transition: all 0.5s ease;
}

.question .reponse{
  max-height: 0;
  transition: all 0.8s ease;
  overflow: hidden;
}

.question input:checked ~ .reponse{
  max-height: 400vh;
  transition: all 4s ease;
}

.question .reponse p{
  font-size: 15px;
  position: relative;
  padding-top: 15px;
  padding-bottom: 5px;
  color: #000;
  text-align: justify;
  z-index: 2;
}


.FAQ{
  color: white;
  font-size: 1.5em;
  text-align: center;
}

/* mediaquery for navbar */

@media (max-width: 900px) {

  .navbar{
    padding: 0;
  }
  .navbar i{
    font-size: 25px;
    color: white
  }

  .navbar a{
      padding: 0 10px;
    }

  .gg-menu-right,
  .gg-menu-right::after,
  .gg-menu-right::before{
    display: block;
  }

  .menu{
    display: none;
  }

  .menuBurger{
    position: fixed;
    display: flex;
    justify-content: center;
    width: 0vw;
    height: 100vh;
    right: 0;
    top: 0;
    z-index: 11;
    opacity: 1;
    transition: all 0.7s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }


  .gg-close{
    position: absolute;
    display: none;
    transform: scale(var(--ggs,1.7)) rotate(130deg);
    top: 22px;
    right: 22px;
    color: #fff;
    transition: all 1s ease;
  }

  .menuBurger ul{
    display: flex;
    flex-direction: column;
    list-style-type: none;
    width: 100%;
    height: 100%;
    padding: 8vw 0;
    background-color: #121212;
  }

  .menuBurger ul li{
    width: 100%;
    height: 20%;
    padding-left: 7vw;
  }


  .navPage{
    transition: all 0.8s ease;
  }

  .menuBurger a{
    text-decoration: none;
    font-size: calc(5px + 3vw);
    width: 100%;
    height: 100%;
    display: none;
    color: white;
    font-size: 8vw;
    align-items: center;
    justify-content: start;
    text-shadow: 0 0 2vw rgba(0,0,0,0.2);

  }

  .menuBurger span{
    letter-spacing: -4px;
    margin-right: 3vw;
    font-size: 8vw;
  }

}

.animNavbar{
  animation: navAnim 0.5 ease forwards;
}

@media (max-width: 450px) {

  .menuBurger ul{
    padding: 13vh 0;
  }

  .menuBurger a{
    font-size: 8vw;
  }

  .menuBurger span{
    font-size: 8vw;
  }

  .questions{
    width: 90vw;
  }

  .questionSection{
    margin-bottom: 40px;
  }

  .questions h1{
    font-size: max(6.5vw, 26px);
    padding-bottom: 5px;
    padding-left: 8px;
    padding-top: 10px;
  }

  .question label h3{
    width: 70%;
  }

}