@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

*, *:before, *:after {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}
::-webkit-scrollbar {
    width: 0;
}

  /* body {
    width: 100%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
  }
   */

.res-nav{
    width: 100vw;
    height: 0vh;
    z-index: 200000;
    position: fixed;
    background-color: orange;
    transition: height 1s ease-in-out;
    -webkit-transition: height 1s ease-in-out;
    overflow: hidden;
  }
  .res-nav ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
  }
  .res-nav button{
    background-color: transparent;
    border: none;
    color: white;
    font-weight: 500;
    font-size: large;
  }
  .res-nav.opened{
    height: 100vh;
  }
  
  #nav-icon4 {
    width: 50px;
    height: 100%;
    position: relative;
    margin: 10px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }
  
  #nav-icon4 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 80%;
    background: #d3531a;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  
  #nav-icon4 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  
  #nav-icon4 span:nth-child(2) {
    top: 15px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  
  #nav-icon4 span:nth-child(3) {
    top: 30px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  
  #nav-icon4.open span{
    background-color: white;
  }
  
  #nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
    left: 8px;
  }
  
  #nav-icon4.open span:nth-child(2) {
    top: 35px;
    width: 0%;
    opacity: 0;
  }
  
  #nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 34px;
    left: 8px;
  }
  
  .res-menu-btn{
    display: none;
  }
 
  nav{
    display: flex;
    flex-direction: row;
    padding: 0 3.5%;
    justify-content: space-between;
    width: 100vw;
    height: fit-content;
    background: rgba( 255, 255, 255, 0.3 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 5.5px ); 
    -webkit-backdrop-filter: blur( 5.5px ); 
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    z-index: 2000000;
    position: fixed;
  }
  nav button{
    background: transparent;
    border: none;
    padding: 1.5rem 1.4rem;
    font-weight: 700;
    font-size: 1fr;
    color: #1d3557;
    border-bottom: 3px solid transparent;
    text-align: center;
  }
  button{
    background: transparent;
  }
  nav button:hover{
    border-bottom: 3px solid #1d3557;
  }
    
    @media screen and (max-width: 1250px) {  /*tablet*/
      .nav-btns{
        display: none;
      }
      .res-menu-btn{
        display: inline;
      }
        .login-btn, .regis-btn{
        padding: 3.3% 5.6%;
        font-size: 95%;
      }
    }
    @media screen and (max-width: 500px){ /*mobile*/
  
      .login-btn, .regis-btn{
        padding: 6% 10%;
        border: 1px solid white;
      }
      .nav-btns{
        display: none;
      }
      .res-menu-btn{
        display: inline;
      }
    }
    
    @media screen and (min-width: 1000px) and (min-height: 1200px){   /* ipad pro*/
  
      .login-btn, .regis-btn{
        padding: 3.7% 6.6%;
        font-size: 1.2em;
    }
    }
    
    @media screen and (max-height: 700px) and (min-width: 1000px){  /* small height desktop*/
      .header img{
        width: 25vw !important;
      }
    }
    @media (min-width: 700px) {
     .leading {
        display: flex;
        align-items: center;
      }
    }

    .container{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

header {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c6d9d3;
}
header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
header .overlay .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    font-size: 9rem;
    color: #1d3557;
    mix-blend-mode:luminosity;  
}

.tagline{
  width: 100%;
  padding: 5%;
  height: 100% !important;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: end;
  margin-top: -1%;
  justify-content: center;
  font-weight: 500;
}

.tagline p{
  font-size: 180%;
  text-align: center;
  color: #ffffff;
}

header .overlay .logo img{
  object-fit: contain;
  width: 25%;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;    
}

