@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
  /* Color Variables */
  --safety-orange: hsl(219, 87%, 37%);
  --lavender-gray: hsl(230, 19%, 81%);
  --persian-rose: hsl(224, 98%, 22%);
  --red-crayola: hsl(236, 84%, 12%); /* Primary accent color */
  --eerie-black: hsl(240, 6%, 10%); /* Main heading/dark text color */
  --light-gray: hsl(0, 0%, 80%);
  --cultured-2: hsl(210, 60%, 98%); /* Light background variant */
  --platinum: hsl(0, 0%, 90%); /* Border color */
  --gray-web: hsl(0, 0%, 0%); /* Body text color */
  --cultured: hsl(0, 0%, 93%); /* Input background, borders */
  --black_10: hsla(0, 0%, 0%, 0.1);
  --black_5: hsla(0, 0%, 0%, 0.05);
  --white-1: hsl(0, 0%, 100%); /* Main background color */
  --white-2: hsl(0, 14%, 98%); /* Alternate section background */
  --black: hsl(0, 0%, 0%);
    /* Service Section Colors */
    --navy-dark: #0D1B2A;
    --navy-mid: #1B263B;
    --blue-gray: #415A77;
    --blue-light: #778DA9;
    --gray-light: #E0E1DD;

  /* Gradients */
  --gradient: linear-gradient(to left top, var(--persian-rose), var(--safety-orange));

  /* Typography */
  --ff-roboto: 'Roboto', sans-serif;
  --ff-league-spartan: 'League Spartan', sans-serif;
  --ff-raleway: "Raleway", sans-serif;
  --fs-base: 1.6rem; /* Base font size (body) */
  --fs-1: 3.5rem;
  --fs-2: 3rem;
  --fs-3: 2.1rem;
  --fs-4: 1.7rem;
  --fs-5: 1.4rem;
  --fs-6: 1.3rem;
  --fw-700: 700;
  --fw-500: 500;
  --lh-base: 1.8; /* Base line height */

  /* Spacing */
  --section-padding: 60px;
  --container-padding: 15px;
  --header-height: 70px; /* Combined mobile/desktop */

  /* Borders & Radius */
  --radius-2: 2px;
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-circle: 50%;
  --input-radius: var(--radius-8);
  --input-border: 1px solid var(--cultured);

  /* Shadows */
  --shadow-1: 0 6px 24px var(--black_5);
  --shadow-2: 0 2px 28px var(--black_10);

  /* Transitions */
  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

  /* Form Elements */
  --focus-ring: 0 0 0 3px hsla(236, 84%, 12%, 0.3); /* Use HSL for transparency with --red-crayola */
  --spinner-color: var(--red-crayola);

  /* Mobile Specific (Can be overridden in media queries if needed) */
  --mobile-tap-target: 44px; /* Minimum touch target size */
}

/*-----------------------------------*\
  #RESET & BASE STYLES
\*-----------------------------------*/

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

html {
  font-family: var(--ff-roboto);
  font-size: 10px; /* Base for rem units (1rem = 10px) */
  scroll-behavior: smooth;
 /* overflow-x: hidden; */ /* Let sticky positioning work */
  -webkit-text-size-adjust: 100%; /* Prevent font scaling on rotation */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on touch devices */
}

body {
  background-color: var(--white-1);
  color: var(--gray-web);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
 /* overflow-x: hidden; */ /* Let sticky positioning work */
  position: relative;
  min-height: 100vh;
  width: 100%;
  touch-action: pan-y; /* Allow vertical scroll, prevent default horizontal gestures */
}

body.nav-active {
  overflow: hidden; /* Prevent scrolling when mobile menu is open */
}

/* Hide scrollbars while preloader is active */
body.preloader-active {
  overflow: hidden;
}

li { list-style: none; }

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

a, img, span, time, label, input, button, textarea, ion-icon, svg { /* Added svg */
  display: block; /* Make elements block-level by default */
}

img, svg { /* Added svg */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Prevent images from overflowing */
}

input, button, textarea {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

input, textarea {
  width: 100%;
}

button {
  cursor: pointer;
}

ion-icon {
  pointer-events: none; /* Prevent icons from capturing clicks */
}

address { font-style: normal; }

h1, h2, h3 {
  color: var(--eerie-black);
  font-family: var(--ff-league-spartan);
  line-height: 1.2;
}

h1 { font-size: var(--fs-1); }
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-3); }

:focus-visible {
  outline: 2px solid var(--red-crayola);
  outline-offset: 4px;
  box-shadow: var(--focus-ring); /* Optional: add focus ring */
}

/* Screen Reader Only Class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: var(--white-2); }
::-webkit-scrollbar-thumb { background-color: var(--light-gray); border-radius: 5px;}
::-webkit-scrollbar-thumb:hover { background-color: var(--gray-web); }


/* ================================================== */
/* NEW Multi-Stage Preloader Styles                 */
/* ================================================== */

/* --- Keyframes for Animations --- */

@keyframes preloaderLogoZoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes preloaderWipeUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}

/* --- Main Preloader Container --- */
.preloader {
  position: fixed;
  inset: 0; /* top, right, bottom, left = 0 */
  background-color: #000000; /* Stage 1: Initial Black Background */
  z-index: 10000;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  overflow: hidden; /* Hide layers moving outside */

  /* Final fade-out transition when .loaded class is added */
  /* Delay needs to be AFTER all animations finish */
  transition: opacity 0s ease-out 0s, visibility 0s linear 0s;
}

/* --- Background Wipe Layers --- */
.preloader-layer {
  position: absolute;
  inset: 0;
  transform: translateY(100%); /* Start below screen */
  will-change: transform; /* Performance hint */
}

.preloader-layer.blue-layer {
  /* --- CHOOSE YOUR BLUE COLOR --- */
  background-color: #1b263b; /* Example Blue - Replace if needed */
  /* --- End Color Choice --- */
  z-index: 1; /* Blue layer is behind second black layer */
  /* Animation: Wipe up after logo zoom */
  animation: preloaderWipeUp 0.7s ease-in-out 1.0s forwards;
  /* duration | timing-function | delay | fill-mode */
}

.preloader-layer.black-layer-overlay {
  background-color: #000000; /* Black overlay */
  z-index: 2; /* Second black layer is above blue */
  /* Animation: Wipe up after blue layer wipe */
  animation: preloaderWipeUp 0.7s ease-in-out 1.9s forwards;
   /* duration | timing-function | delay | fill-mode */
}

/* --- Logo Container & Image --- */
.preloader-logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Center using transform, initial state for animation */
  transform: translate(-50%, -50%);
  z-index: 3; /* Logo container on top */
  /* Optional: Set a width/height if needed */
}

.preloader-logo {
  display: block;
  width: 300px; /* Adjust as needed */
  max-width: 80%;
  height: auto;
  margin-inline: auto; /* Keep centered if container is wider */
  opacity: 0; /* Start invisible */
  transform: scale(0.5); /* Start small */
  will-change: transform, opacity; /* Performance hint */

  /* Animation: Zoom in at the start */
  animation: preloaderLogoZoomIn 0.8s ease-out 0.2s forwards;
   /* duration | timing-function | delay | fill-mode */
}

/* --- State when loaded (Fade out everything) --- */
.preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Stop animations when fading out to prevent conflicts (optional but safer) */
/*
.preloader.loaded .preloader-layer,
.preloader.loaded .preloader-logo {
   animation-play-state: paused;
}
*/

/* ================================================== */
/* End of NEW Preloader Styles                      */
/* ================================================== */


/*-----------------------------------*\
  #REUSED STYLES
\*-----------------------------------*/

.container {
  padding-inline: var(--container-padding);
  max-width: 1170px;
  width: 100%;
  margin-inline: auto;
}

.section {
  padding-block: var(--section-padding);
}

.section-title,
.section-text {
  text-align: center;
}

.section-title {
    margin-bottom: 15px;
}

.section-text {
  font-size: var(--fs-6);
  max-width: 65ch;
  margin-inline: auto;
}

.section-text:not(:last-child) {
    margin-bottom: 18px;
}

