@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');

/* ===================== PAGE LOADER ===================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  background: #020617;
  /* Subtle neon radial glow in center */
  background-image: radial-gradient(ellipse 60% 40% at 50% 60%, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
}

.loader_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.loader_logo {
  width: 220px;
  height: auto;
  object-fit: contain;
  visibility: hidden;
  /* GSAP controls via autoAlpha */
}

.loader_tagline {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #00d4ff;
  margin: 0;
  visibility: hidden;
}

.loader_bar_wrap {
  width: clamp(220px, 30vw, 320px);
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.loader_bar_inner {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #00d4ff, #7b5eed, #00d4ff);
  background-size: 200% auto;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.7);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  /* GSAP animates scaleX */
  animation: loaderShimmer 2s linear infinite;
}

@keyframes loaderShimmer {
  to {
    background-position: 200% center;
  }
}

.loader_percent {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #7588a3;
  letter-spacing: 1px;
  margin: 0;
}


/* Navbar container */
.nav {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;

  padding: 12px 40px;

  /* Blurry solid navbar */
  background: rgba(57, 78, 161, 0.219);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);


  /* Frosted border — top highlight + bottom separator */
  border-top: 1px solid rgba(255, 255, 255, 0.08);


  /* Depth shadow */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.685), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Smooth rounded bottom corners */


  /* Smooth transition when scrolling onto solid backgrounds */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.5vw, 24px);
  flex-wrap: nowrap;
}


.nav nav img {
  object-fit: contain;
}

.nav_logo {
  width: clamp(160px, 14vw, 225px);
  height: auto;
  flex-shrink: 0;
}

/* Logo button — invisible wrapper so logo acts like a clickable element */
.nav_logo_btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  outline: none;
  transition: opacity 0.2s ease;
}

.nav_logo_btn:hover {
  opacity: 0.82;
}


.nav nav a {
  text-decoration: none;
  font-family: "Inter";
  color: #e2e8f0;
  font-size: clamp(14px, 0.85vw, 14px);
  /* font-weight: 600; */
  letter-spacing: 0.4px;
  /* text-transform: uppercase; */
  position: relative;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* Animated underline indicator */
.nav nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #00d4ff;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.nav nav a:hover {
  color: #00d4ff;
}

/* Active state — underline fully extended + cyan glow */
.nav nav a.active {
  color: #00d4ff;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.7), 0 0 22px rgba(0, 212, 255, 0.35);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.nav_links>#home {
  margin-left: 50px;
}

.nav nav a.active::after {
  width: 100%;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.85), 0 0 16px rgba(0, 212, 255, 0.45);
}


.nav nav button {
  background-color: #38bdf8;
  border: none;
  padding: clamp(6px, 0.6vw, 10px) clamp(10px, 1vw, 18px);
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
  white-space: nowrap;
}


.nav nav button a {
  color: #0f172a;
  font-weight: 600;
  margin: 0;
}

/* Button hover */
.nav nav button:hover {
  background-color: #0ea5e9;
}

/* removed old 900px nav rules — hamburger at 1024px handles responsive */

/* ============ LAPTOP NAVBAR SCALING — 1025px to 1599px ============
   Keeps the full inline desktop nav (no hamburger) but fluidly scales
   padding, logo, gap, link font, margin, and button so 8 links + logo
   + CTA fit cleanly across 1280 / 1366 / 1440 / 1536 / 1599 laptops.
   Does NOT touch base styles — only adds overrides inside this range. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .nav {
    padding: 10px clamp(14px, 1.8vw, 30px);
  }

  .nav_logo {
    width: clamp(150px, 13vw, 210px);
    height: auto;
  }

  .nav nav {
    gap: clamp(2px, 0.7vw, 16px);
  }

  .nav nav a {
            font-size: clamp(10px, 0.76vw, 13px);
    margin: 0 clamp(2px, 0.35vw, 8px);
    letter-spacing: 0.25px;
  }

  .nav nav button {
    padding: 7px clamp(10px, 1vw, 14px);
  }

  .nav nav button a {
    font-size: clamp(11px, 0.82vw, 13px);
    letter-spacing: 0.2px;
  }

}

/* ============ SCROLL-NAV GLOW ON CTA BUTTON ============
   The GSAP ScrollTrigger darkens .nav as the hero scrolls away.
   Give the Book-a-Consultation button a cyan glow so it stays
   visually prominent against the darkened nav background. */
