/* ========================================================================
   COMPREHENSIVE RESPONSIVE FIX
   Written by a senior frontend engineer
   Fixes: Contact form, navigation, hero, advisors, team, all mobile issues
   ======================================================================== */

/* ========================================================================
   1. BASE RESETS
   ======================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* ========================================================================
   2. CONTACT FORM - CRITICAL DESKTOP FIX
   This fixes the broken contact form even on desktop
   ======================================================================== */

/* Container for the entire contact section - two columns on desktop */
/* OVERRIDE Webflow CSS that sets height: 700px */
.faq-container-copy-2 {
  display: flex !important;
  flex-direction: row !important;
  gap: 48px !important;
  align-items: flex-start !important;
  height: auto !important;
  background-image: none !important;
}

/* OVERRIDE Webflow CSS that sets width: 50% */
.contact-text {
  flex: 0 0 40% !important;
  max-width: 40% !important;
  width: auto !important;
}

/* OVERRIDE Webflow CSS that sets width: 50% */
.contact-form {
  flex: 1 !important;
  max-width: 60% !important;
  width: auto !important;
}

/* Form grid - OVERRIDE Webflow's flex with grid */
.form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  flex-direction: unset !important;
  grid-template-rows: unset !important;
  grid-auto-columns: unset !important;
}

/* Make email span full width (3rd child) */
.form-grid > .input-block:nth-child(3) {
  grid-column: 1 / -1 !important;
}

/* Make message span full width (4th child) */
.form-grid > .input-block:nth-child(4) {
  grid-column: 1 / -1 !important;
}

/* Make submit button span full width */
.form-grid > .input-block-copy {
  grid-column: 1 / -1 !important;
}

/* Input styling */
.input-block,
.input-block-copy {
  width: 100%;
}

/* CRITICAL: Override Webflow's text-field-2 styles - ab-nexus.webflow.css line 4737-4747 */
.input-block .w-input,
.text-field-2 {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-family: inherit !important;
  transition: all 0.3s ease !important;
  /* Override ab-nexus.webflow.css line 4738 height: 48px - but only for inputs, not textareas */
}

/* Ensure regular inputs keep single-line height */
.input-block input.w-input:not([type="textarea"]),
.text-field-2:not(textarea) {
  height: 48px !important;
}

.input-block .w-input:focus,
.text-field-2:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

/* CRITICAL: Override Webflow's height: 48px for textarea - ab-nexus.webflow.css line 4738 */
/* ULTRA-SPECIFIC: Target textarea with ALL possible class combinations */
/* The textarea has classes: text-field-2 email-copy w-input */
/* webflow.css line 335: .w-input { height: 38px; } */
/* ab-nexus.webflow.css line 4738: .text-field-2 { height: 48px; } */
/* We need maximum specificity to override both */

textarea.text-field-2.email-copy.w-input,
textarea.w-input.text-field-2.email-copy,
textarea.email-copy.text-field-2.w-input,
#message.text-field-2.email-copy.w-input,
#message.w-input.text-field-2.email-copy,
.input-block textarea.text-field-2.email-copy.w-input,
.input-block textarea.w-input.text-field-2.email-copy,
.form-grid textarea.text-field-2.email-copy.w-input,
.form-grid textarea.w-input.text-field-2.email-copy,
.contact-form textarea.text-field-2.email-copy.w-input,
.contact-form textarea.w-input.text-field-2.email-copy,
form textarea.text-field-2.email-copy.w-input,
form textarea.w-input.text-field-2.email-copy,
/* Fallback selectors */
.input-block textarea.w-input,
.text-field-2[type="textarea"],
textarea.text-field-2,
textarea.email-copy,
.text-field-2.email-copy[type="textarea"],
#message.text-field-2,
#message.email-copy,
.input-block textarea.email-copy,
form textarea.text-field-2,
form textarea.email-copy,
.contact-form textarea,
.form-grid textarea,
textarea.w-input.email-copy {
  height: auto !important;
  min-height: 150px !important;
  max-height: 300px !important;
  resize: vertical !important;
  font-family: inherit !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  vertical-align: top !important;
  /* CRITICAL: Override ab-nexus.webflow.css line 4775-4778: padding-top: 20px; padding-bottom: 140px; */
  /* This huge padding-bottom was making the textarea look weird */
}

