/* Navbar */
    @media (max-width:768px) {
        .container{
            margin: 0 2%;
        }
    }
    @media (max-width: 1030px){
        .navbar{
            opacity: 0.95;
        }
        .navbar-container input[type="checkbox"],
        .navbar-container .hamburger-lines{
            display: block;
        }
        .navbar-container{
            display: block;
            position: relative;
            height: 64px;
        }
        .navbar-container input[type="checkbox"]{
            position: absolute;
            display: block;
            height: 32px;
            width: 30px;
            top: 20px;
            left: 20px;
            z-index: 5;
            opacity: 0;
            cursor: pointer;
        }
        .navbar-container .hamburger-lines{
            display: block;
            height: 28px;
            width: 35px;
            position: absolute;
            top: 5px;
            left: 20px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .navbar-container .hamburger-lines .line{
            display: block;
            height: 4px;
            width: 100%;
            border-radius: 10px;
            background: #333;
        }
        .navbar-container .hamburger-lines .line1{
            transform-origin: 0% 0%;
            transition: transform 0.3s ease-in-out;
        }
        .navbar-container .hamburger-lines .line2{
            transition: transform 0.2s ease-in-out;
        }
        .navbar-container .hamburger-lines .line3{
            transform-origin: 0% 100%;
            transition: transform 0.3s ease-in-out;
        }
        .navbar .menu-items{
            padding-top: 100px;
            background: #fff;
            height: 100vh;
            max-width: 300px;
            transform: translate(-150%);
            display: flex;
            flex-direction: column;
            margin-left: -40px;
            padding-left: 40px;
            transition: transform 0.5s ease-in-out;
            box-shadow:  5px 0px 10px 0px #aaa;
            overflow: scroll;
        }
        .navbar .menu-items li{
            margin-bottom: 1.8rem;
            font-size: 1.1rem;
            font-weight: 500;
        }
        .logo{
            position: absolute;
            top: -30px;
            right: 15px;
            font-size: 2.1rem;
        }
        .navbar-container input[type="checkbox"]:checked ~ .menu-items{
            transform: translateX(0);
        }
        .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
            transform: rotate(45deg);
        }
        .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
            transform: scaleY(0);
        }
        .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
            transform: rotate(-45deg);
        }
    }
    @media (max-width: 500px){
        .navbar-container input[type="checkbox"]:checked ~ .logo{
            display: none;
        }
    }
/* End Navbar */

/* Title & Sub-Title */
    @media (max-width:600px) {
        .section-title{
            font-size: 2.5rem;
            color: var(--main-color);
        }
        .section-sub-title{
            font-size: 0.9rem;
            margin: 0 2rem;
            margin-top: -2rem;
        }
    }
    @media (min-width:601px)and (max-width:800px) {
        .section-title{
            font-size: 2.5rem;
            color: var(--main-color);
        }
        .section-sub-title{
            font-size: 0.9rem;
            margin: 0 5rem;
            margin-top: -2rem;
        }
    }
    @media (min-width:801px)and (max-width:1300px) {
        .section-title{
            font-size: 2.5rem;
            color: var(--main-color);
        }
        .section-sub-title{
            font-size: 0.9rem;
            margin: 0 10rem;
            margin-top: -2rem;
        }
    }
/* End Title & Sub-Title */


