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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  font-family: "Poppins", sans-serif;
}

/* Global Tags */

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: rgb(35, 35, 85);
}

span {
  font-size: 0.9rem;
  color: #757373;
}

h6 {
  font-size: 1.1rem;
  color: rgb(24, 24, 49);
}
nav {
    position: fixed;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 8vw;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 99999;
  }
  nav img {
    width: 150px;
    cursor: pointer;
  }

  
nav .navigation {
    display: flex;
  
  }
  
  nav .navigation ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  nav .navigation ul li {
    list-style: none;
    margin-left: 30px;
  }
  
  nav .navigation ul li a {
    text-decoration: none;
    color: rgb(21, 21, 100);
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s ease;
  }
  
  nav .navigation ul li a.Active,
  nav .navigation ul li a:hover {
    color: #FDc93D;
  }
  
  #menu-btn {
    width: 30px;
    height: 30px;
    display: none;
  }
  
  #menu-close {
    width: 30px;
    height: 30px;
    display: none;
  }


  #Home {
    background-image: linear-gradient(rgba(9, 5, 54, 0.3), rgba(5, 4, 46, 0.7)), url('../img/back.jpg');
    width: 100%;
    height: 100vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 40px;
  }
  

  #Home h2 {
    color: #fff;
    font-size: 2.2rem;
    letter-spacing: 1px;
  }
  
  #Home p {
    width: 50%;
    color: #fff;
    font-size: 0.9rem;
    line-height: 25px;
  }
  



  #Home .btn {
    margin-top: 30px;
  }
  
  #Home a {
    margin: 0px 5px;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 13px 35px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
  }
  
  #Home a.blue {
    color: #fff;
    background: rgb(21, 21, 100);
  }
  
  #Home a.blue:hover {
    color: rgb(21, 21, 100);
    background: #fff;
    transition: 0.3s ease;
  }
  
  
  #Home a.yellow {
    color: #fff;
    background: #FDc93D;
    transition: 0.3s ease;
  }
  
  
  #Home a.yellow:hover {
    color: rgb(21, 21, 100);
    background: #fff;
  }
  
  
  /* Features Sectio --------------------------------------------------------------------------------------------------- */
  

  #features {
    padding: 5vw 8vw 0 8vw;
    text-align: center;
  }
  
  #features .fea-base {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
    margin-top: 50px;
  }
  
  #features .fea-box {
    background: #f9f9ff;
    text-align: start;
  }
  
  #features .fea-box i {
    font-size: 2.3rem;
    color: rgb(44, 44, 80);
  }
  
  #features .fea-box h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(46, 46, 59);
    padding: 13px 0 7px 0;
  }
  
  #features .fea-box p {
    font-size: 1rem;
    font-weight: 400;
    color: rgb(70, 70, 87);
  }
  
  
  
  /* Course Sectio ------------------------------------------------------------------------------------------------------*/
  
  #Courses {
    padding: 8vw 8vw 6vw 8vw;
    text-align: center;
  }
  
  #Courses .Courses-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
    margin-top: 50px;
  }
  
  #Courses .Course {
    text-align: start;
    background: #F9f9ff;
    height: 100%;
    position: relative;
  }
  
  #Courses .Course img {
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: center;
  }
  
  #Courses .Course .details {
    padding: 15px 15px 0 15px;
  }
  
  #Courses .Course .details i {
    color: #FDc93D;
    font-size: .9rem;
  }
  
  #Courses .Course .cost {
    background-color: rgb(74, 74, 136);
    color: #fff;
    line-height: 70px;
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    bottom: 100px;
  }
  
  
  /* Registration Sectio ------------------------------------------------------------------------------------------------*/
  
  #registration {
    padding: 8vw 8vw 6vw 8vw;
    background-image: linear-gradient(rgba(99, 112, 168, 0.5), rgba(81, 91, 233, 0.5)), url('../img/signup.jpg');
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  #registration .riminder {
    color: #fff;
  }
  
  #registration .riminder h1 {
    color: #fff;
  }
  
  #registration .riminder .time {
    display: flex;
    margin-top: 40px;
  }
  
  #registration .riminder .time .date {
    text-align: center;
    padding: 13px 33px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 32px 0 rgba(32, 38, 135, 0.37);
    border-radius: 10px;
    margin: 0 5px 10px 5px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  #registration .form {
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    box-shadow: 0 8px 32px 0 rgba(32, 38, 135, 0.37);
  }
  
  #registration input {
    margin: 15px 0;
    padding: 15px 10px;
    border: 1px solid rgb(84, 84, 241);
    outline: none;
  }
  
  #registration input::placeholder {
    color: #413c3c;
    font-weight: 500;
    font-size: 0.9rem;
  }
  
  #registration .btn {
    margin-top: 20px;
  }
  
  #registration a {
    margin: 0px 5px;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 13px 35px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
  }
  
  #registration a.yellow {
    color: #fff;
    background: #FDc93D;
    transition: 0.3s ease;
  }
  
  
  #registration a.yellow:hover {
    color: rgb(21, 21, 100);
    background: #fff;
  }
  
  
  /* Experts Sectio------------------------------------------------------------------------------------------------------*/
  

  #experts {
    padding: 8vw 8vw 6vw 8vw;
    text-align: center;
  }
  
  #experts .Experts-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1rem;
    margin-top: 50px;
  }
  
  #experts .Experts-box .Profiles {
    background: #f1f1f1;
    padding: 30px 10px;
  }
  
  .pro-links {
    margin-top: 10px;
  }
  
  .pro-links i {
    padding: 10px 13px;
    border: 1px solid rgb(21, 21, 100);
    cursor: pointer;
    transition: 0.3s ease;
  }
  
  .pro-links i:hover {
    background: rgb(21, 21, 100);
    color: #fff;
    border: 1px solid rgb(21, 21, 100);
    cursor: pointer;
  }
  
  
  /* Footer Sectio -------------------------------------------------------------------------------------------------------------*/
  
  footer {
    padding: 8vw;
    background-color: #101c32;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  
  footer .footer-col {
    padding-bottom: 40px;
  }
  
  .footer-col h3 {
    color: rgb(241, 240, 245);
    font-weight: 600;
    padding-bottom: 20px;
  }
  
  footer li {
    list-style: none;
    color: #7b838a;
    padding: 10px 0;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s ease;
  }
  
  footer li:hover {
    color: rgb(241, 240, 245);
  }
  
  footer p {
    color: #7b838a;
  }
  
  footer .sebscraib {
    margin-top: 20px;
  }
  
  footer input {
    width: 220px;
    padding: 15px 12px;
    background: #334F6C;
    border: none;
    outline: none;
    color: #fff;
  }
  
  
  footer .sebscraib a {
    text-decoration: none;
    font-size: 0.9rem;
    padding: 15px 15px;
    background-color: #fff;
    font-weight: 600;
  }
  
  
  footer .sebscraib a.yellow {
    color: #2c2c2c;
    background: #FDc93D;
    transition: 0.3s ease;
  }
  
  
  footer .sebscraib a.yellow:hover {
    color: rgb(21, 21, 100);
    background: #fff;
  }
  
  footer .copyright {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
  }
  
  footer .copyright p {
    color: #fff;
  }
  
  
  footer .copyright .pro-links {
    margin-top: 0px;
  }
  
  footer .copyright .pro-links i {
    background-color: #5f7185;
    color: #fff;
  }
  
  footer .copyright .pro-links i:hover {
    background-color: #FDc93D;
    color: #2c2c2c;
  }
  




/* about*/
  #about-home{
    background-image: linear-gradient(rgba(9, 5, 54, 0.3), rgba(5, 4, 46, 0.7)), url('../img/back.jpg');
    width: 100%;
    height: 60vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 40px;
  }
  #about-home h2{
    color: #fff;
    font-size: 2.2rem;
    letter-spacing: 1px;
  }