.field-label-4 {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
}

/* Submit button */
.button-3 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 32px !important;
  border-radius: 40px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  background-color: #fff !important;
  color: var(--primary-background) !important;
  border: 2px solid #fff !important;
  text-decoration: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.button-3:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Phone input (intl-tel-input) fix */
.iti {
  width: 100%;
  display: flex;
}

.iti__flag-container {
  position: relative;
  padding: 10px 8px;
  border-radius: 12px 0 0 12px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
}

.iti input[type="tel"] {
  width: 100%;
  padding-left: 16px;
  border-radius: 0 12px 12px 0;
}

/* ========================================================================
   3. MOBILE NAVIGATION
   ======================================================================== */

/* ========================================================================
   MOBILE NAVIGATION - MUST BE AT TOP LEVEL, NOT IN MEDIA QUERY
   ======================================================================== */

/* NUCLEAR OPTION: Hide navigation on mobile - this file loads LAST so it overrides everything */
/* This is the FINAL override - must work */
@media screen and (max-width: 991px) {
  /* CRITICAL FIX: Override ab-nexus.webflow.css line 370 which sets .nav-menu { display: flex; } */
  /* ULTRA-AGGRESSIVE: Hide navigation by default on mobile */
  /* Use highest specificity to override ab-nexus.webflow.css */
  html body .w-nav[data-collapse="medium"] .w-nav-menu:not(.w--open),
  html body .navbar.w-nav[data-collapse="medium"] .w-nav-menu:not(.w--open),
  html body .w-nav[data-collapse="medium"] .nav-menu:not(.w--open),
  html body .navbar .w-nav-menu:not(.w--open),
  html body .navbar .nav-menu:not(.w--open),
  html body .navigation-right .w-nav-menu:not(.w--open),
  html body .navigation-right .nav-menu:not(.w--open),
  html body nav[role="navigation"].w-nav-menu:not(.w--open),
  html body nav[role="navigation"].nav-menu:not(.w--open),
  /* Target .nav-menu directly to override ab-nexus.webflow.css line 370 */
  html body .nav-menu:not(.w--open),
  body .navbar .w-nav-menu:not(.w--open),
  body .navbar .nav-menu:not(.w--open),
  body .navigation-right .w-nav-menu:not(.w--open),
  body .navigation-right .nav-menu:not(.w--open),
  body nav[role="navigation"].w-nav-menu:not(.w--open),
  body nav[role="navigation"].nav-menu:not(.w--open),
  .navbar .w-nav-menu:not(.w--open),
  .navbar .nav-menu:not(.w--open),
  .navigation-right .w-nav-menu:not(.w--open),
  .navigation-right .nav-menu:not(.w--open),
  nav.w-nav-menu:not(.w--open),
  .nav-menu:not(.w--open),
  .w-nav-menu:not(.w--open),
  /* Also target the navigation-right container to hide its children */
  .navigation-right nav:not(.w--open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Show hamburger button */
  .w-nav-button,
  .menu-button,
  .navbar .w-nav-button,
  .navbar .menu-button,
  .navigation-right .w-nav-button,
  .navigation-right .menu-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    z-index: 10000 !important;
  }

  /* Hamburger icon */
  .w-icon-nav-menu,
  .icon.w-icon-nav-menu,
  .w-nav-button .w-icon-nav-menu,
  .menu-button .w-icon-nav-menu {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 28px !important;
    color: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Open menu state - ULTRA AGGRESSIVE */
  nav.w-nav-menu.w--open,
  .nav-menu.w--open,
  .w-nav-menu.w--open,
  .navbar nav.w--open,
  .navbar .w-nav-menu.w--open,
  .navbar .nav-menu.w--open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 70px !important;
    right: 20px !important;
    left: auto !important;
    flex-direction: column !important;
    background: rgba(15, 15, 15, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    min-width: 260px !important;
    width: auto !important;
    max-width: 90vw !important;
    z-index: 9999 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    align-items: stretch !important;
    /* Ensure all children are visible */
    height: auto !important;
    min-height: auto !important;
    /* CRITICAL: Ensure menu is tall enough for all links */
    min-height: 400px !important;
  }
  
  /* Force all children to be visible */
  .w-nav-menu.w--open > *,
  .nav-menu.w--open > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  
  /* Ensure each link is on its own line with proper spacing */
  .w-nav-menu.w--open > a:nth-child(1),
  .nav-menu.w--open > a:nth-child(1) {
    margin-top: 0 !important;
    display: block !important;
  }
  
  .w-nav-menu.w--open > a:nth-child(2),
  .nav-menu.w--open > a:nth-child(2) {
    display: block !important;
  }
  
  .w-nav-menu.w--open > a:nth-child(3),
  .nav-menu.w--open > a:nth-child(3) {
    display: block !important;
  }
  
  .w-nav-menu.w--open > a:nth-child(4),
  .nav-menu.w--open > a:nth-child(4) {
    display: block !important;
  }
  
  .w-nav-menu.w--open > a:nth-child(5),
  .nav-menu.w--open > a:nth-child(5) {
    display: block !important;
  }

  /* Make ALL links visible when menu is open - OVERRIDE ab-nexus.webflow.css .nav-link padding */
  /* This is the CRITICAL fix - ab-nexus.webflow.css line 446 has padding: 20px 0 10px 40px; */
  .w-nav-menu.w--open .w-nav-link,
  .nav-menu.w--open .nav-link,
  .w-nav-menu.w--open a,
  .nav-menu.w--open a,
  .w-nav-menu.w--open a.nav-link,
  .nav-menu.w--open a.nav-link,
  .w-nav-menu.w--open > a,
  .nav-menu.w--open > a,
  /* Target specific links by href */
  .w-nav-menu.w--open a[href="#strategies"],
  .nav-menu.w--open a[href="#strategies"],
  .w-nav-menu.w--open a[href="#nexus-edge"],
  .nav-menu.w--open a[href="#nexus-edge"],
  .w-nav-menu.w--open a[href="#blogs"],
  .nav-menu.w--open a[href="#blogs"],
  .w-nav-menu.w--open a[href="#advisors"],
  .nav-menu.w--open a[href="#advisors"],
  .w-nav-menu.w--open a[href="#contact"],
  .nav-menu.w--open a[href="#contact"] {
    display: block !important;
    /* CRITICAL: Override ab-nexus.webflow.css line 446 padding: 20px 0 10px 40px; */
    padding: 12px 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 8px 0 !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
  }

  .w-nav-menu.w--open .w-nav-link:hover,
  .nav-menu.w--open .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
  }

  /* Ensure auth-buttons container is visible */
  .w-nav-menu.w--open .auth-buttons,
  .nav-menu.w--open .auth-buttons {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
  }

  /* Override any Webflow CSS that might be hiding links - NUCLEAR OPTION */
  .w-nav-menu.w--open *,
  .nav-menu.w--open * {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Force all anchor tags to be visible - ULTRA AGGRESSIVE - CSS ONLY FIX */
  .w-nav-menu.w--open a[href],
  .nav-menu.w--open a[href],
  .w-nav-menu.w--open a,
  .nav-menu.w--open a,
  /* Target each link individually by href to ensure they're all visible */
  .w-nav-menu.w--open a[href="#strategies"],
  .nav-menu.w--open a[href="#strategies"],
  .w-nav-menu.w--open a[href="#nexus-edge"],
  .nav-menu.w--open a[href="#nexus-edge"],
  .w-nav-menu.w--open a[href="#blogs"],
  .nav-menu.w--open a[href="#blogs"],
  .w-nav-menu.w--open a[href="#advisors"],
  .nav-menu.w--open a[href="#advisors"],
  .w-nav-menu.w--open a[href="#contact"],
  .nav-menu.w--open a[href="#contact"],
  .w-nav-menu.w--open a[href*="dashboard"],
  .nav-menu.w--open a[href*="dashboard"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    line-height: 1.5 !important;
    margin: 0 0 8px 0 !important;
    padding: 12px 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
  }
  
  /* Make sure first and last links are visible */
  .w-nav-menu.w--open a:first-child,
  .nav-menu.w--open a:first-child {
    margin-top: 0 !important;
  }
  
  .w-nav-menu.w--open a:last-child,
  .nav-menu.w--open a:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Ensure links are stacked vertically, not overlapping */
  .w-nav-menu.w--open > a + a,
  .nav-menu.w--open > a + a {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Ensure all direct children are visible */
  .w-nav-menu.w--open > *,
  .nav-menu.w--open > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
  }
}

/* ========================================================================
   4. TABLET BREAKPOINT (991px)
   ======================================================================== */

@media (max-width: 991px) {
  .container-regular {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Contact section stacks on tablet */
  .faq-container-copy-2 {
    flex-direction: column;
    gap: 40px;
  }

  .contact-text,
  .contact-form {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  /* Investment cards stack */
  .new-block-copy {
    flex-direction: column;
    gap: 32px;
  }

  .new-block-copy > .alpha,
  .new-block-copy > .gamma {
    max-width: 100%;
    width: 100%;
  }

  /* Team and advisor grids - 2 columns */
  .grid-team,
  .advisors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* ========================================================================
   4.5. ADVISORS SECTION - DESKTOP FIX
   Match team section styling for advisors (full width images)
   The team section doesn't have div-block-32 wrapper, so we need to ensure
   advisors images match the team's full-width appearance
   ======================================================================== */

/* Advisors grid - DESKTOP: Two columns (text left, image right) */
/* MOBILE: Single column (handled in media query below) */
@media screen and (min-width: 992px) {
  .advisors-section .w-layout-grid.advisorgrid,
  .advisors-section .advisorgrid,
  .w-layout-grid.advisorgrid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two columns on desktop */
    gap: 32px !important; /* Reduced from 48px to reduce white space */
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    margin-bottom: 40px !important;
    align-items: start !important;
  }
}

/* Mobile: Single column */
@media screen and (max-width: 991px) {
  .advisors-section .w-layout-grid.advisorgrid,
  .advisors-section .advisorgrid,
  .w-layout-grid.advisorgrid {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Single column on mobile */
    gap: 16px !important; /* Reduced from 24px */
    row-gap: 16px !important; /* Reduced spacing between rows */
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    margin-bottom: 24px !important; /* Reduced from 40px */
  }
}

/* Advisors section CSS moved to mobile-only media query - desktop was fine, don't touch it */

/* ========================================================================
   ADVISORS SECTION - MOBILE ONLY (desktop was fine, don't touch it)
   ======================================================================== */

@media screen and (max-width: 991px) {
  /* Advisors grid column - ensure it takes full width of grid cell - MOBILE ONLY */
  .advisors-section .w-layout-grid.advisorgrid > div,
  .advisors-section .advisors-grid > div,
  .advisors-section .advisorgrid > div,
  .advisors-grid > div,
  .advisorgrid > div,
  .w-layout-grid.advisorgrid > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
  }

  /* Advisors wrapper - remove any width constraints - MOBILE ONLY */
  .advisors-section .div-block-32,
  .advisors-grid .div-block-32,
  .advisorgrid .div-block-32,
  .w-layout-grid.advisorgrid .div-block-32 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Advisors image container - full width, match team's div-block-14 - MOBILE ONLY */
  .advisors-section .div-block-14,
  .advisors-section .div-block-32 .div-block-14,
  .advisors-grid .div-block-14,
  .advisorgrid .div-block-14,
  .w-layout-grid.advisorgrid .div-block-14 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex: 1 1 0% !important;
  }

  /* Advisors image - match team's image-7-copy styling - MOBILE ONLY */
  .advisors-section .image-7,
  .advisors-grid .image-7,
  .advisorgrid .image-7,
  .w-layout-grid.advisorgrid .image-7,
  .advisors-section .div-block-32 .image-7,
  .advisors-grid .div-block-32 .image-7 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
  }

  /* Override any HTML width attribute - must be very specific - MOBILE ONLY */
  .advisors-section .image-7[width],
  .advisors-grid .image-7[width],
  .advisorgrid .image-7[width],
  .advisors-section .div-block-32 .image-7[width] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Center "Insights" and "Our Advisor" text - MOBILE ONLY */
  .advisors-section .w-layout-grid > div:first-child,
  .advisors-section .advisorgrid > div:first-child,
  .advisors-section [id*="w-node-f09f3bab-3dcd-9a7b-6323-f4348600a7fc"] {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .advisors-section .margin-bottom-12,
  .advisors-section .margin-bottom-24,
  .advisors-section .margin-bottom-40 {
    width: 100% !important;
    text-align: center !important;
  }

  /* Reduce spacing in advisors section on mobile */
  .advisors-section .margin-bottom-12 {
    margin-bottom: 8px !important; /* Reduced from 12px */
  }

  .advisors-section .margin-bottom-24 {
    margin-bottom: 12px !important; /* Reduced from 24px */
  }

  .advisors-section .margin-bottom-40 {
    margin-bottom: 20px !important; /* Reduced from 40px */
  }

  /* Reduce gap in advisors grid on mobile - override any other gap settings */
  .advisors-section .w-layout-grid.advisorgrid,
  .advisors-section .advisorgrid,
  .w-layout-grid.advisorgrid {
    gap: 16px !important; /* Reduced from 24px */
    row-gap: 16px !important;
    column-gap: 16px !important;
  }

  /* Reduce spacing between image and text in advisor card */
  .advisors-section .div-block-15 {
    margin-top: 12px !important;
  }

  /* Reduce spacing within advisor details */
  .advisors-section .div-block-32 {
    gap: 12px !important;
  }

  /* Reduce spacing for social icons */
  .advisors-section .div-block-16 {
    margin-top: 8px !important;
  }

  /* Reduce spacing between the two main grid items (text and image sections) */
  .advisors-section .w-layout-grid.advisorgrid > div:first-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .advisors-section .w-layout-grid.advisorgrid > div:last-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Reduce overall section padding on mobile */
  #advisors.advisors-section {
    padding-top: 32px !important;
    padding-bottom: 16px !important; /* Significantly reduced to minimize gap */
  }

  /* Remove excessive padding from advisors-grid */
  .advisors-section .advisors-grid {
    padding-top: 0 !important; /* Remove 100px padding-top */
    margin-bottom: 0 !important; /* Remove 40px margin-bottom */
  }

  /* Remove excessive margins from advisorgrid */
  .advisors-section .w-layout-grid.advisorgrid,
  .advisors-section .advisorgrid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Reduce gap between advisors section and Our Team section */
  .div-block-50 {
    padding-top: 16px !important; /* Reduced from default to minimize gap */
    margin-top: 0 !important;
  }

  /* Remove excessive margin from grid-team in Our Team section */
  .div-block-50 .grid-team {
    margin-top: 0 !important; /* Remove 100px margin-top */
    margin-bottom: 0 !important; /* Remove 100px margin-bottom */
  }

  /* Remove any spacing from container-regular between sections */
  #advisors.advisors-section .container-regular {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .div-block-50 .container-regular {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Remove spacing from section-animated if it exists */
  #advisors.advisors-section .section-animated {
    margin-bottom: 0 !important;
  }

  .div-block-50 .section-animated {
    margin-top: 0 !important;
  }

  .advisors-section .heading-4,
  .advisors-section h3.heading-4,
  .advisors-section .margin-bottom-24 .heading-4,
  .advisors-section .margin-bottom-24 h3,
  .advisors-section h3.heading-4 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
  }
}