.btn {
  max-width: max-content;
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  padding: 12px 30px;
  border-radius: var(--radius-5);
  transition: var(--transition-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: var(--mobile-tap-target);
  border: 1px solid transparent;
  vertical-align: middle;
  cursor: pointer;
}

.btn-primary {
  background-image: var(--gradient);
  background-size: 200% auto;
  color: var(--white-1);
}

.btn-primary:is(:hover, :focus-visible) {
  background-position: right center;
  color: var(--white-1);
  border-color: transparent;
}

.btn-secondary {
  background-color: var(--white-1);
  color: var(--eerie-black);
  border: 1px solid var(--cultured);
}

.btn-secondary:is(:hover, :focus-visible) {
  background-color: var(--eerie-black);
  color: var(--white-1);
  border-color: var(--eerie-black);
}

/* Specific button styling adjustments if needed */
.btn-sm { /* If using Bootstrap's btn-sm */
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    border-radius: var(--radius-2);
}
.btn-light { /* If using Bootstrap's btn-light */
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-light:hover {
    color: #000;
    background-color: #e2e6ea;
    border-color: #d3d9df;
}


.grid-list {
  display: grid;
  gap: 30px;
  align-items: stretch;
}

.img-holder {
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--light-gray);
  overflow: hidden;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-100 { width: 100%; }

#service .section-title,
#project .section-title,
#process .section-title {
  font-size: 3.8rem; /* Base size */
}

#service .section-text,
#project .section-text,
#process .section-text {
  font-size: 1.6rem; /* Base size */
}

/* Tablet Portrait (575px and up) */
@media (min-width: 575px) {
  #service .section-title,
  #project .section-title,
  #process .section-title {
    font-size: 4.2rem;
  }
  #service .section-text,
  #project .section-text,
  #process .section-text {
    font-size: 1.7rem;
  }
}

/* Tablet Landscape (768px and up) */
@media (min-width: 768px) {
  #service .section-title,
  #project .section-title,
  #process .section-title {
    font-size: 4.5rem;
  }
  #service .section-text,
  #project .section-text,
  #process .section-text {
    font-size: 1.8rem;
  }
}

/* Small Desktop (992px and up) */
@media (min-width: 992px) {
  #service .section-title,
  #project .section-title,
  #process .section-title {
    font-size: 3rem;
  }
  #service .section-text,
  #project .section-text,
  #process .section-text {
    font-size: 1.9rem;
  }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  #service .section-title,
  #project .section-title,
  #process .section-title {
    font-size: 3rem;
  }
  #service .section-text,
  #project .section-text,
  #process .section-text {
    font-size: 2rem;
  }
}

/* Mobile Adjustments (max-width: 767px) */
@media (max-width: 767px) {
  #service .section-title,
  #project .section-title,
  #process .section-title {
    font-size: 2.2rem;
  }
  #service .section-text,
  #project .section-text,
  #process .section-text {
    font-size: 1.4rem;
    max-width: 90%;
    margin-inline: auto;
  }
}


/*-----------------------------------*\
  #HEADER & NAVIGATION
\*-----------------------------------*/

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* MODIFIED: Default background is white for mobile */
  background-color: var(--white-1);
  /* ADDED: Add shadow by default for mobile consistency */
  box-shadow: var(--shadow-2);
  padding-block: 15px;
  z-index: 1000;
  /* MODIFIED: Transition background-color AND box-shadow */
  transition: background-color var(--transition-1), box-shadow var(--transition-1);
}

/* Active state remains the same, ensures white background and shadow when scrolled */
.header.active {
  background-color: var(--white-1);
  box-shadow: var(--shadow-2);
}

/* Ensure logo and nav-toggle-btn are black in default mobile state */
.logo {
  font-family: var(--ff-league-spartan);
  /* MODIFIED: Default color is black for mobile */
  color: var(--eerie-black);
  font-size: 3.5rem;
  font-weight: var(--fw-700);
  line-height: 1;
  /* MODIFIED: Remove text shadow by default for mobile */
  text-shadow: none;
  /* MODIFIED: Transition color only (shadow handled by specific states) */
  transition: color var(--transition-1);
}

.nav-toggle-btn {
  font-size: 30px;
  color: var(--eerie-black);
  width: var(--mobile-tap-target);
  height: var(--mobile-tap-target);
  background: none;
  border: none;
  position: relative; /* Allow absolute positioning of icons */
  z-index: 1001; /* Above the navbar (1000) and overlay (999) */
  transition: color var(--transition-1);
}

.nav-toggle-btn .menu-icon,
.nav-toggle-btn .close-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  transition: opacity var(--transition-1);
}

.nav-toggle-btn .menu-icon {
  opacity: 1;
}

.nav-toggle-btn .close-icon {
  opacity: 0;
}

.nav-toggle-btn.active .menu-icon {
  opacity: 0;
}

.nav-toggle-btn.active .close-icon {
  opacity: 1;
}

/*
  NOTE: The original '.header.active .logo, .header.active .nav-toggle-btn' rule
  outside the media query is no longer needed because the default mobile colors
  now match the active state colors. The active state rules within the
  media query will still handle the desktop color changes correctly.
*/

/* Container layout to ensure consistent positioning */
.header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.5); /* Semi-transparent black overlay */
  z-index: 999; /* Below header but above content */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-1), visibility var(--transition-1);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile navbar styles */
.navbar {
  position: fixed;
  top: 0;
  right: -100%; /* Hidden off-screen by default */
  width: 100%;
  max-width: 300px; /* Fixed width for the menu */
  height: 100%;
  background-color: var(--white-1); /* Solid white background for mobile menu */
  padding: 20px;
  z-index: 1000;
  transition: right var(--transition-1);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space out links and socials (if any) */
}

.navbar.active {
  right: 0; /* Slide in when active */
}

/* Navbar list for mobile */
.navbar-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 60px; /* Space below the header height */
}

/* Navbar links for mobile */
.navbar-link {
  font-size: var(--fs-4);
  color: var(--eerie-black); /* Black for contrast on white menu background */
  padding: 10px 0;
  text-align: left;
  transition: color var(--transition-1);
}

/* Ensure links in mobile menu follow header color logic */
.navbar.active .navbar-link {
  color: var(--eerie-black); /* Always black in mobile menu for contrast */
  text-shadow: none;
}

/* Hide the underline effect in mobile menu */
.navbar.active .navbar-link::after {
  display: none; /* Remove the hover underline effect in mobile menu */
}

/* Mobile socials (if needed) */
.mobile-socials {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 20px 0;
}

/* Desktop Navigation (992px and up) */
@media (min-width: 992px) {

  /* ADDED: Override header styles for default desktop view */
  .header {
    background-color: transparent; /* Transparent over hero */
    box-shadow: none; /* No shadow in default desktop state */
  }

  /* ADDED: Ensure active desktop header gets correct background/shadow */
  .header.active {
    background-color: var(--white-1); /* Solid white when scrolled */
    box-shadow: var(--shadow-2); /* Subtle shadow for depth */
  }

  .nav-toggle-btn {
    display: none;
  }
  .mobile-menu-overlay {
    display: none;
  }

  

  /* ADDED: Override logo styles for default desktop view */
  .logo {
    color: var(--eerie-black); /* Change to black */
    text-shadow: none; /* Remove shadow */
    transition: color var(--transition-1);
  }

  .navbar,
  .navbar.active {
    all: unset;
    display: flex;
    align-items: center;
  }
  .navbar-list {
    all: unset;
    display: flex;
    align-items: center;
    gap: 30px;
    /* Center the navbar links */
    margin: 0 auto;
  }
  .navbar-link {
    position: relative;
    padding: 15px 0;
    border-bottom: none;
    font-size: var(--fs-5);
    color: var(--eerie-black); /* Change to black */
    text-shadow: none; /* Remove shadow */
    transition: color var(--transition-1);
  }

  /* This rule remains correct for desktop hover/focus in default state */
  .navbar-link:is(:hover, :focus-visible, .active) {
    color: var(--white-1); /* Keep white in default state */
  }

  /* Move "Start Project" link to the right */
.navbar-list > li:last-child {
  margin-left: 30px; /* Shift "Start Project" 15px to the right */
}

  /* This rule remains correct for changing elements to black on desktop when scrolled */
  .header.active .logo,
  .header.active .navbar-link {
    color: var(--eerie-black); /* Black for contrast on white background */
    text-shadow: none; /* Remove shadow as not needed on solid background */
  }

  /* This rule remains correct for hover/focus on desktop when scrolled */
  .header.active .navbar-link:is(:hover, :focus-visible, .active) {
    color: var(--eerie-black); /* Ensure hover/active states also use black */
  }

  .navbar-link::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: var(--gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-2);
  }
  .navbar-link:is(:hover, :focus-visible, .active)::after {
    transform: scaleX(1);
  }
  .mobile-socials {
    display: none;
  }
}

