/* TABLET */
@media (max-width: 1024px) {
  .header-container {
    padding: 0 1rem;
    gap: 1rem;
  }

  .desktop-nav {
    gap: 1rem;
    font-size: 0.9rem;
  }

  .phone-link {
    display: none;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-form-card {
    order: -1;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pilot-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .accreditations-grid {
    grid-template-columns: 1fr;
  }

  .mission-tags {
    gap: 1rem;
  }

  .mission-tags span {
    font-size: 0.75rem;
  }
}

/* FORCE MOBILE HERO LIKE REFERENCE */
@media (max-width:768px){

    .hero-image-container,
    .hero-background{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
        background:none !important;
    }

    .hero-image-container img,
    .hero-background img{
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        display:block !important;
        object-fit:contain !important;
        transform:none !important;
    }

}

  .logo span {
    display: inline;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .enquire-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  /* Hero Section 1 */
  .hero-title {
    font-size: 2rem;
  }

  .hero-description {
    font-size: 1rem;
  }

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

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-form-card {
    padding: 1.5rem;
  }

  /* Hero Section 2 */
  .hero-2-title {
    font-size: 2rem;
  }

  .hero-2-subtitle {
    font-size: 1rem;
  }

  .hero-2-buttons {
    flex-direction: column;
  }

  .hero-2-buttons .btn {
    width: 100%;
  }

  /* Enrollment */
  .enrollment-title {
    font-size: 1.8rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Programs */
  .programs-grid {
    grid-template-columns: 1fr;
  }

  .program-card {
    height: 300px;
  }

  .program-card h3 {
    font-size: 1.4rem;
    bottom: 60px;
  }

  .program-card p {
    bottom: 40px;
    font-size: 0.85rem;
  }

  /* Pilot */
  .pilot-grid {
    grid-template-columns: 1fr;
  }

  .pilot-card {
    height: 300px;
  }

  .pilot-card h3 {
    font-size: 1.3rem;
    bottom: 60px;
  }

  .pilot-card p {
    font-size: 0.85rem;
  }

  /* Why */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .why-card {
    padding: 1.5rem;
  }

  /* Testimonials */
  .testimonial-item {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
  }

  .testimonial-image {
    width: 80px;
    height: 80px;
  }

  .testimonial-text {
    font-size: 1rem;
  }

  .carousel-controls {
    gap: 1rem;
  }

  /* Brand */
  .brand-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .brand-image {
    height: 250px;
  }

  .uniforms-grid {
    grid-template-columns: 1fr;
  }

  /* Mission */
  .mission-tags {
    flex-direction: column;
    gap: 0.5rem;
  }

  .mission-title {
    font-size: 1.5rem;
  }

  /* Accreditations */
  .accreditations-grid {
    grid-template-columns: 1fr;
  }

  /* Life Academy */
  .life-academy-grid {
    grid-template-columns: 1fr;
  }

  .life-card {
    height: 250px;
  }

  .life-card.featured {
    grid-column: 1;
    grid-row: auto;
  }

  /* Career Paths */
  .career-grid {
    grid-template-columns: 1fr;
  }

  .career-card {
    height: 250px;
  }

  .career-title {
    font-size: 1.5rem;
  }

  /* Final CTA */
  .final-cta-title {
    font-size: 1.8rem;
  }

  .final-cta-buttons {
    flex-direction: column;
  }

  .final-cta-buttons .btn {
    width: 100%;
  }

  /* Popup */
  .popup-modal {
    padding: 1.5rem;
  }

  /* Footer */
  .footer-contact {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* General */
  section {
    padding: 3rem 1.5rem;
  }

  .section-eyebrow {
    margin-bottom: 0.5rem;
  }

  .section-title {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }

  .section-description {
    font-size: 1rem;
  }

/* SMALL MOBILE */
@media (max-width: 480px) {
  .header-container {
    padding: 0 0.5rem;
  }

  .logo {
    font-size: 0.65rem;
  }

  .logo img {
    width: 30px;
    height: 30px;
  }

  .enquire-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .hero-description {
    font-size: 0.9rem;
  }

  .hero-form-card {
    padding: 1rem;
  }

  .hero-form-card h3 {
    font-size: 1.2rem;
  }

  .hero-2-title {
    font-size: 1.3rem;
  }

  .enrollment-title {
    font-size: 1.4rem;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .program-card,
  .pilot-card,
  .career-card,
  .life-card {
    height: 200px;
  }

  .program-tag,
  .life-tag,
  .career-tag {
    font-size: 0.65rem;
    padding: 0.3rem 0.8rem;
  }

  .why-icon {
    font-size: 2rem;
  }

  .final-cta-title {
    font-size: 1.3rem;
  }

  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    bottom: 1rem;
    right: 1rem;
  }
}

/* FORCE MOBILE HERO BACKGROUND */

@media (max-width:768px){

.hero-image-container{
    height:78vh !important;
    overflow:hidden !important;
}

.hero-image-container img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    /* less zoom */
    transform:scale(1.12) !important;

    /* center image correctly */
    object-position:center center !important;
}

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

.hero-image-container{
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
}

.hero-image-container img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center top !important;
    display:block !important;
}

}

@media(max-width:768px){

.career-line h2{
    font-size:14px !important;
    width:100% !important;
    white-space:nowrap !important;
    display:block !important;
    line-height:1 !important;
    margin:0 auto !important;
}

.career-line h2 span{
    display:inline !important;
}

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

.life-academy-grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:18px !important;
    padding:0 20px !important;
    overflow:visible !important;
}

.life-card{
    height:170px !important;
    overflow:hidden !important;
}

.life-image{
    width:100% !important;
    height:100% !important;
    background-size:cover !important;
    background-position:center !important;
    border-radius:18px !important;
}

.career-line{
    margin-top:30px !important;
    padding-bottom:40px !important;
}

.career-line h2{
    font-size:13px !important;
    white-space:nowrap !important;
}
}

/* LIFE AT ACADEMY - MOBILE FIX */

@media (max-width:768px){

.life-academy-grid{
    display:grid !important;
    grid-template-columns:repeat(1,1fr) !important;
    gap:12px !important;
    padding:15px !important;
}

@media (max-width:768px){

.life-card{
    width:100% !important;
    height:160px !important;
    margin-bottom:12px !important;
    border-radius:20px !important;
    overflow:hidden !important;
}

.life-image{
    width:100% !important;
    height:160px !important;
    background-size:contain !important; /* change from cover */
    background-repeat:no-repeat !important;
    background-position:center center !important;
    border-radius:20px !important;
    background-color:#001528 !important;
}

}

/* career text under images */

.career-line{
    grid-column:1 / -1 !important;
    text-align:center !important;
    margin-top:20px !important;
}

.career-line h2{
    font-size:16px !important;
    line-height:1.6 !important;
    white-space:nowrap !important;
}

.career-line h2::after{
    content:'';
    display:block;
    width:70px;
    height:4px;
    background:#EFA703;
    margin:12px auto 0;
    border-radius:20px;
}

}