/* =========================================================
   QUANTONIC LIMITED — Services Stylesheet (services.css)
   ========================================================= */

:root {
  --blue-900: #01305e;
  --blue-700: #01488a;
  --blue-600: #0a5aa3;
  --cyan-500: #12bfd0;
  --cyan-400: #14c8d7;
  --cyan-600: #08adc0;
  --green-500: #88ba26;
  --green-600: #729e1c;
  --ink: #0e1b24;
  --steel-600: #4c5a66;
  --steel-400: #7c8993;
  --steel-200: #c7d0d6;
  --paper: #f6f7f5;
  --paper-dim: #eef1ee;
  --line: #d8dedb;
  --white: #ffffff;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
  --radius: 12px;
}

/* =========================================================
   RESET & BASE STYLES
   ========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: 
    radial-gradient(ellipse 900px 520px at 6% -8%, rgba(10, 90, 163, 0.06), transparent 60%),
    radial-gradient(ellipse 760px 520px at 100% 6%, rgba(136, 186, 38, 0.07), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.container {
  width: 92%;
  max-width: var(--container);
  margin: 0 auto;
}

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 999;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  height: 95px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 180px;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.logo img:hover {
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  gap: 42px;
}

.nav-links a {
  color: #142b72;
  font-weight: 600;
  font-size: 17px;
  position: relative;
  transition: color 0.2s ease;
}

.nav-links a.active {
  color: var(--blue-700);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--cyan-400);
  transition: width 0.35s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.book-btn {
  background: var(--cyan-400);
  color: var(--white);
  padding: 16px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.book-btn span {
  margin-left: 8px;
}

.book-btn:hover {
  background: var(--cyan-600);
  transform: translateY(-2px);
}

/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero {
  padding: 50px 0 60px;
  text-align: center;
}

.page-hero .section-heading span {
  color: var(--cyan-500);
  letter-spacing: 3px;
  font-weight: 700;
  font-size: 34px;
  font-family: var(--font-mono);
}

.page-hero .section-heading h1 {
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  color: var(--blue-900);
  margin: 18px 0;
  
}

.page-hero .section-heading p {
  color: var(--steel-600);
  line-height: 1.8;
  font-size: 18px;
  max-width: 760px;
  margin: 0 auto;
}
/* =========================================================
   SERVICES GRID & CARDS (BRANDED COLOUR PALETTE)
   ========================================================= */

/* =========================================================
   CLEAN CONTENT LAYOUT (NO BOX CONTAINERS / NO NUMBER BADGE)
   ========================================================= */

.services-section {
  padding: 80px 0;
  background-color: var(--paper, #f8fafc);
}

/* SECTION ROW (Outer Box Removed) */
.service-row {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 100px; /* Spacing between rows */
  padding: 0;
  background: transparent; /* Box removed */
  border: none;            /* Box removed */
  box-shadow: none;        /* Box removed */
}

.service-row:last-child {
  margin-bottom: 0;
}

/* ALTERNATE ROW LAYOUT */
.service-row:nth-child(even) {
  flex-direction: row-reverse;
}

/* LEFT / RIGHT TEXT CONTENT */
.service-info {
  flex: 1;
}

/* TOP BADGE CONTAINER */
.service-top {
  display: flex;
  justify-content: flex-end; /* Aligns SPECIALIZED tag to top right */
  margin-bottom: 15px;
}

/* SPECIALIZED BADGE (Matching Image Pill Style) */
.service-badge {
  display: inline-block;
  background: #f0f0f0;
  color:  #88ba26;
  border: 1px solid #d0d0d0;
  padding: 8px 24px;
  border-radius: 30px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* SERIF TITLE (Matching Image Style) */
.service-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 40px;
  font-weight: 700;
  color: #0a192f;
  margin-bottom: 24px;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* DESCRIPTION PARAGRAPH */
.service-desc {
  font-size: 18px;
  line-height: 1.8;
  color: #4b5563;
  margin-bottom: 32px;
}

/* TAG PILLS AT BOTTOM (Matching Image Style) */
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
 
}

.service-tags span {
  background: #f0f0f0;
  color: #333333;
  border: 1px solid #d0d0d0;
  padding: 6px 24px;
  border-radius: 30px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* IMAGE CONTAINER */
.service-media {
  flex: 1;
}

.service-media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* RESPONSIVE DESIGN */
@media (max-width: 960px) {
  .service-row,
  .service-row:nth-child(even) {
    flex-direction: column;
    margin-bottom: 60px;
    gap: 30px;
    height:700px;
  }

  .service-media img {
    height: 280px;
  }

  .service-title {
    font-size: 30px;
  }
}
/* =========================================================
   STATS SECTION
   ========================================================= */

.stats-band {
  background: var(--blue-900);
  color: var(--white);
  padding: 64px 0;
}

.stats-band .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.stat-item {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  padding: 35px 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.35s ease, background 0.35s ease;
}

.stat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan-500), var(--green-500));
}