header .parallax {
    position: relative;
    width: 100%;
    height: 100%;
}
header .parallax div {
    position: absolute;
    /* bottom: 0; */
    left: 0;
    width: 100%;
    height: 100vh;
    background-position: 0 60%;
    background-repeat: no-repeat;
    background-size: 100%;
}
header .parallax .one {
    background-image: url("../static/prakriti/mountains-1.svg");
    z-index: 4;
}
header .parallax .two {
    background-image: url("../static/prakriti//mountains-2.svg");
    z-index: 3;
}
header .parallax .three {
    background-image: url("../static/prakriti//mountains-3.svg");
    z-index: 2;
}
header .parallax .four {
    background-image: url("../static/prakriti//mountains-4.svg");
    z-index: 1;
}
header .parallax .five {
    background-image: url("../static/prakriti//mountains-5.svg");
    z-index: 0;
}

@media(max-width:820px){
    header .parallax div {
        background-position: 0 100%;
    }

    header .overlay h1 {
        font-size: 7rem;
        }
}

@media(max-width:579px){

    header .overlay h1 {
        font-size: 6rem;
    }

    header .overlay h1 span {
        font-size: 1rem;
    }
}

@media(max-width:479px){

    header .parallax div {
        background-position: 0 100%;
    }

    header .overlay h1 {
        font-size: 5rem;
        margin-top: -1em;
    }

    header .parallax .one {
        background-size: 150%;
    }
    header .parallax .two {
        background-size: 150%;
    }
    header .parallax .three {
        background-size: 150%;
    }
    header .parallax .four {
        background-size: 150%;
    }
    header .parallax .five {
        background-size: 150%;
    }

    header .overlay .logo img{
      width: 80%;
    }
}

@media(max-width:420px){

    header .overlay h1 {
        font-size: 3.7rem;
        margin-top: -1em;
        padding: 5px;
    }

    header .parallax .one {
        background-size: 160%;
    }
    header .parallax .two {
        background-size: 160%;
    }
    header .parallax .three {
        background-size: 160%;
    }
    header .parallax .four {
        background-size: 160%;
    }
    header .parallax .five {
        background-size: 160%;
    }
}

@media(max-width:376px){

    header .overlay h1 {
        font-size: 3.5rem;
        margin-top: -1em;
        padding: 5px;
    }

    header .parallax .one {
        background-size: 170%;
    }
    header .parallax .two {
        background-size: 170%;
    }
    header .parallax .three {
        background-size: 170%;
    }
    header .parallax .four {
        background-size: 170%;
    }
    header .parallax .five {
        background-size: 170%;
    }
}


.main {
/*     
    padding: 2em 4em;
    min-height: 85vh;
    
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08); */
}
.main .info {
    
    color: #192a2e;
    height: fit-content;
    display: flex;
    flex-direction: row;
    background-color: #e8f4f8;
}

.info .left {
  width: 50%;
  padding: 2%;
}



.info .left .text{
  padding: 5%;
  text-align: justify;
  height: 90%;
  line-height: 1.8rem;
}

.info .left .text p{
  font-weight: 500;
}

.info .right {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    display: flex;
    min-height: 15vh;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    background-color: #192a2e;
    color: #c6d9d3;
}
#slider{
  overflow:hidden;
  padding: 3%;
  height: 100%;
  }

  .slides{
  animation-duration:1s;
  display:none;
  overflow:hidden;
  animation-name: fade;
  height: 100%;
  }
  .slides img{
  width:100%;
  height: 80%;
  border-radius: 10px;

  }

  #dot{
  text-align:center;
  }

  .dot{
  background:#d3d3d3;
  padding:4px;
  display:inline-block;
  border-radius:50%;
  }

  .active{
  background:black;
  }

  @keyframes fade{
  from{
    opacity:0.4;
  }
  to{
    opacity:1;
  }
  }

  @media (max-width:567px){
  #slider{
    width:100%;
  }
  }

  
@media(min-width:1376px){
  .info .left {
    padding: 3.5%;
  }  
}

