@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;

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


/* Global Tag*/
h1{
    font-size: 2.5rem;
    font-weight: 700;
    color:rgb(35,35,85);

}

span{
    font-size: .9rem;
    color:#757373;

}
h6{
    font-size: 1.1rem;
    color:rgb(24,24,49);
}

/* Navigation */
nav{
    position:fixed;
    width:100%;
    /* height: 50px; */
    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: 999;
}

nav img{
    width:80px;
    cursor:pointer;
}

nav.navigation{
    display: flex;
}

#menu-btn{
    width:30px;
    height:30px;
}
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: 16 px;
    font-weight:500;
    transition: 0.3s ease;
}

nav .navigation ul li a:hover {
    color: #f8cc52;

}
/* Home */

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

#home h2{
    color:#fff;
    font-size: 2.1rem;
    letter-spacing: 1px;
    position: absolute;
    padding:250px 250px;
    padding-right: 500px;
    padding-left: 400px;

}

#home p {
    width: 100%;
    color:#fff;
    font-size:2rem;
    line-height:25 px;
    padding: 120px 50px;
   
}
#home ,btn{
    margin-top: 0px;
}
#home a{
    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-color: rgb(21,21,100);
    transition: 0.3s ease;
    
}

#home a.blue:hover {
    color:rgb(21,21,100);
    background: #fff;
}

#home a.yellow{
    color:#fff;
    background-color:#FDC93B;
    transition:0.3s ease;
}

#home a.yellow:hover {
    color:rgb(21,21,100);
    background: #fff;
}
/* features */
#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: 1 rem;
    font-weight: 400;
    color:rgb(70,70,87);
   
}

/* Courses */


#course{
    padding:8vw 8vw 0 8vw;
    text-align: center;
}
#course .course-box{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
    margin-top: 50px;

}
#courses .courses {
    text-align:start;
    background: #f9f9ff;
    height:100%;
    position: relative;

}
#course .courses img{
    width:100%;
    height:60%;
    background-size: cover;
    background-position: center;

}
#course .courses .details{
    padding:15px 15px 0 15px;
}
#course .courses .details{
    color:#fdc93B;
    font-size: .9rem;
}
#course .courses .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 */
#registration{
    padding:6vw 8vw 6vw 8vw;
    background-image: linear-gradient(rgba(99,112,116,0.5), rgba(81,91,233,0.5)),url("Image/formbg2.jpg");
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#registration .reminder{
    color:#fff;

}
#registration .reminder h1{
    color:#fff;
}
#registration .reminder .time{
    display:flex;
    margin-top: 40px;
}
#registration .reminder .time .date{
    text-align: center;
    padding:13px 33px;
    background-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 32px 0 rgba(31,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-color: #fff;
    border-radius: 8px;
    display:flex;
    flex-direction: column;
    padding:40px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
}
#registration .form input{
    margin:15px 0;
    padding:15px 10px;
    border:1px solid rgb(84,40,241);
    outline:none;
}
#registration .form input::placeholder{
    color:#413c3c;
    font-weight: 500;
    font-size: 0.9rem;
}
#registration .form .btn{
    margin-top: 20px;

}
#registration .form a.yellow {
    text-decoration: none;
    font-size: 0.9rem;
    padding:13px 35px;
    background-color: #fff;
    font-weight:600;
    border-radius:5px;
    color:#fff;
    background:#fdc93b;
    transition:0.3s ease;
}
#registration .form a.yellow:hover{
    color:rgb(21,21,100);
    background: #fff;
}

/* experts */
#experts{
    padding:8vw 8vw 0 8vw;
    text-align: center;
}
#experts .expert-box{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    grid-gap: 1rem;
    margin-top: 50px;
}

#experts .expert-box .profile{
    background: #fafaf1;
    padding:30px 10px ;
}
#experts .expert-box img{
    width:100%;
    height:60%;
    background-size: cover;
    background-position: center;

}
.pro-links{
    margin-top: 10px;

}
.pro-links i{
    padding:10px 13px;
    border:1px solid rgb(21,21,100);
    cursor: pointer;
}

.pro-linksi:hover{
background: rgb(21,21,100);
color:#fff;
border:1px solid rgb(21,21,100);
cursor:pointer;
transition: 0.3rem;
}


/* -------------------------------- */
#events{
    padding:8vw 8vw 0 8vw;
    text-align: center;
}
#events .event-box{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    grid-gap: 1rem;
    margin-top: 50px;
}

#events .event-box .profile{
    background: #fafaf1;
    padding:30px 10px ;
}
#events .event-box img{
    width:100%;
    height:60%;
    background-size: cover;
    background-position: center;

}
.pro-links{
    margin-top: 10px;

}
.pro-links i{
    padding:10px 13px;
    border:1px solid rgb(21,21,100);
    cursor: pointer;
}

.pro-linksi:hover{
background: rgb(21,21,100);
color:#fff;
border:1px solid rgb(21,21,100);
cursor:pointer;
transition: 0.3rem;
}
/* footer */
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 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.3sec ease;
}

footer li:hover{
    color:rgb(241,240,245);
    
}

footer p{
    color:#7b838a;
}
footer .subscribe{
    margin-top:20px;

}

footer input{
    width:220px;
    padding:15px 12px;
    background: #334f6c;
    border:none;
    outline:none;
    color:white;
}

footer .subscribe a{
    text-decoration: none;
    font-size: 0.9rem;
    padding: 12px 15px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;

}
#footer .subscribe a.yellow{
    color:#fff;
    background: #fdc93b;
    transition: 0.3sec ease;
}

#footer .subscribe a.yellow{
    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: #757373;
    color:#fff;
}

footer .copyright .pro-linksi:hover{
background-color: #fdc93B;
color:#2c2c2c;
}

@media (max-width:769px){
    nav{
        padding:15px 20px;
    }
    nav img{
        width:130px;
    }

}