*{
        box-sizing: border-box;
    }
    :root{
    --main-color:#064FB2;
    --primary-color:#FAB51A;
    --text-color:#fff;
    --primary-text-color:rgb(65, 62, 62);
    }
    body{
        height: 100%;
        width: 100%;
        margin: 0;
        background-color: #fff;
        overflow-x: hidden;
        color: #34444b;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    a{
        text-decoration: none;
    }
    .colorfull{
        color:var(--primary-color);
    }
/* Navbar */
    .navbar input[type="checkbox"],
    .navbar .hamburger-lines{
        display: none;
    }
    .container{
        margin: 0 8%;
    }
    .navbar{
        width: 100%;
        background: #fff;
        color: #000;
        height: 40px;
        z-index: 100;
        
    }
    .navbar-container{
        display: flex;
        justify-content: space-between;
        height: 64px;
        align-items: center;
    }
    .menu-items{
        order: 2;
        display: flex;
    }
    .logo{
        order: 1;
        font-size: 2rem;
    }
    .menu-items li{
        list-style: none;
        margin-left: 1.5rem;
        font-size: 1rem;
    }
    .navbar a{
        color: var(--primary-text-color);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease-in-out;
    }
    .navbar a:hover{
        color:#000;
    }
    .navbar-btn{
        border: 2px solid var(--main-color);
        padding: 1rem 2rem;
        color: #fff;
        border-radius: 2rem;
    }
    .navbar-btn-two{
        background-color: var(--main-color);
        padding: 1rem 2rem;
        color: #fff;
        border-radius: 2rem;
    }
/* End Navbar */

