/* !font import section */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/** universal code start*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
html {
  font-size: 62.5%;
  /* 1rem=10px */
}

p,
li,
a,
label,
button {
  font-family: "Open Sans", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  font-weight: 400;
  color: var(--headingcolor);
  line-height: 1.5;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}
:root {
  --navbarcolor: #12182b;
  --headingcolor: #d0f8f1;
  --textcolor: #e6dcef;
  --buttoncolor: #8150f1;
  --main-color: #0062ff;

  --supporting-color: #ebf3fe;
  --font-color: #424242;
  /* --bg-color: #ffffff; */
  --bg-color: #f7fcff;
  --heading-color: #000a19;
  --hero-heading-color: #003b99;
  --white-color: #ffffff;
  --para-color: #504e4d;
  --bnt-hover-bg-color: #003b99;
  --btn-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  --footer-bg-color: #040d12;
}
body{
    background-image: linear-gradient(
    to right top,
    #0a0a0a,
    #14141f,
    #181b32,
    #172347,
    #0c2c5d
  );
}

/** universal code end */

/* !header code start */
header{
  position: fixed;
  top: 0;
  z-index: 100;
}
.header-container {
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
.header-area {
  max-width: 140rem;
  margin: 0 auto;
}

.header-container .header-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 4rem;
  background-color: var(--navbarcolor);
}

.header-nav ul {
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: center;
  & li a {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.6rem;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: -0.2rem;
      left: 0;
      width: 0%;
      border-bottom: 0.2rem solid var(--buttoncolor);
      transition: all 0.3s linear;
    }
  }
  & li a:hover:after {
    width: 100%;
  }
}
.header-btn {
  padding: 1rem 3.2rem;
  background-color: var(--buttoncolor);
  border-radius: 10px;
 
  & a {
    font-weight: bold;
  }
}
.closeside {
  display: none;
}
.hide {
  display: none;
}

/* *main css start */
main {

  
  background-image: linear-gradient(
    to right top,
    #0a0a0a,
    #14141f,
    #181b32,
    #172347,
    #0c2c5d
  );
  padding-top: 8rem;
  position: relative;
}
.headingmain{
  display: flex;
  justify-content: center;
}

h1{
  
  font-size: 4rem;
  text-transform: uppercase;
  color: var(--buttoncolor);
  padding-top: 2rem;
  position: relative;

}
h1::before{
  content:"eat._.sleep._.code._.repeat!" ;
  position: absolute;
  width: 80%;
 
 border-right: 0.1px solid var(--main-color);
  text-transform: uppercase;
  /* font-size: 4rem; */
  color: var(--textcolor);
  overflow: hidden;
 animation: loader 2s linear infinite;
 
}
@keyframes loader {
  
  0%{
    width: 0;
  }
  50%{
    width: 100%;
  }
 100%{
  width: 0%;
 }
}

/*! main section text and vedio css*/

.main-section{
  max-width: 143rem;
  padding: 4rem;
 
  display: grid;
  grid-template-columns: repeat(2 ,1fr);
  align-items: center;
  gap: 7rem;
  
}

.main-section--text .main-section--text---heading .main-text1{
  font-size: 4rem;
  text-transform: capitalize;
  color: var(--headingcolor);
  letter-spacing: 0.1;

}
.main-section--text .main-section--text---heading .main-text2{
  font-size: 2.5rem;
  text-transform: capitalize;
  color: var(--buttoncolor);
}
.main-section--text .main--text--para{
  text-transform: capitalize;
  color: var(--textcolor);
  padding-top: 3rem;
}
.main-section--vedio .main-section--vedio1 .backgroundvedio{
  border-radius: 3rem;
     border: 0.5rem solid  #181b32;
  box-shadow:-2px 4px 61px 12px var(--buttoncolor);
   
 
}
.main--link{
  max-width: 30rem;
  padding: 1rem  2rem;
  background-color: var(--buttoncolor);
  border-radius: 10px;
  padding-top: 1rem;
  margin-bottom: 2rem;

  & a{
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
  }
}

.custom-shape-divider-bottom-1759947562 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.custom-shape-divider-bottom-1759947562 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1759947562 svg {
    position: relative;
    display: block;
    width: calc(116% + 1.3px);
    height: 61px;
}

.custom-shape-divider-bottom-1759947562 .shape-fill {
    fill: #FFFFFF;
}
.section-courses{
    background-image: linear-gradient(
    to right top,
    #0a0a0a,
    #14141f,
    #181b32,
    #172347,
    #0c2c5d
  );
  max-width: 143rem;
}


