/* ==========================================================================
   Skill Alleyway — Optimized Media Queries (Preserving All Behaviors)
   ========================================================================== */

/* ---------- Breakpoint: max-width: 992px ---------- */
@media (max-width: 992px) {
  .why-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .why-media {
    position: relative;
    top: 0;
    max-width: 420px;
    margin: 0 auto;
  }
  .final-cta {
    grid-template-columns: 1fr;
    padding: 36px;
    gap: 40px;
    border-radius: 20px;
  }
  .final-content h2 {
    font-size: 32px;
  }
  .final-content p {
    margin-bottom: 28px;
  }
  .final-card {
    padding: 28px;
  }
}

/* ---------- Breakpoint: max-width: 980px ---------- */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .form-card {
    position: static;
  }
  .hero h1 {
    font-size: 34px;
  }
}

/* ---------- Breakpoint: max-width: 860px ---------- */
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
  .phone-link {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-dark);
    border-top: 1px solid var(--line-dark);
    padding: 8px 24px 16px;
  }
  .nav-links.nav-open a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav-links.nav-open a:last-child {
    border-bottom: none;
  }
  .topbar {
    position: relative;
  }
  .programs-grid {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .testimonialSwiper {
    padding: 0 0 55px;
  }
  .testimonial-card {
    flex-direction: column;
    text-align: center;
    padding: 30px 24px;
    gap: 24px;
    min-height: auto;
  }
  .testimonial-card img {
    width: 90px;
    height: 90px;
  }
  .testimonial-content h3 {
    font-size: 22px;
  }
  .testimonial-content p {
    font-size: 15px;
    line-height: 1.8;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

/* ---------- Breakpoint: max-width: 768px ---------- */
@media (max-width: 768px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    padding: 14px;
    border-radius: 50%;
  }
  .whatsapp-float span {
    display: none;
  }
}

/* ---------- Breakpoint: max-width: 760px ---------- */
@media (max-width: 760px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot-grid {
    grid-template-columns: 1fr;
  }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Breakpoint: max-width: 600px ---------- */
@media (max-width: 600px) {
  .popup-modal {
    padding: 24px;
  }
  .popup-modal h2 {
    font-size: 24px;
  }
}

/* ---------- Breakpoint: max-width: 560px ---------- */
@media (max-width: 560px) {
  .ticker-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ticker-cell:nth-child(2) {
    border-right: none;
  }
  .ticker-cell:nth-child(odd) {
    border-right: 1px solid var(--line-dark);
  }
  .why-content h2 {
    font-size: 26px;
  }
  .why-item-body p,
  .why-item-body ul {
    padding-left: 0;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .final-cta {
    padding: 26px;
  }
  .final-content h2 {
    font-size: 27px;
  }
}

/* ---------- Breakpoint: max-width: 380px ---------- */
@media (max-width: 380px) {
  .hero {
    overflow: hidden;
  }
  .hero-grid {
    gap: 30px;
  }
  .form-card {
    width: 100%;
    padding: 22px 18px;
  }
  .field input,
  .field select {
    padding: 11px 12px;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero-sub {
    font-size: 16px;
  }
  .program-card {
    padding: 22px 18px;
  }
  .badge-popular {
    right: 16px;
    font-size: 10px;
    padding: 4px 10px;
  }
  .program-meta {
    gap: 6px;
  }
  .program-meta span {
    font-size: 11px;
    padding: 4px 8px;
  }
  .program-card h3 {
    font-size: 18px;
  }
  .program-card ul {
    font-size: 14px;
  }
  .program-card .btn {
    width: 100%;
    white-space: normal;
  }
  .final-cta {
    padding: 18px;
    gap: 26px;
  }
  .final-content h2 {
    font-size: 24px;
  }
  .final-content p {
    font-size: 15px;
  }
  .final-contact {
    padding: 12px;
    gap: 12px;
  }
  .final-contact span {
    font-size: 12px;
    word-break: break-word;
  }
  .final-card {
    padding: 20px;
  }
  .final-card h3 {
    font-size: 18px;
  }
}

/* ================= 320px ================= */

@media (max-width:320px){

    .wrap{
        padding:7px 15px;
    }
    .final-cta{
        display:flex;
        flex-direction:column;
        padding:18px 14px;
        gap:22px;
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .final-content,
    .final-card{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .final-content h2{
        font-size:28px;
        line-height:1.2;
    }

    .final-content p{
        font-size:15px;
        line-height:1.7;
        margin-bottom:26px;
    }

    .final-contact{
        width:100%;
        padding:12px;
        gap:12px;
    }

    .final-contact-icon{
        width:46px;
        height:46px;
    }
    .final-card{
        padding:20px 16px;
    }

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

    .final-card input,
    .final-card select{
        padding:12px 14px;
    }

}

/* about */
@media(max-width:860px){
  .about-layout{grid-template-columns:1fr;}
  .about-media{margin-bottom:40px;}
  .about-media .img-float{width:46%;right:-12px;bottom:-24px;}
}



/* ================= RESPONSIVE ================= */

/* Tablet (768px - 992px) */
@media (max-width: 992px) {
  .logop {
    min-width: 140px;
    width: 140px;
    height: 70px;
    padding: 10px 14px;
  }
  
  .logo-track {
    gap: 16px;
  }
}

/* Mobile (below 768px) */
@media (max-width: 768px) {
  .partners-section {
    padding: 40px 0;
  }
  
  .logop {
    min-width: 120px;
    width: 120px;
    height: 60px;
    padding: 8px 12px;
    border-radius: 10px;
  }
  
  .logo-track {
    gap: 14px;
    animation-duration: 25s; /* Faster on mobile */
  }
  
  .logo-track.reverse {
    animation-duration: 30s;
  }
  
  .logo-slider {
    gap: 16px;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
}

/* Small Mobile (below 480px) */
@media (max-width: 480px) {
  .logop {
    min-width: 100px;
    width: 100px;
    height: 50px;
    padding: 6px 10px;
  }
  
  .logo-track {
    gap: 12px;
  }
}

@media(max-width:760px){.trust-row{grid-template-columns:repeat(2,1fr);}}


/* placement */


/* ===== Responsive Breakpoints ===== */
@media (max-width: 1024px) {
    .placement-grid {
        gap: 50px;
    }
    .placement-content h2 {
        font-size: 32px;
    }
}

@media (max-width: 991px) {
    .placement-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .placement-image-wrapper {
        order: -1;
        max-width: 550px;
        margin: 0 auto;
        padding-right: 0;
        padding-bottom: 20px;
    }
    
    .image-accent-bg {
        display: none;
    }
    
    .btn-box {
        margin-top: 25px;
    }
}

@media (max-width: 580px) {
    .placement-section {
        padding: 60px 0;
    }
    .placement-list {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .placement-content h2 {
        font-size: 28px;
    }
    .btn-cta {
        width: 100%;
        text-align: center;
    }
}


/* Sirf CTA buttons ko target karega mobile mein */
@media (max-width: 768px) {
  .btn-cta,
  a[class*="cta"],
  button[class*="cta"],
  .btn-primary,
  .btn-ghost-dark,
  .btn-ghost-light {
    padding: 9px 20px !important;
    font-size: 14px; /* Optional: font size bhi adjust kar sakein */
  }
}



/* Hide complete Trust Section on Mobile */
@media (max-width: 768px) {
    .section-dark {
        display: none;
    }
}



@media (max-width: 768px){
.hero-overlay-content .wrap {
    width: 100%;
    display: none;
}}