/* Ensure body doesn't scroll when mobile menu is open */
body.nav-active {
  overflow: hidden;
}

/*-----------------------------------*\
  #QUOTE REQUEST
\*-----------------------------------*/

.quote-request {
  padding-block: var(--section-padding);
}

.quote-request .section-title {
  margin-bottom: 20px;
}

.quote-request .section-text {
  margin-bottom: 40px;
}

.quote-form {
  max-width: 700px;
  margin: 0 auto;
}

.quote-form .form-subtitle {
  margin-bottom: 20px;
  color: var(--eerie-black);
}

.quote-form .input-wrapper {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.quote-form .input-field {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--persian-rose);
  border-radius: var(--radius-8);
  font-size: var(--fs-5);
  color: var(--eerie-black);
  background-color: var(--white-1);
  transition: border-color var(--transition-1);
}

.quote-form .input-field:focus {
  outline: none;
  border-color: var(--eerie-black);
}

.quote-form textarea.input-field {
  resize: vertical;
  min-height: 100px;
}

.quote-form .checkbox-group-wrapper {
  flex-direction: column;
  gap: 10px;
}

.quote-form .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.quote-form .checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-form .checkbox {
  width: 18px;
  height: 18px;
}

.quote-form .checkbox-item label,
.quote-form .form-label {
  font-size: var(--fs-5);
  color: var(--eerie-black);
}

.quote-form .btn {
  width: 100%;
  padding: 12px;
  font-size: var(--fs-5);
  margin-top: 40px;
  background-color: var(--blue-gray); /* Or #ff7f00 as fallback */
  color: #ffffff;
  border: none;
  border-radius: var(--radius-8);
  cursor: pointer;
  transition: background-color var(--transition-1);
}

.quote-form .btn:hover {
  background-color: #1B263B;; /* Darker shade */
}

.quote-process-info .h3 {
  margin-bottom: 10px;
  color: var(--eerie-black);
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .quote-request {
    padding-block: 40px;
  }

  .quote-request .section-title {
    font-size: var(--fs-2); /* Smaller font size for mobile */
  }

  .quote-request .section-text {
    font-size: var(--fs-5);
  }

  .quote-form .input-wrapper {
    flex-direction: column; /* Stack inputs vertically */
    gap: 15px;
  }

  .quote-form .input-field {
    font-size: var(--fs-6); /* Slightly smaller for mobile */
  }

  .quote-form .checkbox-group {
    flex-direction: column; /* Stack checkboxes vertically */
    gap: 10px;
  }

  .quote-form .checkbox-item label,
  .quote-form .form-label {
    font-size: var(--fs-6);
  }

  .quote-form .btn {
    font-size: var(--fs-6);
    padding: 10px;
  }

  .quote-process-info {
    font-size: var(--fs-7) !important; /* Smaller text */
  }

  .quote-process-info .h3 {
    font-size: var(--fs-4);
  }
}

/*-----------------------------------*\
  #PRELOADER
\*-----------------------------------*/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--eerie-black);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-2);
}

.preloader-container {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-logo {
  width: 100%;
  height: auto;
  animation: preloaderLogoZoomIn 0.8s ease-in forwards;
}

.preloader.loaded {
  opacity: 0;
  pointer-events: none;
}

@keyframes preloaderLogoZoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*-----------------------------------*\
  #SECTION FADE-IN ANIMATION
\*-----------------------------------*/

main > article > section {
  opacity: 0; /* <-- UNCOMMENTED THIS LINE */
  transform: translateY(30px); /* <-- UNCOMMENTED THIS LINE */
  transition: opacity 0.7s ease-out, transform 0.7s ease-out; /* Keep transition */
}

/* Keep the hero exception */
main > article > section.hero {
  opacity: 1;
  transform: translateY(0);
}

/* Keep the .in-view rule */
main > article > section.in-view {
  opacity: 1;
  transform: translateY(0);
}


/*-----------------------------------*\
  #HERO SECTION
\*-----------------------------------*/

.hero {
  padding-block-start: 0;
  padding-block-end: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.loaded .hero {
  opacity: 1;
}

/* Video Container */
.hero-video-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: var(--black);
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fallback image: Hidden by default, shown only on video error */
.hero-video + .img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}

/* Overlay Text */
.hero-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white-1);
  font-size: var(--fs-5);
  font-family: var(--ff-roboto);
  line-height: 1.7;
  text-align: center;
  max-width: 65ch;
  padding: 0 20px;
  z-index: 10;
}

/* CTA Button Overlay */
.hero-cta-btn {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-image: none;
  background-color: transparent;
  color: var(--eerie-black);
  padding: 12px 30px;
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--mobile-tap-target);
  transition: var(--transition-1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--eerie-black);
}

.hero-cta-btn ion-icon {
  font-size: 20px;
}

.hero-cta-btn:hover,
.hero-cta-btn:focus-visible {
  background-image: none;
  background-color: #415a77;
  color: var(--white-1);
  border-color: #415a77;
}

.hero-cta-btn:focus-visible {
  background-color: #1b263b;
  border-color: #1b263b;
}

/* Ensure both videos inherit hero-video styles */
.hero-video-desktop,
.hero-video-mobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Default: Show desktop video, hide mobile video */
.hero-video-desktop {
  display: block;
}

.hero-video-mobile {
  display: none;
}

/* Play Button Overlay */
.play-video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--white-1);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.play-video-btn ion-icon {
  font-size: 24px;
}

.play-video-btn:hover,
.play-video-btn:focus {
  background-color: rgba(0, 0, 0, 0.9);
  outline: none;
}

/* Ensure the button is hidden by default */
.play-video-btn[hidden] {
  display: none;
}

/* Responsive Adjustments for Desktop and Tablet */
@media (min-width: 768px) {
  .hero-overlay-text {
    font-size: var(--fs-4);
  }

  .hero-cta-btn {
    font-size: var(--fs-5);
    padding: 14px 35px;
  }

  .hero-cta-btn ion-icon {
    font-size: 22px;
  }
}

/* Mobile Adjustments (≤ 767px) */
@media (max-width: 767px) {
  .hero {
    height: 100vh; /* Ensure the hero section takes the full viewport height */
  }

  .hero-video-container {
    width: 100%;
    height: 100vh; /* Full viewport height */
    position: relative;
    background-color: var(--black);
  }

  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Changed to cover to fill the viewport */
    object-position: center;
    display: block;
  }

  .hero-video + .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none;
  }

  /* Show mobile video, hide desktop video */
  .hero-video-desktop {
    display: none;
  }

  .hero-video-mobile {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Changed to cover to fill the viewport */
    object-position: center;
  }

  /* Update fallback image for mobile video */
  .hero-video-mobile + .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none;
  }

  .hero-overlay-text {
    font-size: var(--fs-6);
    top: 45%;
  }

  .hero-cta-btn {
    top: 65%;
    padding: 10px 20px;
    font-size: var(--fs-6);
  }

  .hero-cta-btn ion-icon {
    font-size: 18px;
  }
}

/* ... Rest of the existing styles remain unchanged ... */

/* SERVICE SECTION */
.service {
  padding-top: 10px;
  padding-bottom: var(--section-padding);
  background: var(--navy-dark); /* #0D1B2A */
  font-family: var(--ff-raleway);
  color: var(--gray-light);
  overflow-x: hidden; /* Prevent any horizontal overflow outside the wrapper */
}

.service .section-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2.5rem;
  color: var(--gray-light);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.service .services-wrapper {
  position: relative;
  width: 90%;
  max-width: 1000px;
  height: 500px;
  margin: 20px auto;
  perspective: 900px;
}