#about-container{
  display: flex;
  align-items: center;
  padding: 8vw 8vw 2vw 8vw;
}
#about-container .about-img{
width: 60%;
padding-right: 60px;
}
#about-container .about-img img{
  width: 100%;
  }
#about-container .about-text{
  width: 40%;

  }
  #about-container .about-text h2{
    color: #293038 ;
    padding-bottom: 15px;
  }
  #about-container .about-text p{
    color: #686F7A ;
  font-weight: 300;
  }
  #about-container .about-text .about-fe{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 30px;
  }

  #about-container .about-text .about-fe img{
    width: 50px;
    background-size: cover;
    background-position: center;
  }
  #about-container .about-text .about-fe .fe-text{
    width: 90%;
    margin-right: 20px;

  }

  #about-container .about-text .about-fe .fe-text h5{
    font-size: 16px;
    color: #293038;
  }


#trust{
  text-align: center;
  padding:8vw ;

}
#trust .trust-img{
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#trust .trust-img img{
width: 90px;
height: auto;
}

/* Blog */
#blog-container{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8vw;
}
#blog-container .blogs{
  width: 60%;
}
#blog-container .blogs .post{
padding-bottom: 60px;
}
#blog-container .blogs .post h3{
color: #293038;
padding: 15px 0 10px 0;
}
#blog-container .blogs .post p{
  color: #757373;
 padding-bottom:20px ;
  }
  #blog-container .blogs .post a{
text-decoration: none;
font-size: 0.9rem;
padding: 13px 35px;
background-color: rgb(21, 21, 100);
color: #ffff;
border-radius: 5px;
font-weight: 600;
  }
