/* ============================================
   WCAG 1.4.4 / 1.4.10 - Zoom Resilience Styles
   ============================================
   Purpose: Ensure all elements remain aligned and 
   accessible at 200% and 400% browser zoom levels.
   
   Browser zoom reduces the effective viewport:
   - 200% zoom on 1920px = 960px effective viewport
   - 400% zoom on 1920px = 480px effective viewport
   - 200% zoom on 1366px = 683px effective viewport
   - 400% zoom on 1366px = 341px effective viewport
   
   These rules use max-width media queries to handle
   the reduced viewports created by zoom, ensuring
   flexible grids and proper reflow without content loss.
   
   NO existing UI or functionality is changed at 100% zoom.
   ============================================ */

/* ============================================
   BASE ZOOM RESILIENCE (all viewports)
   Flexible foundations that help at every zoom level
   ============================================ */

/* Prevent horizontal scrollbar from fixed-width elements */
html {
  overflow-x: hidden;
}

/* Ensure images never exceed container at any zoom */
img {
  max-width: 100%;
  height: auto;
}

/* Make containers max-width aware so they shrink at zoom */
.container,
.container-fluid {
  max-width: 100%;
}

/* Prevent fixed-width nav menu from overflowing at zoom */
.cust-menu {
  max-width: 100vw;
}


/* ============================================
   200% ZOOM on 1920px screens (~960px effective)
   Also covers 1366px screens at ~150% zoom
   ============================================ */