/* Title & Sub-Title */
    .section-heading{
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    .section-title{
        font-size: 3rem;
        color: var(--main-color);
    }
    .section-sub-title{
        font-size: 0.9rem;
        margin: 0 25rem;
        margin-top: -2.5rem;
    }
/* End Title & Sub-Title */

/* Here Section */
    .hero{
        background-image: url(https://raw.githubusercontent.com/httpsadnankhan/education-landing-page/main/assets/img/hero.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 90vh; 
    }
    .hero-container{
        margin: 2% 8%;
    }
    .hero-heading{
        padding-top: 5rem;
        margin-right: 38rem;
    }
    .hero-welcome{
        display: flex;
        flex-direction: row;
        gap: 1rem;
        color: #fff;
        align-items: center;
    }
    .welcome-line{
        content: "";
        background-color: var(--primary-color);
        height: 0.2rem;
        width: 5rem;
        display: flex;
    }
    .welcome-text{
        font-size: 1.1rem;
        font-style: italic;
    }
    .hero-text{
        color: #fff;
        display: flex;
        flex-direction: column;
    }
    .hero-title{
        font-size: 4.5rem;
    }
    .hero-sub-title{
        font-size: 1.1rem;
        margin-top: -2rem;
        color: #fdf9f9;
    }
    .hero-cta{
        display: flex;
        flex-direction: row;
        gap:2rem;
        margin-top: 2rem;
        align-items: center;
        margin-bottom: 2rem;
    }
    .hero-btn{
        background-color: var(--primary-color);
        padding: 1rem 2rem;
        color: #fff;
        border-radius: 2rem;
        border: 1px solid var(--primary-color);
    }
    .hero-btn-two{
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;
        border: 1px solid var(--primary-color);
        padding: 1rem 2rem;
        border-radius: 2rem;
    }
    .hero-icon{
        color: var(--primary-color);
        font-size: 1.2rem;
    }
    .hero-btn-demo{
        color: #fff;
    }
/* End Hero Section */

/* Client Section */
    .client-container{
        margin: 2% 8%;
    }
    .client-items{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        justify-items: center;
    }
    .client-img{
        height: 50px;
        filter:grayscale(10);
    }
/* End Client Section */

/* Feature Section */
    .feature-container{
        margin: 2% 8%;
    }
    .feature-items{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        justify-items: center;
        margin-top: 1rem;
    }
    .feature-items-list{
        background-color: #fff;
        border-radius: 0.4rem;
        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        width: 350px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .feature-icon{
        background-color:var(--primary-color);
        color: #fff;
        padding: 1rem;
        font-size: 2rem;
        text-align: center;
        border-radius: 50%;
        width: 65px;
        height: 65px;
    }
    .feature-item-title{
        font-size: 1.5rem;
        font-weight: 600;
    }
    .feature-item-sub-title{
        font-size: 1rem;
        color: var(--primary-text-color);
    }
/* End Feature Section */

/* About Section */
    .about-container{
        margin: 2% 8%;
        background-image: url(https://raw.githubusercontent.com/httpsadnankhan/education-landing-page/main/assets/img/about.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 90vh;
        border-radius: 1rem;
    }
    .about-heading{
        margin-left: 38rem;
        padding-top: 6rem;
        display: flex;
        flex-direction: column;
    }
    .about-welcome{
        display: flex;
        flex-direction: row;
        gap: 1rem;
        color: #fff;
        align-items: center;
    }
    .about-line{
        content: "";
        background-color: var(--primary-color);
        height: 0.2rem;
        width: 5rem;
        display: flex;
    }
    .about-text{
        font-size: 1.1rem;
        font-style: italic;
        color: var(--primary-color);
    }
    .about-title{
        color: #fff;
        font-size: 2.2rem;
        margin-right: 2rem;
        line-height: 3rem;
    }
    .about-sub-title{
        font-size: 1rem;
        color: #fff;
        margin-right: 5rem;
    }
    .about-feature{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 2rem;
    }
    .about-feature-item{
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;
    }
    .about-icon{
        background-color: var(--primary-color);
        padding: 0.5rem;
        border-radius: 50%;
        color: #fff;
    }
    .about-feature-item-title{
        font-size: 1.2rem;
        color: #fff;
    }
    .about-button{
        margin-top: 2rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    .about-btn{
        background-color: var(--primary-color);
        color: #fff;
        padding: 1rem 2rem;
        border-radius: 2rem;
    }
/* End About Section */

/* Courses Section */
    .courses-container{
        margin: 2% 8%;
    }
    .courses-item{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        justify-items: center;
        justify-content: center;
        margin-top: 1rem;
    }
    .courses-item-list{
        position: relative;
        background-color: #fff;
        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
        width: 400px;
        border-radius: 0.8rem;
    }
    .course-img{
        width: 400px;
        height: 300px;
        border-radius: 0.8rem;
    }
    .course-about{
        margin: 1rem;
        display: flex;
        flex-direction: column;
        margin-top: -1rem;
    }
    .course-item-title{
        font-size: 1.5rem;
        color: #000;
    }
    .course-item-sub-title{
        font-size: 1rem;
        color: #34444b;
        margin-top: -0.2rem;
    }
    .course-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 2rem 1rem;
        gap:3rem;
    }
    .course-info i{
        color:#000;
        font-size: 1.2rem;
    }
    .course-info span{
        color: #000;
        font-size: 1rem;
        font-weight: 400;
    }
/* End Courses Section */

/* Feedback Section */
    .feedback-container{
        margin: 2% 8%;
    }
    .feedback-item{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
    .feedback-heading{
        display: flex;
        flex-direction: row;
        gap: 2rem;
        align-items: center;
    }
    .feedback-line{
        content: "";
        display: flex;
        height: 0.2rem;
        width: 5rem;
        background-color: var(--primary-color);
    }
    .feedback-title{
        color: var(--primary-color);
        font-weight: 300;
    }
    .feedback-sub-title{
        font-size: 3rem;
        color: var(--main-color);
        font-weight: 600;
    }
    .feedback-description{
        font-size: 1rem;
        color:#34444b;
        margin-right: 10rem;
    }
    .feedback-footer-text{
        font-size: 0.9rem;
        color: #000;
        display: flex;
        flex-direction: column;
    }
    .feedback-button{
        margin-top: 2rem;
    }
    .feedback-btn{
        background-color: var(--primary-color);
        padding: 1rem 2rem;
        border-radius: 2rem;
        color: #fff;
        margin-top: 2rem;
    }
    .feedback-item-list-two{
        display: flex;
        flex-direction: column;
    }
    .feedback-img{
        width: 450px;
        border-radius: 1rem;
        margin: 0 auto;
    }
    .client-feedback{
        background-color: #fff;
        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 1rem;
        margin-top: -2rem;
        border-left: 4px solid var(--main-color);
    }
    .feedback-text{
        font-size: 1rem;
        margin: 2rem 5rem;
    }
    .client-info{
        display: flex;
        flex-direction: column;
        margin: 2rem 5rem;
    }
    .name{
        font-size: 1.4rem;
        color: #000;
        font-weight: 600;
    }
    .job{
        font-size: 0.9rem;
        font-style: italic;
    }
    .feedback-arrow{
        justify-content: center;
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .feedback-next-arrow{
        background-color: var(--primary-color);
        color: #fff;
        padding: 1rem;
        margin-bottom: 1rem;
        font-size: 1.4rem;
        border-radius: 0.5rem;
    }
/* End Feedback Section */

/* Newsletter Section */
    .newsletter-container{
        margin: 2% 8%;
        background-color: var(--main-color);
        border-radius: 1rem;
    }
    .newsletter-item{
        padding: 4rem 22rem;
    }
    .newsletter-title{
        color: #fff;
        font-size: 2.5rem;
        text-align: center;
    }
    .newsletter-sub-title{
        font-size: 0.8rem;
        color: #fdf9f9;
        font-style: italic;
        text-align: center;
        margin-top: -2rem;
    }
    .input-group{
        display: flex;
        justify-content: center;
    }
    .email{
        background-color: whitesmoke;
        border: none;
        height: 3rem;
        width: 15rem;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        padding-left: 1rem;
    }
    .button{
        background-color: var(--primary-color);
        color: #fff;
        border: none;
        outline: none;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }
/* End Newsletter Section */ 

/* Footer Section */
    .footer{
        background-image: url(https://raw.githubusercontent.com/httpsadnankhan/education-landing-page/main/assets/img/footer.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-left-radius: 3rem;
        border-top-right-radius: 3rem;
    }
    .footer-container{
        margin: 2% 8% 0 8%;
    }
    .footer-item{
        display: grid;
        grid-template-columns: 1fr 2fr;
        padding-top: 5rem;
        padding-bottom: 2rem;
        gap: 2rem;
    }
    .footer-logo{
        font-size: 1.5rem;
        color: #fff;
        font-weight: 500;
    }
    .footer-text{
        color: #fff;
    }
    .footer-icons{
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .footer-icons i{
        background-color: var(--primary-color);
        color: #fff;
        padding: 1rem;
        font-size: 1.1rem;
        border-radius: 50%;
    }
    .footer-item-list-two{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        
        gap: 10rem;
    }
    .footer-menu{
        display: flex;
        flex-direction: column;
        margin: 0;
        gap: 0.4rem;
    }
    .footer-menu-title{
        font-size: 1.5rem;
        color: #fff;
        font-weight: 500;
    }
    .footer-menu-title::after{
        content: "";
        display: flex;
        height: 0.2rem;
        width: 4rem;
        background-color: var(--primary-color);
    }
    .footer-menu a{
        color: #fff;
        font-size: 0.9rem;
    }
    .footer-copyright{
        display: flex;
        flex-direction: column;
        text-align: center;
        padding-bottom: 1rem;
        color: #fff;
    }
    .credit a{
        color: var(--primary-color);
    }
/* End Footer Section */