#blog-container .cate{
  width: 30%;
}
#blog-container .cate h2{
padding-bottom: 7px;
}
#blog-container .cate a{
  text-decoration: none;
  color: #757373;
  font-weight: 500;
  line-height: 45px;
}
#blog-container .blogs img{
  width: 100%;
  border-radius: 19px;
}

#blog-container .blogpost{
  width: 60%;
  margin: 0 auto;

}

#blog-container .blogpost p{
  text-align: justify;
  padding-bottom: 60px !important;
}




  /* Coruse inner */
  #course-inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8vw;
    
    }
    
    #course-inner .overview{
      width: 70%;
    }
    
    #course-inner .overview .course-img{
    width: 100%;
    height: 60vh;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
    }
    #course-inner .overview .course-head .c-name{
      width: 70%;
    }
    #course-inner .overview .course-head .c-name h2{
      color: #294029;
    }
    #course-inner .overview .course-head .c-name .star{
      margin: 6px 0;
    }
    #course-inner .overview .course-head .c-name p{
      font-size: 15px;
    }
    #course-inner .overview .course-head .c-name .star i{
      color:#FDC93B ;
    }
    #course-inner .overview .course-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    #course-inner .overview .course-head  span{
      padding: 16px 22px ;
     
      color:#5838fc ;
      font-size:24px ;
      font-weight: 700;
      border-radius: 5px;
      background-color: rgba(88, 56, 252, 0.1);
    }
    
    #course-inner .learn p{
    
      font-size: 15px;
      padding-bottom: 15px;
    }
    #course-inner .learn p i{
    
    color: #653ce4;
    font-weight: 700;
    margin-right: 2;
    }
    #course-inner .tutor {
    
    display: flex;
    
      }
      #course-inner .tutor img{
    
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 20px;
        
          }
      
      
        #course-inner h3{
          padding: 35px 0 25px 0;
          color: #293038;
        }
        #course-inner p{                     
      color: #293038;
        }
        #course-inner hr{                     
      height: 1px;
      background: rgba(236, 226, 229, 0.5);
      margin-top: 40px;
            }
    #course-inner .tutor h5{
      font-size: 15px;
    }
          
        #course-inner .enroll{
          width: 300px;
          padding: 0 30px 30px 30px;
          border-radius: 11px;
          box-shadow:0px 20px 40px rgb(11 2 55 /8%);
        }
    
        #course-inner .enroll h3{
          padding-bottom: 10px;
        }
    
        #course-inner .enroll p{
          font-size: 15px;
          color:#64626e ;
          margin: 15px 0;
        }
    
        #course-inner .enroll p i{
    
          color: #653ce4;
          font-weight: 500;
          margin-right: 18px;
          width: 16px;
          line-height: 16px;
          height: 16px;
          text-align: center;
          }
          #course-inner .enroll .enroll-btn{
            padding: 25px 0 20px 0;
            margin:auto ;
            text-align: center;
          }
          #course-inner .enroll .enroll-btn a{
            text-decoration: none;
            font-size: .8rem;
            padding: 13px 45px;
            border-radius: 5px;
            font-weight: 600;
            color: #ffff;
            background:rgb(50, 50, 136) ;
          }
        


/* contact */


/* contact ------------------------------------------------------------------------------------------------------*/

#contact {
  padding: 8vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#contact .getin {
  width: 350px;
}

#contact .getin h2 {
  color: #2c234d;
  font-size: 30px;
  font-weight: 800;
  line-height: .8;
  margin-bottom: 16px;
}

#contact .getin p {
  color: #686875;
  line-height: 24px;
  margin-bottom: 33px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e5e4ed;
}

#contact .getin h3 {
  color: #2c234d;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 15px;
}

#contact .getin .getin-detail div {
  display: flex;
}

#contact .getin .getin-detail div .git {
  font-size: 16px;
  line-height: 22px;
  color: #5838fc;
  margin-right: 20px;
}

#contact .getin .getin-detail div p {
  font-size: 14px;
  border-bottom: none;
  line-height: 22px;
  margin-right: 15px;
}

#contact .getin .getin-detail .pro-links i {
  margin-right: 8px;
}

#contact .form {
  width: 60%;
  background: #f7f6fa;
  padding: 40px;
  border-radius: 10px;
}

#contact .form h4 {
  font-size: 24px;
  color: #2c234d;
  line-height: 30px;
  margin-bottom: 8px;
}


#contact .form .form-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#contact .form .form-row input {
  width: 48%;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
  border: none;
  background: #fff;
  color: #7e7c87;
  outline: none;
  padding: 20px 30px;
  margin-bottom: 20px;
}

#contact .form .form-col input,
#contact .form .form-col textarea {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
  border: none;
  background: #fff;
  color: #7e7c87;
  outline: none;
  padding: 20px 30px;
  margin-bottom: 20px;
}

