/* =========================================
   RESPONSIVENESS (Mobile First -> Desktop)
   ========================================= */

@media (max-width: 1400px) {
.header-outer .header-inner{gap: 0.6rem;}
.header-outer .header-menu-ul-list{gap: 0.5rem;}
.header-outer .header-right-btns{gap: 0.5rem;}
}


@media (max-width: 1199px) {

  /* Show hamburger, hide login btn */
  .header-outer .mob-nav-toggle { display: flex; align-items: center; justify-content: center; }
  .header-outer .header-right-btns { margin-left: auto; gap: 0.4rem; }
  .header-outer .header-right-btns .btn { display: none; }
  .header-outer .header-right-btns .search-icon-bx { display: flex; align-items: center; }

  /* Slide-in drawer */
  .header-outer .header-menu-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 350px;
    height: 100vh;
    height: 100dvh; /* dynamic viewport — prevents iOS address-bar push */
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 1050;
    overflow: hidden; /* drawer itself does NOT scroll */
    padding: 0;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.14);
    transform: translateX(-100%);
    transition: transform 0.35s ease-in-out;
    will-change: transform;
  }
  .header-outer .header-menu-wrap.mob-open {
    transform: translateX(0);
  }

  /* Mobile nav footer — login button always visible at bottom */
  .mob-nav-footer {
    display: block;
    padding: 1rem;
    flex-shrink: 0;
    border-top: 1px solid #f0f0f0;
  }

  /* Mobile nav header — always visible at top */
  .mob-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
  }
  .mob-nav-header .mob-nav-logo img { max-height: 36px; }
  .mob-nav-close {
    border: none;
    background: var(--PrimaryColor);
    color: var(--WhiteColor);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mob-nav-close svg { width: 18px; height: 18px; }

  /* Nav list — only this area scrolls when dropdown expands */
  .header-outer .header-menu-ul-list {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    overscroll-behavior: contain;
  }

  /* Each mega-menu item */
  .header-outer .mega-menu,
  .header-outer .mega-menu--full { position: static; }

  /* Nav link row */
  .header-outer .dropdown-hover {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f4f4f4;
    border-radius: 0;
    font-size: 0.92rem;
    font-weight: 500;
  }

  /* Panel: static, no float */
  .header-outer .mm-panel,
  .header-outer .mm-panel--councils,
  .header-outer .mm-panel--services,
  .header-outer .mm-panel--meetings,
  .header-outer .mm-panel--regions {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #f8fafc;
    padding: 4px 0 8px !important;
    top: auto !important;
    left: auto !important;
  }

  /* Links inside panel */
  .header-outer .mm-links { display: block; padding: 0; columns: 1 !important; }
  .header-outer .mm-links li { width: auto !important; break-inside: auto; }
  .header-outer .mm-links a { padding: 8px 1.75rem; font-size: 0.88rem; white-space: normal; }

  /* Hide map in regions on mobile */
  .header-outer .mm-panel--regions .col-9 { display: none; }
  .header-outer .mm-panel--regions .col-3 { flex: 0 0 100%; max-width: 100%; }
  .header-outer .mm-phase { border-radius: 8px; margin: 8px 12px; }

  /* Login btn at bottom of drawer */
  .header-outer .header-menu-wrap::after {
    content: '';
    display: block;
    height: 1rem;
  }
.principles-section .principles-video-card .principles-video-thumb img{height: 300px;}

}




@media (max-width: 991px) {
  .same-heading {
    margin-bottom: 2rem;
  }

  /* Global */
.same-section { padding: 3.5rem 0; }
.max-wid-50 { max-width: 100%; }
.max-wid-80{max-width: 100%;}
.section-bottom-btn { flex-wrap: wrap;}
.hero-section{min-height: inherit;    padding: 3rem 0rem ;}
.hero-section h1{font-size: 2.6rem;}
.same-heading h2{font-size: 2rem;}
.hero-tags{margin-top: 1rem;}
.why-digital-world-section .why-cards-row{flex-wrap: wrap;}
.why-digital-world-section .why-card{max-width: 48%; flex: 0 0 auto;}
.devdocs-section .network-details-card{padding: 1.5rem; margin-top: 2rem;}
.governance-section .live-schedule{margin-bottom: 1rem;}
.governance-section .governance-live-card{padding: 1.5rem;}




}


@media (max-width: 767px) {

.border-radius-20 { border-radius: 10px; }
.same-heading h2 br{display: none;}
.section-bottom-btn{gap: 0.6rem;}
.same-heading h3 br{display: none;}
.same-heading h2 br{display: none;}

/* Stack rows — mobile */
.digital-stack-section .stack-list .stack-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
}
.digital-stack-section .stack-list .stack-row .stack-num {
    font-size: 1.6rem;
    min-width: auto;
}
.digital-stack-section .stack-list .stack-row .stack-info {
    width: 100%;
}
.digital-stack-section .stack-list .stack-row .stack-tags {
    width: 100%;
}
.digital-stack-section .stack-list .stack-row .stack-tags span {
    font-size: 0.75rem;
    padding: 0.18rem 0.6rem;
}
.footer .footer-top{padding: 2rem 0;}
.regions-section .regions-map{margin-top: -3rem;}

}

@media (max-width: 767px) {

.why-digital-world-section .why-card{max-width: 100%;}
.principles-section .principles-video-card{padding: 1rem;}


}


@media (max-width: 480px) {


}