.stat-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
}

.stat-item .num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--green-500);
  line-height: 1;
}

.stat-item .label {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================================================
   CTA SECTION
   ========================================================= */
/* =========================================================
   FIXED: CTA PADDING & MOBILITY COLLAPSE (services.css)
   Requires variables from :root defined in earlier chats.
   ========================================================= */

/* 1. Ensure the container has the solid branded base background */
/* =========================================================
   CTA SECTION (Small, Desktop-Ready Version)
   Based on the second reference image provided.
   This design is NOT 2-column on desktop; it is centered
   but narrower and much more spacious vertically.
   ========================================================= */

/* 1. Main Container: Set Green Background and Section Height */
.cta-band {
 
  padding-left: 20px;
  padding-right: 20px;
  
  background-color: var(--green-500); /* Use branded lime green base */
  color: var(--blue-900); /* Use branded deep blue text color */
}

/* 2. Wrap/Inner: Center Content and Provide spacing Context separation Context separation Context separation Context separation Context internal internal padding */
.cta-inner {
  display: flex;
  flex-direction: column; /* Force vertical stacking for all devices (centered lookup) */
  align-items: center; /* center elements horizontally in the layout container */
  justify-content: center;
  gap: 30px; /* Internal breathing room between components on desktop/mobile */
  
  /* established width and characters limits from previous previous previous reference to make "small box" look */
  max-width: 65ch; /* Comfortable reading width prevents text touching edges */
  width: 90%; /* Center the box and allow gutter around it */
  max-width: 100%; /* prevent box width explode */
  
  margin-left: auto;
  margin-right: auto;
  
  text-align: center; /* Center all text (matching small box centered look) */
  position: relative; /* Context for absolute positioned icon Context positioning */
}

/* 3. Typography (reuse established branded styles) */
.cta-inner h2 {
  font-family: var(--font-display); /* Branded Space Grotesk font */
  font-size: clamp(2.2rem, 3vw, 2.8rem); /* fluid text size context for modern header separation Context separation */
  
  /* overwrites character limits to center properly on mobile/small box context Context character width context characters width context width */
  max-width: 100%; 
  margin: 0;
  
  line-height: 1.15;
  text-transform: uppercase; /* Match branded all-caps style */
}

.cta-inner p {
  font-family: var(--font-body); /* branded Inter font 400 */
  font-size: 16px; /* established Inter 400 text size */
  line-height: 1.7; /* branded description separation context line height Context separation Context line height separation context line height separation context fluid body text line height separation context */
  color: var(--steel-800); /* Use branded deep grey/blue grey color */
  
  /* established characters width context characters width context width width width comfortable reading width prevents text touching edges */
  max-width: 55ch; 
  margin: 0;
}

/* 4. The Button (reuse established branded styles) */
.btn {
  /* established branded styles (font-family, text-transform, padding, white background, shadow context shadow context shadow) */
  justify-content: center; /* ensure button is centered on all devices */
  width: auto; /* don't stretch; keep a sleek, standard button size context */
  margin-top: 10px; 
  /* specific internal neat separated Context vertical separated separation separation */
}

/* 5. Icon Position and Animation (reuse established styles) */
.cta-fly {
  position: absolute;
  top: -25px; /* adjust vertical separation context separation context separation Separation Context top visual position Context top placement Context top visual placement separation context */
  right: 5%; /* specific lateral context visual separating separation context separation Context separation Context context context visual separation context separation context specific visual positioning separation context */
}

.fly-icon {
  animation: fly 4.5s ease-in-out infinite; /* provide standard neat visual feedback loop animation Context animation feedback loop animation feedback loop animation feedback loop animation */
}


/* =========================================================
   DESKTOP (LAPTOP) CTA SECTION REDESIGN
   Place this block at the bottom of your CSS file.
   It targets screen widths above 960px.
   ========================================================= */
@media (min-width: 961px) {

  /* 1. Reset established flex/column settings context (OVERWRITE established mobile context) */
  .cta-inner {
    display: grid !important; /* Forces switch from established flex to grid */
    
    /* establish a 2-column layout with specific neat width for text Context separator separated separator separator separator */
    grid-template-columns: min-content minmax(300px, 55ch); 
    
    justify-content: space-between; /* pushes content to opposite edges context separating separating */
    align-items: center; /* center items vertically */
    gap: 32px; /* Internal breathing room between columns on large displays context separating separation */
    
    /* overwrite established centering context from mobile */
    text-align: left; /* standard left alignment Context neat separator separator neat */
    max-width: 100%; /* prevent box width explode */
  }

  /* 2. Specific styles for text on the right side context characters width context characters width context width */
  .cta-inner p {
    /* establish comfortable reading width context standard neat standard neat separator separation separated */
    max-width: 55ch; 
    margin: 0; /* remove default vertical separation Context context separating separation separation separation */
    text-align: left; /* Ensure description is left-aligned context neat separator separation separation separation */
  }

  /* 3. Icon positioning context context relative context to standard section context placement Context positioning Context placement Context context context placement context context placement context separation Context separation Context separation Context separation separation Context context context specificSpecific placement on desktop context context Context separation Context separation context visual visual placement context */
  .cta-fly {
    top: -25px; /* adjust vertical separation context Context separating visual separation separation separation Context visual visual Specific Specific Specific specificSpecific visual positioning visual placement context */
    right: 5%; /* provide specificSpecific specific Specific specific Specific specificSpecific specific visual position Context context Specific visual placement context visual placement separation context visual separating separation context separation Context separation Context */
  }
}

@media (max-width: 768px) {
  .cta-band {
    padding: 80px 0; /* Fluid compact padding context context separation Context compact spacing on mobile context context context standard compact breathing room context context context */
  }

  .cta-inner h2 {
    font-size: 28px; /* specific neat fluid neat text size context separation context Separation */
  }
}

/* Target Mobile only breakpoint */
@media (max-width: 768px) {
  /* Reset established desktop positioning context */
  .service-header-box {
    position: static; /* Remove desktop absolute positioning */
    transform: none; /* Remove desktop centering adjustments */
    
    /* provide specific vertical animation on mobile */
    [data-animate="slide-up"] .service-header-box {
        transform: translateY(30px) !important; 
    }
  }
}
.cta-band {
  background: var(--green-500);
  color: var(--blue-900);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 20px 0;
  position: relative;
}

.cta-inner h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 20ch;
}

