/* ══════════════════════════════════════════════════════════════
   SCROLLBAR FIX - Remove Unwanted Scrollbars
   Fixes scrollbar appearing on every component on page load
   ══════════════════════════════════════════════════════════════ */

/* ── ROOT LEVEL - ONLY BODY SHOULD SCROLL ──────────────────── */
html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  max-height: 100%;
}

/* ── REMOVE OVERFLOW FROM ALL SECTIONS ──────────────────────── */
section,
.sec,
.sec-about,
.sec-services,
.sec-cases,
.sec-partners,
.sec-clients,
.sec-tech,
.sec-stats,
.sec-testimonials,
.sec-why,
.sec-faq {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* ── CONTAINERS SHOULD NOT HAVE SCROLLBARS ──────────────────── */
.container,
.hero-wrap,
.about-grid,
.services-bento,
.why-grid,
.partner-grid,
.client-grid {
  overflow: visible !important;
  height: auto !important;
}

/* ── SPECIFIC COMPONENT FIXES ──────────────────────────────── */

/* Hero Section */
.hero-wrap {
  overflow: visible !important;
  min-height: 100vh;
  height: auto;
}

.hero {
  overflow: visible !important;
  height: auto;
}

/* About Section */
.sec-about {
  overflow: visible !important;
}

.about-metrics {
  overflow: visible !important;
  height: auto;
}

/* Services Section */
.sec-services {
  overflow: visible !important;
}

.services-bento {
  overflow: visible !important;
}

/* Projects Section */
.sec-cases {
  overflow: hidden !important; /* This one needs hidden for carousel */
}

.cases-stage {
  overflow: hidden !important; /* This one needs hidden for carousel */
}

/* Partners Section */
.sec-partners {
  overflow: visible !important;
}

/* Clients Section */
.sec-clients {
  overflow: visible !important;
}

.clients-marquee {
  overflow: hidden !important; /* Needs hidden for marquee effect */
}

/* Tech Section */
.sec-tech {
  overflow: visible !important;
}

/* Stats Section */
.sec-stats {
  overflow: visible !important;
}

/* Testimonials Section */
.sec-testimonials {
  overflow: visible !important;
}

/* Why Section */
.sec-why {
  overflow: visible !important;
}

.why-visual {
  overflow: visible !important;
}

/* FAQ Section */
.sec-faq {
  overflow: visible !important;
}

/* Footer */
.footer {
  overflow: visible !important;
}

/* ── NAVBAR FIXES ──────────────────────────────────────────── */
.topbar {
  overflow: visible !important;
}

.navbar {
  overflow: visible !important;
}

.mega-menu {
  overflow: visible !important;
}

/* ── CARD ELEMENTS ──────────────────────────────────────────── */
.svc-card2,
.case-card,
.stat-card,
.test-card,
.glow-card,
.metric-card,
.partner-card,
.client-card {
  overflow: visible !important;
}

/* ── GRID LAYOUTS ──────────────────────────────────────────── */
.about-grid,
.why-grid,
.services-bento,
.stats-row,
.partner-grid,
.testimonials-track {
  overflow: visible !important;
  height: auto !important;
}

/* ── PREVENT SCROLL ON SPECIFIC ELEMENTS ──────────────────── */
div:not(.cases-stage):not(.clients-marquee):not(.navbar) {
  overflow: visible;
}

/* ── FIX FOR MEGA MENU DROPDOWN ──────────────────────────────── */
@media (max-width: 920px) {
  .navbar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 100px);
  }
}

/* ── REMOVE SCROLLBAR FROM ELEMENTS THAT DON'T NEED IT ────── */
*:not(body):not(html):not(.navbar):not(.cases-stage):not(.clients-marquee):not(textarea):not(pre):not(code) {
  overflow: visible;
}

/* ── EXPLICIT HEIGHT FIXES ──────────────────────────────────── */
.hero-wrap {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: visible;
}

