/* ============================================================================
 * AMEEE NDT — Responsive CSS Overrides
 * ============================================================================
 * Loaded AFTER the main CSS bundle. Fixes all responsive / mobile issues.
 *
 * Breakpoints
 *   ≤ 479px   — Small phones
 *   ≤ 767px   — Phones (portrait)
 *   ≤ 991px   — Tablets / small laptops (nav collapse point)
 *   ≤ 1023px  — Tablets (landscape)
 *   ≥ 1024px  — Desktop (unchanged)
 *
 * Table of Contents
 *   1.  Global Overflow & Box-Sizing Fix
 *   2.  Header Container Overflow Fix
 *   3.  OwlCarousel Overflow Containment
 *   4.  Mobile Hamburger Button Styles
 *   5.  Mobile Drawer Menu Styles
 *   6.  Navigation — Desktop Link Hiding on Mobile
 *   7.  Top Contact Bar (.topText)
 *   8.  Hero Section Mobile
 *   9.  Service Boxes Responsive
 *  10.  Team Section Responsive
 *  11.  Counters / Stats Responsive
 *  12.  About Section Responsive
 *  13.  Footer Responsive
 *  14.  Chatbot & RFQ Modal Positioning
 *  15.  Circle / Decorative Element Cleanup
 *  16.  General Typography Scaling
 *  17.  Contact / Office-Address Page Responsive
 *  18.  Small-Phone Refinements (≤ 479px)
 * ========================================================================= */


/* =========================================================================
 * 1. GLOBAL OVERFLOW & BOX-SIZING FIX
 * ========================================================================= */

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

html,
body,
#root,
.App {
  max-width: 100vw;
  overflow-x: clip;
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
  height: auto;
}


/* =========================================================================
 * 2. HEADER CONTAINER OVERFLOW FIX
 * The .header-container overflows by ~52px at ALL viewports.
 * ========================================================================= */

.header-container {
  max-width: 100% !important;
  overflow-x: clip !important;
  width: 100% !important;
}


/* =========================================================================
 * 3. OWL CAROUSEL OVERFLOW CONTAINMENT
 * Prevent the carousel stage from pushing horizontal scroll.
 * ========================================================================= */

.owl-carousel {
  max-width: 100% !important;
}

.owl-carousel .owl-stage-outer {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* The stage itself can be wider (floated slides); it's clipped by outer */
.owl-carousel .owl-stage {
  max-width: none;
}


/* =========================================================================
 * 4. MOBILE HAMBURGER BUTTON STYLES
 * The button element is injected via JS; CSS handles display & animation.
 * ========================================================================= */

.ameee-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 10001;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.ameee-hamburger span {
  display: block;
  width: 28px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Hamburger → X animation when .open is toggled */
.ameee-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.ameee-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.ameee-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}


/* =========================================================================
 * 5. MOBILE DRAWER MENU STYLES
 * Slide-out panel from the right, with dark background.
 * ========================================================================= */

.ameee-mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  height: 100dvh;
  background: #0a1628;
  z-index: 10000;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 80px 0 30px;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

.ameee-mobile-drawer.open {
  right: 0;
}

.ameee-mobile-drawer a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

.ameee-mobile-drawer a:hover,
.ameee-mobile-drawer a:focus,
.ameee-mobile-drawer a:active {
  background: rgba(0, 123, 255, 0.15);
  color: #ffffff;
}

/* "Request for Quote" CTA inside drawer */
.ameee-mobile-drawer .drawer-rfq-btn {
  display: block;
  margin: 20px 24px;
  padding: 12px 20px;
  background: #0d6efd;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: none;
  transition: background 0.2s ease;
}

.ameee-mobile-drawer .drawer-rfq-btn:hover,
.ameee-mobile-drawer .drawer-rfq-btn:focus {
  background: #0b5ed7;
}

/* Semi-transparent overlay behind the drawer */
.ameee-drawer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  -webkit-tap-highlight-color: transparent;
}

