/* ================================================================= */
/* ISOLATED MOBILE DESIGN SYSTEM — PHONES ONLY (max-width: 768px)    */
/* ⚠️ DOES NOT AFFECT DESKTOP IN ANY WAY                              */
/* ================================================================= */

@media screen and (max-width: 768px) {

  /* ——————————————————————————————
     BASE RESETS
  —————————————————————————————— */
  * {
    box-sizing: border-box !important;
  }

  body {
    padding-bottom: 80px !important;
    overflow-x: hidden !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }

  /* MOBILE HEADER — show compact version with logo + hamburger */
  .header-bar {
    display: flex !important;
    height: 60px !important;
    padding: 0 1.2rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Hide desktop centered nav links on mobile */
  .nav-links-centered {
    display: none !important;
  }

  /* Logo on mobile */
  .logo-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
  }

  .logo-hd-img-exact {
    height: 38px !important;
    width: auto !important;
  }

  .logo-hd-text {
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
  }

  /* Show hamburger button on mobile */
  .mobile-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    font-size: 1.4rem !important;
    cursor: pointer !important;
    color: #111111 !important;
    padding: 0.3rem !important;
    z-index: 10001 !important;
  }

  /* Mobile Drawer */
  .mobile-nav-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 75% !important;
    max-width: 280px !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 99998 !important;
    padding: 4rem 2rem 2rem 2rem !important;
    box-shadow: -8px 0 30px rgba(0,0,0,0.15) !important;
    transition: right 0.35s ease !important;
    overflow-y: auto !important;
  }

  .mobile-nav-drawer.active {
    right: 0 !important;
  }

  .mobile-nav-list {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 1rem !important;
  }

  .mobile-nav-list li a {
    display: block !important;
    padding: 1rem 0 !important;
    font-family: 'Azonix', sans-serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.1em !important;
    color: #333333 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-transform: uppercase !important;
    transition: color 0.25s ease !important;
  }

  .mobile-nav-list li a:hover,
  .mobile-nav-list li a.active {
    color: #C8A96E !important;
  }

  .mobile-drawer-close {
    position: absolute !important;
    top: 1.2rem !important;
    right: 1.2rem !important;
    background: none !important;
    border: none !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    color: #555555 !important;
  }

  /* Backdrop */
  .mobile-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 99997 !important;
  }

  .mobile-backdrop.active {
    display: block !important;
  }

  /* ——————————————————————————————
     MOBILE BOTTOM NAVIGATION BAR
  —————————————————————————————— */
  .mobile-bottom-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 65px !important;
    background: #ffffff !important;
    border-top: 1px solid #e8e8e8 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 0.5rem !important;
  }

  .mobile-bottom-bar .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #888888 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    text-decoration: none !important;
    gap: 3px !important;
    padding: 0.3rem 0.6rem !important;
    transition: color 0.25s ease !important;
    min-width: 52px !important;
    text-align: center !important;
  }

  .mobile-bottom-bar .nav-svg-icon {
    stroke: #999999 !important;
    transition: stroke 0.25s ease !important;
    flex-shrink: 0 !important;
  }

  .mobile-bottom-bar .nav-item.active {
    color: #C8A96E !important;
  }
  .mobile-bottom-bar .nav-item.active .nav-svg-icon {
    stroke: #C8A96E !important;
  }
  .mobile-bottom-bar .nav-item:hover {
    color: #C8A96E !important;
  }
  .mobile-bottom-bar .nav-item:hover .nav-svg-icon {
    stroke: #C8A96E !important;
  }

  /* ——————————————————————————————
     HOME PAGE: SLIDE 1 — HERO
  —————————————————————————————— */
  .slide1-hero-wrapper {
    position: relative !important;
    top: 0 !important;
    height: calc(100svh - 60px) !important;
    min-height: 500px !important;
    margin-top: 0 !important;
  }

  .hero-logo-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.15rem !important;
    width: 90% !important;
    margin: 0 auto !important;
  }

  .hero-logo-white {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.95), 0 2px 8px rgba(0,0,0,0.9) !important;
    letter-spacing: 0.1em !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  .hero-logo-gold {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    color: #FFC107 !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.95), 0 2px 8px rgba(0,0,0,0.9) !important;
    letter-spacing: 0.1em !important;
    display: block !important;
    line-height: 1.2 !important;
  }

  .marker-square,
  .marker-circle {
    display: none !important;
  }

  /* ——————————————————————————————
     HOME PAGE: SLIDE 2 — WELCOME  (REF3 FIX)
  —————————————————————————————— */
  .slide2-container {
    padding: 2.5rem 0 !important;
    overflow: hidden !important;
  }

  /* Top headline: full bleed, centered */
  .slide2-top-heading {
    padding: 0 1.4rem !important;
    font-size: clamp(1.05rem, 4.2vw, 1.3rem) !important;
    line-height: 1.55 !important;
    text-align: center !important;
    color: #111111 !important;
    margin-bottom: 2rem !important;
    font-weight: 400 !important;
  }

  /* Grid: vertical stack — image FIRST full-width, then text */
  .slide2-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Image box: full width, tall, no side margins */
  .slide2-img-box {
    width: 100% !important;
    height: 320px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    order: 1 !important;
    flex-shrink: 0 !important;
  }

  .slide2-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Info box: text below image, padded */
  .slide2-info-box {
    order: 2 !important;
    padding: 2rem 1.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: left !important;
  }

  .slide2-subtitle {
    font-size: 0.72rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #999999 !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
  }

  .slide2-title {
    font-family: 'Azonix', sans-serif !important;
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    color: #111111 !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
  }

  .slide2-desc {
    font-size: 0.92rem !important;
    line-height: 1.85 !important;
    color: #444444 !important;
    margin: 0 !important;
  }

  .slide2-readmore-btn {
    display: inline-block !important;
    padding: 0.75rem 2rem !important;
    border: 1.5px solid #111111 !important;
    font-family: 'Azonix', sans-serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #111111 !important;
    text-align: center !important;
    width: fit-content !important;
    margin-top: 0.5rem !important;
    transition: all 0.3s ease !important;
  }

  /* ——————————————————————————————
     HOME PAGE: SLIDE 3 — OUR EXPERIENCE STATS
  —————————————————————————————— */
  .white-stats-section {
    padding: 3rem 1.2rem !important;
  }

  .white-stats-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
  }

  .white-left-block {
    width: 100% !important;
    text-align: left !important;
  }

  .white-left-block h2,
  .white-left-title {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.8rem !important;
  }

  .white-left-block p {
    font-size: 0.92rem !important;
    line-height: 1.8 !important;
    color: #555555 !important;
  }

  .white-right-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.7rem !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .stat-white-card {
    padding: 1.2rem 0.5rem !important;
    border-radius: 8px !important;
    text-align: center !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
  }

  .stat-white-number {
    font-size: 1.5rem !important;
    font-family: 'Azonix', sans-serif !important;
    color: #111111 !important;
    display: block !important;
    line-height: 1 !important;
    margin-bottom: 0.4rem !important;
  }

  .stat-white-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.04em !important;
    color: #888888 !important;
    line-height: 1.3 !important;
  }

  /* ——————————————————————————————
     HOME PAGE: SLIDE 4 — EXCITING NEWS
  —————————————————————————————— */
  .exciting-news-section {
    padding: 3rem 1.2rem !important;
  }

  .exciting-news-card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .exciting-news-white-box {
    padding: 2rem 1.2rem !important;
    border-radius: 10px !important;
    width: 100% !important;
  }

  .exciting-news-title {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.8rem !important;
    color: #111111 !important;
  }

  .exciting-news-date,
  .exciting-news-subtitle {
    font-size: 0.8rem !important;
    color: #888888 !important;
    margin-bottom: 0.8rem !important;
  }

  .exciting-news-body {
    font-size: 0.92rem !important;
    line-height: 1.8 !important;
    color: #444444 !important;
    margin-bottom: 1.2rem !important;
  }

  .exciting-news-dark-btn {
    display: inline-block !important;
    background: #FFC107 !important;
    color: #111111 !important;
    font-family: 'Azonix', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 0.85rem 1.8rem !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(255,193,7,0.25) !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 0.5rem !important;
  }

  /* ——————————————————————————————
     HOME PAGE: SLIDE 5 — HUMAN EXPERIENCE  (REF4 FIX)
  —————————————————————————————— */
  .slide5-section {
    padding: 3rem 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    color: #111111 !important;
  }

  .slide5-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Each grid block: stacked, padded text + full image */
  .slide5-grid-a,
  .slide5-grid-b,
  .slide5-grid-c {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin-bottom: 3rem !important;
  }

  /* Subtitle label */
  .slide5-subtitle {
    font-size: 0.72rem !important;
    color: #aaaaaa !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.4rem !important;
    padding: 0 1.4rem !important;
  }

  /* Title: big, bold, clear — highly readable */
  .slide5-title {
    font-family: 'Azonix', sans-serif !important;
    font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    color: #111111 !important;
    padding: 0 1.4rem !important;
    letter-spacing: 0.06em !important;
  }

  /* Description text: big, clear, padded — NO small white on dark */
  .slide5-desc-text {
    font-size: 0.95rem !important;
    line-height: 1.85 !important;
    color: #333333 !important;
    padding: 0 1.4rem !important;
    margin-bottom: 1.5rem !important;
    background: none !important;
  }

  /* Image: hidden on mobile (user request) */
  .slide5-img-box-q1 {
    display: none !important;
  }

  .slide5-img-box-q1 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .slide5-img-box-normal {
    width: 100% !important;
    height: 260px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    order: 99 !important;
  }

  .slide5-img-box-normal img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Accent bar */
  .slide5-accent-bar {
    width: 36px !important;
    height: 4px !important;
    background: #FFC107 !important;
    margin-bottom: 0.8rem !important;
    margin-left: 1.4rem !important;
  }

  /* Principles list: clear readable text with bullet */
  .slide5-principles-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    padding: 0 1.4rem !important;
    margin-bottom: 1.5rem !important;
  }

  .slide5-principles-list p {
    font-size: 0.93rem !important;
    line-height: 1.8 !important;
    color: #333333 !important;
    padding-left: 1.2rem !important;
    position: relative !important;
    border-left: 2px solid #FFC107 !important;
  }

  /* ——————————————————————————————
     HOME PAGE: SLIDE 6 — METHODOLOGY  (REF2 FIX)
  —————————————————————————————— */
  .methodology-section {
    padding: 2rem 1rem !important;
    background: #fafafa !important;
  }

  .methodology-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Glass card: compact tight layout */
  .methodology-glass-card {
    padding: 1.8rem 1.4rem !important;
    border-radius: 10px !important;
    border: 1px solid #d4b96a !important;
    background: #ffffff !important;
    box-shadow: 0 6px 24px rgba(200,169,110,0.08) !important;
  }

  /* Badge: title on same line as square icon */
  .methodology-header-badge {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    margin-bottom: 1.2rem !important;
  }

  .methodology-badge-sq {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    background: #C8A96E !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
  }

  .methodology-header-badge span {
    font-family: 'Azonix', sans-serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #C8A96E !important;
    line-height: 1.4 !important;
  }

  /* Statement paragraph tight */
  .methodology-statement {
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    color: #222222 !important;
    margin: 0 !important;
  }

  .methodology-highlight-gold {
    color: #C8A96E !important;
    font-weight: 700 !important;
  }

  /* ——————————————————————————————
     HOME PAGE: SLIDE 7 — FEATURED PROJECTS
  —————————————————————————————— */
  .featured-banner-section {
    min-height: 400px !important;
    padding: 4rem 1.2rem !important;
    position: relative !important;
  }

  .featured-banner-bg,
  .featured-banner-section .banner-bg-img {
    filter: brightness(0.35) !important;
  }

  .featured-banner-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.95) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.6rem !important;
  }

  .featured-banner-subtitle,
  .featured-banner-gold {
    font-size: 0.85rem !important;
    color: #FFC107 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.9) !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 1rem !important;
  }

  .featured-banner-desc {
    font-size: 0.9rem !important;
    color: #eeeeee !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9) !important;
    line-height: 1.75 !important;
  }

  /* ——————————————————————————————
     HOME PAGE: SLIDE 8 — PORTFOLIO GALLERY
  —————————————————————————————— */
  .portfolio-gallery-section {
    padding: 0 !important;
  }

  .gallery-main-showcase {
    height: 280px !important;
  }

  .gallery-thumbnails-wrapper {
    padding: 0.6rem 0.5rem !important;
  }

  .gallery-thumb-item {
    width: 70px !important;
    height: 48px !important;
  }

  .gallery-arrow-btn {
    width: 40px !important;
    height: 40px !important;
    right: 0.8rem !important;
    font-size: 1rem !important;
  }

  /* REF1: Hide explore more button completely on mobile */
  .gallery-explore-btn-wrapper {
    display: none !important;
  }

  /* ——————————————————————————————
     ABOUT US PAGE — FULL MOBILE FIX
  —————————————————————————————— */

  /* All sections: reset spacing */
  .about-sec1-container,
  .about-sec2-container,
  .about-sec3-container,
  .about-sec4-container,
  .about-sec5-container,
  .about-sec6-container {
    padding: 2.5rem 1.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ——— SEC1: HERO ——— */
  .about-sec1-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    text-align: center !important;
  }

  .about-sec1-container h1,
  .about-hero-title {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
  }

  /* ——— SEC2: BIO + PORTRAIT ——— */

  /* Grid becomes flex column on mobile — natural HTML order gives us: title → portrait → body text */
  .about-sec2-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* ORDER 1: Headline (sec2-left-col) */
  .sec2-left-col {
    order: 1 !important;
    width: 100% !important;
    padding: 1.5rem 1.2rem 0.8rem 1.2rem !important;
    display: block !important;
    float: none !important;
  }

  /* ORDER 2: Portrait (sec2-right-col) — right after headline */
  .sec2-right-col {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 !important;
    float: none !important;
  }

  /* ORDER 3: Body text + books (sec2-left-col-body) — below portrait */
  .sec2-left-col-body {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    padding: 1.5rem 1.2rem !important;
  }

  /* Portrait image: full-width centered */
  .sec2-portrait-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 320px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
    box-shadow: none !important;
    border: none !important;
  }

  .sec2-portrait-box img,
  .sec2-portrait-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
  }



  /* Headline title box: visible and styled on mobile */
  .sec2-header-title-box {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    margin-bottom: 0.5rem !important;
  }

  .sec2-gold-bar {
    width: 40px !important;
    height: 3px !important;
    background: #FFC107 !important;
    flex-shrink: 0 !important;
  }

  /* Books row */
  .sec2-books-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.8rem !important;
    margin-top: 0.5rem !important;
  }

  .sec2-book-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ——— SEC3: IMAGE ——— */
  .sec3-img-box {
    width: 100% !important;
    height: 220px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  }

  .sec3-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* ——— SEC4: STATS + BUILDING ——— */
  .sec4-top-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  .sec4-left-col {
    width: 100% !important;
    padding: 0 !important;
  }

  .sec4-building-box {
    width: 100% !important;
    height: 220px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  }

  .sec4-building-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .sec4-divider-line {
    display: none !important;
  }

  .sec4-banner-box {
    border-radius: 8px !important;
    padding: 1.5rem 1.2rem !important;
    margin-top: 1.5rem !important;
  }

  .sec4-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.8rem !important;
    margin-top: 1.2rem !important;
  }

  .sec4-stat-number {
    font-size: 1.4rem !important;
    font-family: 'Azonix', sans-serif !important;
    display: block !important;
    line-height: 1 !important;
    margin-bottom: 0.3rem !important;
  }

  .sec4-stat-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
  }

  /* ——— SEC5: IMARA WA TAWASUL ——— */
  .about-sec5-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .sec5-photo-box {
    width: 100% !important;
    height: 220px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  }

  .sec5-photo-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .sec5-left-bar {
    display: none !important;
  }

  .sec5-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    margin-bottom: 1rem !important;
  }

  .sec5-right-line-box {
    margin: 0 !important;
    width: 100% !important;
  }

  .sec5-right-line {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.8rem !important;
    padding: 0.8rem 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .sec5-right-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    background: #FFC107 !important;
    border-radius: 50% !important;
    margin-top: 6px !important;
    flex-shrink: 0 !important;
  }

  .sec5-workshops-box {
    margin-top: 1rem !important;
  }

  .sec5-workshops-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin-bottom: 1rem !important;
  }

  /* ——— SEC6: BOOKS / NEWSPAPER ——— */
  .about-sec6-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    align-items: center !important;
  }

  .sec6-books-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  .sec6-books-img-box {
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  }

  .sec6-books-img-box img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .sec6-books-text-box {
    width: 100% !important;
    padding: 0 !important;
  }

  .sec6-news-static-card {
    width: 100% !important;
    max-width: 340px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    margin: 0 auto !important;
  }

  .sec6-news-static-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ——————————————————————————————
     SERVICES PAGE
  —————————————————————————————— */
  .services-hero {
    padding: 2.5rem 1.2rem 1.5rem 1.2rem !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .services-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.6rem !important;
  }

  .services-subtext {
    font-size: 0.92rem !important;
    line-height: 1.8 !important;
    color: #555555 !important;
  }

  .services-container {
    padding: 1.5rem 1.2rem 3rem 1.2rem !important;
    gap: 2.5rem !important;
    margin: 0 !important;
  }

  /* Service cards: full width stack image on top, text below */
  .service-row,
  .service-row.reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    padding: 1.5rem 1rem !important;
    border-radius: 10px !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05) !important;
    grid-template-columns: none !important;
    width: 100% !important;
  }

  .service-img-box {
    width: 100% !important;
    height: 210px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    order: -1 !important;
  }

  .service-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .service-content {
    width: 100% !important;
    gap: 0.8rem !important;
  }

  .service-heading {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
  }

  .service-text {
    font-size: 0.9rem !important;
    line-height: 1.8 !important;
    color: #444444 !important;
  }

  .service-num-badge {
    font-size: 0.75rem !important;
  }

  /* ——————————————————————————————
     TEAM PAGE — PREMIUM MOBILE DESIGN
  —————————————————————————————— */

  /* Hero section */
  .team-hero {
    padding: 2.5rem 1.4rem 2rem 1.4rem !important;
    text-align: center !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .team-eyebrow {
    font-size: 0.65rem !important;
    letter-spacing: 0.25em !important;
    color: #C8A96E !important;
    margin-bottom: 0.8rem !important;
    display: block !important;
  }

  .team-main-headline {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.8rem !important;
    color: #111111 !important;
  }

  .team-gold-divider {
    width: 50px !important;
    height: 3px !important;
    margin: 0 auto 1.2rem auto !important;
  }

  .team-intro-paragraph {
    font-size: 0.9rem !important;
    line-height: 1.85 !important;
    color: #555555 !important;
    text-align: center !important;
  }

  /* Grid container */
  .team-grid-sec {
    padding: 1.5rem 1rem 5rem 1rem !important;
    margin: 0 !important;
  }

  .team-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Card */
  .team-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.4rem 0.8rem 1.2rem 0.8rem !important;
    border: 1px solid #eeeeee !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    text-align: center !important;
    background: #ffffff !important;
    transition: none !important;
    position: relative !important;
  }

  /* Avatar circle */
  .team-avatar-box {
    width: 80px !important;
    height: 80px !important;
    position: relative !important;
    margin: 0 auto !important;
  }

  .team-avatar-icon {
    width: 100% !important;
    height: 100% !important;
  }

  /* Number badge */
  .team-code-badge {
    position: absolute !important;
    bottom: -4px !important;
    right: -4px !important;
    background: #FFC107 !important;
    color: #111111 !important;
    font-family: 'Azonix', sans-serif !important;
    font-size: 0.6rem !important;
    padding: 0.2rem 0.45rem !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(255,193,7,0.4) !important;
  }

  /* Info block */
  .team-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }

  .team-member-name {
    font-family: 'Azonix', sans-serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.35 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
  }

  .team-member-gold-line {
    width: 28px !important;
    height: 2px !important;
    background: #FFC107 !important;
    margin: 0.1rem 0 !important;
  }

  .team-member-role {
    font-size: 0.68rem !important;
    color: #888888 !important;
    line-height: 1.45 !important;
    font-weight: 300 !important;
  }

  /* ——————————————————————————————
     ACTIVITY PAGE
  —————————————————————————————— */
  .act-sec2a-container,
  .act-sec2b-container,
  .act-sec3-container,
  .act-sec4-container,
  .act-sec5-container,
  .act-sec6-container,
  .act-sec7-container {
    padding: 2.5rem 1.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide auditorium image on mobile (user request) */
  .activity-img-box {
    display: none !important;
  }

  .act-sec2b-title,
  .act-sec3-title,
  .act-sec4-title,
  .act-sec5-title {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 1rem !important;
  }

  /* All activity section grids: column stack */
  .act-sec1-grid,
  .act-sec2b-grid,
  .act-sec3-grid,
  .act-sec4-grid,
  .act-sec5-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  /* Activity images full-width, cover fill */
  .act-sec2b-main-img-box,
  .act-sec1-img-box,
  .act-sec3-img-box,
  .act-sec4-img-box,
  .act-sec5-img-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 230px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    background: #f0f0f0 !important;
  }

  .act-sec2b-main-img-box img,
  .act-sec2b-main-img,
  .act-sec1-img-box img,
  .act-sec3-img-box img,
  .act-sec4-img-box img,
  .act-sec5-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    loading: eager !important;
    background: #f0f0f0 !important;
    min-height: 100% !important;
  }

  /* Fix trilogy main image only — center girl's face */
  img[src*="trilogy_main1"] {
    object-position: center center !important;
  }

  /* Activity text columns full width */
  .act-sec2b-left-text,
  .act-sec1-left-text,
  .act-sec3-left-text,
  .act-sec4-left-text,
  .act-sec5-left-text {
    width: 100% !important;
    max-width: 100% !important;
  }

  .act-sec2b-left-text p,
  .act-sec1-left-text p,
  .act-sec3-left-text p,
  .act-sec4-left-text p,
  .act-sec5-left-text p {
    font-size: 0.92rem !important;
    line-height: 1.8 !important;
    color: #333333 !important;
    margin-bottom: 1rem !important;
  }

  /* Video buttons */
  .act-video-btn {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-size: 0.8rem !important;
    color: #111111 !important;
    background: #f5f5f5 !important;
    padding: 0.6rem 1rem !important;
    border-radius: 6px !important;
    margin-bottom: 0.6rem !important;
    text-decoration: none !important;
    border: 1px solid #e0e0e0 !important;
    width: 100% !important;
  }

  /* ——————————————————————————
     Activity section 2b — full rework for mobile
  —————————————————————————— */

  /* Container: no left border, full width */
  .act-sec2b-container {
    padding: 2rem 1.2rem !important;
    border-left: none !important;
    max-width: 100% !important;
    margin: 0 0 3rem 0 !important;
  }

  /* Circle badge: hide (not meaningful on mobile) */
  .act-circle-badge {
    display: none !important;
  }

  /* Title */
  .act-sec2b-title {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: 0.08em !important;
  }

  /* Grid: column stack */
  .act-sec2b-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Text block */
  .act-sec2b-left-text {
    font-size: 0.92rem !important;
    line-height: 1.85 !important;
    gap: 1rem !important;
  }

  /* Video buttons: full width pill style */
  .act-video-links-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    margin-top: 0.5rem !important;
  }

  .act-video-btn {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #111111 !important;
    text-decoration: none !important;
    width: 100% !important;
  }

  /* Main image: full width */
  .act-sec2b-main-img-box {
    width: 100% !important;
    height: 240px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  }

  .act-sec2b-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 95% center !important;
    display: block !important;
  }

  /* Slider: horizontal scroll, show ~1.5 cards */
  .act-slider-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.5rem 1.2rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .act-slider-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  .act-slider-track {
    display: flex !important;
    gap: 0.8rem !important;
    width: max-content !important;
  }

  .act-slide-card {
    width: 200px !important;
    height: 140px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e0e0e0 !important;
  }

  .act-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Between section — tall slide cards: smaller on mobile */
  .act-tall-slide-card {
    width: 160px !important;
    height: 220px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e0e0e0 !important;
  }

  .act-tall-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ——————————————————————————————
     GLOBAL TYPOGRAPHY
  —————————————————————————————— */
  h1 { font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; line-height: 1.3 !important; }
  p  { font-size: 0.92rem !important; line-height: 1.8 !important; }

  /* ——————————————————————————————
     FOOTER
  —————————————————————————————— */
  .footer {
    padding: 2rem 1.2rem !important;
    text-align: center !important;
    font-size: 0.78rem !important;
  }

  .footer-links {
    flex-direction: column !important;
    gap: 0.6rem !important;
    margin-top: 1rem !important;
  }

}