/*======================================
        1200px
======================================*/

@media (max-width:1200px){
        
}
/* ==========================
   992px
========================== */

@media (max-width:992px){

    .container{
        width:92%;
    }

    .menu{
        gap:25px;
    }

    .menu a{
        font-size:15px;
    }

    .nav-button a{
        padding:12px 22px;
        font-size:15px;
    }

    .hero{
        height:780px;
    }

    .hero-content{
        max-width:500px;
        top:38%;
        left:6%;
    }

    .hero-content h1{
        font-size:54px;
    }

    .hero-content p{
        font-size:18px;
    }

    .why-grid,
    .courses-grid,
    .student-works-grid,
    .testimonials-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .placements-wrapper{
        gap:40px;
    }

    .footer-wrapper{
        grid-template-columns:1fr;
        text-align:center;
        gap:40px;
    }

    .footer-links{
        justify-content:center;
    }

    .footer-contact{
        text-align:center;
    }

    .contact-item{
        justify-content:center;
    }

}
/* ==========================
   768px
========================== */

@media (max-width:768px){

    /* Navbar */

    .menu{
        display:none;
    }

    .nav-button{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    /* Hero */

    .hero{
        height:100vh;
        min-height:600px;
    }

    .hero-content{
        position:absolute;
        top:58%;
        left:50%;
        transform:translate(-50%,-50%);
        width:90%;
        max-width:100%;
        text-align:center;
    }

    .hero-content h1{
        font-size:38px;
        line-height:1.15;
    }

    .hero-content p{
        font-size:16px;
        margin:20px auto 35px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
            margin-top:25px;
    }

    /* Home Sections */

    .why-grid,
    .courses-grid,
    .student-works-grid,
    .testimonials-grid,
    .vision-grid,
    .why-about-grid,
    .core-values-grid,
    .portfolio-grid,
    .alumni-grid,
    .career-grid,
    .contact-info-grid,
    .form-grid{

        grid-template-columns:1fr;
    }

    /* All Hero Sections */

    .about-hero-wrapper,
    .course-hero-wrapper,
    .student-hero-wrapper,
    .placement-hero-wrapper,
    .contact-hero-wrapper,
    .our-story-wrapper,
    .placements-wrapper,
    .campus-wrapper,
    .course-item{

        flex-direction:column;
    }

    .course-item.reverse{
        flex-direction:column;
    }

    /* Headings */

    .section-title h2{
        font-size:36px;
    }

    .about-hero-left h1,
    .course-hero-left h1,
    .student-hero-left h1,
    .placement-hero-left h1,
    .contact-hero-left h1{

        font-size:42px;
        text-align:center;
    }

    .about-hero-left,
    .course-hero-left,
    .student-hero-left,
    .placement-hero-left,
    .contact-hero-left{

        text-align:center;
    }

    .about-hero-left p,
    .course-hero-left p,
    .student-hero-left p,
    .placement-hero-left p,
    .contact-hero-left p{

        margin:auto auto 35px;
    }
    /* Why Choose */

/* ==========================
   WHY CHOOSE
========================== */

.why-choose{
    padding:70px 0;
}

.section-title{
    margin-bottom:40px;
}

.section-title h2{
    font-size:34px;
}

.section-title p{
    font-size:16px;
    line-height:1.7;
}

.why-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.why-card{
    padding:28px 22px;
    min-height:auto;
}

.card-icon{
    width:55px;
    height:55px;
}

.card-icon svg{
    width:28px;
    height:28px;
}

.why-card h3{
    font-size:22px;
}

.why-card p{
    font-size:15px;
    line-height:1.7;
}
/* ==========================
   POPULAR COURSES
========================== */

.courses{
    padding:70px 0;
}

.courses-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}

.course-card{
    height:340px;
}

.course-content{
    left:20px;
    bottom:20px;
}

.course-content h3{
    font-size:24px;
}

.course-content a{
    font-size:15px;
}
/* ==========================
   STUDENT WORKS
========================== */

.student-works{
    padding:70px 0;
}

.student-works-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}

.student-work-card{
    height:280px;
}
/* ==========================
   TESTIMONIALS
========================== */

.testimonials{
    padding:70px 0;
}

.testimonials-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}

.testimonial-card{
    padding:25px;
}

