/* ==========================================================================
   RESPONSIVE STYLESHEET
   Strictly device-targeted media queries using ONLY max-width.
   NO normal CSS outside media queries (preserves desktop 100% undisturbed).
   Strictly max-width media queries only.

   Target Devices Covered:
   - Galaxy Z Fold 5 (Cover 344px / Unfolded 768px)
   - Samsung Galaxy A51/71 (412px / Landscape 914px)
   - Surface Duo (Single 540px / Dual 720px)
   - iPad Mini (768px / 1024px)
   - iPad Air (820px)
   - Asus Zenbook Fold (Folded 853px)
   - Surface Pro 7 (Portrait 912px)
   - iPad Pro (Portrait 1024px)
   - Nest Hub (1024px x 600px)
   - Nest Hub Max (1280px x 800px landscape)
   ========================================================================== */


/* ==========================================================================
   1. TABLET & COMPACT DESKTOP BREAKPOINT (max-width: 1024px)
   Targets: iPad Pro portrait (1024px), Nest Hub (1024px), iPad Mini landscape (1024px)
   ========================================================================== */
   @media screen and (max-width: 1024px) {
    /* Overflow containment on tablet */
    html,
    body,
    main {
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden !important;
    }
  
    img,
    svg,
    video {
      max-width: 100%;
    }
  
    .hero-four-block,
    .hero-four-block-two,
    .footer-blue-box-patch {
      max-width: 100% !important;
    }
  
    .innovation-four-block {
      display: none !important;
    }
  
    /* Hero Banner scaling to prevent overlap */
    .hero-banner .desktop-only > .container {
      position: static !important;
    }
  
    .hero-banner .creativity-innovation {
      position: absolute !important;
      bottom: 45px !important;
      left: 35px !important;
      width: 380px !important;
      max-width: 44% !important;
      height: auto !important;
    }
  
    .hero-banner .hero-student-image {
      position: absolute !important;
      bottom: 0 !important;
      right: 35px !important;
      width: 38% !important;
      max-width: 38% !important;
      height: auto !important;
    }
  
    .hero-banner .hero-four-block {
      max-width: 38% !important;
    }
  
    /* Dr. Trupti Agarwal Quote Block */
    .about-indo-block .row {
      height: auto !important;
      min-height: auto !important;
      padding: 35px 30px !important;
      align-items: center !important;
      position: relative !important;
    }
  
    .about-indo-block .col-md-8 {
      width: 62% !important;
      padding-right: 20px !important;
    }
  
    .about-indo-block .col-md-4 {
      width: 38% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
  
    .about-indo-block .found-block-right-img-indo {
      position: relative !important;
      right: auto !important;
      bottom: auto !important;
      max-width: 100% !important;
      height: auto !important;
      display: block !important;
    }
  
    .about-indo-block p {
      font-size: 22px !important;
      line-height: 1.35 !important;
    }
  
    .about-indo-block p span {
      font-size: 24px !important;
    }
  
    /* Thomas Edison Light Lamp Block */
    .light-block .row.light-wrapper {
      height: auto !important;
      min-height: auto !important;
      align-items: center !important;
      padding: 30px 25px !important;
      position: relative !important;
    }
  
    .light-block .light-lamp {
      position: relative !important;
      left: 0 !important;
      bottom: 0 !important;
      max-width: 220px !important;
      margin: 0 auto !important;
    }
  
    .light-block p {
      font-size: 30px !important;
      line-height: 1.25 !important;
    }
  
    .light-block p span {
      font-size: 44px !important;
    }
  
    /* Our Ideas Section: Card typography scaling & flush image placement */
    .our-ideas .idea-para-one {
      font-size: 26px !important;
      padding: 4px 16px !important;
      margin-top: 0 !important;
    }
  
    .our-ideas .idea-para-two {
      font-size: 16px !important;
    }
  
    .our-ideas .card-properties {
      gap: 0 !important;
      row-gap: 0 !important;
    }
  
    .our-ideas .card-properties img:not(.ask-questio-mark) {
      max-height: 160px !important;
      margin-bottom: 0 !important;
      vertical-align: bottom !important;
    }
  
    .our-ideas .hero-four-block-two {
      display: none !important;
    }
  
    /* Showcase Cards */
    .showcase-grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
      gap: 20px !important;
    }
  
    .showcase-card {
      height: 450px !important;
    }
  
    /* Junk to Genius & Cube Animation */
    .genious-wrapper {
      padding-bottom: 40px !important;
    }
  
    .cube-animation {
      position: relative !important;
      bottom: 0 !important;
      right: 0 !important;
      display: flex !important;
      justify-content: center !important;
      margin-top: 25px !important;
    }
  
    .cube-animation img {
      max-width: 180px !important;
      height: auto !important;
    }
  
    /* Schools Section */
    .innovation-wrapper {
      padding: 50px 0 120px 0 !important;
    }
  
    .schools-swiper-outer {
      position: relative !important;
      padding: 0 16px !important;
    }
  
    .school-card {
      border-radius: 12px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      height: 100% !important;
    }
  
    .school-name {
      font-size: 16px !important;
      line-height: 1.25 !important;
    }
  
    .school-arrow-btn {
      width: min(200px, 88%) !important;
      margin: 0 auto 16px auto !important;
      border-radius: 8px !important;
      font-size: 14px !important;
      padding: 8px 12px !important;
    }
  
    /* Footer */
    footer p.footer-title.txt-white {
      font-size: 36px !important;
      line-height: 1.3 !important;
    }
  
    footer .footer-txt p:nth-child(2) {
      font-size: 18px !important;
    }
  
    footer .footer-blue-box-patch {
      position: absolute !important;
      right: 40px !important;
      top: -35px !important;
      max-width: 240px !important;
      height: auto !important;
    }
  }
  
  
  /* ==========================================================================
     2. MID TABLETS BREAKPOINT (max-width: 991px)
     Targets: Surface Pro 7 portrait (912px), Samsung Galaxy A51 landscape (914px),
     Asus Zenbook Fold folded (853px), iPad Air portrait (820px)
     ========================================================================== */
  @media screen and (max-width: 991px) {
    /* Navigation: Active hamburger menu so links fit within 720px tablet container */
    .navbar-wrapper {
      padding: 12px 16px !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
    }
  
    .navbar-inner {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
      position: relative !important;
    }
  
    .logo {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      justify-content: flex-start !important;
      margin: 0 !important;
      text-decoration: none !important;
    }
  
    .header-logo {
      width: clamp(110px, 20vw, 150px) !important;
      height: auto !important;
    }
  
    .second-logo {
      /* width: clamp(110px, 20vw, 150px) !important; */
      height: auto !important;
      border-left: 1px solid #E7D1B2 !important;
      padding-left: 10px !important;
    }
  
    .menu-toggle {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 6px !important;
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      z-index: 1002 !important;
    }
  
    .menu-toggle img {
      width: 26px !important;
      height: auto !important;
      display: block !important;
    }
  
    .nav-links {
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      background-color: var(--bg-cream, #F6EAD9) !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 14px !important;
      padding: 0 20px !important;
      max-height: 0 !important;
      overflow: hidden !important;
      box-shadow: 0 12px 24px rgba(0, 46, 110, 0.12) !important;
     
      transition: max-height 0.32s ease, padding 0.32s ease !important;
      z-index: 1001 !important;
    }
  
    .nav-links.open {
      max-height: 320px !important;
      padding: 18px 20px 22px !important;
    }
  
    .nav-links li {
      width: 100% !important;
    }
  
    .nav-links a {
      display: block !important;
      font-size: 17px !important;
      padding: 8px 0 !important;
      border-bottom: 1px solid rgba(0, 46, 110, 0.08) !important;
    }
  
    /* Hero Banner: FIX FOR MOBILE.CSS OVERRIDE (restores title size on tablets) */
    .hero-banner .desktop-only > .container {
      position: static !important;
    }
  
    .hero-banner .desktop-only .creativity-innovation,
    .hero-banner .creativity-innovation {
      position: absolute !important;
      bottom: clamp(24px, 4.8vw, 55px) !important;
      left: clamp(24px, 3.8vw, 50px) !important;
      width: clamp(270px, 38vw, 360px) !important;
      max-width: 44% !important;
      height: auto !important;
      z-index: 5 !important;
    }
  
    .hero-banner .desktop-only .hero-student-image,
    .hero-banner .hero-student-image {
      position: absolute !important;
      bottom: 0 !important;
      right: clamp(16px, 3vw, 45px) !important;
      width: clamp(270px, 38vw, 360px) !important;
      max-width: 44% !important;
      height: auto !important;
      z-index: 4 !important;
    }
  
    .hero-banner .desktop-only .hero-four-block,
    .hero-banner .hero-four-block {
      position: absolute !important;
      bottom: -2px !important;
      right: clamp(12px, 2.5vw, 35px) !important;
      max-width: 32% !important;
      z-index: 2 !important;
    }
  
    /* Ask Make Become Section */
    .ask-make-become {
      padding-top: 45px !important;
    }
  
    .ask-make-become .row#theme {
      align-items: center !important;
    }
  
    .ask-make-become .image-card img {
      border-radius: 18px !important;
      max-height: 100% !important;
      object-fit: cover !important;
    }
  
    .ask-make-become .text-card p:nth-child(1) {
      font-size: 22px !important;
    }
  
    .ask-make-become .text-card h1 {
      font-size: clamp(26px, 3.5vw, 34px) !important;
      line-height: 1.2 !important;
    }
  
    .ask-make-become .rubik-para {
      font-size: 15px !important;
      line-height: 1.55 !important;
    }
  
    /* Dr. Trupti Agarwal Quote Block */
    .about-indo-block {
      margin-top: 50px !important;
      padding-bottom: 30px !important;
    }
  
    .about-indo-block .flying-rocket {
      display: none !important;
    }
  
    .about-indo-block .row {
      height: auto !important;
      min-height: auto !important;
      flex-direction: row !important;
      align-items: center !important;
      padding: 30px 24px !important;
      margin: 0 !important;
      border-radius: 36px !important;
    }
  
    .about-indo-block .col-md-8 {
      width: 60% !important;
      padding-right: 15px !important;
    }
  
    .about-indo-block .col-md-4 {
      width: 40% !important;
      display: flex !important;
      justify-content: center !important;
    }
  
    .about-indo-block .found-block-right-img-indo {
      position: relative !important;
      right: auto !important;
      bottom: auto !important;
      max-width: 100% !important;
      height: auto !important;
      display: block !important;
    }
  
    .about-indo-block p {
      font-size: 20px !important;
      line-height: 1.35 !important;
    }
  
    .about-indo-block p span {
      font-size: 22px !important;
    }
  
    .about-indo-block h4 {
      font-size: 17px !important;
      padding-top: 10px !important;
      left: 0 !important;
    }
  
    /* Our Ideas: 2x2 Grid Layout (prevents 4th card from wrapping onto a row alone!) */
    .our-ideas .our-ideas-colour-card {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 20px !important;
      justify-content: center !important;
      padding: 15px 10px !important;
      margin: 0 !important;
    }
  
    .our-ideas .our-ideas-colour-card .card-properties {
      flex: 0 0 calc(50% - 12px) !important;
      width: calc(50% - 12px) !important;
      max-width: calc(50% - 12px) !important;
      min-height: 300px !important;
      border-radius: 20px !important;
      background-size: 100% 100% !important;
      gap: 0 !important;
      row-gap: 0 !important;
    }
  
    .our-ideas .idea-para-one {
      font-size: 26px !important;
      padding: 4px 18px !important;
      margin: 0 auto !important;
      margin-top: 0 !important;
      /* border-radius: 999px !important; */
    }
  
    .our-ideas p.idea-para-one.light-green-strip {
      margin: 0 auto !important;
      margin-top: 0 !important;
    }
  
    .our-ideas .idea-para-two {
      font-size: 16px !important;
      text-align: center !important;
    }
  
    .our-ideas .card-properties img:not(.ask-questio-mark) {
      max-height: 160px !important;
      margin-bottom: 0 !important;
      vertical-align: bottom !important;
    }
  
    /* Thomas Edison Light Lamp Block */
    .light-block {
      margin-top: 40px !important;
      padding-bottom: 20px !important;
    }
  
    .light-block .row.light-wrapper {
      height: auto !important;
      min-height: auto !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      padding: 28px 20px 32px !important;
      margin: 0 !important;
      border-radius: 28px !important;
    }
  
    .light-block .col-md-4,
    .light-block .col-md-8 {
      width: 100% !important;
      padding: 0 !important;
    }
  
    .light-block .found-block-right-img.light-lamp {
      position: relative !important;
      left: 0 !important;
      bottom: 0 !important;
      max-width: min(200px, 55%) !important;
      height: auto !important;
      margin: 0 auto 14px auto !important;
      display: block !important;
    }
  
    .light-block p {
      font-size: clamp(20px, 4vw, 28px) !important;
      line-height: 1.3 !important;
      margin: 0 !important;
      text-align: center !important;
    }
  
    .light-block p span {
      font-size: clamp(28px, 5.5vw, 42px) !important;
    }
  
    .light-block h4 {
      float: none !important;
      text-align: center !important;
      padding: 12px 0 0 0 !important;
      font-size: 18px !important;
      margin: 0 !important;
    }
  
    /* Junk to Genius Showcase */
    .jg-header-cell {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 24px !important;
    }
  
    .jg-header-cell img {
      max-width: 280px !important;
    }
  
    .genious-wrapper {
      padding-bottom: 40px !important;
    }
  
    .cube-animation {
      position: relative !important;
      bottom: 0 !important;
      right: 0 !important;
      display: flex !important;
      justify-content: center !important;
      margin-top: 20px !important;
    }
  
    .cube-animation img {
      max-width: 180px !important;
      height: auto !important;
    }
  
    /* Schools Swiper Cards */
    .school-card {
      border-radius: 12px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      height: 100% !important;
    }
  
    .school-card a {
      display: flex !important;
      justify-content: center !important;
      width: 100% !important;
      text-decoration: none !important;
    }
  
    .school-name {
      font-size: clamp(15px, 1.8vw, 19px) !important;
      line-height: 1.25 !important;
    }
  
    .school-arrow-btn {
      width: min(220px, 88%) !important;
      margin: 0 auto 16px auto !important;
      border-radius: 8px !important;
      font-size: 15px !important;
    }
  
    .innovation-wrapper {
      padding: 40px 0 100px 0 !important;
    }
  
    .innovation-four-block {
      display: none !important;
    }
  
    /* Footer */
    footer .footer-blue-box-patch {
      position: absolute !important;
      right: 15px !important;
      top: -30px !important;
      width: clamp(160px, 35vw, 260px) !important;
    }
  
    footer .row {
      flex-direction: column-reverse !important;
      text-align: center !important;
    }
  
    footer .footer-left-logo {
      max-width: min(340px, 80%) !important;
      height: auto !important;
      margin: 20px auto 0 auto !important;
      display: block !important;
    }
  
    footer .footer-txt {
      padding: 36px 20px 10px 20px !important;
      text-align: center !important;
    }
  
    footer p.footer-title.txt-white {
      font-size: clamp(24px, 4.5vw, 34px) !important;
      line-height: 1.25 !important;
    }
  
    footer .footer-txt p:nth-child(2) {
      font-size: clamp(14px, 2.2vw, 17px) !important;
      padding: 12px 0 !important;
    }
  
    footer .social-links {
      justify-content: center !important;
      gap: 16px !important;
    }
  
    .bottom-footer .bottom-footer-txt {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 8px !important;
    }
  }
  
  
  /* ==========================================================================
     3. SMALL TABLETS & FOLDABLES UNFOLDED (max-width: 768px)
     Targets: iPad Mini portrait (768px), Galaxy Z Fold 5 unfolded (768px)
     ========================================================================== */
  @media screen and (max-width: 768px) {
    .hero-banner .desktop-only .creativity-innovation,
    .hero-banner .creativity-innovation {
      width: 280px !important;
      bottom: 24px !important;
      left: 20px !important;
    }
  
    .hero-banner .desktop-only .hero-student-image,
    .hero-banner .hero-student-image {
      width: 280px !important;
      right: 15px !important;
    }
  
    .our-ideas .our-ideas-colour-card .card-properties {
      flex: 0 0 calc(50% - 10px) !important;
      width: calc(50% - 10px) !important;
      max-width: calc(50% - 10px) !important;
      min-height: 290px !important;
      gap: 0 !important;
      row-gap: 0 !important;
    }
  }
  
  
  /* ==========================================================================
     4. MOBILE DEVICES BREAKPOINT (max-width: 767px)
     Targets: All handheld devices, foldables, phones
     ========================================================================== */
  @media screen and (max-width: 767px) {
    /* Hero Mobile Banner */
    .hero-banner .desktop-only {
      display: none !important;
    }
  
    .hero-banner .mobile-only,
    .hero-mobile-banner {
      display: block !important;
      background-size: cover !important;
      background-position: center bottom !important;
      background-repeat: no-repeat !important;
      width: 100% !important;
      overflow: hidden !important;
      position: relative !important;
      padding: 10px 0 0 0 !important;
    }
  
    .hero-mobile-banner .left-box {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
      padding: 20px 14px 6px !important;
    }
  
    .hero-mobile-banner .left-box img:first-child {
      width: clamp(75px, 22vw, 105px) !important;
      height: auto !important;
    }
  
    .hero-mobile-banner .left-box img:last-child {
      width: clamp(150px, 48vw, 210px) !important;
      height: auto !important;
    }
  
    .hero-mobile-banner .right-box {
      display: flex !important;
      justify-content: center !important;
      align-items: flex-end !important;
      padding: 0 14px !important;
      margin-top: 8px !important;
    }
  
    .hero-mobile-banner .right-box img {
      max-width: min(380px, 92vw) !important;
      width: 100% !important;
      height: auto !important;
      display: block !important;
      margin: 0 auto !important;
    }
  
    .hero-mobile-banner .hero-four-block {
      position: absolute !important;
      bottom: -2px !important;
      right: 12px !important;
      max-width: clamp(110px, 32vw, 170px) !important;
      height: auto !important;
      z-index: 2 !important;
    }
  
    /* Ask Make Become */
    .ask-make-become {
      padding-top: 30px !important;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  
    .ask-make-become .row#theme {
      flex-direction: column !important;
      gap: 18px !important;
    }
  
    .ask-make-become .image-card {
      width: 100% !important;
      max-width: 100% !important;
      text-align: center !important;
    }
  
    .ask-make-become .image-card img {
      border-radius: 16px !important;
      max-height: 100% !important;
      width: 100% !important;
      object-fit: cover !important;
    }
  
    .ask-make-become .text-card {
      width: 100% !important;
      padding: 0 4px !important;
      text-align: left !important;
    }
  
    .ask-make-become .text-card p:nth-child(1) {
      font-size: clamp(16px, 4.5vw, 20px) !important;
      margin-bottom: 4px !important;
    }
  
    .ask-make-become .text-card h1 {
      font-size: clamp(22px, 6vw, 28px) !important;
      line-height: 1.2 !important;
      margin-bottom: 14px !important;
    }
  
    .ask-make-become .rubik-para {
      font-size: 15px !important;
      line-height: 1.55 !important;
      margin-bottom: 12px !important;
    }
  
    /* Dr. Trupti Agarwal Quote Block */
    .about-indo-block {
      margin-top: 35px !important;
      padding-bottom: 25px !important;
    }
  
    .about-indo-block .row {
      height: auto !important;
      min-height: auto !important;
      flex-direction: column-reverse !important;
      padding: 24px 18px 28px !important;
      margin: 0 !important;
      border-radius: 24px !important;
      text-align: center !important;
      align-items: center !important;
    }
  
    .about-indo-block .col-md-8,
    .about-indo-block .col-md-4 {
      width: 100% !important;
      padding: 0 !important;
    }
  
    .about-indo-block .found-block-right-img-indo {
      position: relative !important;
      right: auto !important;
      bottom: auto !important;
      max-width: min(240px, 70%) !important;
      height: auto !important;
      margin: 0 auto 16px auto !important;
      display: block !important;
    }
  
    .about-indo-block p {
      font-size: clamp(17px, 4.5vw, 20px) !important;
      line-height: 1.4 !important;
      margin: 0 !important;
      text-align: center !important;
    }
  
    .about-indo-block p span {
      font-size: clamp(18px, 4.8vw, 22px) !important;
    }
  
    .about-indo-block .found-block-quote-mark {
      width: 24px !important;
      margin-right: 4px !important;
      top: -4px !important;
      left: 0 !important;
      display: inline-block !important;
    }
  
    .about-indo-block h4 {
      font-size: 16px !important;
      padding-top: 10px !important;
      left: 0 !important;
      text-align: center !important;
      margin-bottom: 14px !important;
    }
  
    .about-indo-block .activity-wrapper {
      margin: 10px auto 0 auto !important;
      display: flex !important;
      justify-content: center !important;
    }
  
    /* Our Ideas Section: Single-Column, Full-Width, Flush Image Placement */
    .our-ideas-heading {
      font-size: clamp(22px, 5.5vw, 32px) !important;
      line-height: 1.25 !important;
      text-align: center !important;
      margin-bottom: 24px !important;
      padding: 0 10px !important;
    }
  
    .our-ideas .our-ideas-colour-card {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 28px !important;
      padding: 10px 0 !important;
      margin: 0 auto !important;
      width: 100% !important;
    }
  
    .our-ideas .our-ideas-colour-card .card-properties {
      flex: 0 0 auto !important;
      width: 100% !important;
      max-width: min(320px, 88vw) !important;
      min-height: 330px !important;
      height: 330px !important;
      background-size: 100% 100% !important;
      background-repeat: no-repeat !important;
      background-position: center bottom !important;
      border-radius: 20px !important;
      margin: 0 auto !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-end !important;
      padding-bottom: 24px !important;
      position: relative !important;
      gap: 0 !important;
      row-gap: 0 !important;
    }
  
    /* Image touches the text strip directly with NO gap */
    .our-ideas .our-ideas-colour-card .card-properties img:not(.ask-questio-mark) {
      max-height: 165px !important;
      width: auto !important;
      max-width: 80% !important;
      object-fit: contain !important;
      margin-bottom: 0 !important;
      vertical-align: bottom !important;
      display: block !important;
    }
  
    .our-ideas .our-ideas-colour-card .ask-questio-mark {
      position: absolute !important;
      top: 45px !important;
      left: 45px !important;
      width: 44px !important;
      height: auto !important;
    }
  
    .our-ideas .our-ideas-colour-card .idea-para-one {
      font-size: 26px !important;
      font-weight: 400 !important;
      padding: 4px 24px !important;
      margin: 0 auto !important;
      margin-top: 0 !important;
      /* border-radius: 999px !important; */
      display: inline-block !important;
      white-space: nowrap !important;
      line-height: 1.2 !important;
    }
  
    .our-ideas .our-ideas-colour-card p.idea-para-one.light-green-strip {
      margin: 0 auto !important;
      margin-top: 0 !important;
      padding: 4px 24px !important;
    }
  
    .our-ideas .our-ideas-colour-card .idea-para-two {
      font-size: 17px !important;
      text-align: center !important;
      padding: 6px 14px 0 14px !important;
      margin: 0 !important;
      line-height: 1.25 !important;
      white-space: normal !important;
    }
  
    .our-ideas .hero-four-block-two,
    .our-ideas-wrapper .hero-four-block-two {
      display: none !important;
    }
  
    /* Junk to Genius Section */
    .genious-wrapper .jg-section {
      padding: 40px 14px 20px !important;
    }
  
    .jg-header-cell {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 16px !important;
      padding: 0 10px !important;
    }
  
    .jg-header-cell img {
      max-width: min(260px, 80%) !important;
      height: auto !important;
    }
  
    .jg-subtitle {
      font-size: clamp(20px, 5vw, 24px) !important;
      margin-top: 8px !important;
      padding-bottom: 8px !important;
    }
  
    .learning-txt {
      font-size: 15px !important;
      margin-bottom: 15px !important;
    }
  
    .cube-animation img {
      max-width: 180px !important;
      height: auto !important;
    }
  
    /* Swiper Nav Buttons */
    .schools-swiper-outer {
      padding: 0 8px !important;
    }
  
    .swiper-nav-btn {
      width: 36px !important;
      height: 36px !important;
      top: 36% !important;
    }
  
    .swiper-nav-btn svg {
      width: 16px !important;
      height: 16px !important;
    }
  
    .swiper-nav-btn.prev {
      left: -4px !important;
    }
  
    .swiper-nav-btn.next {
      right: -4px !important;
    }
  
    /* Modal Responsiveness */
    #exampleModal .about-info .row {
      flex-direction: column !important;
    }
  
    #exampleModal .col-md-4.left-card {
      width: 100% !important;
      margin-bottom: 20px !important;
    }
  
    #exampleModal .col-md-4.left-card img {
      max-width: 180px !important;
      margin: 0 auto !important;
    }
  
    #exampleModal .col-md-8.text-card {
      width: 100% !important;
      padding-left: 0 !important;
    }
  
    #exampleModal .about-info .text-card .quote-mark {
      width: 24px !important;
      position: static !important;
      display: inline-block !important;
      margin-right: 6px !important;
    }
  
    #exampleModal .rubik-para {
      font-size: 15px !important;
      line-height: 1.55 !important;
    }
  }
  
  
  /* ==========================================================================
     5. NARROW HANDHELD BREAKPOINT (max-width: 539px)
     Targets: Surface Duo (540px single screen), Galaxy A51 (412px), Z Fold 5 (344px)
     ========================================================================== */
  @media screen and (max-width: 539px) {
    /* Our Ideas: 1-Column Stacking for comfortable reading */
    .our-ideas .our-ideas-colour-card {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 24px !important;
      padding: 10px 0 !important;
      margin: 0 auto !important;
      width: 100% !important;
    }
  
    .our-ideas .our-ideas-colour-card .card-properties {
      flex: 0 0 auto !important;
      width: 100% !important;
      max-width: min(310px, 88vw) !important;
      min-height: 320px !important;
      height: 320px !important;
      border-radius: 18px !important;
      background-size: 100% 100% !important;
      margin: 0 auto !important;
      gap: 0 !important;
      row-gap: 0 !important;
    }
  
    .our-ideas .our-ideas-colour-card .idea-para-one {
      font-size: 24px !important;
      padding: 4px 20px !important;
      margin-top: 0 !important;
    }
  
    .our-ideas .our-ideas-colour-card .idea-para-two {
      font-size: 16px !important;
      padding-top: 4px !important;
    }
  
    .our-ideas .our-ideas-colour-card .card-properties img:not(.ask-questio-mark) {
      max-height: 155px !important;
      margin-bottom: 0 !important;
      vertical-align: bottom !important;
    }
  
    .our-ideas-heading {
      font-size: 24px !important;
    }
  
    /* Activity Showcase */
    .showcase-grid {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }
  
    .showcase-card {
      height: 380px !important;
    }
  }
  
  
  /* ==========================================================================
     6. STANDARD SMARTPHONES (max-width: 480px)
     Targets: Samsung Galaxy A51/71 (412px), iPhone sizes
     ========================================================================== */
  @media screen and (max-width: 480px) {
    #scrollTopBtn {
      bottom: 18px !important;
      right: 18px !important;
      width: 42px !important;
      height: 42px !important;
      font-size: 18px !important;
    }
  
    .modal-panel {
      padding: 20px 14px !important;
      border-radius: 18px !important;
      overflow: hidden;
    }
  }
  
  
  /* ==========================================================================
     7. ULTRA-NARROW FOLDABLES (max-width: 360px)
     Targets: Galaxy Z Fold 5 cover screen (344px)
     ========================================================================== */
  @media screen and (max-width: 360px) {
    .navbar-wrapper {
      padding: 10px 8px !important;
    }
  
    .logo {
      gap: 6px !important;
    }
  
    .header-logo {
      width: 105px !important;
    }
  
    .second-logo {
      /* width: clamp(110px, 20vw, 150px) !important; */
      padding-left: 6px !important;
    }
  
    .menu-toggle img {
      width: 22px !important;
    }
  
    .hero-mobile-banner .left-box {
      gap: 8px !important;
      padding: 14px 8px 4px !important;
    }
  
    .hero-mobile-banner .left-box img:first-child {
      width: 70px !important;
    }
  
    .hero-mobile-banner .left-box img:last-child {
      width: 140px !important;
    }
  
    .hero-mobile-banner .right-box img {
      max-width: 96vw !important;
    }
  
    .our-ideas .our-ideas-colour-card .card-properties {
      max-width: min(290px, 90vw) !important;
      min-height: 310px !important;
      height: 310px !important;
      gap: 0 !important;
      row-gap: 0 !important;
    }
  
    .our-ideas .our-ideas-colour-card .idea-para-one {
      font-size: 22px !important;
      padding: 3px 18px !important;
      margin-top: 0 !important;
    }
  
    .our-ideas .our-ideas-colour-card .idea-para-two {
      font-size: 15px !important;
    }
  
    .our-ideas .our-ideas-colour-card .card-properties img:not(.ask-questio-mark) {
      max-height: 145px !important;
      margin-bottom: 0 !important;
      vertical-align: bottom !important;
    }
  
    .our-ideas-heading {
      font-size: 20px !important;
    }
  }
  
  
  /* ==========================================================================
     8. SHORT LANDSCAPE SMART DISPLAYS (max-width: 1280px and max-height: 700px)
     Targets: Nest Hub (1024x600), Nest Hub Max (1280x800) in landscape
     ========================================================================== */
  @media screen and (max-width: 1280px) and (max-height: 700px) and (orientation: landscape) {
    .ask-make-become {
      padding-top: 25px !important;
    }
  
    .genious-wrapper .jg-section {
      padding: 30px 20px 20px !important;
    }
  
    .genious-wrapper {
      padding-bottom: 30px !important;
    }
  
    .cube-animation {
      position: relative !important;
      bottom: 0 !important;
      right: 0 !important;
      display: flex !important;
      justify-content: center !important;
      margin-top: 15px !important;
    }
  
    .cube-animation img {
      max-width: 150px !important;
      height: auto !important;
    }
  
    .innovation-four-block {
      display: none !important;
    }
  
    .innovation-wrapper {
      padding: 35px 0 110px 0 !important;
    }
  
    .about-indo-block {
      margin-top: 30px !important;
    }
  
    .light-block {
      margin-top: 25px !important;
    }
  
    /* Hide footer blue box patch on short landscape smart displays so it never collides with cards */
    footer .footer-blue-box-patch {
      display: none !important;
    }
  
    .modal-panel {
      max-height: 84vh !important;
      overflow: hidden;
    }
  }