.nav nav button {
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.35), 0 0 36px rgba(0, 212, 255, 0.15);
}

.nav nav button:hover {
  box-shadow: 0 0 26px rgba(0, 212, 255, 0.65), 0 0 52px rgba(0, 212, 255, 0.28);
}

/* ============ NAV CONTENT ALIGNMENT — per device breakpoint ============
   Alignment-only tweaks (vertical centering + small padding balance) so
   logo / links / CTA sit perfectly centered top-to-bottom on each target
   screen. Does NOT change nav size, colors, fonts, or layout direction. */

/* Small Laptop / Tablet Landscape — 1024×768 */
@media (min-width: 1025px) and (max-width: 1279px) {
  .nav {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .nav nav {
    align-items: center;
    min-height: 38px;
  }

  .nav_logo {
    align-self: center;
  }

  .nav_links {
    align-items: center;
  }

  .nav_links a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .nav nav button {
    align-self: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* Medium Laptop — 1366×768 */
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .nav nav {
    align-items: center;
    min-height: 42px;
  }

  .nav_logo {
    align-self: center;
  }

  .nav_links {
    align-items: center;
  }

  .nav_links a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .nav nav button {
    align-self: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Large Laptop / Desktop — 1440×900 & 1920×1080 */
@media (min-width: 1440px) {
  .nav {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav nav {
    align-items: center;
    min-height: 48px;
    margin: 0 42px;

  }

  .nav_logo {
    align-self: center;
  }

  .nav_links {
    align-items: center;
  }

  .nav_links a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .nav nav button {
    align-self: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.big_text {
  font-family: "Space Grotesk", sans-serif;
  font-weight: bold;
  font-size: 60px;
  color: #E7E9EF;
}

.big_text .blue {
  color: #00D4FF;
}

.small_text {
  font-family: Inter, sans-serif;
  font-size: 23px;
  line-height: 28px;
  padding: 20px 0;
  color: #7E819A;

}

.hero-inner {
  width: 800px;
}

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Video styling */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* Content stays above video */
.hero-inner {
  z-index: 2;
  width: 900px;
  margin-top: 80px;
  padding: 100px 80px;
  position: relative;
}

/* Optional overlay for better readability */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(15, 23, 42, 0.6);
  z-index: 1;
}

.items {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.items p {
  color: #D1D6E0;
  margin-left: 5px;
  margin-bottom: 10px;
}

.hero_button {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

/* Common button styles */
.hero_button button {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

/* Primary button */
.hero_button button:first-child {
  background: linear-gradient(135deg, #00d4ff, #0ea5e9);
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);
}

/* Primary hover */
.hero_button button:first-child:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 212, 255, 0.5);
}

/* Secondary button */
.hero_button button:last-child {
  background: transparent;
  color: #e2e8f0;
  border: 2px solid #38bdf8;
}

/* Secondary hover */
.hero_button button:last-child:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-3px);
}

.about {

  background: #020617;
  padding-top: 20px;
  padding-bottom: 100px;
  display: flex;
  justify-content: center;

}

/* Center content */
.center {
  margin: 50px auto 0;
  max-width: 100%;
  width: min(800px, 100%);
  text-align: center;
}

/* Heading */
.center h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #e5e7eb;
  margin-bottom: 25px;
}

/* Blue highlight */
.center h2 span {
  color: #00d4ff;
}

/* Paragraphs */
.center p {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  color: #9ca3af;
  line-height: 1.8;
  margin-bottom: 18px;
}

/* Spacing between paragraphs */
.center p:last-child {
  margin-bottom: 0;
}

.about {
  background-color: #02040e00;
}

.about>div {
  width: 100%;

  padding: 0 20px;
  box-sizing: border-box;
}

.about_vid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.about_vid video {
  width: 1700px;
  flex-shrink: 0;
  height: auto;
  border-radius: 992px;
  will-change: transform;
}

.mid {
  width: 100%;


}

/* Section Title */
.what_we_do>p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: #e5e7eb;
  margin-bottom: 60px;
}

.what_we_do {
  background-color: #15151E80;
  padding: 100px 0;
}

.what_we_do .blue {
  color: #00d4ff;
}

/* Grid Layout */
.we_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}

/* Card */
.what_we {
  width: 316px;
  height: 210px;

  background: rgba(255, 255, 255, 0.03);

  border-radius: 18px;
  padding: 20px;


  display: flex;
  flex-direction: column;



  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

/* Hover Effect */
.what_we:hover {
  transform: translateY(-10px);
  border-color: #00d4ff;
  box-shadow: 0 20px 40px rgba(0, 212, 255, 0.15);
}

/* Icon */
.what_we img {
  width: 60px;
  margin-bottom: 20px;
}

/* Title */
.what_we p:nth-child(2) {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 10px;
}

/* Description */
.what_we p:nth-child(3) {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #9ca3af;
  line-height: 1.6;
}

.advance_infra {
  width: 100%;
  padding: 100px 20px;

  display: flex;
  justify-content: center;
}

/* Center everything */
.dialoge {
  /* max-width: 1200px; */
  /* width: 100%; */
  text-align: center;
  color: #e5e7eb;
}

/* Heading */
.dialoge>p:first-child {
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
}

.dialoge span {
  color: #00d4ff;
}

/* Description */
.dialoge>p:nth-child(2) {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  color: #9ca3af;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 50px auto;
}

/* 4 boxes in one row */
.dialoge>div>div {
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  display: grid;

  margin-right: 38px;
}

/* Each box */
.dialoge>div>div>div {
  background: rgba(255, 255, 255, 0.03);

  border-radius: 16px;
  padding: 25px 15px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 380px;
  height: 142px;

  transition: all 0.3s ease;
}

/* Hover */
.dialoge>div>div>div:hover {
  transform: translateY(-6px);
  border-color: #00d4ff;
  box-shadow: 0 15px 30px rgba(0, 212, 255, 0.15);
}

/* Icon */
.dialoge img {
  width: 45px;
}

/* Text */
.dialoge>div>div>div p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #e5e7eb;
  text-align: center;
}

/* Wrapper center */
.market {
  display: flex;
  justify-content: center;
  padding: 80px 0;
  background-color: #00000000;
}

/* Inner container */
.market>div>div>div {
  text-align: center;
  color: #e5e7eb;
  background-color: #15151E80;
  padding: 60px 0;
}

/* Heading */
.market p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 70px;
}

.market .blue {
  color: #00d4ff;
}

/* Timeline wrapper */
.market>div>div>div>div {
  width: 100%;
}

/* Numbers row */
.market>div>div>div>div>div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Circles */
.rounded {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  color: #0f172a;
  background: #00d4ff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
}

/* Hover */
.rounded:hover {
  background: #00d4ff;
  color: #020617;
  transform: scale(1.1);
}

/* Line */
.market hr {
  margin: 15px 0;
  border: none;
  height: 2px;
  background: linear-gradient(to right, #00d4ff, #00d4ff);
}

/* Labels row */
.market>div>div>div>div>div:last-child {
  display: flex;
  justify-content: space-between;
  text-align: center;
  gap: 109px
}

/* Labels */
.market>div>div>div>div>div:last-child>div {
  width: 110px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.5;
}

.idea_vid video {
  border-radius: 992px;
  height: auto;
  width: 1700px;
  margin-bottom: 30px;
}

.market {

  justify-content: center;
}

.market>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.idea_vid {
  text-align: center;
  perspective: 800px;
  width: 100%;
}

.idea_vid video {
  will-change: transform;
}

/* center number row */
.idea_vid>div>div>div:first-child {
  display: flex;
  justify-content: center;
}

/* center text row */
.idea_vid>div>div>div:last-child {
  display: flex;
  justify-content: center;
}

.idea_vid>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* number row */
.idea_vid>div>div>div:first-child {
  display: flex;
  justify-content: center;
}

/* text row */
.idea_vid>div>div>div:last-child {
  display: flex;
  justify-content: center;
}

.line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  max-width: 1440px;
  width: 100%;
  background: #808080;
  padding: 60px 60px 80px 60px;
}

.line>p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 60px;
}