@media(max-width:876px){
  .info {
    display: flex;
    flex-direction: column !important;
    height: auto !important;
  }  
  .info .right{
    width: 100%;
  }

  .info .left{
    width: 100%;
    height: auto !important
  }

  .info .left .text{
    line-height: 1.3rem;
    font-size: 80%;
  }
}
.stats{
  background-color: rgb(232, 244, 248);
  height: fit-content;
  width: 100%;
}
.stats-sec{
  height: fit-content;
  width: 100%;
  

}
@media(max-width:657px){
  .stats-sec{
    height: fit-content !important;
  
  }
}
.stats-cont{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: min-content;
  width: 80vw;
  position: relative;
  left: 50%;
  top: 15%;
  transform: translate(-50%, 0);
  row-gap: 30px;
  color:   rgb(25, 42, 46);
}
.stats-tile{
  display: flex;
  align-items: center;
  column-gap: 20px;
  justify-self: center;
  width: 80%;
  border-radius: 10px;
}

.stats-tile div{
  width: 100%;
  text-align: center;
}

.stats-tile h2{
  width: 100%;
  text-align: center;
}


@media screen and (max-width: 700px){
.stats-cont{
  /* top: 30vh; */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
}

@media screen and (min-width: 900px) {
.stats-tile h1{
  width: 120px;
}
}

@media screen and (max-width: 410px){
.stats-cont{
  /* top:15vh; */
  grid-template-columns: 1fr;
}

.stats-tile img{
  width: 40px;
  height: 40px;
}
.stats-tile {
  width: 280px;
}

.stats-tile h2{
  width: 280px;
}
.stats-tile span{
  font-size: 11px;
}
}

@media screen and (max-width: 310px){
  .stats-tile {
    width: 250px;
  }
  
  .stats-tile h2{
    width: 250px;
  }
}

footer{
  background-color: rgb(25, 42, 46);
  height: 30vh;
  padding: 40px 50px;
  padding-bottom: 50px;
  display: flex;
  color: white;
  column-gap: 30px;
  max-width: 100vw !important;
  overflow-y: hidden;

}
.contact, .address{
  line-height: 29px;
  font-size: 18px !important;
  margin-left: 80px;
  max-width: 25%;
}
footer img{
  max-height: 40% !important;
}
.social-media-handles{
  display: flex;
  justify-content: space-around;
  align-items: center;
  column-gap: 20px;
  height: fit-content;
  margin-left: 30px;
}
.social-media-handles button{
  border: none;
}
.social-media-handles button:hover{
  background-color: transparent;
}

.side-social{
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  margin-right: 20px;
  transform: translate(-50%, -50%);
}
.side-social button{
  border: none;
}
.side-social button:hover{
  background-color: transparent;
}

@media(max-width:900px){
  footer{
    flex-direction: column;
    height: fit-content;
    row-gap: 20px;
  }
  footer img{
    display: none;
  }
  .social-media-handles img {
    display: block;
}

  .contact, .address {
    min-width: 100%;
    text-align: center;
    margin: 0;
}
}

 ol.gradient-list > li, ol.gradient-list > li::before {
	 box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.05);
}

 .main .info_2_container{
  background-color: #c2e9e2;
 }
 .main .info_2 {
	 display: block;
	 margin: 0 auto;
	 width: 80%;
	 padding: 1rem;
}

.main .info_2 h1{
  font-size: 350%;
  padding-bottom: 2%;
}

@media (min-width:1000px){
  .main .info_2{
    width: 75%;
  }
}

@media (min-width:1200px){
  .main .info_2{
    width: 65%;
  }
}

@media (max-width:976px){
  .main .info_2 h1{
    font-size: 250%;
  }
}

@media (max-width:576px){
  .main .info_2 h1{
    font-size: 230%;
  }
}

 ol.gradient-list {
	 counter-reset: gradient-counter;
	 list-style: none;
	 margin: 1.75rem 0;
	 padding-left: 1rem;
}
 ol.gradient-list > li {
  background: white;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  counter-increment: gradient-counter;
  margin-top: 1rem;
  height: 4rem;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 120%;
  font-weight: 500;
}