@media (max-width: 992px) {

  /* Carousel2 height adjustment for 200% zoom */
  #introCarousel2,
  #introCarousel2 .carousel-inner,
  #introCarousel2 .carousel-item,
  #introCarousel2 .carousel-item.active {
    height: 78vh;
  }

  /* Dropdown mega-menu: allow auto sizing */
  .cust-menu {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  /* Decorative vertical lines - reflow to horizontal */
  .vert-line,
  .vert-line1 {
    width: 100%;
    height: auto;
    min-height: 30px;
    transform: none;
  }

  /* Ensure video carousel items adapt */
  #introCarouselHomeVid1,
  #introCarouselHomeVid1 .carousel-inner,
  #introCarouselHomeVid1 .carousel-item,
  #introCarouselHomeVid1 .carousel-item.active,
  #introCarouselHomeVid2,
  #introCarouselHomeVid2 .carousel-inner,
  #introCarouselHomeVid2 .carousel-item,
  #introCarouselHomeVid2 .carousel-item.active,
  #introCarouselHomeVid3,
  #introCarouselHomeVid3 .carousel-inner,
  #introCarouselHomeVid3 .carousel-item,
  #introCarouselHomeVid3 .carousel-item.active {
    height: auto;
    min-height: 50vh;
  }

  /* Carousel inner max-width containers - ensure they fit */
  #carouselExampleRideHomeTwo .carousel-inner {
    max-width: 100%;
  }

  /* Section min-heights - use min instead of fixed */
  .section-1 {
    min-height: auto;
    padding: 40px;
  }

  /* Section-2 reduced padding */
  .section-2 {
    padding: 50px 30px;
  }

  /* Beyond Capital card grid - 2 columns instead of 3 */
  .cardHolder {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Crossover opportunities - wrap flex items */
  .crosOpportunities {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Van card holder - wrap */
  .vanCardHolder {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Top holder cards - flexible width */
  .topHolder {
    width: auto;
    min-width: 200px;
    flex: 1 1 200px;
  }

  /* Year wrapper - wrap on narrow viewports */
  .yearWrapper {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Parallax video section - auto height */
  .ParallaxVideo {
    height: auto;
    min-height: 600px;
  }

  /* Ensure page holder wraps */
  .pagHolder {
    flex-wrap: wrap;
  }

  /* Modal images - auto height, preserve aspect ratio */
  .modal-img-tall,
  .modal-img-medium,
  .modal-img-short,
  .modal-img-shorter,
  .modal-img-medium-tall,
  .modal-img-355 {
    height: auto;
    max-height: 350px;
    margin-top: 20px;
    object-fit: contain;
  }

  /* Leadership modal - full width */
  .modal-leadership {
    max-width: 95%;
    margin-top: 50px;
  }
}


/* ============================================
   200% ZOOM on 1366px screens (~683px effective)
   Also covers 1920px at ~280% zoom
   ============================================ */
@media (max-width: 768px) {

  /* Beyond Capital card grid - single column */
  .cardHolder {
    grid-template-columns: 1fr !important;
  }

  /* Image grid - single column */
  .imgContainer {
    grid-template-columns: 1fr;
  }

  /* Large font sizes - cap for readability */
  .bigTxt {
    font-size: 40px;
  }

  .bigTxt6 {
    font-size: 50px;
  }

  .bigTxt6-sub {
    font-size: 45px;
  }

  .beyondCapital h1 {
    font-size: 40px !important;
  }

  .VenDebt {
    font-size: 50px;
  }

  .fontSize76 {
    font-size: 50px;
  }

  .home-purpose-quote {
    font-size: 35px;
  }

  .guiding-principles-quote {
    font-size: 45px;
  }

  /* Crossover holders - full width */
  .crossOverHolder1,
  .crossOverHolder2,
  .crossOver4AHolder,
  .AumHolder,
  .CrossOverOne {
    width: 100%;
    margin: 5px 0;
  }

  /* Data images - reflow span margins */
  .dataImages span {
    margin: 0;
    display: block;
    text-align: center;
  }

  /* Asset holder - wrap */
  .assetHolder {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Purpose container heading */
  .home-purpose-container h2 {
    font-size: 2.5rem;
  }

  .home-fifth-section-bg h2 {
    font-size: 2.5rem;
  }

  .ParallaxVideo h2 {
    font-size: 2.5rem;
  }

  /* Newage heading */
  .newage-heading {
    font-size: 35px;
  }

  /* About section background - prevent overflow */
  .about-first-section {
    background-size: 200%;
    background-position: right center;
  }

  .about-second-section {
    background-size: 120%;
    background-position: left center;
  }

  /* Private Markets crossover inner background */
  .pm-crossover-inner-bg {
    background-image: none;
  }

  /* Stats section padding */
  .home-stats-padding {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Footer padding */
  .footer {
    padding: 30px 15px;
  }

  /* Parallax video - shorter height */
  .ParallaxVideo {
    min-height: 400px;
  }

  /* Venture section-1 reduced padding */
  .section-1 {
    padding: 30px 20px;
  }

  /* Width utility - override at zoom */
  .w-60 {
    width: 100% !important;
  }
}


/* ============================================
   400% ZOOM on 1920px screens (~480px effective)
   Also covers 1366px at ~280% zoom
   ============================================ */
@media (max-width: 576px) {

  /* Further reduce large headings */
  .bigTxt {
    font-size: 30px;
  }

  .bigTxt6 {
    font-size: 35px;
  }

  .bigTxt6-sub {
    font-size: 30px;
  }

  .beyondCapital h1 {
    font-size: 30px !important;
  }

  .VenDebt {
    font-size: 40px;
  }

  .fontSize76 {
    font-size: 36px;
  }

  .home-purpose-quote {
    font-size: 28px;
  }

  .guiding-principles-quote {
    font-size: 32px;
  }

  .home-purpose-container h2 {
    font-size: 2rem;
  }

  .home-fifth-section-bg h2 {
    font-size: 2rem;
  }

  .ParallaxVideo h2 {
    font-size: 2rem;
  }

  .newage-heading {
    font-size: 28px;
  }

  /* Nav item widths - full width stack */
  .navbar-cust .navbar-nav .nav-item,
  .navbar-cust-home .navbar-nav .nav-item {
    width: 100%;
  }

  /* Leadership person widths - uniform for zoom */
  #leadership .per1,
  #leadership .per2,
  #leadership .per3,
  #leadership .per4,
  #leadership .per5,
  #leadership .per6,
  #leadership .per7,
  #leadership .per8,
  #leadership .per9,
  #leadership .per10 {
    width: 100%;
    max-width: 280px;
  }

  /* Carousel caption responsive */
  #carouselExampleCaptionsLeader .carousel-caption {
    width: auto;
    min-width: 150px;
    max-width: 100%;
  }

  /* Top holder cards - full width single column */
  .topHolder {
    flex: 1 1 100%;
    min-width: unset;
  }

  /* Vancard holder - single column */
  .vanCardHolder {
    flex-direction: column;
    align-items: stretch;
  }

  /* Padding reductions */
  .cust-padding4 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .cust-padding5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .cust-padding3LR {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* PTB100 - reduce at high zoom */
  .ptb100 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* Parallax section */
  .ParallaxVideo {
    min-height: 300px;
    padding-top: 25px;
    padding-bottom: 25px;
  }

  /* Section-1 before pseudo element */
  .section-1::before {
    height: 50px;
  }

  /* Red/blue boxes - reduce padding */
  .red-box-private,
  .blue-box-private,
  .red-box-private-zoomout,
  .blue-box-private-zoomout,
  .red-box-private-public,
  .blue-box-private-public {
    padding: 20px;
  }

  /* Public markets box min-height - auto */
  .red-box-private-public {
    min-height: auto;
  }

  .blue-box-private-public {
    min-height: auto;
  }

  /* Carousel logos - smaller height */
  #carouselExampleIndicatorsLogos,
  #carouselExampleIndicatorsLogos .carousel-inner,
  #carouselExampleIndicatorsLogos .carousel-item,
  #carouselExampleIndicatorsLogos .carousel-item.active {
    height: auto;
    min-height: 40vh;
  }

  /* Logo list - wrap items */
  .logosLi {
    flex-wrap: wrap;
    gap: 15px;
  }

  .logosLi li {
    margin: 10px;
  }

  /* Market partnership - stack items */
  .marketPartnership h6 {
    font-size: 16px;
  }

  /* Footer links */
  .footer-links {
    text-align: left;
  }

  /* Bottom arrow - center properly */
  .bottom-arrow,
  .bottom-arrow1 {
    left: 45%;
  }

  /* Modal - full width at high zoom */
  .modal-leadership {
    max-width: 100%;
    margin: 10px;
  }

  .modal-img-tall,
  .modal-img-medium,
  .modal-img-short,
  .modal-img-shorter,
  .modal-img-medium-tall,
  .modal-img-355 {
    max-height: 250px;
  }
}


/* ============================================
   400% ZOOM on 1366px screens (~341px effective)
   Extreme zoom scenario
   ============================================ */
@media (max-width: 400px) {

  /* Further font reductions for extreme zoom */
  .bigTxt {
    font-size: 24px;
  }

  .bigTxt6 {
    font-size: 28px;
  }

  .bigTxt6-sub {
    font-size: 24px;
  }

  .home-purpose-quote {
    font-size: 22px;
  }

  .guiding-principles-quote {
    font-size: 24px;
  }

  .home-purpose-container h2 {
    font-size: 1.5rem;
  }

  .home-fifth-section-bg h2 {
    font-size: 1.5rem;
  }

  .ParallaxVideo h2 {
    font-size: 1.5rem;
  }

  .beyondCapital h1 {
    font-size: 24px !important;
  }

  .VenDebt {
    font-size: 30px;
  }

  .fontSize76 {
    font-size: 28px;
  }

  .newage-heading {
    font-size: 22px;
  }

  /* Carousel inner padding - tighter */
  #carouselExampleRideHomeTwo .carousel-inner {
    padding: 0px 20px;
    min-height: 150px;
  }

  /* Crossover section - single column */
  .crosOpportunities {
    flex-direction: column;
    align-items: stretch;
  }

  .CrsWrapper {
    width: 100%;
  }

  /* Stats fonts - smaller */
  .fontSmall-stats {
    font-size: 14px;
  }

  .fontBig-stats {
    font-size: 20px;
  }

  /* NAM logo - ensure visibility */
  .nam-logo {
    width: 150px;
    height: auto;
    object-fit: contain;
  }

  /* Footer links font reduction */
  .footer-links li a {
    font-size: 13px;
  }

  /* Reduce padding globally */
  .cust-padding1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .cust-padding2 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .cust-padding3 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* Section-1 minimal padding */
  .section-1 {
    padding: 20px 15px;
  }

  .section-2 {
    padding: 30px 15px;
  }

  /* Video thumbnail height - auto */
  .video-thumbnail-link img {
    height: auto;
    min-height: 150px;
  }

  /* Breadcrumb font - smaller */
  .breadcrumb-nav .breadcrumb-item {
    font-size: 12px;
  }

  /* About title sizes */
  .about-title1 {
    font-size: 22px;
  }

  .header-about {
    font-size: 26px;
  }

  .main-title-private,
  .main-title-public {
    font-size: 30px;
  }

  /* Table responsiveness - allow horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Target holder - full width */
  .targetHolder {
    width: 100%;
  }

  /* Venture about content - full width */
  .venture-about-nuvama-content {
    max-width: 100%;
  }
}


/* ============================================
   PRINT MEDIA - Ensure zoom doesn't break print
   ============================================ */
@media print {
  .ParallaxVideo,
  .mask,
  video {
    display: none;
  }

  .section-1,
  .section-2,
  .cust-padding3,
  .cust-padding4,
  .cust-padding5 {
    padding: 20px;
  }

  .bigTxt,
  .bigTxt6,
  .bigTxt6-sub {
    font-size: 24px;
  }
}