.line>div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}

.market .line>div>div:first-child,
.market>div>div>div>div>div:first-child {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
  gap: 0 !important;
}

.market .line hr {
  border: none;
  height: 1px;
  background: #1f2937;
  position: relative;
  z-index: 1;
  width: calc(100% - (100% / 6));
  margin: -18px auto 0 auto;
}

.market .line>div>div:last-child,
.market>div>div>div>div>div:last-child {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: start;
  width: 100%;
  padding: 14px 0 0 0;
  gap: 0 !important;
}

.market .line>div>div:last-child>div,
.market>div>div>div>div>div:last-child>div {
  width: auto !important;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #e5e7eb;
  line-height: 1.5;
}

/* ===================== BADDIE — Timeline Step Tracker ===================== */
.baddie {
  width: 100%;
  /* max-width: 900px; */
  margin: 0 auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  position: relative;
  gap: 0 !important;
  padding: 0 !important;
}

/* .market prefix gives (0,3,0) specificity — beats legacy (0,2,5) selectors even with !important */
.market .baddie .baddie-line {
  display: block !important;
  position: absolute !important;
  top: 48px !important;
  left: 0 !important;
  right: 0 !important;
  width: calc(100vw - 104px) !important;
  height: 1px !important;
  background: #272734 !important;
  z-index: 1 !important;
  /* margin: 0 52px !important; */
  padding: 0 !important;
  transform: none !important;
}