.section-courses--text{
  display: grid;
  place-items: center;
  padding: 3rem;
  & .section-courses--heading h3{
text-transform: capitalize;
font-size: 3rem;

    }
 
}
 .section-courses--heading{
    display: flex;
gap: 8px;
  

  }
  .cousdeh1{
    color: var(--headingcolor);
  }
  .cousdeh2{
    color: var(--buttoncolor);
  }

  .section-courses--para{
    padding: 2rem;
    padding-bottom: 1rem;
    text-transform: capitalize;
    & p{
      color: var(--textcolor);
    }
  }

  .course-live{
    max-width: 143rem;
    display: grid;
    grid-template-columns: repeat(3 ,1fr);
   align-items: center;
    padding: 5rem;
   padding-top: 2rem;
   border: 2px solid var(--buttoncolor);
   margin: 0 3rem;
   border-radius: 1rem;
   box-shadow:-2px 4px 61px 12px var(--buttoncolor);
    
  }

  .course-live--text{
    display: flex;
    flex-direction: column;
grid-column: 1 / span 2;
  }
  .course-live--text .course-live--h1{
    font-size: 3rem;
  text-transform: uppercase;

   & h3{
    color: var(--headingcolor);
   
    & span{
      color: var(--buttoncolor);
    }
   }

  }

  .course-live--points .points{
    padding: 1rem ;
    & li {
      color: var(--main-color);
      list-style: "📍";
    }
  }
 .course-live--time{
  display: flex;
  
  gap: 2rem;
  padding-top: 2rem;
  /* width: 2rem; */
  & .timearea{
   padding: 1rem 3.2rem;
  background-color:#a487ea;
  
  border-radius: 10px;
  box-shadow: var(--btn-box-shadow);
  & a{
    font-weight: bold;
    font-size: 3rem;
  }
 
  }

 }
 .course-live--time1{
  position: relative;
 
 }
  .course-live--time1::after{
    content: "Days";
    position: absolute;
    bottom:-3rem;
    left: 1.5rem;
    color: var(--headingcolor);
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: bold;
  }

  .course-live--time2{
  position: relative;
 
 }
  .course-live--time2::after{
    content: "HOURS";
    position: absolute;
    bottom:-3rem;
    left: 1.5rem;
    color: var(--headingcolor);
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: bold;
  }
   .course-live--time3{
  position: relative;
 
 }
  .course-live--time3::after{
    content: "MINUTES";
    position: absolute;
    bottom:-3rem;
    left: 1.8rem;
    color: var(--headingcolor);
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: bold;
  }

  .course-live--time4{
  position: relative;
 
 }
  .course-live--time4::after{
    content: "SECONDS";
    position: absolute;
    bottom:-3rem;
    left: 1.8rem;
    color: var(--headingcolor);
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: bold;
  }


  .course-live--logo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 2rem;
  }
  .course-live--logo .course-live-img img{
    padding-left: 2rem;
    box-shadow: 1px 0px 10px 4px var(--headingcolor);
    border-radius: 2rem;
  }
  .course-live--logo .live-image--heading1{
    font-size: 2rem;
   position: absolute;
   bottom: 8rem;
   margin-left: 5rem;
    text-transform: uppercase;
    color: var(--headingcolor);
   z-index: 100;
    padding: 1rem;
    background-color: var(--footer-bg-color);
    border-radius: 10px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    & span {
      color: var(--buttoncolor);
    }

  }
  .course-live--purchase {
   
   margin-top: 4rem;
    & a{
      font-size: 2.5rem;
      background-color: var(--buttoncolor);
      text-transform: uppercase;
      padding: 1rem;
      font-weight: bold;
      border-radius: 1rem;
    }

  }

  .recordedheading{
    font-size: 3.5rem;
     background-image: linear-gradient(
    to right top,
    #0a0a0a,
    #14141f,
    #181b32,
    #172347,
    #0c2c5d
  );
  max-width: 143rem;
  text-transform: capitalize;
  color: var(--headingcolor);
 display:flex;
 justify-content: center;
 
 & span{
    color: var(--buttoncolor);
  }
   
  }

  .recorded-courses{
    
        background-image: linear-gradient(
    to right top,
    #0a0a0a,
    #14141f,
    #181b32,
    #172347,
    #0c2c5d
  );
  }
.main-recorded--courses{
  max-width: 143rem;
  
  padding: 3rem 5rem;
  display: grid;
  grid-template-columns: repeat(2 ,1fr);
  gap: 5rem;
}
.r-c{
  border: 0.2rem solid var(--buttoncolor);
  border-radius: 2rem;
  box-shadow: 1px 0px 10px 4px var(--buttoncolor);
}
.main-rc-text h5{
  font-size: 2.5rem;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
  color: var(--headingcolor);
  & span {
    color: var(--buttoncolor);
  }
}
.main-rc-text p{
  font-size: 1.5rem;
  padding: 1rem 2rem;
}