@media (max-width:576px){
  ol.gradient-list > li {
    font-size: 100%;
  }
}

@media (min-width:876px){
  ol.gradient-list > li {
    margin: 4%;
  }
  ol.gradient-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width:350px){
  ol.gradient-list > li {
    font-size: 90%;
  }
}

 ol.gradient-list > li::before, ol.gradient-list > li::after {
	 background: linear-gradient(135deg, #83e4e2 0%, #a2ed56 100%);
	 border-radius: 1rem 1rem 0 1rem;
	 content: '';
	 height: 3rem;
	 left: -1rem;
	 overflow: hidden;
	 position: absolute;
	 top: -1rem;
	 width: 3rem;
}
 ol.gradient-list > li::before {
	 align-items: flex-end;
	 content: counter(gradient-counter);
	 color: #1d1f20;
	 display: flex;
	 font: 900 1.5em/1 'Montserrat';
	 justify-content: flex-end;
	 padding: 0.125em 0.25em;
	 z-index: 1;
}
 ol.gradient-list > li:nth-child(10n+1):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0.2) 0%, rgba(253, 220, 50, 0.2) 100%);
}
 ol.gradient-list > li:nth-child(10n+2):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0.4) 0%, rgba(253, 220, 50, 0.4) 100%);
}
 ol.gradient-list > li:nth-child(10n+3):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0.6) 0%, rgba(253, 220, 50, 0.6) 100%);
}
 ol.gradient-list > li:nth-child(10n+4):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0.8) 0%, rgba(253, 220, 50, 0.8) 100%);
}
 ol.gradient-list > li:nth-child(10n+5):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 1) 0%, rgba(253, 220, 50, 1) 100%);
}
 ol.gradient-list > li:nth-child(10n+6):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0.8) 0%, rgba(253, 220, 50, 0.8) 100%);
}
 ol.gradient-list > li:nth-child(10n+7):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0.6) 0%, rgba(253, 220, 50, 0.6) 100%);
}
 ol.gradient-list > li:nth-child(10n+8):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0.4) 0%, rgba(253, 220, 50, 0.4) 100%);
}
 ol.gradient-list > li:nth-child(10n+9):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0.2) 0%, rgba(253, 220, 50, 0.2) 100%);
}
 ol.gradient-list > li:nth-child(10n+10):before {
	 background: linear-gradient(135deg, rgba(162, 237, 86, 0) 0%, rgba(253, 220, 50, 0) 100%);
}
 ol.gradient-list > li + li {
	 margin-top: 2rem;
}
 
/* Social Side Bar <<< Start >>> */

.social-sidebar{
  border-radius: 0px 10px 10px 0px;
  background-color: #1d3557;
  padding: 18px 10px 18px 8px;
  height: fit-content;
  position: fixed;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 10000;
}

.social-med-btn{
  cursor: pointer;
}
.social-sidebar .social-med-btn:hover{
  color: #1d3557 !important;
}

.social-med-btn{
  border: 1.5px solid #fbfbf2;
  border-radius: 50%;
  padding: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fbfbf2;
}

.social-med-btn:hover{
  border: 1.5px solid #fbfbf2;
  background-color: #fbfbf2;
  color: #7f5690;
}

@media screen and (max-width: 500px){ /*mobile*/
  .social-sidebar{
    padding: 10px 5px 10px 4px;
  }
  .social-sidebar .social-med-btn{
    border: 0;
  }
  .social-med-btn{
    width: 30px;
    height: 30px;
    border: 1px solid white;
  }
  .social-med-btn i{
    font-size: 150% !important;
  }
}

/* Social Side Bar <<< End >>> */

.reg-btn{
  border-radius: 100px;
  padding: 13px 17px;
  min-width: max-content;
  font-weight: 600;
  background-color: #1d3557 !important;
  color: #fff !important;
}