/* Hero Section */
    @media (max-width:768px) {
        .hero-container{
            margin: 2% 2%;
        }
    }
    @media (max-width:391px) {
        .hero-cta{
            display: flex;
            flex-direction: column;
            margin-top: -0.5rem;
        }
    }
    @media (max-width:650px) {
        .hero{
            background-image: url(https://raw.githubusercontent.com/httpsadnankhan/education-landing-page/main/assets/img/hero.png);
            background-position: center;
            height: 95vh;
        }
        .hero-heading{
            padding-top: 5rem;
            margin-right: 1rem;
        }
        .hero-title{
            font-size: 2.8rem;
        }
        .hero-sub-title{
            font-size: 0.9rem;
            margin-top: -1rem;
        }
        .hero-cta{
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
    }
    @media (min-width:651px)and (max-width:900px) {
        .hero{
            background-image: url(https://raw.githubusercontent.com/httpsadnankhan/education-landing-page/main/assets/img/hero.png);
        }
        .hero-heading{
            padding-top: 5rem;
            margin-right: 8rem;
        }
        .hero-title{
            font-size: 3.8rem;
        } 
    }
    @media (min-width:901px)and (max-width:1150px) {
        .hero{
            background-image: url(https://raw.githubusercontent.com/httpsadnankhan/education-landing-page/main/assets/img/hero.png);
            height: fit-content;
        }
        .hero-heading{
            padding-top: 5rem;
            margin-right: 22rem;
        }
        .hero-title{
            font-size: 4rem;
        }  
    }
    @media (min-width:1150px)and (max-width:1350px) {
        .hero-heading{
            padding-top: 10rem;
            margin-right: 35rem;
        }
        .hero-title{
            font-size: 4rem;
        } 
    }
    @media (min-width:1350px)and (max-width:1500px) {
        .hero-heading{
            padding-top: 10rem;
            margin-right: 40rem;
        }
    }
/* End Hero Section */

/* Client Section */
    @media (max-width:768px) {
        .client-container{
            margin: 2%;
        }
    }
    @media (max-width:300px) {
        .client-items{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
        }
    }
    @media (min-width:301px)and (max-width:450px) {
        .client-items{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .client-img{
            height: 30px;
        }
    }
    @media (min-width:451px)and (max-width:600px) {
        .client-items{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }
        .client-img{
            height: 25px;
        }
    }
    @media (min-width:601px)and (max-width:800px) {
        .client-img{
            height: 35px;
        }
    }
    @media (min-width:801px)and (max-width:1000px) {
        .client-img{
            height: 45px;
        }
    }
/* End Client Section */

/* Feature Section */
    @media (max-width:768px) {
        .feedback-container{
            margin: 2%;
        }
    }
    @media (max-width:600px) {
        .feature-items{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
        }
        .feature-items-list{
            width: fit-content;
        }
    }
    @media (min-width:601px)and (max-width:800px) {
        .feature-items{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .feature-items-list{
            width: fit-content;
        }
    }
    @media (min-width:801px)and (max-width:1300px) {
        .feature-items{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        .feature-items-list{
            width: fit-content;
        }
    }
/* End Feature Section */

/* About Section */
    @media (max-width:768px) {
        .about-container{
            margin: 2%;
        }
    }
    @media (max-width:699px) {
        .about-heading{
            margin-left: 1rem;
            padding-top: 6rem;
        }
        .about-container{
            background-image: none;
            background-color: #064FB2;
            height: fit-content;
        }
    }
    @media (min-width:700px)and (max-width:830px) {
        .about-container{
            height: fit-content;
        }
        .about-heading{
            margin-left: 22rem;
            padding-top: 2rem;
        }
        .about-title{
            color: #fff;
            font-size: 1.6rem;
            line-height: 2rem;
        }
        .about-button{
            margin-top: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }
    }
    @media (min-width:831px)and (max-width:950px) {
        .about-container{
            height: fit-content;
        }
        .about-heading{
            margin-left: 25rem;
            padding-top: 2rem;
        }
        .about-button{
            margin-top: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }
    }
    @media (min-width:951px)and (max-width:1050px) {
        .about-container{
            height: fit-content;
        }
        .about-heading{
            margin-left: 30rem;
            padding-top: 2rem;
        }
        .about-button{
            margin-top: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }
    }
    @media (min-width:1050px)and (max-width:1250px) {
        .about-container{
            height: fit-content;
        }
        .about-heading{
            margin-left: 30rem;
            padding-top: 2rem;
        }
        .about-button{
            margin-top: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }
    }
    @media (min-width:1550px)and (max-width:2200px) {
        .about-heading{
            margin-left: 50rem;
            padding-top: 2rem;
        }
        .about-button{
            margin-top: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }
    }
    @media (min-width:2201px)and (max-width:4000px) {
        .about-heading{
            margin-left: 60rem;
            padding-top: 2rem;
        }
        .about-button{
            margin-top: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }
    }
/* End About Section */

/* Courses Section */
    @media (max-width:768px) {
        .courses-container{
            margin: 2%;
        }
    }
    @media (max-width:650px) {
        .courses-item{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
        }
        
    }
    @media (max-width:400px) {
        .courses-item-list{
           width: 300px;
        }
        .course-img{
            width: 300px;
            height: 250px;
        }
        .course-info{
            gap:1rem;
        }
    }
    @media (min-width:650px)and (max-width:900px) {
        .courses-item{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .courses-item-list{
            width: 290px;
         }
         .course-img{
             width: 290px;
             height: 280px;
         }
         .course-info{
            gap:1rem;
        }
    }
    @media (min-width:901px)and (max-width:1400px) {
        .courses-item{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        .courses-item-list{
            width: 310px;
         }
         .course-img{
             width: 310px;
             height: 280px;
         }
         .course-info{
            gap:1rem;
        }
    }
/* End Courses Section */

/* Feedback Section */
    @media (max-width:768px) {
        .feedback-container{
            margin: 2%;
        }
    }
    @media (max-width:768px) {
        .feedback-item{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            align-items: center;
        }
        .feedback-description{
            margin-right: 2rem;
        }
        .feedback-item-list-two{
            display: flex;
            flex-direction: column;
            margin-top: 2rem;
        }
        .feedback-img{
            width: 320px;
            border-radius: 1rem;
            margin: 0 auto;
        }
        .client-feedback{
            width: auto;
            margin-top: -2rem;
        }
        .feedback-text{
            font-size: 1rem;
            margin: 2rem 2rem;
        }
        .client-info{
            margin: 2rem 2rem;
        }
    }
    @media (min-width:769px)and (max-width:1200px) {
        .feedback-description{
            margin-right: 2rem;
        }
        .feedback-img{
            width: 320px;
            border-radius: 1rem;
            margin: 0 auto;
        }
    }
/* End Feedback Section */

/* Newsletter Section */
    @media (max-width:768px) {
        .newsletter-container{
            margin: 2%;
        }
    }
    @media (max-width:500px) {
        .newsletter-item{
            padding: 4rem 2rem;
        }
        .newsletter-title{
            color: #fff;
            font-size: 2rem;
            text-align: center;
        }
    }
    @media (min-width:501px)and (max-width:700px) {
        .newsletter-item{
            padding: 4rem 4rem;
        }
        .newsletter-title{
            color: #fff;
            font-size: 2rem;
            text-align: center;
        }
    }
    @media (min-width:701px)and (max-width:900px) {
        .newsletter-item{
            padding: 4rem 5rem;
        }
        .newsletter-title{
            color: #fff;
            font-size: 2.2rem;
            text-align: center;
        }
    }
    @media (min-width:901px)and (max-width:1100px) {
        .newsletter-item{
            padding: 4rem 5rem;
        }
        .newsletter-title{
            color: #fff;
            font-size: 2.2rem;
            text-align: center;
        }
    }
    @media (min-width:1100px)and (max-width:1350px) {
        .newsletter-item{
            padding: 4rem 8rem;
        }
        .newsletter-title{
            color: #fff;
            font-size: 2.2rem;
            text-align: center;
        }
    }
/* End Newsletter Section */

/* Footer Section */
    @media (max-width:768px) {
        .footer-container{
            margin: 2%;
        }
    }
    @media (max-width:350px) {
        .footer-item{
            display: grid;
            grid-template-columns: 1fr;
        }
        .footer-item-list-two{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 1rem;
        }
    }
    @media (min-width:351px)and (max-width:600px) {
        .footer-item{
            display: grid;
            grid-template-columns: 1fr;
        }
        .footer-item-list-two{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }
    @media (min-width:601px)and (max-width:850px) {
        .footer-item{
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .footer-item-list-two{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }
    @media (min-width:851px)and (max-width:1300px) {
        .footer-item{
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .footer-item-list-two{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }
    @media (min-width:1301px)and (max-width:1500px) {
        .footer-item-list-two{
            gap: 3rem;
        }
    }
/* End Footer Section */