.service .service-container {
  position: absolute;
  top: 0;
  width: 22%;
  height: 100%;
  transition: 0.5s all ease;
  transform: rotateX(60deg) scale(0.7);
  perspective: 900px;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5);
  background: linear-gradient(300deg, #778DA9, #415A77, #0D1B2A, #1B263B);
  background-size: 240% 240%;
  animation: gradient-animation 20s ease infinite;
    /* === ADD THIS LINE === */
    border-radius: 15px; /* Adjust value (e.g., 10px, 20px, var(--radius-8)) as needed */
    overflow: hidden; /* Ensure content inside respects the rounded corners */
    /* === END ADDITION === */
}

.service .service-container.active {
  transform: rotate(0deg) scale(1) translateY(10px);
}

#sv0 {
  left: 5%;
  z-index: 300;
  box-shadow: 0px 20px 100px rgba(0, 0, 0, 0.5);
}

#sv1 {
  left: 28%;
  z-index: 200;
  box-shadow: 0px 20px 100px rgba(0, 0, 0, 0.5);
}

#sv2 {
  left: 51%;
  z-index: 100;
  box-shadow: 0px 20px 100px rgba(0, 0, 0, 0.5);
}

#sv3 {
  left: 74%;
  z-index: 50;
  box-shadow: 0px 20px 100px rgba(0, 0, 0, 0.5);
}

.service .service-container:hover,
.service .service-container:focus-visible {
  cursor: pointer;
  transform: rotate(0deg) scale(1) translateY(10px);
  transition: 0.5s all ease;
  z-index: 400;
}

.service .service-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
}

.service .service-icon {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service .service-icon svg,
.service .service-icon img {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  object-fit: contain;
}

.service .service-info {
  position: absolute;
  top: 45%;
  left: 0;
  height: 55%;
  width: 100%;
  z-index: 30;
  background: none;
}

.service .service-details {
  position: absolute;
  top: 10%;
  padding: 0 10px;
}

.service .service-details h3 {
  text-align: center;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  color: var(--gray-light);
  letter-spacing: 2px;
  font-size: 1.5rem;
  margin: 0 0 10px;
}

.service .service-details p {
  font-size: 0.9rem;
  color: var(--gray-light);
  padding: 0 10px 20px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 1px;
}

.service .service-page {
  position: absolute;
  top: 80%;
  width: 100%;
  left: 0;
  height: 20%;
  text-align: center;
}

.service .service-page h4 {
  color: var(--gray-light);
  letter-spacing: 2px;
  margin: 0 0 10px;
}

.service .service-page li {
  position: absolute;
  top: 50%;
  list-style: none;
  color: var(--gray-light);
}

.service .service-page li:nth-child(1) {
  left: 15%;
  animation: simple1 1s linear infinite;
}

.service .service-page li:nth-child(2) {
  right: 15%;
  animation: simple 1s linear infinite;
}

@keyframes simple {
  50% {
    transform: translateX(10px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(10px);
    opacity: 0;
  }
}

@keyframes simple1 {
  50% {
    transform: translateX(-10px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(-10px);
    opacity: 0;
  }
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .service {
    width: 100vw; /* Full viewport width */
    height: calc(var(--vh, 1vh) * 100); /* Use --vh for accurate height */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    box-sizing: border-box; /* Include borders in dimensions */
    overflow-y: hidden; /* Prevent vertical scrolling */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .service .section-title {
    font-size: 2rem;
    margin: 15px 0; /* Reduced margin to fit within viewport */
  }
  .service .services-wrapper {
    margin: 0; /* Remove margins */
    width: 100%; /* Full width */
    height: calc(calc(var(--vh, 1vh) * 100) - 58px); /* Adjust for section title height */
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden; /* Prevent vertical scroll */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    /* Add padding-top to move cards down */
    padding-top: 150px; /* Adjust this value to move cards down as needed */
    box-sizing: border-box;
  }
  .service .services-wrapper::-webkit-scrollbar {
    height: 5px;
  }
  .service .services-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
  }
  .service .services-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }
  .service .service-container {
    position: relative;
    width: 75vw;
    max-width: 280px;
    height: 70vh; /* Adjusted to fit within the viewport height */
    max-height: 400px; /* Cap height to avoid overflow */
    left: 0 !important;
    margin: 0;
    scroll-snap-align: center;
    flex-shrink: 0;
  }
  .service .service-container:hover,
  .service .service-container:focus-visible,
  .service .service-container.active {
    transform: rotate(0deg) scale(1) translateY(10px);
  }
  .service .service-image {
    height: 40%;
  }
  .service .service-info {
    height: 60%;
  }
  .service .service-details h3 {
    font-size: 1.3rem;
  }
  .service .service-details p {
    font-size: 0.85rem;
  }
  .service .service-page {
    position: relative;
    top: 0;
    margin-top: 10px;
    padding-bottom: 10px;
  }
}

@media (min-width: 768px) {
  .service {
    padding-top: 15px;
  }
  .service .services-wrapper {
    margin: 30px auto;
  }
}

@media (min-width: 992px) {
  .service {
    padding-bottom: 100px;
  }
}



/* ================================================== */
/* CSS for Project Section - 3D CSS Carousel        */
/* ================================================== */

/* --- Container for Carousel and Controls --- */
#carousel-container {
  position: relative; /* Establish positioning context */
  width: 100%;
  max-width: 1000px; /* Max width of the carousel area */
  margin: 40px auto; /* Center and add space */
  padding-bottom: 50px; /* Space for controls below */
}

/* --- The Carousel Stage --- */
#carousel {
  /* Removed grid positioning relative to body */
  width: 100%; /* Take width of container */
  height: 500px; /* Height of the carousel stage */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px; /* Adjust for more/less 3D effect */
  position: relative; /* Contains absolute items */

  /* --- CSS Variables --- */
  --items: 6; /* UPDATED for 6 items */
  --middle: 3.5; /* Adjusted middle point for 6 items (between 3 and 4) */
  --position: 1; /* Default selected item */
}

/* --- Carousel Items --- */
div.item {
  position: absolute;
  width: 300px;  /* Width of a single item */
  height: 400px; /* Height of a single item */
  /* background-color: coral; */ /* Base color removed, using images */
  background-size: cover;
  background-position: center;
  border-radius: 10px; /* Add some rounding */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);

  /* --- Calculation Variables --- */
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r)); /* Absolute difference */

  /* --- Transformations & Stacking --- */
  transition: all 0.3s ease-out; /* Smoother transition */
  transform: rotateY(calc(-10deg * var(--r))) /* Rotation */
             translateX(calc(-320px * var(--r))) /* Horizontal position - adjusted */
             translateZ(calc(-50px * var(--abs))); /* Move non-active items back */
  z-index: calc(var(--items) - var(--abs)); /* Stack active item higher */
  opacity: calc(1 - (var(--abs) / var(--items) * 1.5)); /* Fade out distant items */
}

/* ================================================== */
/* CSS for 3D Carousel Arrow Buttons                */
/* ================================================== */

.carousel-arrow-btn {
  position: absolute; /* Position relative to #carousel-container */
  top: 50%;
  transform: translateY(-50%);
  z-index: 20; /* Ensure buttons are above carousel items */

  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  color: var(--eerie-black); /* Icon color */
  border: none;
  border-radius: 50%;
  width: 44px;  /* Button size */
  height: 44px;
  font-size: 24px; /* Icon size */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, opacity 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.carousel-arrow-btn:hover,
.carousel-arrow-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.9);
}

#carousel-prev-btn {
  left: 20px; /* Adjust position from left */
}

#carousel-next-btn {
  right: 20px; /* Adjust position from right */
}

/* Style for disabled state */
.carousel-arrow-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none; /* Prevent clicks on disabled button */
}

/* Adjust positioning on mobile if needed */
@media (max-width: 767px) {
  #carousel-prev-btn {
      left: 10px;
  }
  #carousel-next-btn {
      right: 10px;
  }
   .carousel-arrow-btn {
       width: 38px;
       height: 38px;
       font-size: 20px;
   }
}