.market .baddie .baddie-step {
  flex: 1 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 1px;
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.market .baddie .baddie-circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  width: auto !important;
  padding-bottom: 12px !important;
}

.market .baddie .rounded {
  width: 40px !important;
  height: 40px !important;
  font-size: 14px !important;
  box-shadow: 0px 0px 20px 0px rgba(123, 94, 237, 0.3), 0px 0px 60px 0px rgba(123, 94, 237, 0.1) !important;
}

.market .baddie .baddie-label {
  display: block !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e7e9ef !important;
  text-align: center !important;
  line-height: 1.43 !important;
  width: auto !important;
  transition: color 0.3s ease;
}

.market .baddie .baddie-label:hover {
  color: #00d4ff;
}

.serve {
  background: #000000;
}

.weserve {
  text-align: center;
  color: #fff;
  margin: 0 auto;
  margin-right: 30px;
  padding: 80px 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.weserve>p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #f8f9fa;
  margin-bottom: 50px;
}

.weserve>p span {
  color: #00d4ff;
}

.serve_flex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  width: 100%;
  box-sizing: border-box;
}

.serve_flex>div {
  background: #15151e80;
  border-radius: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  width: 100%;
  height: 160px;
  padding: 22px 20px;
  transition: all .3s;
  box-sizing: border-box;
}

.serve_flex>div:hover {
  transform: translateY(-4px);

  box-shadow: 0 12px 30px rgba(0, 212, 255, 0.12);
}



.serve_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
}

.serve_flex img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.serve_flex p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
  margin: 0;
  text-align: left;
}

/* Why Choose Us */
.us {
  background: #15151e80;
  padding: 80px 20px;
}

.why_inner {
  /* max-width: 1400px; */
  margin: 0 auto;
  padding: 0 32px;
}

.why_title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  color: #e7e9ef;
  margin-bottom: 48px;
}

.why_title span {
  color: #00d4ff;
}

.why_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.why_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  transition: all 0.3s ease;
}

.why_card:hover {
  transform: translateY(-6px);
}

.why_ic {
  width: 56px;
  height: 56px;


  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.why_ic svg,
.why_ic img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.why_card p {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #e7e9ef;
  text-align: center;
  line-height: 20px;
}

/* CTA Section */
.cta {
  background: linear-gradient(90deg, rgba(123, 94, 237, 0.1), rgba(123, 94, 237, 0.05) 50%, rgba(177, 82, 224, 0.1));
  padding: 130px 20px;
}

.cta_inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.cta_title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #e7e9ef;
  text-align: center;
  line-height: 40px;
}

.cta_title span {
  color: #00d4ff;
}