.testimonial-review p{
    font-size:15px;
    line-height:1.7;
}

.testimonial-footer{
      display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.profile-image{
    flex-shrink:0;
}
.profile-image img{
     width:70px;
    height:70px;
    object-fit:cover;
    border-radius:50%;
}

.student-information h3{
    font-size:18px;
}

.student-information span{
    font-size:14px;
}

.student-information p{
    font-size:13px;
}
/* ==========================
   PLACEMENT CTA
========================== */

.placement-cta{
    padding:70px 0;
}
.placement-stats{
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.cta-box{
    padding:50px 30px;
    text-align:center;
}

.cta-box h2{
    font-size:36px;
    line-height:1.2;
}

.cta-box p{
    font-size:16px;
    max-width:100%;
    margin:20px auto 35px;
}

.cta-box .hero-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}
/* ==========================
   FOOTER
========================== */

footer{
    padding:70px 0 30px;
}

.footer-wrapper{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
}

.footer-links{
    justify-content:center;
    gap:30px;
}

.footer-menu,
.footer-courses{
    align-items:center;
}

.footer-logo{
    justify-content:center;
}

.footer-description{
    margin:20px auto;
    max-width:500px;
}

.footer-social{
    justify-content:center;
}

.footer-contact{
    text-align:center;
}

.contact-item{
    justify-content:center;
}
/* ==========================
   ABOUT HERO
========================== */

.about-hero{
    padding:80px 0;
}

.about-hero-wrapper{
    flex-direction:column;
    gap:50px;
}

.about-hero-left,
.about-hero-right{
    width:100%;
    text-align:center;
}

.about-hero-left h1{
    font-size:42px;
    line-height:1.2;
}

.about-hero-left p{
    font-size:16px;
    margin:20px auto 35px;
    max-width:600px;
}

.about-hero-image img{
    width:100%;
    max-width:500px;
    margin:auto;
    display:block;
}
/* ==========================
   OUR STORY
========================== */

.our-story{
    padding:70px 0;
}

.our-story-wrapper{
    flex-direction:column;
    gap:40px;
}

.story-image,
.story-content{
    width:100%;
}

.story-content{
    text-align:center;

}

.story-content h2{
    font-size:36px;
}

.story-content p{
    font-size:16px;
    line-height:1.8;
}

.story-image img{
    width:100%;
    max-width:500px;
    display:block;
    margin:auto;
}
/* ==========================
   VISION & MISSION
========================== */

.vision-mission{
    padding:70px 0;
}

.vision-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}

.vision-card{
    padding:30px 25px;
}

.vision-card h3{
    font-size:24px;
}

.vision-card p{
    font-size:15px;
    line-height:1.7;
}

.vision-icon{
    width:60px;
    height:60px;
}

.vision-icon i{
    font-size:28px;
}
/* ==========================
   WHY ABOUT
========================== */

.why-about{
    padding:70px 0;
}

.why-about-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:40px;
}

.why-about .why-card{
    padding:28px 22px;
    min-height:auto;
}

.why-about .card-icon{
    width:60px;
    height:60px;
    margin-bottom:20px;
}

.why-about .card-icon i{
    font-size:28px;
}
.card-icon i{
      color: #ffd400;
}
.why-about .why-card h3{
    font-size:22px;
    margin-bottom:12px;
}

.why-about .why-card p{
    font-size:15px;
    line-height:1.7;
}
/* ==========================
   CORE VALUES
========================== */

.core-values{
    padding:70px 0;
}

.core-values-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}

.core-values .why-card{
    padding:30px 25px;
    min-height:auto;
}

.core-values .card-icon{
    width:60px;
    height:60px;
    margin-bottom:20px;
}

.core-values .card-icon i{
    font-size:28px;
    color:#FFD200;
}

.core-values .why-card h3{
    font-size:22px;
    margin-bottom:12px;
}

.core-values .why-card p{
    font-size:15px;
    line-height:1.7;
}
/* ==========================
   COURSES HERO
========================== */

.course-hero{
    padding:120px 0 70px;
}

.course-hero-wrapper{
    flex-direction:column;
    gap:50px;
}

.course-hero-left,
.course-hero-right{
    width:100%;
    text-align:center;
}