/* --- Assign Offset and Background Image per Item --- */
/* IMPORTANT: REPLACE PLACEHOLDER URLS! */
div.item:nth-of-type(1) { --offset: 1; background-image: url('../images/project-6-test.png'); /* Correct path */}
div.item:nth-of-type(2) { --offset: 2; background-image: url('../images/handyman_main_1.png'); }
div.item:nth-of-type(3) { --offset: 3; background-image: url('../images/logo-folio.png'); }
div.item:nth-of-type(4) { --offset: 4; background-image: url('../images/seatly.png'); }
div.item:nth-of-type(5) { --offset: 5; background-image: url('../images/aqua.png'); }
div.item:nth-of-type(6) { --offset: 6; background-image: url('../images/sprinkles.png'); }

/* --- Basic Mobile Adjustments --- */
@media (max-width: 767px) {
  div.item {
      width: 220px;  /* Smaller items on mobile */
      height: 300px;
      /* Adjust transform distances for smaller items/screen */
      transform: rotateY(calc(-8deg * var(--r)))
                 translateX(calc(-230px * var(--r)))
                 translateZ(calc(-40px * var(--abs)));
  }
  #carousel {
       height: 350px; /* Adjust stage height */
       perspective: 400px;
  }

   .carousel-controls {
       margin-top: 15px;
   }
}

/* ================================================== */
/* End of CSS for 3D CSS Carousel                   */
/* ================================================== */


/*-----------------------------------*\
  #HOW WE WORK SECTION
\*-----------------------------------*/

.body {
	background-color: #440303;
	font-family: 'Arial', sans-serif;
}

:root {
  /* ... other root variables ... */
  --cards: 4; /* Keep this matching the number of cards */
  --cardHeight: 70vh; /* Slightly reduced height might feel better */
  --cardTopPadding: 10px; /* CRITICAL: Set to a positive value for visual stacking offset */
  --cardMargin: 4vw;
}

/* --- Optional: Container for Section Title --- */
.section-title-container {
    margin-bottom: 40px; /* Space between title and cards */
    position: relative; /* Keep title above cards initially */
    z-index: 1; /* Keep title above cards initially */
}
.section-title-container .section-title,
.section-title-container .section-text {
     /* Adjust text color if your section background is dark */
     /* color: var(--white-1); */
}


/* --- Stacking Card Container --- */
.cards-container {
  /* Inherit width/margin from .container */
  /* position: relative; */
}

/* --- Card List --- */
#cards {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--cards), var(--cardHeight));
  gap: var(--cardMargin);
  padding-bottom: calc(var(--cards) * var(--cardTopPadding));
  margin-bottom: var(--cardMargin);
  background-color: transparent; /* Keep transparent */
}

/* --- Individual Sticky Card --- */
.card {
  position: sticky;
  top: 0;
  padding-top: calc(var(--index) * var(--cardTopPadding));
  background-color: transparent; /* Keep transparent */
  border-radius: 40px;
  overflow: hidden;
  /* --index variable should still be set per card ID */
}

/* --- MODIFIED: Card Body for two-column layout --- */
.card-body {
  box-sizing: border-box;
  height: var(--cardHeight);
  display: flex;
  /* flex-direction: column; */   /* <-- REMOVED */
  flex-direction: row;         /* <-- CHANGED to row */
  justify-content: space-between;/* <-- ADJUSTED for spacing between columns */
  align-items: center;         /* Vertically center columns */
  /* text-align: center; */      /* <-- REMOVED */

  /* Visual Styles */
  background-color: rgb(16, 16, 20);
  color: rgb(248, 248, 248);
  border-radius: 40px;
  padding: 50px 60px; /* Updated padding - adjust as needed */

  /* Border */
  border: 1px solid rgb(248, 248, 248);
  /* Ensure others are off */
  /* box-shadow: none; */
  /* outline: none; */

  transition: all 0.5s;
  overflow: hidden; /* Keep hidden */
}

/* --- REMOVED: .card-content-inner rule is no longer needed --- */
/*
.card-content-inner {
  max-width: 600px;
  width: 100%;
}
*/

/* --- NEW: Rules for Columns --- */
.card-text-column {
  flex: 0 1 45%; /* Adjust width percentage as needed (e.g., 45%) */
  text-align: left;
  padding-right: 30px; /* Space between text and image columns */
}

.card-image-column {
  flex: 0 1 50%; /* Adjust width percentage as needed (e.g., 50%) */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- MODIFIED: Text Element Styles --- */
.card-step-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--red-crayola);
  margin-bottom: 15px;
  opacity: 0.7;
}

.card-title {
  font-family: var(--ff-league-spartan);
  font-size: var(--fs-2);
  color: var(--white-1);
  margin-bottom: 20px;
  line-height: 1.3;
  text-align: left; /* Ensure left align */
}

.card-text {
  font-family: var(--ff-roboto);
  font-size: var(--fs-5);
  color: var(--cultured);
  line-height: 1.7;
  margin: 0; /* Remove auto margin */
  text-align: left; /* Ensure left align */
}

/* --- Optional: Icon style (if used) --- */
.card-icon {
  font-size: 4rem;
  margin-top: 30px;
  color: var(--red-crayola);
  opacity: 0.8;
}

/* --- NEW: Rule for Image --- */
.card-image-column img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 20px; /* Optional rounding */
  /* Add background/padding here if you want to style the image like Bloomr's graphic */
  /* background-color: rgba(255, 255, 255, 0.05); */
  /* padding: 15px; */
}

/* --- Section Background --- */
.stacking-cards-section {
  background-color: transparent; /* Keep transparent if body is white */
  /* padding if needed */
}

/*-----------------------------------*\
  #ABOUT SECTION
\*-----------------------------------*/

.about .container { display: grid; gap: 30px; align-items: center; }
.about-banner { 
  position: relative; 
  border-radius: var(--radius-8); 
  overflow: hidden; 
  aspect-ratio: 3 / 4; 
  margin-bottom: 30px; 
  background-color: transparent; /* Remove grey background */
  display: flex; /* Ensure cube centers properly */
  justify-content: center;
  align-items: center;
}
.about :is(.section-title, .section-text) { text-align: left; margin-inline: 0; }
.about .section-title { margin-bottom: 15px; }
.about .h3 { margin-block: 20px 10px; }
.about-list { margin-block: 15px 25px; list-style: none; padding: 0; }
.about-item { display: flex; align-items: flex-start; gap: 10px; }
.about-item ion-icon { color: var(--red-crayola); flex-shrink: 0; margin-block-start: 3px; font-size: 1.8rem; }
.about-item:not(:last-child) { margin-block-end: 15px; }