.ameee-drawer-overlay.open {
  display: block;
}

/* Show hamburger + drawer shell only ≤ 991px */
@media (max-width: 991px) {
  .ameee-hamburger {
    display: block;
  }

  .ameee-mobile-drawer {
    display: block; /* positioned off-screen until .open */
  }
}

/* Ensure everything hides on desktop */
@media (min-width: 992px) {
  .ameee-hamburger {
    display: none !important;
  }

  .ameee-mobile-drawer {
    display: none !important;
  }

  .ameee-drawer-overlay {
    display: none !important;
  }
}


/* =========================================================================
 * 6. NAVIGATION — HIDE DESKTOP LINKS ON MOBILE / TABLET
 * The site uses a custom `.nav` class (not Bootstrap navbar).
 * On ≤ 991px we keep only the logo + hamburger visible.
 * ========================================================================= */

@media (max-width: 991px) {
  .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 12px !important;
    height: auto !important;
    min-height: 56px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* The .nav has ONE child div (.w-full) containing the entire header+nav,
     and our injected hamburger button. Hide the content div on mobile —
     navigation is in the slide-out drawer instead. */
  .nav > div.w-full,
  .nav > div.sm\:w-full,
  .nav > .ameee-desktop-only {
    display: none !important;
  }

  /* Also hide any standalone links/buttons that aren't the hamburger */
  .nav > a:not(.navbar-brand):not(.ameee-hamburger),
  .nav > ul {
    display: none !important;
  }

  /* Also hide the RFQ button that sits in the nav on desktop */
  .nav .darksoul-gradient-card4 {
    display: none !important;
  }

  /* Add AMEEE logo in the nav bar for mobile via the hamburger sibling
     — logo is added by JS as .ameee-mobile-logo */
  .ameee-mobile-logo {
    display: block !important;
    height: 44px;
    width: auto;
    flex-shrink: 0;
  }

  .ameee-mobile-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
  }
}


/* =========================================================================
 * 7. TOP CONTACT BAR (.topText)
 * Hide on phones; compact single-line on tablets.
 * ========================================================================= */

@media (max-width: 767px) {
  .topText {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .topText {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 2px 12px !important;
  }
}


/* =========================================================================
 * 8. HERO SECTION MOBILE
 * Scale text, carousel arrows, and service-category tabs.
 * ========================================================================= */

@media (max-width: 991px) {
  /* Hero text sizing */
  .owl-carousel h1,
  .owl-carousel .hero-title,
  .owl-carousel .slide-title {
    font-size: clamp(1.5rem, 5vw, 3.5rem) !important;
    line-height: 1.2 !important;
  }

  .owl-carousel h2,
  .owl-carousel .hero-subtitle {
    font-size: clamp(1rem, 3.5vw, 2rem) !important;
    line-height: 1.3 !important;
  }

  .owl-carousel p {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem) !important;
  }

  /* Smaller nav arrows */
  .owl-nav .owl-prev,
  .owl-nav .owl-next {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    line-height: 36px !important;
  }
}

@media (max-width: 767px) {
  .owl-nav .owl-prev,
  .owl-nav .owl-next {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    line-height: 30px !important;
  }
}

/* Service-category tabs under hero — horizontal scroll on small screens */
@media (max-width: 991px) {
  .darksoul-gradient-card1,
  .darksoul-gradient-card2,
  .darksoul-gradient-card3 {
    min-width: 200px;
    flex-shrink: 0;
  }

  /* If their parent is a flex/grid row, allow horizontal scrolling */
  .darksoul-gradient-card1:first-child {
    /* no-op anchor — parent rule below handles scroll */
  }
}

/* Parent of the gradient cards — let them scroll or wrap */
@media (max-width: 767px) {
  /* Attempt to target common parent patterns */
  .darksoul-gradient-card1,
  .darksoul-gradient-card2,
  .darksoul-gradient-card3 {
    width: 100% !important;
    min-width: unset !important;
    margin-bottom: 8px !important;
  }
}