/* ========================================================================
   5. MOBILE BREAKPOINT (767px)
   ======================================================================== */

@media (max-width: 767px) {
  .container-regular {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ---- HERO SECTION ---- */
  .hero {
    padding: 40px 0 32px;
  }

  .heading {
    font-size: 32px;
    line-height: 1.2;
  }

  .paragraph {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Hide extra hero tokens, keep only 2 */
  .hero-token-3,
  .hero-token-4 {
    display: none !important;
  }

  .hero-token-1,
  .hero-token-2 {
    width: 50px;
    height: 50px;
    opacity: 0.4;
  }

  .hero-text-container {
    text-align: center;
  }

  .hero-text-container .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* ---- INVESTMENT CARDS (SIP & VAULTS) ---- */
  .alpha-heading,
  .gamma-heading {
    font-size: 24px;
  }

  .alpha-button,
  .gamma-buttton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 40px;
  }

  /* ---- CONTACT FORM MOBILE ---- */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* All form fields full width on mobile */
  .form-grid .input-block,
  .form-grid .input-block-copy {
    grid-column: auto;
    width: 100%;
  }

  .button-3 {
    width: 100%;
  }

  /* ---- TEAM & ADVISORS - Single column ---- */
  .grid-team,
  .advisors-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .grid-team > div,
  .advisors-grid > div,
  .advisors-grid .div-block-32 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure advisors images are full width on mobile too */
  .advisors-grid .div-block-14 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .advisors-grid .image-7 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Team/Advisor images */
  .div-block-14 {
    width: 100% !important;
    margin-bottom: 16px;
  }

  /* Advisors section - ensure full width */
  .advisors-grid .div-block-32 {
    width: 100% !important;
  }

  .advisors-grid .div-block-14 {
    width: 100% !important;
  }

  .image-7,
  .image-7-copy {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Override any fixed width attributes */
  .advisors-grid .image-7[width] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .div-block-15 {
    width: 100%;
  }

  .heading-10 {
    font-size: 20px;
  }

  .paragraph-5 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
  }

  /* Social icons */
  .div-block-16 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }

  /* ---- BLOG GRID ---- */
  .blog-grid-simple {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ---- FOOTER ---- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* ---- TYPOGRAPHY ---- */
  h1, .h1 { font-size: 32px; }
  h2, .h2 { font-size: 28px; }
  h3, .h3 { font-size: 24px; }
  h4, .h4 { font-size: 20px; }
}

/* ========================================================================
   6. SMALL MOBILE BREAKPOINT (479px)
   ======================================================================== */

@media (max-width: 479px) {
  .container-regular {
    padding-left: 16px;
    padding-right: 16px;
  }

  .heading {
    font-size: 28px;
  }

  h1, .h1 { font-size: 28px; }
  h2, .h2 { font-size: 24px; }
  h3, .h3 { font-size: 20px; }
}

/* ========================================================================
   7. BUTTON ICON FIX
   Ensures arrow icons in buttons display correctly
   ======================================================================== */

.btn-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ========================================================================
   8. MISC FIXES
   ======================================================================== */

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Fix any overflow issues */
.hero,
.contact,
.advisors-section,
.div-block-50 {
  overflow: hidden;
}

/* ========================================================================
   9. MOBILE SECTION SPACING FIXES
   Reduce excessive spacing between sections on mobile
   ======================================================================== */

@media (max-width: 991px) {
  /* Reduce section padding on mobile for better spacing */
  .about-section,
  .nexus-edge-section,
  .reviews-section,
  .as-seen-section,
  .blog-section,
  .strategies,
  .advisors-section,
  .div-block-50 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  
  /* Hero section - reduce bottom padding */
  .hero {
    padding-bottom: 32px !important;
  }
  
  /* Trusted By section - reduce spacing */
  #trusted-by.about-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Strategies section - reduce spacing */
  #strategies.strategies {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Nexus Edge section - reduce spacing */
  #nexus-edge.nexus-edge-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* As Seen On section - reduce spacing */
  #as-seen-on.as-seen-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Reviews section - reduce spacing */
  #reviews.reviews-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Blog section - reduce spacing */
  #blogs.blog-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Advisors section - reduce spacing */
  #advisors.advisors-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Contact section - reduce spacing */
  #contact.contact {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 767px) {
  /* Further reduce spacing on smaller mobile devices */
  .about-section,
  .nexus-edge-section,
  .reviews-section,
  .as-seen-section,
  .blog-section,
  .strategies,
  .advisors-section,
  .div-block-50 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ========================================================================
   10. AS SEEN ON SECTION - MOBILE LOGO GRID FIX
   Display 2 logos per row on mobile instead of stacking vertically
   ======================================================================== */

@media (max-width: 991px) {
  /* Change press-logo-grid from flexbox to CSS Grid for better control */
  .press-logo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin-top: 32px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }
  
  .press-logo-tile {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    min-height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .press-logo-img {
    max-width: 100% !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

@media (max-width: 479px) {
  /* Smaller mobile - keep 2 columns but reduce gap */
  .press-logo-grid {
    gap: 16px !important;
    padding: 0 12px !important;
  }
  
  .press-logo-tile {
    padding: 16px 12px !important;
    min-height: 80px !important;
  }
  
  .press-logo-img {
    max-height: 50px !important;
  }
}