.cta_buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.cta_primary,
.cta_secondary {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  height: 44px;
  padding: 0 32px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta_primary {
  background: rgba(0, 212, 255, 0.85);
  color: #0c0c12;
  border: none;
  box-shadow: 0 0 20px rgba(123, 94, 237, 0.3), 0 0 60px rgba(123, 94, 237, 0.1);
}

.cta_primary:hover {
  background: #00d4ff;
  transform: translateY(-3px);
}

.cta_secondary {
  background: transparent;
  color: #00d4ff;
  border: 1px solid #00d4ff;
}

.cta_secondary:hover {
  background: rgba(0, 212, 255, 0.1);
  transform: translateY(-3px);
}

/* FAQ */
.faq {
  background: #0a0a0f;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

.faq_inner {
  max-width: 768px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.faq_tag {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #00d4ff;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.faq_title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #dfe7e2;
  text-align: center;
  margin-top: -32px;
}

.faq_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq_item {
  background: #0f0714;
  border: 1px solid #00d4ff;
  border-radius: 16px;
  padding: 16px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq_item:hover {
  background: #15091c;
}

.faq_item p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #dfe7e2;
  margin: 0;
  line-height: 20px;
}

.faq_item span {
  color: #00d4ff;
  font-size: 18px;
  font-weight: 400;
}

.faq_item_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.faq_item {
  flex-direction: column;
  align-items: flex-start;
}

.faq_answer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 212, 255, 0.2);
  width: 100%;
}

.faq_answer p {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #94a3b8;
  margin: 0;
  line-height: 1.6;
}

/* Footer */
.footer {
  background: #0a0a0f;
  border-top: 1px solid rgba(32, 40, 60, 0.5);
  padding: 48px 20px 0;
}

.footer_inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
}

.footer_col img {
  width: 223px;
  height: 42px;
  object-fit: contain;
  /* margin-bottom: 20px; */
}

.footer_about p {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #7588a3;
  line-height: 20px;
  max-width: 317px;
}

.footer_head {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #e2ebf3;
  margin-bottom: 20px;
}

.footer_links_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 42px;
}

.footer_links_grid a {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #7588a3;
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}

.footer_links_grid a:hover,
.footer_links_grid a.active {
  color: #00d4ff;
}

.footer_contact_row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: flex-start;
}

.footer_contact_row .ic {
  color: #00d4ff;
  font-size: 16px;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 22px;
  flex-shrink: 0;
}

.footer_contact_row .ic img {
  display: block;
  width: 16px;
  height: auto;
}

.footer_contact_row p {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #7588a3;
  line-height: 22px;
  margin: 0;
}

.footer_bottom {
  max-width: 1400px;
  margin: 40px auto 0;
  padding: 24px 32px;
  border-top: 1px solid rgba(32, 40, 60, 0.3);
  text-align: center;
  box-sizing: border-box;
}

.footer_bottom p {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #7588a3;
  margin: 0;
}

/* ===================== HAMBURGER MENU ===================== */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  position: relative;
  z-index: 1002;

}

.hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

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

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

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

.nav_links {
  display: flex;
  align-items: center;
  gap: clamp(40px, 3.7vw, 80px);
  flex: 1;
  justify-content: space-evenly;
}

/* ===================== VID SECTION (responsive fix) ===================== */
.vid_section {
  margin: 0 auto;
  padding: 50px 20px;
  perspective: 800px;
  display: flex;
  justify-content: center;
  margin-right: 50px;
  /* max-width: 1600px; */
}

.vid_section video {
  will-change: transform;
  border-radius: 992px;
  width: 1700px;
}


/* Mobile/tablet responsive rules moved to home.mobile.css */

/* ===== WHAT WE DO — always 4 cards horizontally on laptop & desktop =====
   Applies at every width ≥ 1024px. Placed AFTER the max-width:1024 block
   so it wins the cascade at exactly 1024px (same-specificity tie-breaker).
   Cards share available space equally, capped at 316px, centered on big
   desktops — 4 across on iPad landscape, 1366/1440/1920, everywhere. */
@media (min-width: 1024px) {
  .we_flex {
    grid-template-columns: repeat(4, minmax(0, 316px));
    justify-content: center;
    gap: clamp(50px, 7.2vw, 180px);
    margin-right: 38px;
    padding: 0 24px;
    display: grid;
    flex-wrap: initial;

  }

  .what_we {
    width: 320px;
  }
}

/* =====================================================================
   LAPTOP RESPONSIVE SCALING — proportional overrides for standard laptops.
   Base desktop code (your original) is UNTOUCHED. These media queries ONLY
   apply at specific laptop widths and scale fixed pixel values down so
   content fits without overflow.
   ===================================================================== */