.main-vedio{
  display: flex;
  flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 1rem;

}
.main-vedio img {
  display: block;
  margin: 0 auto;
  box-shadow: 1px 0px 10px 4px var(--headingcolor);
  border-radius: 1rem;
}
.main-vedio-link{
      padding: 1rem 3.2rem;
    background-color: var(--buttoncolor);
    border-radius: 10px;
    margin-top: 2rem;
    & a{
      font-weight: bold;
    }
}


.contact-section{
       background-image: linear-gradient(
    to right top,
    #0a0a0a,
    #14141f,
    #181b32,
    #172347,
    #0c2c5d
  );
  max-width: 143rem;
}
.contact-main-h1 h5{
  display: flex;
  justify-content: center;
  align-items: center;
  
    font-size: 4rem;
    color: var(--headingcolor);
    text-transform: capitalize;
    & span{
      color: var(--buttoncolor);
    }

}

.contact-main-h1 p{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2rem;
  
}
.contact-form{
  display: grid;
  grid-template-columns: repeat(3 , 1fr);
  padding: 4rem;
  border: 0.2rem solid var(--buttoncolor);
  border-radius: 2rem;
  box-shadow: 1px 0px 10px 4px var(--buttoncolor);
  
}
.contact-form1{
  grid-column: 1 / span 2;
}
.contact-form1 > .contact-main2 {
display: grid;
grid-template-columns: repeat(2 , 1fr);
gap: 20px;
}
.contact-name{
  display: flex;
  flex-direction: column;
  & label{
    font-size: 2rem;
    color: var(--headingcolor);
    text-transform: uppercase;
    font-weight: bold;
  }
  
}
.contact-common input{
    padding: 1rem 2rem;
    background-color: var(--buttoncolor);
    border-radius: 1rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    max-width: 30rem;
    
  }
  input::placeholder{
      color: var(--headingcolor);
      padding-left: 3rem;
    }
   .contact-message textarea {
border-radius: 1rem;
     background-color: var(--buttoncolor);
      padding-left: 3rem;
      font-size: 2rem;

   }
   textarea::placeholder{
    color: var(--headingcolor);
    padding: 5rem;
  
    font-size: 2rem;
    text-transform: capitalize;
   }
   .form-submit{
   padding-top: 6rem;
    padding: 3rem 5rem;
    & .form-button{
      background-color: var(--buttoncolor);
      padding: 1rem 4rem;
      border-radius: 1rem;
    }
   }
   .form-submit button{
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
   }


   .contact-img{
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .contact-img1 img{
    width: 100%;
    padding-left: 2rem;
   }
   .educator{
     background-image: linear-gradient(
    to right top,
    #0a0a0a,
    #14141f,
    #181b32,
    #172347,
    #0c2c5d
  );
  max-width: 143rem;
   }
 .section-educator{
  display: grid;
  grid-template-columns:repeat(2 , 1fr) ;
  align-items: center;
  padding: 4rem;
 }
 .educator-img img{
  width: 50%;
  height: auto;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  box-shadow: 1px 0px 10px 4px var(--buttoncolor);

 }
 .rohit-bhaiya{
  padding: 3rem;
  font-size: 4rem;
  text-transform: uppercase;
  color: var(--headingcolor);
  display: flex;
  justify-content: center;

 }
 .educator-details{
  & h6 {
font-size: 4rem;
color: var(--buttoncolor);
font-weight: bold;
text-transform: capitalize;

  }
 }

 footer{
  background-color: var(--footer-bg-color);
  max-width: 143rem;
 }
 .footer-main{
  display: grid;
  grid-template-columns: repeat(4 ,1fr);
  align-items: center;
  padding: 4rem;
 }
 .footer-name {
    & h6 {
    font-size: 2rem;
    color: var(--buttoncolor);
    text-transform: uppercase;
    font-weight: bold;
  }
& p 
{
  font-size: 1.5rem;
  font-weight: 500;
  padding-top: 2rem;
}
 }
 .footer-connect {
    & h6 {
    font-size: 2rem;
    color: var(--buttoncolor);
    text-transform: uppercase;
    font-weight: bold;
  }
& p 
{
  font-size: 1.5rem;
  font-weight: 500;
  padding-top: 2rem;
}
 }

 .footer-quike-link{
  & h6 {
    font-size: 2rem;
    color: var(--main-color);
    text-transform: uppercase;
    font-weight: bold;
  }
  & ul{
    font-size: 1.5rem;
  font-weight: 500;
  padding-top: 2rem;
  color: white;
  }
 }
 .footer-term{
  & h6 {
    font-size: 2rem;
    color: var(--main-color);
    text-transform: uppercase;
    font-weight: bold;
  }
  & ul{
    font-size: 1.5rem;
  font-weight: 500;
  padding-top: 2rem;
  color: white;
  }
 }