@import url("../vendors/fonts/neue-haas-grotesk/stylesheet.css");
@import url("../vendors/fonts/Roboto/stylesheet.css");

:root {
  --main: #b7c93b;
  --main-dark: #356521;
  --dark: #1f1841;
  --black: #000;
  --white: #fff;
  --light: #f5f5f5;
  --bodyfont: "Roboto";
  --headfont: "Helvetica",  Arial, sans-serif;
}
body {
  font-family: var(--bodyfont);
  overflow-x: hidden;
  min-height: 100vh;
  height: 100%;
  overflow-x: hidden;
  background-color: var(--light);
}
.padding-top{
  padding-top: 180px;
}
a {
  font-family: var(--bodyfont);
  transition: all 0.3s ease-in-out;
}
.bodyfont {
  font-family: var(--bodyfont);
}
.headfont {
  font-family: var(--headfont);
}
.main {
  color: var(--main);
}
.bg-main {
  background-color: var(--main);
}
.main-dark {
  color: var(--main-dark);
}
.bg-main-dark {
  background-color: var(--main-dark);
}
.dark {
  color: var(--dark);
}
.bg-dark {
  background-color: var(--dark) !important;
}
.bg-lightt {
  background-color: var(--light) !important;
}
.bg-transparent{
  background: transparent;
}
.pointer{
  cursor: pointer;
}
.fix-width{
  max-width: 600px;
  width: 100%;
}
.font16{
  font-size: 16px;
}
.font14{
  font-size: 14px;
}

.h1{
  font-size: 56px;
  line-height: 56px;
  font-weight: bolder;
}
.h2{
  font-size: 37px;
  line-height: 37px;
}
.h3{
  font-size: 32px;
  line-height: 32px;
  font-weight: 900;
}
blockquote{
  border-left: 4px solid;
  padding-left: 25px;
  margin: 35px 0px;
}
p{
  margin-bottom: 22px;
}
.card{
  border-radius: 20px;
  overflow: hidden;
  background-color: #F0F0EC;
  padding: 30px;
}
.card img{
  border-radius: 20px;
  margin-bottom: 25px;
}

/* header */
.header {
  height: 100px;
  transition: all 0.3s ease-in-out;
  z-index: 999;
  position: fixed;
  top: 0;
}
.header__logo {
  max-width: 300px;
  width: 100%;
  margin-left: -12px;
  transition: all 0.3s ease-in-out;
}
#header.scrolled {
  padding: 0px 0px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  height: 65px;
  background-color: var(--light);
}
#header.scrolled .header__logo{
  max-width: 295px;
}
.header__link{
  color: var(--dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 100%;
}
.header__dropdown{
  max-width: fit-content;
  opacity: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  position: absolute;
  top: 100%;
  background-color: var(--light);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  transition: gap 0.3s ease-in;
  z-index: 1;
  border-top: 3px solid var(--main);
  padding: 25px 35px;
  gap: 5px;
}
.header__list{
  height: 100%;
}
.header__link:hover{
  color: #000000a0 !important;
}
.header__list1:hover .header__dropdown1 {
  opacity: 1;
  gap: 20px;
}
.header__list4:hover .header__dropdown4 {
  opacity: 1;
  gap: 20px;
}
.header__nav{
  gap: 60px;
}
.header__menu{
  width: 100%;
  opacity: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  position: absolute;
  top: 100%;
  background-color: var(--light);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  transition: gap 0.5s ease-in-out;
  border-top: 3px solid var(--main);
  padding: 25px 35px;
  flex-direction: column;
  gap: 10px;
  display: flex;
  z-index: -2;
}
.header__menu.show {
  opacity: 1;
  gap: 20px;
  z-index: 3 !important;
}
.header__menu__dropdown{
  padding-bottom: 0px;
  height: auto;
  transition: all 0.3s ease-in;
  display: none;
  overflow: hidden;
  padding: 0px 25px;
  padding-bottom: 0px;

}

.header__menu__dropdown.show {
  padding: 15px 25px;
  padding-bottom: 0px;
  display: flex;
}

.plus__dropdown i.rotate {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
#menuToggle{
  cursor: pointer;
}
.nav__active{
  position: relative;
}
.nav__active::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #000;
  top: 62px;
  transition: all 0.3s ease-in-out;
}
#header.scrolled .nav__active::before{
  top: 46px;
}