/* ── LARGE LAPTOP: 1440px – 1599px ────────────────────────────────── */
@media (min-width:1700px){
  .market .baddie .baddie-line {
    width: calc(100vw - 120px) !important;
    margin: 0 60px !important;
  }
}
@media (min-width: 1440px) and (max-width: 1700px) {

  /* What We Do — scale gap + margin */
  .we_flex {
    gap: clamp(20px, 3vw, 80px) !important;
    margin-right: 20px !important;
    padding-left: 55px !important;
    margin-left: 20px
  }

  .what_we {
    width: 280px !important;
  }
.hero-inner{
  padding: 100px 68px;
}

  /* Infrastructure cards — scale gap + margin */
  .dialoge>div>div {
    gap: 60px !important;
    /* margin-right: 20px !important;
    margin-left: 20px; */
    width: 100%;
    
  }

  .dialoge>div>div>div {
    width: 290px !important
  }

  /* Industries We Serve — reduce asymmetric margin */
  .weserve {
    margin-right: 15px !important;
    padding: 80px 60px !important;
  }

  .serve_flex {
    gap: 35px !important;
  }

  /* Vid section — shrink to fit with 30px side space */
  .vid_section {
    margin: 0 30px !important;
    overflow: hidden !important;
  }

  .vid_section video {
    width: 97% !important;
    max-width: 100% !important;
  }

  .about_vid {
    margin: 0 30px !important;
  }

  .about_vid video {
    width: 1380px !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    margin-right: 60px;
    overflow: auto;
  }

  .idea_vid {
    margin: 0 30px !important;
    overflow: hidden !important;
  }

  .idea_vid video {

    max-width: 100% !important;
    width: 90%;
    /* margin-right: 10px; */
  }

  /* Baddie line */
  .market .baddie .baddie-line {
    width: calc(100vw - 120px) !important;
    margin: 0 60px !important;
  }

  /* Footer — centered, equal 3-column layout */
  .footer_inner {
    margin: 0 auto !important;
    padding: 0 48px !important;
    margin-left: 100px;
    gap: 48px !important;
  }

  .footer_bottom {
    margin: 40px auto 0 !important;
    padding: 24px 48px !important;
  }
}

/* ── STANDARD LAPTOP: 1280px – 1439px ────────────────────────────── */
@media (min-width: 1280px) and (max-width: 1439px) {

  /* What We Do — fit 4 cards, keep desktop offset */
  .we_flex {
    gap: clamp(16px, 2.5vw, 40px) !important;
    /* margin-right: 20px !important; */
    padding: 0 30px 0 50px !important;
    margin-left: 20px;
  }

  .what_we {
    width: 260px !important;
  }

  /* Infrastructure cards */
  .dialoge>div>div {
    gap: 24px !important;
    margin-right: 0 !important;
  }

  .dialoge>div>div>div {
    width: 100% !important;
    height: auto !important;
    min-height: 130px;
  }

  /* About text — ensure centered */
  .center {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Industries We Serve */
  .weserve {
    margin-right: 0 !important;
    padding: 80px 40px !important;
  }

  .serve_flex {
    gap: 24px !important;
  }

  .serve_flex>div {
    height: auto !important;
    min-height: 140px;
  }

  /* Vid section — shrink to fit with 30px side space */
  .vid_section {
    margin: 0 30px !important;
    overflow: hidden !important;
  }

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

  .about_vid {
    margin: 0 30px !important;
    overflow: visible;
  }

  .about_vid video {
    width: 1350px !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    margin-right: 60px;
    overflow: auto;
  }

  .idea_vid {
    margin: 0 30px !important;
    overflow: hidden !important;
  }

  .idea_vid video {
    width: 1300px;
        max-width: 100% !important;
        padding: 0 14px;
        margin-left: 10px
  }

  /* Baddie line */
  .market .baddie .baddie-line {
    width: calc(100vw - 40px) !important;
    margin: 0 20px !important;
  }

  /* Footer — centered, equal 3-column layout */
  .footer_inner {
    margin: 0 auto !important;
    padding: 0 40px !important;
    gap: 40px !important;
  }

  .footer_bottom {
    margin: 40px auto 0 !important;
    padding: 24px 40px !important;
  }
}

/* ── SMALL LAPTOP: 1024px – 1279px ───────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1279px) {

  /* What We Do — tighter 4-card grid, keep desktop offset */
  .we_flex {
    gap: clamp(10px, 1.5vw, 24px) !important;
    margin-right: 20px !important;
    padding: 0 20px 0 40px !important;
  }

  .what_we {
    width: 220px !important;
    height: auto !important;
    min-height: 180px;
  }

  /* Infrastructure cards — scale to fit */
  .dialoge>div>div {
    gap: 16px !important;
    margin-right: 0 !important;
  }

  .dialoge>div>div>div {
    width: 100% !important;
    height: auto !important;
    min-height: 120px;
    padding: 18px 12px !important;
  }

  /* Center the about text */
  .center {
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(700px, 90%) !important;
  }

  /* Industries We Serve */
  .weserve {
    margin-right: 0 !important;
    padding: 60px 24px !important;
  }

  .serve_flex {
    gap: 18px !important;
  }

  .serve_flex>div {
    height: auto !important;
    min-height: 120px;
    padding: 18px 16px !important;
  }

  /* Videos — shrink to fit with 30px side space */
  .vid_section {
    margin: 0 30px !important;
    overflow: hidden !important;
  }

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

  .about_vid {
    margin: 0 30px !important;
  }

  .about_vid video {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }

  .idea_vid {
    margin: 0 30px !important;
    overflow: hidden !important;
  }

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

  /* Why Choose Us — 5 cols may be tight, scale icons */
  .why_grid {
    gap: 14px !important;
  }

  .why_inner {
    padding: 0 16px !important;
  }

  /* Hero inner — prevent overflow */
  .hero-inner {
    width: 700px !important;
    padding: 80px 40px !important;
  }

  /* Baddie line */
  .market .baddie .baddie-line {
    width: calc(100vw - 30px) !important;
    margin: 0 15px !important;
  }

  /* Market heading */
  .market p {
    font-size: 30px !important;
  }

  /* Footer — centered, equal 3-column layout */
  .footer_inner {
    margin: 0 auto !important;
    padding: 0 24px !important;
    gap: 30px !important;
  }

  .footer_bottom {
    margin: 32px auto 0 !important;
    padding: 20px 24px !important;
  }
}