.course-hero-left h1{
    font-size:44px;
    line-height:1.2;
}

.course-category{
    display:block;
    font-size:18px;
    line-height:1.7;
    margin:20px 0;
}

.course-hero-left p{
    max-width:600px;
    margin:0 auto 35px;
    font-size:16px;
    line-height:1.8;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
}

.course-hero-image img{
    width:100%;
    max-width:500px;
    display:block;
    margin:auto;
}
/* ==========================
   COURSE ITEM
========================== */

.course-item{
    flex-direction:column;
    gap:40px;
    padding:70px 0;
}

.course-item-image,
.course-item-content{
    width:100%;
}

.course-item-image img{
    width:100%;
    max-width:500px;
    display:block;
    margin:auto;
}

.course-item-content{
    text-align:center;
}

.course-item-content h2{
    font-size:36px;
}

.course-item-content h3{
    font-size:22px;
    margin-top:20px;
}

.course-item-content p{
    font-size:16px;
    line-height:1.8;
}

.course-item-content .btn-primary{
    margin-top:25px;
}
.course-item,
.course-item.reverse{
    flex-direction: column !important;
}
/* ==========================
   STUDENT HERO
========================== */

.student-hero{
    padding:120px 0 70px;
}

.student-hero-wrapper{
    flex-direction:column;
    gap:50px;
}

.student-hero-left,
.student-hero-right{
    width:100%;
    text-align:center;
}

.student-hero-left h1{
    font-size:44px;
    line-height:1.2;
}

.student-hero-left p{
    max-width:600px;
    margin:20px auto 35px;
    font-size:16px;
    line-height:1.8;
}

.student-hero-image img{
    width:100%;
    max-width:500px;
    display:block;
    margin:auto;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
}
/* ==========================
   PORTFOLIO
========================== */

.portfolio{
    padding:70px 0;
}

.portfolio-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}
.portfolio-image{
    height:220px;
}
.portfolio-card{
    width:100%;
}

.portfolio-image img{
    width:100%;
    height:auto;
    display:block;
}

.portfolio-content{
     min-height:auto;
    padding:14px;
    text-align:center;
}

.portfolio-content span{
    font-size:14px;
}

.portfolio-content h3{
    font-size:22px;
    line-height:1.4;
}
/* ==========================
   PLACEMENT HERO
========================== */

.placement-hero{
    padding:120px 0 70px;
}

.placement-hero-wrapper{
    flex-direction:column;
    gap:50px;
}

.placement-hero-left,
.placement-hero-right{
    width:100%;
    text-align:center;
}

.placement-hero-left h1{
    font-size:44px;
    line-height:1.2;
}

.placement-hero-left p{
    max-width:600px;
    margin:20px auto 35px;
    font-size:16px;
    line-height:1.8;
}

.placement-hero-image img{
    width:100%;
    max-width:500px;
    display:block;
    margin:auto;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
}
/* ==========================
   ALUMNI SECTION
========================== */

.alumni-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}

.alumni-card{
    width:100%;
}

.alumni-image img{
    width:100%;
    height:auto;
    display:block;
}

.alumni-content{
    padding:20px;
    text-align:center;
}

.alumni-content h3{
    font-size:24px;
}

.alumni-content h4{
    font-size:18px;
}

.alumni-content .company{
    font-size:16px;
}

.alumni-content .review{
    font-size:15px;
    line-height:1.7;
}
/* ==========================
   CAREER DEVELOPMENT
========================== */

.career-program{
    padding:70px 0;
}

.career-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}

.career-card{
    text-align:center;
    padding:30px 25px;
}

.career-card .card-icon{
    margin:0 auto 20px;
}

.career-card h3{
    font-size:24px;
    margin-bottom:12px;
}

.career-card p{
    font-size:16px;
    line-height:1.7;
}
}

/*======================================
        576px
======================================*/