.cta-inner p {
  max-width: 50ch;
  font-size: 16px;
  line-height: 1.6;
}

.cta-fly {
  position: absolute;
  right: 8%;
  top: -18px;
  opacity: 0.85;
}

.fly-icon {
  animation: fly 4.5s ease-in-out infinite;
}

.btn {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 2px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
  background: var(--white);
  color: var(--blue-900);
}

.btn:hover {
  background: var(--paper);
}

.btn-primary {
  background: var(--blue-900);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--ink);
  transform: translateY(-2px);
}

.btn-ghost:hover {
  background: var(--blue-900);
  color: var(--white);
  transform: translateY(-2px);
}

/* =========================================================
   MOBILE RESPONSIVE CTA SECTION (< 768px)
   ========================================================= */

@media (max-width: 768px) {
  .cta-inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 64px 5px !important; /* Ensures padding on small screens */
     
  }

  .cta-inner h2,
  .cta-inner p {
    max-width: 100%; /* Removes character width limits on narrow screens */
  }

  .cta-fly {
    top: -14px;
    right: 16px; /* Prevents overflow off the edge of small displays */
    width: 36px;
    height: 36px;
  }
  .cta-section {
    padding: 60px 20px; /* Provide balanced, fluid neat padding for mobile context */
  }

  .section-heading span {
  
  color: #162870;
  letter-spacing: 3px;
  font-weight: 700;
  font-size: 34px;
  font-family: var(--font-mono);
}

  .btn {
    width: 100%; /* Spans full width for easy tapping on mobile */
    justify-content: center;
    padding: 14px 20px;
  }
}
/* =========================================================
   FOOTER SECTION
   ========================================================= */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand img {
  height: 30px;
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 34ch;
}