/* Cube Styles */
.cube-container {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

.cube-card {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease;
  cursor: pointer;
  animation: rotate3d 8s infinite linear; /* Apply rotation continuously */
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  backface-visibility: visible;
  border-radius: 12px;
  background: linear-gradient(145deg, #2a2a2a, #383838);
  border: 2px solid #646cff;
  transition: all 0.3s ease;
  overflow: hidden;
}

.face::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  top: -100%;
  left: -100%;
  transition: all 0.5s ease;
  transform: translateZ(20px);
}

.face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      135deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 50%,
      transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.face:hover::before {
  top: 100%;
  left: 100%;
}

.face:hover::after {
  opacity: 1;
}

.front {
  transform: translateZ(100px);
  border-color: #646cff;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
  border-color: #00bcd4;
}

.right {
  transform: translateX(100px) rotateY(90deg);
  border-color: #4caf50;
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
  border-color: #ff4081;
}

.top {
  transform: translateY(-100px) rotateX(90deg);
  border-color: #ffc107;
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
  border-color: #9c27b0;
}

@keyframes rotate3d {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@media (max-width: 768px) {
  .cube-card {
    width: 150px;
    height: 150px;
  }
  
  .front { transform: translateZ(75px); }
  .back { transform: translateZ(-75px) rotateY(180deg); }
  .right { transform: translateX(75px) rotateY(90deg); }
  .left { transform: translateX(-75px) rotateY(-90deg); }
  .top { transform: translateY(-75px) rotateX(90deg); }
  .bottom { transform: translateY(75px) rotateX(-90deg); }

  .navbar {
    left: -300px;
  }

  .navbar.active {
    left: 0;
  }

  .overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  .navbar-list > li:last-child {
    margin-left: 15px;
  }
}



/*-----------------------------------*\
  #CTA SECTION (Standard)
\*-----------------------------------*/

.cta { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; z-index: 1; padding-block: 80px; text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; background-image: var(--gradient); opacity: 0.92; z-index: -1; }
.cta-subtitle, .cta .section-title { color: var(--white-1); }
.cta-subtitle { font-size: var(--fs-5); font-weight: var(--fw-500); }
.cta .section-title { margin-block: 12px 25px; }
.cta .btn { margin-inline: auto; }

/*-----------------------------------*\
  #CTA Connect Section Styles
\*-----------------------------------*/

.cta-connect { background-color: var(--white-1); padding-block: 80px; position: relative; overflow: hidden; min-height: 100vh; display: flex; transition: background-color 0.8s ease-in-out, opacity 0.7s ease-out, transform 0.7s ease-out; opacity: 0; transform: translateY(30px); }
.cta-connect-container { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.cta-connect-text { color: var(--eerie-black); max-width: 550px; z-index: 2; transition: color 0.8s ease-in-out; }
.cta-connect-heading { font-size: clamp(2.8rem, 5vw + 1rem, 4.5rem); color: var(--eerie-black); line-height: 1.2; margin-bottom: 30px; font-weight: 700; transition: color 0.8s ease-in-out; }
.cta-connect-point { font-size: var(--fs-5); margin-bottom: 15px; line-height: 1.6; color: var(--gray-web); transition: color 0.8s ease-in-out; }
.cta-connect-link { display: inline-block; color: var(--red-crayola); font-weight: var(--fw-500); text-decoration: underline; text-underline-offset: 4px; margin-top: 25px; transition: opacity var(--transition-1), color 0.8s ease-in-out; }
.cta-connect-link:is(:hover, :focus-visible) { opacity: 0.8; }
.cta-connect-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; background-color: var(--persian-rose); color: var(--white-1); font-weight: var(--fw-700); font-size: clamp(1.2rem, 1.5vw + 0.3rem, 1.6rem); padding: 0; width: 106px; height: 106px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: transform var(--transition-1), box-shadow var(--transition-1), background-color 0.8s ease-in-out, color 0.8s ease-in-out; border: none; }
.cta-connect-button:is(:hover, :focus-visible) { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.25); background-color: var(--safety-orange); color: var(--white-1); }

/* --- Style for when section is IN VIEW --- */
.cta-connect.in-view { background-color: #1b263b; opacity: 1; transform: translateY(0); } /* Combined in-view styles */
.cta-connect.in-view .cta-connect-text, .cta-connect.in-view .cta-connect-heading { color: var(--white-1); }
.cta-connect.in-view .cta-connect-point { color: hsla(0, 0%, 100%, 0.9); }
.cta-connect.in-view .cta-connect-link { color: var(--white-1); }
.cta-connect.in-view .cta-connect-link:is(:hover, :focus-visible) { opacity: 0.8; }
.cta-connect.in-view .cta-connect-button { background-color: var(--white-1); color: #0d6efd; }
.cta-connect.in-view .cta-connect-button:is(:hover, :focus-visible) { background-color: var(--cultured); color: var(--persian-rose); }

/* Navigation Links Styles */
.cta-connect-nav {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.cta-connect-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cta-connect-nav-link {
  color: var(--white-1);
  font-size: var(--fs-5);
  font-weight: var(--fw-500);
  text-decoration: none;
  transition: color 0.8s ease-in-out, opacity var(--transition-1);
}
.cta-connect-nav-link:is(:hover, :focus-visible) {
  opacity: 0.8;
  color: var(--persian-rose);
}

/* --- Responsive Styles: Hide button on mobile --- */
@media (max-width: 767px) {
  .cta-connect-button {
    display: none;
  }
}

/* --- End of CTA Connect Section Styles --- */


/*-----------------------------------*\
  #CONTACT SECTION
\*-----------------------------------*/

.contact { background-color: var(--white-2); }
.contact .section-text { margin-block-end: 50px; }
.contact-form { background-color: var(--white-1); padding: 30px; border-radius: var(--radius-8); margin-block-end: 40px; box-shadow: var(--shadow-1); }
.input-wrapper { display: grid; gap: 20px; margin-bottom: 20px; }
.input-field { background-color: var(--white-2); color: var(--eerie-black); font-size: var(--fs-5); padding: 15px 20px; border-radius: var(--input-radius); border: var(--input-border); outline: none; transition: border-color var(--transition-1), box-shadow var(--transition-1); }
.input-field:focus { border-color: var(--red-crayola); box-shadow: var(--focus-ring); }
.input-field::placeholder { color: var(--gray-web); transition: opacity var(--transition-1); }
.input-field:focus::placeholder { opacity: 0; }
.input-field[type="number"]::-webkit-inner-spin-button, .input-field[type="number"]::-webkit-outer-spin-button { display: none; margin: 0; }
.input-field[type="number"] { -moz-appearance: textfield; }
textarea.input-field { resize: vertical; min-height: 100px; height: 120px; max-height: 250px; overscroll-behavior: contain; margin-bottom: 20px; }
select.input-field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px 16px; padding-right: 40px; }
select.input-field:required:invalid { color: var(--gray-web); }
select.input-field option[value=""][disabled] { display: none; }
select.input-field option { color: var(--eerie-black); background-color: var(--white-1); }
.checkbox-wrapper, .checkbox-group-wrapper { display: flex; align-items: flex-start; gap: 10px; margin-block: 15px 25px; }
.checkbox-group-wrapper { flex-direction: column; align-items: flex-start; gap: 10px; }
.form-label { font-size: var(--fs-5); font-weight: var(--fw-500); color: var(--eerie-black); margin-bottom: 5px; }
.checkbox-group { display: grid; gap: 10px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; }
.checkbox-item label { font-size: var(--fs-6); cursor: pointer; }
.checkbox-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red-crayola); cursor: pointer; margin: 0; flex-shrink: 0; }
.checkbox { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red-crayola); flex-shrink: 0; cursor: pointer; }
.checkbox-wrapper .label { font-size: var(--fs-6); line-height: 1.5; cursor: pointer; }
.label-link { display: inline; color: var(--red-crayola); text-decoration: underline; transition: color var(--transition-1); }
.label-link:is(:hover, :focus-visible) { color: var(--safety-orange); }
.contact-form .btn { width: 100%; max-width: 250px; margin-inline: auto; }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle; margin-left: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.success-message, .error-message { padding: 20px; border-radius: var(--radius-5); text-align: center; margin-top: 20px; }
.success-message { background-color: hsl(130, 60%, 95%); border: 1px solid hsl(130, 60%, 80%); color: hsl(130, 80%, 25%); }
.error-message { background-color: hsl(0, 100%, 97%); border: 1px solid hsl(0, 100%, 85%); color: hsl(0, 70%, 50%); }
.success-message ion-icon { font-size: 3em; margin-bottom: 10px; color: hsl(130, 70%, 40%); }
.success-message h3 { margin-bottom: 10px; color: var(--eerie-black); }
.success-message .btn { margin-top: 15px; }
.contact-list { display: grid; gap: 25px; }
.contact-item { min-width: 0; }
.contact-card { background-color: var(--white-1); padding: 25px; border-radius: var(--radius-8); box-shadow: var(--shadow-1); display: flex; align-items: center; gap: 20px; height: 100%; }
.contact-card .card-icon { background-color: var(--cultured-2); color: var(--red-crayola); font-size: 24px; padding: 15px; border-radius: var(--radius-circle); flex-shrink: 0; transition: var(--transition-1); }
.contact-card:is(:hover, :focus-within) .card-icon { background-color: var(--red-crayola); color: var(--white-1); }
.contact-card .card-content { flex-grow: 1; }
.contact-card .card-title { margin-block-end: 8px; font-size: var(--fs-4); }
.contact-card :is(.card-link, .card-address) { font-size: var(--fs-6); transition: color var(--transition-1); line-height: 1.6; word-break: break-word; }
.contact-card .card-link:is(:hover, :focus) { color: var(--red-crayola); }
.contact-card address { margin-top: 5px; }

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer { 
  background-color: var(--white-2); 
  padding-block: 30px; 
  min-height: 70vh; 
  border-block-start: 1px solid var(--cultured); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-family: 'Roboto Condensed', sans-serif;
  position: relative;
}