#contact .form button {
  font-size: .9rem;
  padding: 13px 25px;
  background: rgb(21, 21, 100);
  border-radius: 5px;
  outline: none;
  border: none;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
}

#map {
  width: 100%;
  height: 70vh;
  margin-bottom: 8vw;
}

#map iframe {
  width: 100%;
  height: 100%;
}





  @media (max-width: 769px){
    nav {
        padding: 15px 20px;
      }
      nav img {
        width: 130px;
      }
      #menu-btn {
        width: 30px;
        height: 30px;
        display: initial;
      }
      #menu-close {
        font-size: 1.2rem;
        display: initial;
        padding: 30px 0 20px 20px;
        color: #fff;
    
      }

      nav .navigation ul {
        position: absolute;
        top: 0;
        right: -220px;
        width: 220px;
        height: 100vh;
        background-color: rgba(17, 20, 104, 0.45);
        backdrop-filter: blur(4.5px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        transition: 0.3s ease;
      }
      nav .navigation ul.active {
        right: 0;
      }
      nav .navigation ul li {
        padding: 20px 0 20px 40px;
        margin-left: 0;
      }
    
      nav .navigation ul li a {
        color: #fff;
      }
      
  #Home p {
    width: 90%;
  }

  #Home {
    padding-top: 0px;
  }

  #features {
    padding: 8vw 4vw 0 4vw;
    text-align: center;
  }

  #Courses {
    padding: 8vw 4vw 0 4vw;
  }

  #registration {
    padding: 8vw 4vw 6vw 4vw;
    height: 800px;
    

  }

  #registration {
    margin-top: 5rem;
  }

  #registration .riminder .time {
    display: flex;
    flex-wrap: wrap;

    margin-top: 40px;
  }

  footer .copyright .pro-links i {
    margin-top: 15px;
  }

/* About */
#about-container{

  padding: 8vw 4vw 2vw 4vw;
}
#about-container .about-img{
  padding-right: 30px;
}

#trust .trust-img img{
  width: 50px;
  height: auto;
}
/* Blog */
#blog-container{

  padding: 8vw 4vw;
}
#blog-container .blogpost {
  width: 100%;
margin-top: 30px;
}
#blog-container .blogpost img {
  width: 100%;
  height: 50vh;
 object-fit: cover;
}
/* course innner */
.cb{
  width: 100%;
}

#course-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 8vw  4vw;
 
}
#course-inner .overview{
  width: 100%;
  
}

#course-inner .overview .course-img{
  width: 100%;
  height: 100%;

}

#course-inner .enroll{
  margin-top: 25px;
}

  /* contact-----------------------------------------------------------------------------------------------------*/

  #contact {
    padding: 8vw 4vw;
  }

  #contact .getin {
    width: 250px;
  }
  }







  @media (max-width: 475px) {

    #Home h2 {
        color: #fff;
        font-size: 2rem;
        letter-spacing: 1px;
      }
    
      #registration .riminder {
        text-align: center;
      }
    
      #registration {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
      }
    
      #registration .riminder .time {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
        margin-bottom: 40px;
      }
    
      footer .copyright {
        text-align: center;
        justify-content: center;
      }
      footer .sebscraib a.yellow {
        color: #2c2c2c;
        background: #FDc93D;
        transition: 0.3s ease;
        display: block;
        margin-top: 12px;
        width: 67%;
      }

/* About */
#about-container{
  flex-direction: column;
}

#about-container .about-img{
  width: 100%;
  padding-right: 0px;
}
#about-container .about-text{
  width: 100%;
  padding-bottom: 20px;
}



#trust .trust-img{
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}
#trust .trust-img img{
  width: 60px;
  margin: 10px 15px ;
  height: auto;
}

/* blog */
#blog-container{
  flex-direction: column;
}
#blog-container .blogs{
  width: 100%;
}
#blog-container .cate{
  width: 100%;
}
#blog-container .blogpost {
  width: 100%;
margin-top: 70px;
}
#blog-container .blogpost img {
  width: 100%;
  height: 50vh;
 object-fit: cover;
}
#course-inner .overview .course-head .c-name  {
  width: 50%;
}
#course-inner .overview .course-head .c-name h2  {
  font-size: 22px;
}

#course-inner .overview .course-head  span {
font-size: 22px;
}


 /* contact -----------------------------------------------------------------------------------------------------*/
 #contact {
  padding: 8vw 4vw;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#contact .getin {
  width: 100%;
  margin-bottom: 30px;
}

#contact .form {
  width: 100%;
  padding: 40px 30px;
}

#contact .form .form-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  margin-top: 30px;
}

#contact .form .form-row input {
  width: 100%;
}

  }


  @media(max-width:376px){
    footer input{
      width: 100%;
      margin-bottom: 20px;
    }
  }