/* Mobile-only rules moved to home.mobile.css */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  font-family: "Space Grotesk", sans-serif;
  color: white;
}

.contact-section {
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sub-title {
  color: #00d9ff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 22px;
}

.main-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 24px;
}

/* .title-line {
  width: 45px;
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(to right, #00d9ff, #ff00d4);
  margin-bottom: 40px;
} */

.contact-box {
  width: 100%;
  max-width: 760px;
  border: 2px solid #00d9ff;
  border-radius: 16px;
  padding: 35px;
  background: #050505;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
}

form {
  width: 100%;
}

.row {
  display: flex;
  gap: 20px;
  margin-bottom: 22px;
}

.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

label {
  font-size: 14px;
  margin-bottom: 10px;
  color: #fff;
}

input,
textarea {
  width: 100%;
  background: #181528;;
  border: 1px solid #00d9ff;
  border-radius: 8px;
  padding: 14px 16px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: 0.3s ease;
}

input::placeholder,
textarea::placeholder {
  color: #bfbfbf;
}

input:focus,
textarea:focus {
     border-color: #00d9ff;
    box-shadow: 0 0 10px rgb(0 217 255);
}

.full-width {
  margin-bottom: 22px;
}

textarea {
  min-height: 150px;
  resize: none;
}

#submitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 55px;
  padding: 0 36px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #00d9ff, #0099cc);
  color: #000;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 217, 255, 0.35);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease,
              opacity 0.3s ease;
}

/* Shimmer sweep */
#submitBtn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}

#submitBtn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 36px rgba(0, 217, 255, 0.55);
}

#submitBtn:hover::after {
  transform: translateX(100%);
}

#submitBtn:active {
  transform: scale(0.97);
  box-shadow: 0 4px 16px rgba(0, 217, 255, 0.3);
}

@media (max-width: 768px) {

  .main-title {
    font-size: 32px;
    text-align: center;
  }

  .contact-box {
    padding: 25px;
  }

  .row {
    flex-direction: column;
    gap: 22px;
  }

}
#submitBtn:disabled,
#submitBtn.loading {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

#formMessage {
 font-size: 14px;
    color: #fff;
    margin: 12px auto 0px;
    width: fit-content;
}

.formsuccess {
 display: none;
}