.footer .container { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 40px; 
}

/* Social Links */
.social-links {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
}

.social-links li {
  margin: 0 15px;
}

.social-links li a {
  text-decoration: none;
  display: block;
  width: 210px;
  height: 80px;
  background: #fff;
  text-align: left;
  padding-left: 20px;
  transform: rotate(-30deg) skew(25deg) translate(0,0);
  transition: all 0.5s ease;
  box-shadow: -20px 20px 10px rgba(0,0,0,0.1);
  position: relative;
}

.social-links li a .fab {
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;
  padding-right: 14px;
}

.social-links li a span {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 30px;
  left: 60px;
  color: #262626;
  letter-spacing: 4px;
  transition: .5s;
}

.social-links li a:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #b1b1b1;
  transform: rotate(0deg) skewY(-45deg);
  transition: .5s;
}

.social-links li a:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background: #b1b1b1;
  transform: rotate(0deg) skewX(-45deg);
  transition: .5s;
}

/* Fixed Hover Effects */
.social-links li a:hover {
  transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
  box-shadow: -50px 50px 50px rgba(0,0,0,0.2);
}

.social-links li a:hover .fab {
  color: #fff;
}

.social-links li a:hover span {
  color: #fff;
}

.social-links li:nth-child(1) a:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
}

.social-links li:nth-child(1) a:hover:before {
  background: #f09433;
}

.social-links li:nth-child(1) a:hover:after {
  background: #bc1888;
}

.social-links li:nth-child(2) a:hover {
  background: #1877F2;
}

.social-links li:nth-child(2) a:hover:before {
  background: #1877F2;
}

.social-links li:nth-child(2) a:hover:after {
  background: #1877F2;
}

.social-links li:nth-child(3) a:hover {
  background: #25D366;
}

.social-links li:nth-child(3) a:hover:before {
  background: #25D366;
}

.social-links li:nth-child(3) a:hover:after {
  background: #25D366;
}

.social-links li:nth-child(4) a:hover {
  background: #0077B5;
}

.social-links li:nth-child(4) a:hover:before {
  background: #0077B5;
}

.social-links li:nth-child(4) a:hover:after {
  background: #0077B5;
}

/* Email Block Styles */
.email-block {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20px 30px;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transform: rotate(-5deg);
  transition: all 0.4s ease;
  margin-top: 20px;
}

.email-block:hover {
  transform: rotate(-5deg) translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.email-icon {
  background: linear-gradient(45deg, #415a77, #778da9, #415a77, #1b263b, #0d1b2a);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: white;
  font-size: 22px;
}

.email-link {
  color: #333;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: 1px;
}

.email-link:hover {
  color: #0d1b2a
}

/* Copyright Styles */
.copyright {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  color: #262626;
  margin: 0;
  text-align: right;
  white-space: nowrap;
  display: inline-flex;
  width: max-content;
}

.copyright-link {
  color: #415a77;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  padding-left: 4px; /* Added to ensure visible space before Electrixel */
}

.copyright-link:hover {
  color: #0d1b2a
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer .container {
    gap: 30px;
  }
  
  .email-block {
    flex-direction: column;
    padding: 15px;
    text-align: center;
    transform: none;
    width: 80%;
  }
  
  .email-block:hover {
    transform: translateY(-5px);
  }
  
  .email-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .social-links {
    flex-direction: column;
    align-items: center;
  }
  
  .social-links li {
    margin: 15px 0;
  }
  
  .social-links li a {
    transform: rotate(-30deg) skew(25deg) translate(0,0) scale(0.8);
  }
  
  .social-links li a:hover {
    transform: rotate(-30deg) skew(25deg) translate(15px, -10px) scale(0.8);
  }
  
  .copyright {
    bottom: 10px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    display: inline-flex;
    width: max-content;
  }
}

/* Add more spacing around elements */
.container {
  padding: 2rem;
  margin: 0 auto;
}

.social-links {
  margin-bottom: 2rem;
}

.email-block {
  margin-top: 2rem;
}

/* Adjust individual social link spacing */
.social-links li {
  margin: 0 1.5rem 1.5rem;
}

@media (max-width: 480px) {
  .email-block {
    width: 90%;
    padding: 12px;
  }
  
  .email-link {
    font-size: 16px;
  }
  
  .social-links li a {
    width: 180px;
    height: 70px;
  }
  
  .social-links li a .fab {
    font-size: 35px;
    line-height: 70px;
  }
  
  .social-links li a span {
    top: 25px;
    left: 50px;
    font-size: 14px;
  }
  
  .copyright {
    bottom: 8px;
    font-size: 11px;
    display: inline-flex;
    width: max-content;
  }







  .cube-card {
    width: 150px;
    height: 150px;
  }
  
  .front { transform: translateZ(75px); }
  .back { transform: translateZ(-75px) rotateY(180deg); }
  .right { transform: translateX(75px) rotateY(90deg); }
  .left { transform: translateX(-75px) rotateY(-90deg); }
  .top { transform: translateY(-75px) rotateX(90deg); }
  .bottom { transform: translateY(75px) rotateX(-90deg); }

  .navbar {
    left: -300px;
  }

  .navbar.active {
    left: 0;
  }

  .overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  .navbar-list > li:last-child {
    margin-left: 15px;
  }
}

/*-----------------------------------*\
  #BACK TO TOP BUTTON
\*-----------------------------------*/

.back-top-btn { position: fixed; bottom: 20px; right: 20px; background-color: var(--eerie-black); color: var(--white-1); font-size: 18px; padding: 12px; border-radius: var(--radius-circle); box-shadow: var(--shadow-2); z-index: 4; opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transition-1), transform 0.3s ease; border: none; }
.back-top-btn.active { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top-btn:is(:hover, :focus-visible) { opacity: 0.9; background-color: var(--red-crayola); }

/*-----------------------------------*\
  #POPUP STYLES (Project Details)
\*-----------------------------------*/

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.popup-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.popup-content {
  background: var(--white-1);
  width: 100%;
  max-width: 700px;
  padding: 30px;
  border-radius: var(--radius-8);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  font-family: 'Inter', sans-serif;
  pointer-events: auto;
}

.popup-overlay.active .popup-content {
  transform: scale(1);
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 30px;
  color: var(--gray-web);
  line-height: 1;
  cursor: pointer;
  padding: 5px;
  transition: color var(--transition-1);
  background: none;
  border: none;
}

.close-popup:is(:hover, :focus-visible) {
  color: var(--red-crayola);
}

.popup-title {
  font-size: var(--fs-2);
  margin-bottom: 15px;
  color: var(--eerie-black);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.image-gallery {
  display: flex;
  flex-direction: row;
  gap: 15px;
  margin: 20px 0;
  overflow-x: auto;
  padding-bottom: 15px;
  scroll-snap-type: x mandatory;
  width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

.popup-img {
  height: 400px;
  width: 600px;
  object-fit: cover;
  border-radius: var(--radius-5);
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer; /* Indicate clickability */
}

.popup-description {
  margin-bottom: 20px;
  line-height: var(--lh-base);
  color: var(--gray-web);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.services h4 {
  font-size: var(--fs-5);
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--eerie-black);
  font-family: 'Inter', sans-serif;
}

.service-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

.service-tags li {
  background: var(--cultured);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--fs-6);
  color: var(--eerie-black);
  transition: background-color var(--transition-1);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.service-tags li:hover {
  background: var(--red-crayola);
  color: var(--white-1);
}

.popup-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
}

.popup-prev-btn,
.popup-next-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-6);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--red-crayola);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-1);
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-prev-btn:hover:not(:disabled),
.popup-next-btn:hover:not(:disabled) {
  color: var(--eerie-black);
}

.popup-prev-btn:disabled,
.popup-next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--gray-web);
}