/* =========================================================================
 * 9. SERVICE BOXES RESPONSIVE
 * Desktop: fixed 270×400 — override to fluid on mobile/tablet.
 * ========================================================================= */

/* Ensure parent is a flex container that wraps */
.services-box {
  /* intentionally blank at desktop — no override */
}

@media (max-width: 767px) {
  .services-box {
    width: 100% !important;
    height: auto !important;
    min-height: 280px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Parent flex container fix */
  .services-box:first-child {
    /* Anchor for parent-level rule below */
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .services-box {
    width: calc(50% - 16px) !important;
    height: auto !important;
    min-height: 280px;
  }
}

/* Generic parent container fix for services — applied at all breakpoints
   below desktop so the cards can reflow naturally. */
@media (max-width: 1023px) {
  /* Try common parent selectors */
  .services-box-container,
  .services-box + .services-box {
    /* gap handled by margin on each box */
  }

  /* If the boxes live inside a flex/grid parent, patch it */
  .row:has(> .services-box),
  div:has(> .services-box) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }
}


/* =========================================================================
 * 10. TEAM SECTION RESPONSIVE
 * .item-inner is fixed at 290px — make fluid on mobile.
 * ========================================================================= */

@media (max-width: 767px) {
  .item-inner {
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto 30px !important;
  }

  .team-avatar img {
    height: auto !important;
    max-height: 280px;
    object-fit: cover;
    width: 100% !important;
  }

  .item-image {
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .item-inner {
    width: calc(50% - 20px) !important;
    margin: 0 10px 30px !important;
  }
}

/* IMPORTANT: Preserve the overlay hover effect (promised to user) */
.item-image:hover .overlay {
  opacity: 1 !important;
}


/* =========================================================================
 * 11. COUNTERS / STATS RESPONSIVE
 * .funfact-icon 150×150, .funfact-content h3 45px — shrink on mobile.
 * ========================================================================= */

@media (max-width: 767px) {
  .funfact-icon {
    width: 80px !important;
    height: 80px !important;
  }

  .funfact-icons {
    width: 50px !important;
    height: 50px !important;
  }

  .funfact-content h3 {
    font-size: 28px !important;
  }

  /* Label text below the counter number */
  .funfact-content span:not(h3 > span) {
    font-size: 16px !important;
  }

  .funfact {
    padding: 10px 10px 30px !important;
  }

  .funfact-box {
    padding: 12px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .funfact-icon {
    width: 110px !important;
    height: 110px !important;
  }

  .funfact-content h3 {
    font-size: 36px !important;
  }
}


/* =========================================================================
 * 12. ABOUT SECTION RESPONSIVE
 * .about has margin-left:80px; .img-container is 620×620; .wrapper is 400px.
 * ========================================================================= */

@media (max-width: 767px) {
  .about {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 16px !important;
  }

  .img-container {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

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

@media (min-width: 768px) and (max-width: 1023px) {
  .about {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .img-container {
    width: 100% !important;
    height: auto !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

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


/* =========================================================================
 * 13. FOOTER RESPONSIVE
 * ========================================================================= */

@media (max-width: 767px) {
  .footer-section {
    padding: 20px 12px !important;
  }

  .footer-item {
    padding: 0 8px 16px !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  .footer-main {
    flex-direction: column !important;
  }

  .footer-middle .contact-area {
    flex-direction: column !important;
    text-align: center !important;
  }

  .footer-copyright {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }

  /* Remove 3D perspective transforms on mobile */
  .office-address .row {
    transform: none !important;
    perspective: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer-item {
    width: 50% !important;
    flex: 0 0 50% !important;
  }
}


/* =========================================================================
 * 14. CHATBOT & RFQ MODAL POSITIONING
 * Elements are injected into document.body, OUTSIDE #root.
 * ========================================================================= */

/* --- Chatbot trigger (floating button) — all viewports --- */
#ameee-chatbot-trigger {
  position: fixed !important;
  bottom: 24px !important;
  right: 16px !important;
  z-index: 999998 !important;
  width: 56px !important;
  height: 56px !important;
}

/* --- Chatbot window — all viewports --- */
#ameee-chatbot-window {
  z-index: 999999 !important;
}

@media (max-width: 767px) {
  #ameee-chatbot-trigger {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
  }

  #ameee-chatbot-window {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    right: 12px !important;
    left: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    max-height: 70vh !important;
    border-radius: 12px !important;
  }

  /* RFQ modal — full-screen on mobile */
  #ameee-rfq-modal-overlay .ameee-rfq-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #ameee-chatbot-window {
    width: 380px !important;
    max-width: calc(100vw - 32px) !important;
    right: 16px !important;
    bottom: 88px !important;
    max-height: 65vh !important;
  }
}


/* =========================================================================
 * 15. CIRCLE / DECORATIVE ELEMENT CLEANUP
 * Purely decorative borders that overflow on small screens.
 * ========================================================================= */

@media (max-width: 768px) {
  .circle-border {
    display: none !important;
  }

  .effect-border {
    display: none !important;
  }
}


/* =========================================================================
 * 16. GENERAL TYPOGRAPHY SCALING
 * Prevent giant headings from overflowing narrow viewports.
 * ========================================================================= */

@media (max-width: 767px) {
  h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    word-break: break-word;
  }

  h2 {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
  }

  h3 {
    font-size: clamp(1.1rem, 4vw, 1.6rem) !important;
  }

  .section-title,
  .section-heading {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: clamp(1.75rem, 4vw, 3rem) !important;
  }

  h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important;
  }
}


/* =========================================================================
 * 17. CONTACT / OFFICE-ADDRESS PAGE RESPONSIVE
 * ========================================================================= */

@media (max-width: 767px) {
  .office-address {
    padding: 16px !important;
  }

  .office-address .row {
    flex-direction: column !important;
    transform: none !important;
    perspective: none !important;
  }

  .office-address .col-md-4,
  .office-address .col-md-6,
  .office-address .col-md-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* =========================================================================
 * 18. SMALL-PHONE REFINEMENTS (≤ 479px)
 * Extra adjustments for very narrow viewports (iPhone SE, Galaxy Fold, etc.)
 * ========================================================================= */

@media (max-width: 479px) {
  .nav {
    padding: 4px 8px !important;
    min-height: 50px !important;
  }

  /* Tighter service boxes */
  .services-box {
    min-height: 240px;
    padding: 12px !important;
  }

  /* Smaller team cards */
  .item-inner {
    max-width: 280px;
  }

  .team-avatar img {
    max-height: 220px;
  }

  /* Counters even smaller */
  .funfact-icon {
    width: 64px !important;
    height: 64px !important;
  }

  .funfact-icons {
    width: 40px !important;
    height: 40px !important;
  }

  .funfact-content h3 {
    font-size: 24px !important;
  }

  /* Footer tighter */
  .footer-section {
    padding: 16px 8px !important;
  }

  /* Hero text even smaller on tiny phones */
  .owl-carousel h1,
  .owl-carousel .hero-title,
  .owl-carousel .slide-title {
    font-size: clamp(1.25rem, 6vw, 2rem) !important;
  }

  /* Chatbot window nearly full-width */
  #ameee-chatbot-window {
    right: 4px !important;
    left: 4px !important;
    width: calc(100vw - 8px) !important;
    max-height: 65vh !important;
  }

  /* Drawer slightly wider on very small phones to avoid cramped text */
  .ameee-mobile-drawer {
    width: 260px;
  }
}


/* =========================================================================
 * END OF FILE
 * ========================================================================= */