@media (max-width:576px){
    

}
@media(max-width:375px){
 

    .container{
        width:100%;
        padding:0 15px;
    }
      .hero-content{
        width:90%;
        left: 50%;
        transform:translate(-50%,-50%);
        padding:0 15px;
    }
.hero-content h1{
    font-size:34px;
    line-height: 1.2;
}

.hero-content p{
    font-size:15px;
}
  .hero-buttons{
        flex-direction:column;
        width:100%;
    }
.btn-primary,
.btn-secondary{
    width:100%;
    text-align:center;
}
.why-card{
    padding:24px 20px;
}
.section-title h2{
    font-size:30px;
}
.section-title p{
    font-size:15px;
}
.course-card{
    height:300px;
}
.course-content h3{
    font-size:22px;
}
.course-content{
    left:18px;
    bottom:18px;
}
.student-work-card{
    height:250px;
}
.testimonial-card{
    padding:20px;
}
.testimonial-footer{
    flex-direction:column;
    align-items:flex-start;
}
.profile-image img{
    width:60px;
    height:60px;
}
.cta-box{
    padding:40px 20px;
}

.cta-box h2{
    font-size:30px;
}

.cta-box p{
    font-size:15px;
}

.cta-box .hero-buttons{
    flex-direction:column;
}

.cta-box .btn-primary,
.cta-box .btn-secondary{
    width:100%;
}
.placement-stats{
    grid-template-columns:1fr;
    gap:18px;
}

.stat-card{
    padding:25px 20px;
}

.stat-card h2{
    font-size:42px;
}

.stat-card p{
    font-size:16px;
}
.footer-links{
    flex-direction:column;
    gap:30px;
}

.footer-menu,
.footer-courses{
    gap:15px;
}

.footer-description p{
    font-size:15px;
}

.contact-item{
    flex-direction:column;
    gap:10px;
}

.footer-social{
    gap:18px;
}
.about-hero{
    padding:120px 0 60px ;
}

.about-hero-left h1{
    font-size:34px;
}

.about-hero-left p{
    font-size:15px;
}

.about-hero-image img{
    max-width:100%;
}
.story-content h2{
    font-size:30px;
}

.story-content p{
    font-size:15px;
}
.vision-card{
    padding:25px 20px;
}

.vision-card h3{
    font-size:22px;
}

.vision-icon{
    width:55px;
    height:55px;
}
.why-about .why-card{
    padding:24px 18px;
}

.why-about .why-card h3{
    font-size:20px;
}

.why-about .card-icon{
    width:55px;
    height:55px;
}
.card-icon i{
    color: #ffd400;
}
.why-about .card-icon i{
    font-size:24px;
}
.core-values .why-card{
    padding:24px 18px;
}

.core-values .why-card h3{
    font-size:20px;
}

.core-values .card-icon{
    width:55px;
    height:55px;
}

.core-values .card-icon i{
    font-size:24px;
}
.course-hero{
    padding:110px 0 60px;
}

.course-hero-left h1{
    font-size:34px;
}

.course-category{
    font-size:16px;
}

.course-hero-left p{
    font-size:15px;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.hero-buttons a{
    width:100%;
    max-width:260px;
}
.course-item{
    gap:30px;
    padding:60px 0;
}

.course-item-content h2{
    font-size:30px;
}

.course-item-content h3{
    font-size:20px;
}

.course-item-content p{
    font-size:15px;
}
.student-hero{
    padding:110px 0 60px;
}

.student-hero-left h1{
    font-size:34px;
}

.student-hero-left p{
    font-size:15px;
    line-height:1.7;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.hero-buttons a{
    width:100%;
    max-width:260px;
}
.portfolio-card{
    border-radius:16px;
}

.portfolio-content{
      min-height:auto;
    padding:16px;
}
.portfolio-image{
    height:200px;
}
.portfolio-content h3{
    font-size:20px;
}

.portfolio-content span{
    font-size:13px;
}
.placement-hero{
    padding:110px 0 60px;
}

.placement-hero-left h1{
    font-size:34px;
}

.placement-hero-left p{
    font-size:15px;
    line-height:1.7;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.hero-buttons a{
    width:100%;
    max-width:260px;
}
.alumni-content{
    padding:18px;
}

.alumni-content h3{
    font-size:22px;
}

.alumni-content h4{
    font-size:16px;
}

.alumni-content .review{
    font-size:14px;
}
.career-card{
    padding:25px 20px;
}

.career-card h3{
    font-size:22px;
}

.career-card p{
    font-size:15px;
}

.career-card .card-icon{
    width:60px;
    height:60px;
}

.career-card .card-icon i{
    font-size:24px;
}
}