.popup-prev-btn ion-icon,
.popup-next-btn ion-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.project-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Disable carousel interactions when popup is active */
.popup-overlay.active ~ #carousel,
.popup-overlay.active ~ .carousel-container #carousel {
  pointer-events: none;
}

/* Full-screen image overlay */
.fullscreen-image-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100; /* Above popup-overlay */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.fullscreen-image-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.fullscreen-img {
  max-width: 600px;
  max-height: 400px;
  width: 100%;
  height: auto;
  object-fit: contain; /* Preserve aspect ratio */
  border-radius: var(--radius-5);
  box-shadow: var(--shadow-1);
}

.fullscreen-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 30px;
  color: var(--gray-web);
  line-height: 1;
  cursor: pointer;
  padding: 5px;
  transition: color var(--transition-1);
  background: none;
  border: none;
}

.fullscreen-close:is(:hover, :focus-visible) {
  color: var(--red-crayola);
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .popup-content {
    padding: 20px;
    max-width: 90%;
  }
  .popup-img {
    height: 200px;
    width: 85%;
    max-width: 270px;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
  }
  .image-gallery {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    min-width: 100%;
    padding-bottom: 10px;
    padding-right: 15px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  .popup-title {
    font-size: var(--fs-3);
  }
  .popup-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .popup-prev-btn,
  .popup-next-btn {
    flex: 1;
    max-width: 48%;
    justify-content: center;
    text-align: center;
  }
  .project-name {
    max-width: calc(100% - 30px);
  }
  .fullscreen-img {
    max-width: 90vw; /* Fit viewport with margin */
    max-height: 90vh;
    width: auto;
    height: auto;
  }
}

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/* Tablet Portrait (575px and up) */
@media (min-width: 575px) {
  .container { max-width: 540px; }
  .grid-list { grid-template-columns: 1fr 1fr; }
  .contact-form .btn { width: auto; }
  .contact-list { grid-template-columns: 1fr 1fr; }
  .process-step { grid-template-areas: "number image" "content image"; grid-template-columns: auto 1fr; align-items: start; padding-left: 70px; padding-bottom: 0; column-gap: 30px; }
  .process-step:not(:last-child)::after { left: 25px; top: 50px; bottom: -40px; height: auto; width: 2px; }
  .step-number { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  .step-image { margin-top: 0; }
}

/* Tablet Landscape (768px and up) */
@media (min-width: 768px) {
  :root { --fs-1: 4.5rem; --fs-2: 3.7rem; --fs-3: 2.3rem; --fs-4: 1.8rem; --fs-5: 1.5rem; --fs-6: 1.4rem; }
  .container { max-width: 720px; }
  .hero .container { flex-direction: row; text-align: left; gap: 40px; }
  .hero-content { order: 1; flex: 1; }
  .hero-media-container { order: 2; flex-basis: 40%; max-width: 40%;}
  .hero .btn { margin-inline: 0; }
  .hero-text { margin-inline: 0; max-width: none; }
  .hero-subtitle, .hero-title { padding-inline-start: 0; }
  .hero-subtitle::before { display: none; }
  .contact-form { padding: 40px; }
  .process-step:nth-child(even) { grid-template-areas: "image number" "image content"; grid-template-columns: 1fr auto; padding-left: 0; padding-right: 70px; }
  .process-step:nth-child(even) .step-number { left: auto; right: 0; }
  .process-step:nth-child(even)::after { left: auto; right: 25px; }
  .checkbox-group { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  /* CTA Connect Responsive */
  .cta-connect-container { grid-template-columns: 1fr 1fr; gap: 60px; }
  .cta-connect-graphic { width: 100%; max-width: 400px; margin-inline: 0; margin-left: auto; opacity: 1; }
  .cta-connect-text { max-width: none; }
}

/* Small Desktop (992px and up) */
@media (min-width: 992px) {
  :root { --fs-1: 5rem; --fs-2: 4rem; --fs-3: 2.5rem; --section-padding: 100px; }
  .container { max-width: 960px; }
  .grid-list { grid-template-columns: repeat(3, 1fr); }
  .nav-toggle-btn { display: none; }
  .mobile-menu-overlay { display: none; }
  .navbar, .navbar.active { all: unset; display: flex; align-items: center; margin-left: auto; }
  .navbar-list { all: unset; display: flex; align-items: center; gap: 30px; }
  .navbar-link { position: relative; padding: 15px 0; border-bottom: none; font-size: var(--fs-5); }
  .navbar-link:is(:hover, :focus-visible, .active) { color: var(--eerie-black); }
  .navbar-link::after { content: ""; position: absolute; bottom: 10px; left: 0; width: 100%; height: 2px; background-image: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-2); }
  .navbar-link:is(:hover, :focus-visible, .active)::after { transform: scaleX(1); }
  .mobile-socials { display: none; }
  .service-card { padding: 30px; }
  .service-card .h3 { --fs-3: 2.3rem; }
  .about .container { grid-template-columns: 1fr 1fr; gap: 50px; }
  .about-banner { margin-bottom: 0; }
  .input-wrapper { grid-template-columns: 1fr 1fr; }
  .contact-list { grid-template-columns: repeat(3, 1fr); }
  .contact-card { padding: 30px; }
  .contact-card .card-icon { font-size: 28px; }
  /* CTA Connect Responsive */
  .cta-connect-graphic { max-width: 450px; }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  :root { --fs-1: 6rem; --fs-2: 4.5rem; --fs-4: 1.9rem; --fs-5: 1.6rem; --fs-6: 1.6rem; }
  .container { max-width: 1140px; }
  .btn { --fs-6: 1.5rem; padding: 14px 35px; }
  .service-card { padding: 35px; }
  .service-card .h3 { --fs-3: 2.5rem; }
  .about .container { gap: 60px; }
  .about-item { gap: 12px; }
  .about-item ion-icon { font-size: 2rem; }
  .cta .section-title { margin-block: 15px 30px; }
  .contact-form { padding: 50px; }
  .contact-card { gap: 25px; }
  .contact-card .card-icon { padding: 18px; }
  .process-step .step-content { font-size: var(--fs-5); }
  .checkbox-group { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================== */
/* Mobile Responsive Styles for Stacking Cards      */
/* (Applies to screens smaller than 768px wide)     */
/* ================================================== */

@media (max-width: 767px) { /* Adjust breakpoint if needed */

  /* Change card body flex direction to vertical */
  .card-body {
      flex-direction: column; /* Stack columns vertically */
      justify-content: flex-start; /* Align content to top */
      padding: 40px 30px; /* Adjust padding for mobile */
  }

  /* Make text column full width and add spacing below */
  .card-text-column {
      flex-basis: auto; /* Reset flex basis */
      width: 100%;      /* Take full width */
      padding-right: 0; /* Remove padding between columns */
      margin-bottom: 40px; /* Add space below text, before image/video */
      text-align: center; /* Center text on mobile? Or keep left? */
  }

   /* Ensure text alignment within the text column */
  .card-text-column .card-title,
  .card-text-column .card-text,
  .card-text-column .card-step-number {
       text-align: center; /* Center text on mobile? Or keep left? */
       /* margin-left: auto; */ /* Remove if centering text */
       /* margin-right: auto; */ /* Remove if centering text */
  }
   .card-text-column .card-step-number {
      margin-left: auto;
      margin-right: auto; /* Center step number if text is centered */
   }


  /* Make image/video column take appropriate width */
  .card-image-column {
      flex-basis: auto;  /* Reset flex basis */
      width: 100%;       /* Adjust width as needed, e.g., 90% or 100% */
      max-width: 400px;  /* Optional: Limit max size */
      order: 2; /* Ensure image/video comes after text if needed (usually automatic with column flex) */
  }

   /* Optional: Adjust heading size on mobile */
   .card-title {
       font-size: var(--fs-3); /* Use a smaller heading size */
   }

   /* Optional: Adjust card height on mobile if not already done */
   /* If you haven't used the responsive --cardHeight variable yet: */
   /*
   :root {
       --cardHeight: 75vh;
   }
   .card-body,
   #cards {
       grid-template-rows: repeat(var(--cards), var(--cardHeight));
   }
   .card-body{
       height: var(--cardHeight);
   }
   */

} /* End of @media query */