/* section1 */
.section1{
  position: relative;
  z-index: 1;
}
.section1__link{
  position: relative;
}
.section1__link::before{
  content: "";
  position: absolute;
  bottom: 0px;
  height: 2px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.section1__link:hover.section1__link::before{
  background-color: black;
}
.section1__box{
  margin: 35px 0px 20px 0px;
  padding: 60px 45px 45px 45px;
}
.tag{
  padding: 10px;
}
.tag ~ h1{
  margin-top: 40px !important;
}
.transparent-btn{
  border: 1px solid black;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}

/* section5 */
.counter__heading{
  font-size: 105px;
  line-height: 105px;
}

/* section6 */
.card{
  transition: all 0.3s ease-in-out;
}
.section6 .card .section1__link::before{
  height: 0px;
}
.section6 .card:hover{
  background-color: white;
}

/* section7 */
.section7 .transparent-btn:hover{
  background-color: var(--main);
}

/* slider */
.slick-track{
  display: flex;
  align-items: center;
  gap: 50px;
}
.slick-arrow{
  width: 30px;
  height: 30px;
}
.slick-prev::before{
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  background-image: url("../images/arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-90deg);
  top: 0px;
  left: -5px;
}
.slick-next::before{
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  background-image: url("../images/arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(90deg);
  top: 0px;
  right: -5px;
}

/* footer */
.footer__logo {
  max-width: 300px;
  width: 100%;
  transition: 0.3s ease-in-out;
  margin-left: -12px;
}
.footer__logo:hover {
  scale: 1.1;
}
.footer__mail {
  color: var(--main);
}
.footer__mail:hover {
  color: var(--black);
}
.footer__link {
  color: var(--black);
  text-decoration: none;
  margin-bottom: 12px;
}
.footer__link:hover {
  color: var(--main-dark);
}
.footer__icon {
  width: 45px;
  height: 45px;
  background-color: var(--main);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  margin-top: 10px;
}
.footer__icon:hover {
  background-color: var(--main-dark);
  color: var(--light);
}
.padding-main {
  padding-inline: 70px !important;
}

/* programme */
.prog2 .card{
  background-color: var(--main);
  border: 0px solid;
  padding: 40px;
}
.prog2 .card:hover{
  background-color: white;
}
.prog2 .transparent-btn:hover{
  background: var(--main) !important;
}

.prog5 img{
  filter: grayscale(100%);
}
.prog5 .card:hover{
  background-color: var(--main-dark);
  color: white !important;
}
.prog5 .transparent-btn:hover{
  background-color: var(--main-dark);
}
.prog3__box{
  border-top: 1px solid;
  padding: 30px 0px;
}
.prog4__box{
  border-top: 1px solid;
  padding: 30px 0px;
}
.prog3__box__check{
  min-width: 70px;
  width: 70px;
  min-height: 70px;
  height: 70px;
  background-color: var(--main);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13px 13px;
  border: 1px solid;
}
.prog3__box__para{
  font-size: 19px;
  line-height: 27px;
  font-weight: 700;
  margin-bottom: 0px;
}

/* about */
.about2__card img{
  max-width: 320px;
  width: 100%;
}

/* participants */
.part2 .card{
  background-color: white;
  border: 0px solid;
}
.part2 .card:hover{
  background-color: var(--main);
}
.part2 img{
  filter: grayscale(100%);
}
.part2__btn{
  background-color: black;
  border-radius: 10px 0px 0px 10px;
  color: #F0F0EC;
  border: 0px solid;
  outline: none;
  padding: 5px 20px;
  width: 62px;
  text-align: left;
  font-size: 17px;
}
@media only screen and (max-width: 1200px) {
  .padding-main {
    padding-inline: 40px !important;
  }
}
@media only screen and (max-width: 992px) {
  .padding-main {
    padding-inline: 78px !important;
  }
  #header.scrolled{
    height: auto;
  }
  .header{
    position: absolute;
    top: 0;
    height: auto;
    background-color: var(--light);
  }
  .header__container{
    padding: 15px 0px;
  }
  .header__link{
    font-size: 14px !important;
  }
  .header__container .padding-main{
    padding-inline: 0px !important;
  }
}
@media only screen and (max-width: 768px) {
  .header__col1{
    max-width: 60%;
  }
  .h1{
    font-size: 48px;
    line-height: 48px;
  }
  .h2{
    font-size: 32px;
    line-height: 32px;
  }
  .h3{
    font-size: 26px;
    line-height: 26px;
  }
  .part2__btn{
    width: 50%;
  }
  
}
@media only screen and (max-width: 576px) {
  .padding-main {
    padding-inline: 43px !important;
  }
  .h1{
    font-size: 40px;
    line-height: 40px;
  }
  .section1__box{
    padding: 50px 35px 35px 35px;
  }
  .h2{
    font-size: 27px;
    line-height: 27px;
  }
  .h3{
    font-size: 22px;
    line-height: 22px;
  }
  
}