section.sec {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* ── WEBKIT SCROLLBAR HIDING (for elements that must scroll) ── */
.navbar::-webkit-scrollbar {
  width: 6px;
}

.navbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.navbar::-webkit-scrollbar-thumb {
  background: rgba(42, 125, 241, 0.5);
  border-radius: 3px;
}

.navbar::-webkit-scrollbar-thumb:hover {
  background: rgba(42, 125, 241, 0.7);
}

/* ── ENSURE CONTENT FITS WITHOUT SCROLLING ──────────────────── */
.container {
  width: 100%;
  max-width: 100%;
  padding-left: clamp(16px, 8vw, 120px);
  padding-right: clamp(16px, 8vw, 120px);
  overflow: visible;
}

/* ── FIX FOR MOBILE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  section,
  .sec,
  div {
    overflow: visible !important;
  }
  
  /* Only these should scroll */
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  .navbar {
    overflow-y: auto !important;
  }
  
  .cases-stage,
  .clients-marquee {
    overflow: hidden !important;
  }
}

/* ── CRITICAL: OVERRIDE ANY OVERFLOW SETTINGS ──────────────── */
section:not(.sec-cases):not(.sec-clients) {
  overflow: visible !important;
  height: auto !important;
}

.sec:not(.sec-cases):not(.sec-clients) {
  overflow: visible !important;
  height: auto !important;
}

/* ── BOX MODEL FIX ──────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

/* ── REMOVE ANY MAX-HEIGHT THAT CAUSES SCROLLING ──────────── */
section,
.sec,
.container,
div:not(.cases-stage):not(.navbar) {
  max-height: none !important;
}

/* ── DEBUGGING: Uncomment to see which elements have scrollbars ── */
/*
*::-webkit-scrollbar {
  width: 10px;
  background: red !important;
}
*/


/* ══════════════════════════════════════════════════════════════
   AGGRESSIVE SCROLLBAR REMOVAL
   ══════════════════════════════════════════════════════════════ */

/* Force remove overflow from ALL divs except specific ones */
div:not(.navbar):not(.cases-stage):not(.clients-marquee):not(.marquee-track):not(.client-strip-track):not(.code-card-body) {
  overflow: visible !important;
}

/* Force remove overflow from all sections */
section {
  overflow: visible !important;
  height: auto !important;
}

/* Explicitly set sections to visible overflow */
.sec-about,
.sec-services,
.sec-partners,
.sec-tech,
.sec-stats,
.sec-testimonials,
.sec-why,
.sec-faq {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Remove overflow from grid containers */
.about-grid,
.services-bento,
.why-grid,
.partner-grid,
.stats-row,
.testimonials-track,
.tech-panels {
  overflow: visible !important;
  height: auto !important;
}

/* Remove overflow from wrapper elements */
.hero-wrap,
.container,
.sec-head,
.about-text,
.why-text {
  overflow: visible !important;
}

/* Cards should not have overflow */
.svc-card2,
.stat-card,
.test-card,
.glow-card,
.metric-card,
.partner-card {
  overflow: visible !important;
  height: auto !important;
}

/* ── ONLY THESE ELEMENTS SHOULD HAVE OVERFLOW ──────────────── */

/* Body - main scroll */
body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Cases carousel - horizontal */
.sec-cases,
.cases-stage {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* Clients marquee - horizontal */
.sec-clients .clients-marquee,
.marquee-track,
.client-strip-track-wrap {
  overflow: hidden !important;
}

/* Navbar mobile menu - vertical scroll */
@media (max-width: 920px) {
  .navbar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* ── RESET ANY PROBLEMATIC CSS ──────────────────────────────── */

/* Remove transform that might cause scroll */
section,
.sec {
  transform: none !important;
}

/* Ensure proper box sizing */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* Remove any padding that might cause overflow */
section:not(.sec-cases):not(.sec-clients) {
  overflow-x: visible !important;
  overflow-y: visible !important;
}