.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--green-500);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  flex-wrap: wrap;
  gap: 12px;
}

/* =========================================================
   KEYFRAME ANIMATIONS
   ========================================================= */

@keyframes fly {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, -16px) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 960px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .stats-band .wrap {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .cta-fly {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
}

@media (max-width: 720px) {
  .site-header .container {
    height: auto;
    padding: 15px 0;
    flex-direction: column;
    gap: 15px;
  }

  .nav-links {
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-hero {
    padding-top: 40px;
  }

  .service-card {
    padding: 28px 20px;
  }

  .service-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .stats-band .wrap {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   MOBILE HEADER & NAVIGATION FIX
   ========================================================= */

@media (max-width: 768px) {
  .site-header .container {
    height: 70px;
    padding: 0 20px;
    flex-direction: row; /* Keep elements in a single horizontal row */
    justify-content: space-between;
    align-items: center;
  }

  .logo img {
    width: 130px; /* Scale down logo to prevent overflow */
  }

  .book-btn {
    padding: 10px 16px;
    font-size: 12px;
    border-radius: 8px;
  }

  /* Hide raw link list from exploding the header height */
  .navbar {
    display: none; 
  }

  /* Slide-down mobile drawer menu when toggled active */
  .navbar.active {
    display: block;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--line, #d8dedb);
    padding: 20px 0;
    z-index: 998;
  }

  .navbar.active .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .navbar.active .nav-links a {
    font-size: 16px;
  }

  /* Hamburger Toggle Button */
  .mobile-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
  }

  .mobile-toggle span {
    width: 24px;
    height: 2.5px;
    background-color: #142b72;
    border-radius: 2px;
    transition: 0.3s;
  }
}

@media (min-width: 769px) {
  .mobile-toggle {
    display: none; /* Hide toggle on desktop */
  }
}


/* Fix for Book Consultation button on mobile */
@media (max-width: 768px) {
  .site-header .container {
    height: 70px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .logo img {
    width: 110px; /* Scale logo down slightly to give room */
    height: auto;
  }

  .book-btn {
    padding: 8px 14px;        /* Compact padding */
    font-size: 11.5px;        /* Slightly smaller text */
    white-space: nowrap;      /* Prevents text from breaking into 2 lines */
    border-radius: 6px;       /* Sleek corner rounding */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;             /* Fixed neat height */
  }

  .book-btn span {
    display: none;            /* Hides arrow icon on mobile to save space */
  }
}

/* =========================================================
   UPDATED SERVICES & SCROLL ANIMATIONS (services.css)
   ========================================================= */

/* Use a different background to make the white box pop */
.services-section {
  padding: 100px 0;
  background-color: #f1f4f1; /* Slightly darker to contrast white boxes */
}

/*Outer Row is now just a positioning context */
.service-row {
  display: block;
  margin-bottom: 150px; /* Large gap for clear overlap */
}

/* Image Container: Now handles the overlap logic */
.service-media {
  position: relative; /* Context for nested box */
  width: 85%;        /* Image doesn't take full width to give box room */
  height: 500px;     /* Fixed neat height */
  border-radius: 30px;
  overflow: visible; /* CRITICAL: Box must overflow the container */
  
}

/* Position images on opposite sides */
.service-row:nth-child(odd) .service-media {
  margin-left: 0;
}

.service-row:nth-child(even) .service-media {
  margin-left: auto;
}

.service-media img.parallax-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  margin-top: 20px;
}

/* The Overlapping Info Box Style */
.service-info.box-style {
  position: absolute;
  left: 50%; /* Center horizontally */
  top: 3% !important;
  bottom: 30px; /* Gap from the image bottom */
  width: 600px; /* Fixed width for the text block */
  height: 470px;
  padding: 40px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  z-index: 10;
  max-width: 90%; /* For small desktop screens */
  border: #01305e 1px solid; /* Subtle border for definition */
}
.service-info.box-style::after {
  content: "";
  position: absolute;
  bottom: -20px; /* Position below the box */
  width: 100%;
  height: 20px;
  border-radius: 0 0 20px 20px; /* Match the box's bottom corners */
}
.service-info.box-style:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Positioning the box on opposite sides */
.service-row:nth-child(odd) .service-info.box-style {
  right: -120px; /* Slide out to the right */
}

.service-row:nth-child(even) .service-info.box-style {
  left: -120px; /* Slide out to the left */
}

/* =========================================================
   SCROLL ANIMATION STATES (Requires JS)
   ========================================================= */

/* Default 'Off-Screen' State */
[data-animate="slide-up"] {
  opacity: 0;
  transform: translateY(60px) scale(0.98); /* Slide image up and scale down slightly */
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease-out;
  will-change: transform, opacity;
}

[data-animate="slide-up"] .service-info.box-style {
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s, opacity 1s ease-out 0.4s; /* delayed */
  will-change: transform, opacity;
}

/* Specific start positions for the box relative to the image */
.service-row:nth-child(odd) [data-animate="slide-up"] .service-info.box-style {
  transform: translate(-40px, 40px); /* Box starts left-down */
}

.service-row:nth-child(even) [data-animate="slide-up"] .service-info.box-style {
  transform: translate(40px, 40px); /* Box starts right-down */
}

/* Active 'On-Screen' State (Applied by JS) */
[data-animate="slide-up"].active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-animate="slide-up"].active .service-info.box-style {
  opacity: 1;
  transform: translate(0, 0); /* Slid into final CSS position */
}

/* =========================================================
   RESPONSIVE FIXES
   ========================================================= */
/* =========================================================
   RESPONSIVE SERVICES SECTION (TABLET & MOBILE)
   ========================================================= */

/* --- TABLET LAYOUT (< 1024px) --- */
@media (max-width: 1024px) {
  .services-section {
    padding: 60px 0;
  }

  .service-row,
  .service-row:nth-child(even) {
    display: block;
    margin-bottom: 20px;
    width: 100%;
  }

  /* Allow inner container to overflow without clipping the white box */
  .service-media {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible !important; 
    display: block;
  }

  .service-media img,
  .service-media img.parallax-bg {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
  }

  /* Overlapping White Box */
  .service-info.box-style {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 92% !important;
    max-width: 680px;
    margin: -60px auto 0 auto !important; /* Pulls box up over image */
    padding: 36px 28px 40px 28px !important;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    box-sizing: border-box !important;
    z-index: 5;
  }

  .service-title {
    font-size: 28px;
    text-align: center;
  }

  .service-desc {
    font-size: 15px;
    text-align: center;
  }

  .service-tags {
    justify-content: center;
  }
}

/* =========================================================
   COMPLETE MOBILE GAP & HEIGHT RESET (< 768px)
   ========================================================= */

@media (max-width: 768px) {
  .services-section {
    padding: 24px 0 !important;
  }

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

  /* 1. Collapse row container heights & reduce gap between cards */
  .service-row,
  .service-row:nth-child(even) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 24px !important; /* Total vertical space between Service 01 & 02 */
    padding: 0 !important;
  }

  /* 2. Reset image container height so it doesn't leave blank space */
  .service-media {
    display: block !important;
    width: 100% !important;
    height: auto !important; /* Removes fixed 350px height causing the huge gap */
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  .service-media img,
  .service-media img.parallax-bg {
    width: 100% !important;
    height: 180px !important; /* Height of the top image banner */
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
    margin: 0 !important;
  }

  /* 3. White card overlap & padding reset */
  .service-info.box-style {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 92% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: -40px auto 0 auto !important; /* Clean overlap over image */
    padding: 20px 16px 16px 16px !important; /* Tight bottom padding */
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
  }

  /* Disable JS translateY animation shifts on mobile that push the card down */
  [data-animate="slide-up"] .service-info.box-style {
    transform: none !important;
  }

  /* 4. Content alignment */
  .service-top {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  .service-badge {
    padding: 4px 12px !important;
    font-size: 10px !important;
  }

  .service-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  .service-desc {
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  .service-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    margin-bottom: 10px !important;
  }

  .service-tags span {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }
}

/* --- MOBILE LAYOUT (< 767px) --- */
@media (max-width: 767px) {
  .services-section {
    padding: 40px 0;
    background-color: var(--paper, #f8fafc);
    padding-bottom: 15px !important;
  }

  .service-row:last-child {
    margin-bottom: 0 !important;
  }
  .wrap {
    padding: 0 16px;
    margin-bottom: 0 !important;
  }

  .service-row,
  .service-row:nth-child(even) {
    margin-bottom: 20px;
  }

  .service-media {
    margin-bottom: 0 !important;
  }

  /* Image Banner */
  .service-media img,
  .service-media img.parallax-bg {
    height: 210px;
    border-radius: 12px;
  }

  /* Mobile Content Box */
  .service-info.box-style {
    width: 95% !important;
    margin: -40px auto 0 auto !important; /* Pulls box over image */
    padding: 24px 18px 20px 18px !important; /* Generous bottom padding for tags */
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    height: auto !important;                  /* Allows card to shrink-wrap tags */
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  .service-top {
    justify-content: center;
    margin-bottom: 12px;
  }

  .service-badge {
    padding: 5px 14px;
    font-size: 10.5px;
    border-radius: 20px;
  }

  .service-title {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 12px;
    text-align: center;
    word-break: break-word;
  }

  .service-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--steel-600, #4b5563);
    margin-bottom: 20px;
    text-align: center;
  }

  /* Tag Pills Container (Prevents Overflow) */
  .service-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0 !important;
  }

  .service-tags span {
    padding: 6px 12px;
    font-size: 10.5px;
    border-radius: 20px;
    white-space: normal; /* Allows multi-word tags to break gracefully if needed */
    text-align: center;
  }
}
/* =========================================================
   MOBILE RESPONSIVE CHANGES (Add to services.css)
   Targets screens smaller than 768px (common mobile width)
   ========================================================= */


/* =========================================================
   SERVICES HERO/HEADER STYLES (Maintain standard neatness)
   ========================================================= */

/* =========================================================
   SERVICES HERO — QUANTONIC
   ========================================================= */

.services-hero {
    position: relative;
    width: calc(100% - 72px);
    max-width: 1820px;
    height: 500px;
    margin: 125px auto 45px;
    border-radius: 25px;
    overflow: hidden;
    background: #1e3285;
}

/* =========================================================
   IMAGE
   ========================================================= */

.services-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
}


.services-hero-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;
}


/* =========================================================
   BLUE PANEL
   ========================================================= */

.services-hero-blue {

    position: absolute;

    left: 0;
    top: 0;

    width: 44%;
    height: 100%;

    background: #1e3285;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    padding: 0 42px 28px;

    /*
       Creates the large curved bottom-right edge
    */
    border-radius: 0 0 65% 0;
}


/* =========================================================
   TITLE
   ========================================================= */

.services-hero-blue h1 {

    margin: 0;

    color: #ffffff;

    font-family: var(--font-display);

    font-size: clamp(4rem, 5.5vw, 6rem);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -2px;
}


/* =========================================================
   ARROW
   ========================================================= */

.services-scroll {

    position: absolute;

    right: 32px;
    bottom: 28px;

    z-index: 5;

    color: #ffffff;

    font-size: 34px;

    font-weight: 300;

    line-height: 1;

    animation: servicesArrow 2s ease-in-out infinite;
}


@keyframes servicesArrow {

    0%,
    100% {
        transform: translateY(0);
    }
    50% {transform: translateY(8px);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .services-hero {
        width: calc(100% - 40px);
        height: 500px;
        margin-top: 115px;
    }

    .services-hero-blue {
        width: 48%;
        padding-left: 35px;
    }

    .services-hero-blue h1 {
        font-size: 4rem;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .services-hero {
        width: calc(100% - 30px);
        height: 430px;
        margin-top: 110px;
        border-radius: 20px;
    }
    .services-hero-image {

        width: 100%;
    }
    .services-hero-blue {

        width: 100%;
        height: 58%;
        align-items: flex-end;
        padding: 0 25px 25px;
        /*
           Curve moves to the bottom-right
        */
        border-radius: 0 0 55% 0;
        background: #1e3285;
    }


    .services-hero-blue h1 {
        font-size: 3.2rem;
        letter-spacing: -1px;
    }


    .services-scroll {
        right: 20px;
        bottom: 20px;
        font-size: 28px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media (max-width: 480px) {
    .services-hero {
        height: 380px;
        width: calc(100% - 20px);
        border-radius: 16px;
    }
    .services-hero-blue {
        height: 60%;
        padding: 0 20px 20px;
    }


    .services-hero-blue h1 {

        font-size: 2.7rem;
    }

}

.services-hero-blue {
    position: absolute;
    top: 0;
    left: 0;
    width: 43%;
    height: 100%;
    background: #1e3285;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 0 42px 25px;
    border-radius: 0 0 65% 0;
}