/* ---------- Layout skeleton ---------- */


.home-desktop {
  display: block;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.home-desktop .navbar,
.home-desktop .container-wrapper,
.home-desktop .layout,
.home-desktop .layout-2,
.home-desktop .layout-3,
.home-desktop .CTA,
.home-desktop .footer {
  width: 100%;
}

.home-desktop .container,
.home-desktop .container-2,
.home-desktop .component-wrapper,
.home-desktop .container-3 {
  width: 100%;
  max-width: var(--spacing-sizing-container-container-large, 1280px);
  margin-inline: auto;
  padding-inline: var(--spacing-sizing-page-padding-padding-global);
}

body {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* ---------- Navbar / Header ---------- */

.navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  z-index: 1000;      
  overflow: visible;  
}

.navbar .header {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-sizing-page-padding-padding-global);
  width: 100%;
  background-color: transparent; 
  overflow: visible;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
}

.navbar .column {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.navbar .company-logo {
  display: inline-block;
  width: 84px;
  height: 36px;
  position: relative;
}

.navbar .logo-wide {
  max-width: 100%;
  height: auto;
  display: block;
}

.navbar .nav-right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.navbar .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}

.navbar .link-text {
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--foundation-greylight);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  white-space: nowrap;
  text-decoration: none;
}
.navbar .link-text:hover { text-decoration: underline; }

.navbar .nav-link-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--foundation-greylight);
}

.navbar .chevron-down {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.navbar .chevron-down::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.navbar .nav-dropdown.open .chevron-down {
  transform: rotate(180deg);
}

/* Desktop dropdown wrapper */
.navbar .nav-dropdown {
  position: relative;
}
.navbar .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 220px;
  background: var(--foundationgreydarker);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 8px;
  display: none;
  z-index: 60;
}
.navbar .nav-dropdown.open .nav-dropdown-menu { display: block; }

.navbar .dropdown-link {
  display: block;
  padding: 10px 12px;
  color: var(--neutralswhite);
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
  line-height: 1.4;
}
.navbar .dropdown-link:hover { background: rgba(255,255,255,0.08); }

/* --- START: Frosted Glass Header Buttons --- */
.navbar .button,
.navbar .button-wrapper {

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  cursor: pointer;
  text-decoration: none;

  /* Glassmorphism Properties */
  background: rgba(255, 255, 255, 0.1); 
  border-radius: 0px; 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  transition: background 0.2s ease; 
}
.navbar .button:hover,
.navbar .button-wrapper:hover {
  background: rgba(255, 255, 255, 0.2); 
}



.navbar .text-wrapper,
.navbar .button-2 {
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  font-size: var(--text-regular-normal-font-size);
  line-height: var(--text-regular-normal-line-height);
  letter-spacing: var(--text-regular-normal-letter-spacing);
}
.navbar .text-wrapper { color: var(--neutralswhite); }
.navbar .button-2 { color: var(--neutralswhite); } 

/* NEW SVG Hamburger  */
.navbar .nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.navbar .nav-toggle svg {
  width: 28px;
  height: 28px;
}

.navbar .line {
  fill: none;
  stroke: white; /* Explicitly set to white */
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.navbar .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.navbar .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.navbar .nav-toggle.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.navbar .nav-toggle.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.navbar .nav-toggle.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
/* === /END SVG Hamburger === */


/* Drawer + overlay (mobile) */
.navbar .nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999;
}

.navbar .nav-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(84vw, 380px);
  background: var(--foundationgreydarker);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -8px 0 24px rgba(0,0,0,0.35);
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 1000;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.navbar .nav-drawer.open { transform: translateX(0); }

.navbar .drawer-close {
  align-self: flex-end;
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--neutralswhite);
  cursor: pointer;
}

.navbar .drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.navbar .drawer-link { /* Style for non-dropdown links */
  color: var(--neutralswhite);
  text-decoration: none;
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 8px;
  border-radius: 6px;
}
.navbar .drawer-link:hover { background: rgba(255,255,255,0.08); }

.navbar .drawer-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.navbar .block { width: 100%; }

/* === Drawer Dropdown Styles === */
.navbar .drawer-dropdown {
  position: relative;
}

.navbar .drawer-dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 8px;
  text-align: left;
  cursor: pointer;
  color: var(--neutralswhite);
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
  line-height: 1.5;
  border-radius: 6px;
}
.navbar .drawer-dropdown-toggle:hover {
   background: rgba(255,255,255,0.08);
}
/* Explicit style for the text inside the toggle button */
.navbar .drawer-link-text {
  flex-grow: 1; 
}


.navbar .drawer-chevron {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  margin-left: 8px;
  flex-shrink: 0; 
}

.navbar .drawer-chevron::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.navbar .drawer-dropdown.open .drawer-chevron {
  transform: rotate(180deg);
}

.navbar .drawer-dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 4px;
  display: none;
}

.navbar .drawer-dropdown.open .drawer-dropdown-menu {
  display: block;
}

/* Style for sublinks within the drawer dropdown */
.navbar .drawer-sublink {
  display: block;
  color: var(--neutralswhite);
  text-decoration: none;
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 8px;
  border-radius: 6px;
  padding-left: 28px;
}
.navbar .drawer-sublink:hover {
  background: rgba(255,255,255,0.08);
}
/* === /End Drawer Dropdown Styles === */

/* ---------- Hero ---------- */
.home-desktop .container-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(720px, 70vh, 900px);

  /* Updated background image + tint */
  background-image:
    linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.7) 100%),
    url('../image/team.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home-desktop .column-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}
.home-desktop .column-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--spacing-sizing-max-width-max-width-large, 768px);
}

.home-desktop .content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  align-items: center;
}

.home-desktop .medium-length-hero {
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--heading-h1-font-family);
  font-weight: var(--heading-h1-font-weight);
  color: var(--primitives-color-white, #fff);
  font-size: clamp(28px, 6vw, var(--heading-h1-font-size, 56px));
  text-align: center;
  letter-spacing: var(--heading-h1-letter-spacing);
  line-height: var(--heading-h1-line-height);
}

.home-desktop .lorem-ipsum-dolor {
  align-self: stretch;
  font-family: var(--text-medium-normal-font-family);
  font-weight: var(--text-medium-normal-font-weight);
  color: var(--primitives-color-white, #fff);
  font-size: clamp(14px, 2.2vw, 18px);
  text-align: center;
  line-height: var(--text-medium-normal-line-height);
}

.home-desktop .actions { display: inline-flex; align-items: center; gap: 16px; }

/* --- START: Modified Hero Buttons for Glass Effect --- */
.home-desktop .div-wrapper,
.home-desktop .button-4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  text-decoration: none;
  cursor: pointer;

  /* Glassmorphism Properties */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0px; 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease; 
}

.home-desktop .div-wrapper:hover,
.home-desktop .button-4:hover {
  background: rgba(255, 255, 255, 0.2); 
}
/* --- END: Modified Hero Buttons --- */

.home-desktop .button-3,
.home-desktop .button-5 {
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  font-size: var(--text-regular-normal-font-size);
  line-height: var(--text-regular-normal-line-height);
}
.home-desktop .button-3 { color: var(--foundation-blueblue-50); }
.home-desktop .button-5 { color: var(--primitives-color-white, #fff); }

/* ---------- Services ---------- */

#services .section-title .text {
  line-height: 1.5; 
  letter-spacing: 0.01em; 
}

/* Each card’s heading and paragraph */
#services .heading-2 {
  line-height: 1.25; 
  letter-spacing: 0.005em;   
  margin-bottom: 4px;
}

#services .p {
  line-height: 1;
  letter-spacing: 0.01em;
}


#services .column-4 {
  gap: 40px;
}

/* Center the whole section content */
#services .container-2 {
  display: flex;
  flex-direction: column;
  align-items: center;          
  gap: 80px;
  width: 100%;
  max-width: var(--spacing-sizing-container-container-large, 1280px);
  margin-inline: auto;
}

/* Title block stays centered and readable */
#services .section-title {
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#services .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 5vw, 48px);
  width: 100%;
  align-items: start;
  justify-items: center;
  margin-inline: auto;
}

/* Each card is centered and constrained for comfortable reading */
#services .column-4 {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 8px;
}

/* Icon sizing stays consistent */
#services .img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}


#services .heading-2 {
  font-size: clamp(18px, 2.4vw, 28px);
}
#services .p {
  font-size: clamp(14px, 2vw, 16px);
  max-width: 60ch;
  margin: 0;
}

.home-desktop .layout#services .tagline-wrapper {
  text-align: center;
  justify-content: center;
}

/* Optional: tighten vertical rhythm on smaller screens */
@media (max-width: 768px) {
  #services .container-2 { gap: 64px; }
  #services .row-wrapper { gap: 48px; }
}

.home-desktop .layout {
  background-color: var(--foundationgreydarker);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 1px 0 0 rgba(255,255,255,0.32),
    inset 0 -1px 1px rgba(0,0,0,0.13),
    inset -1px 0 1px rgba(0,0,0,0.11);
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: var(--spacing-sizing-section-padding-padding-section-large, 112px);
}

.home-desktop .container-2 { display: flex; flex-direction: column; gap: 80px; width: 100%; }
.home-desktop .section-title { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 768px; align-items: center; margin-inline: auto; }
.home-desktop .tagline { color: var(--foundation-greylight); font-family: var(--heading-tagline-font-family); }
.home-desktop .heading { color: var(--foundation-greylight); font-family: var(--heading-h2-font-family); font-weight: var(--heading-h2-font-weight); font-size: clamp(22px, 4.5vw, 48px); }
.home-desktop .text { color: var(--foundation-greylight); font-family: var(--text-medium-normal-font-family); font-size: clamp(14px, 2.2vw, 18px); }
.home-desktop .row-wrapper { display: flex; flex-direction: column; gap: 64px; width: 100%; }
.home-desktop .row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; }
.home-desktop .column-4 { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; padding: 8px; }
.home-desktop .img { width: 48px; height: 48px; }
.home-desktop .heading-2 { color: var(--foundation-greylight); font-family: var(--heading-h4-font-family); font-size: clamp(18px, 3.2vw, 32px); }
.home-desktop .p { color: var(--foundation-greylight); font-family: var(--text-regular-normal-font-family); font-size: clamp(14px, 2.1vw, 16px); }

.home-desktop .container-wrapper {
  margin-bottom: 0;
  border-bottom: none;
  box-shadow: none;
  background-color: transparent;
}

.home-desktop .layout {
  margin-top: 0;
  border-top: none;
  box-shadow: none;
}

.home-desktop .container-wrapper {
  position: relative;
}
.home-desktop .container-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: transparent;
}

.home-desktop .layout {
  margin-top: -0px;
}


/* ---------- Metrics ---------- */

.home-desktop .layout-2 { background-color: var(--dodger-bluedarkest); display: flex; flex-direction: column; gap: 80px; padding-block: var(--spacing-sizing-section-padding-padding-section-large, 112px); }
.home-desktop .component-wrapper { display: flex; flex-direction: column; gap: 80px; }
.home-desktop .component { display: flex; align-items: center; gap: 80px; width: 100%; }
.home-desktop .placeholder-image { flex: 1; aspect-ratio: 0.94; object-fit: cover; max-width: 100%; height: auto; }
.home-desktop .content-wrapper { display: flex; flex-direction: column; gap: 32px; flex: 1; }
.home-desktop .div-2 { display: flex; flex-direction: column; gap: 32px; }
.home-desktop .div-3 { display: flex; flex-direction: column; gap: 16px; }
.home-desktop .tagline-2 { color: var(--neutralswhite); font-family: var(--heading-tagline-font-family); }
.home-desktop .content-2 { display: flex; flex-direction: column; gap: 24px; }
.home-desktop .text-wrapper-2 { color: var(--neutralswhite); font-family: var(--heading-h2-font-family); font-size: clamp(22px, 4.5vw, 48px); }
.home-desktop .text-2 { color: var(--neutralswhite); font-family: var(--text-medium-normal-font-family); font-size: clamp(14px, 2.2vw, 18px); }
.home-desktop .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; padding-block: 8px; }
.home-desktop .list-item { display: flex; flex-direction: column; gap: 8px; }
.home-desktop .text-wrapper-3 { color: var(--neutralswhite); font-family: var(--text-regular-normal-font-family); font-size: clamp(14px, 2.1vw, 16px); }

/* ---------- Innovation ---------- */

.home-desktop .layout-3 { background-color: var(--neutralswhite); display: flex; flex-direction: column; gap: 80px; padding-block: var(--spacing-sizing-section-padding-padding-section-large, 112px); }
.home-desktop .tagline-3 { color: var(--color-schemes-color-scheme-1-text, #000); font-family: var(--heading-tagline-font-family); }
.home-desktop .heading-3 { color: var(--color-schemes-color-scheme-1-text, #000); font-family: var(--heading-h2-font-family); font-size: clamp(22px, 4.5vw, 48px); }
.home-desktop .text-3, .home-desktop .text-4 { color: var(--color-schemes-color-scheme-1-text, #000); font-family: var(--text-medium-normal-font-family); font-size: clamp(14px, 2.2vw, 18px); }
.home-desktop .div-4 { display: flex; flex-direction: column; gap: 16px; }
.home-desktop .text-wrapper-4 { color: var(--color-schemes-color-scheme-1-text, #000); font-family: var(--heading-h6-font-family); }

/* ---------- CTA ---------- */

/* ---------- CTA (Section) ---------- */
.home-desktop .CTA {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 80px;
  padding-block: var(--spacing-sizing-section-padding-padding-section-large, 112px);
  padding-inline: var(--spacing-sizing-page-padding-padding-global, 64px);

  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%),
    url('../image/cta.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: var(--primitives-color-white, #fff);
  text-align: left;
  overflow: hidden;
}

.home-desktop .column-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 768px;
  text-align: left;
}

.home-desktop .heading-4 {
  color: var(--primitives-color-white, #fff);
  font-family: var(--heading-h2-font-family);
  font-size: clamp(22px, 4.5vw, 48px);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.home-desktop .text-5 {
  color: var(--primitives-color-white, #fff);
  font-family: var(--text-medium-normal-font-family);
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  max-width: 60ch;
  margin: 0;
}

/* ---------- CTA actions row ---------- */
.home-desktop .CTA .actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Glassmorphism Buttons (Sharp Corners, Equal Height) ---------- */
.home-desktop .button-6,
.home-desktop .button-8 {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px; 
  min-height: 48px;           
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;

  /* Shared Glassmorphism Look */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
  border-radius: 0;               /* ✅ sharp corners */
  transition: all 0.25s ease-in-out;
}

/* Hover effect for both */
.home-desktop .button-6:hover,
.home-desktop .button-8:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 255, 255, 0.15);
}

/* Book Button (Primary emphasis) */
.home-desktop .button-6 {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Text inside both buttons */
.home-desktop .button-7,
.home-desktop .button-5 {
  font-family: var(--text-regular-normal-font-family);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .home-desktop .CTA {
    padding-block: 80px;
    gap: 64px;
    padding-inline: 20px;
  }
}


/* ---------- Footer ---------- */

/* ---------- Footer (responsive + glass) ---------- */
.home-desktop .footer {
  background-color: var(--dodger-bluedarkest);
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: var(--spacing-sizing-section-padding-padding-section-medium, 80px);
}

/* Glass card container */
.home-desktop .card {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* newsletter | links */
  gap: 48px;
  width: 100%;
  padding: 32px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 0; /* sharp edges */
}

/* Left column (newsletter) */
.home-desktop .newsletter {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(520px, 100%);
}

/* Disclaimer text — force white */
.home-desktop .text-wrapper-5 {
  color: #fff;            /* ✅ white */
  opacity: 0.9;           /* optional softness */
  line-height: 1.6;
}

/* Ensure links in disclaimer are white */
.home-desktop .newsletter a {
  color: #fff;
  text-decoration: underline;
}
.home-desktop .newsletter a:hover { opacity: 0.8; }

/* Form + inputs + glass subscribe button */
.home-desktop .actions-2 { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.home-desktop .form {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  flex-wrap: nowrap;
}

.home-desktop .text-input {
  flex: 1;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
  color: var(--neutralswhite);
}
.home-desktop .text-input::placeholder { color: var(--neutralswhite); opacity: .7; }
.home-desktop .text-input:focus { outline: 2px solid var(--neutralswhite); outline-offset: 2px; }

/* Glassmorphism Subscribe button (sharp, equal height) */
.home-desktop .button-9 {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  min-height: 48px;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--neutralswhite);
  box-shadow: 0 4px 10px rgba(255,255,255,0.10);
  border-radius: 0;
  transition: all .25s ease-in-out;
}
.home-desktop .button-9:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255,255,255,0.15);
}

/* Right column (links grid) */
.home-desktop .links {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
  gap: 28px 32px;
}
.home-desktop .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.home-desktop .text-wrapper-6 { color: var(--neutralswhite); font-family: var(--text-regular-semi-bold-font-family); }
.home-desktop .text-wrapper-7 { color: var(--neutralswhite); text-decoration: none; font-family: var(--text-small-normal-font-family); }
.home-desktop .text-wrapper-7:hover { text-decoration: underline; }
.home-desktop .social-links { width: 100%; height: auto; display: block; }

/* Bottom row */
.home-desktop .row-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}
.home-desktop .footer-links-2 { display: inline-flex; gap: 24px; }
.home-desktop .text-wrapper-8 { color: var(--neutralswhite); font-family: var(--text-small-normal-font-family); white-space: nowrap; }
.home-desktop .text-wrapper-9 { color: var(--neutralswhite); text-decoration: underline; cursor: pointer; }

/* Footer responsiveness */
@media (max-width: 1024px) {
  .home-desktop .card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px;
  }
  .home-desktop .links {
    grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) );
  }
}
@media (max-width: 768px) {
  .home-desktop .form { flex-wrap: wrap; }
  .home-desktop .text-input { width: 100%; }
  .home-desktop .button-9 { width: 100%; }

  .home-desktop .row-3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Follow us list layout */
.home-desktop .social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

/* One row: icon + label */
.home-desktop .social-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--neutralswhite);
  font-family: var(--text-small-normal-font-family);
  line-height: 1.4;
  transition: opacity .2s ease, transform .2s ease;
}

.home-desktop .social-item:hover {
  opacity: 0.85;
  transform: translateX(2px);
}

/* Glassy circular icon */
.home-desktop .social-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border-radius: 50%;
  color: var(--neutralswhite);
  flex-shrink: 0;
}

/* Label text */
.home-desktop .social-label {
  color: var(--neutralswhite);
  font-size: 14px;
}

/* Keep column title spacing consistent with others */
.home-desktop .div-4 > .text-wrapper-6 {
  margin-bottom: 8px;
}

/* Footer card: 4 columns on desktop (Newsletter | Col1 | Col2 | Follow) */
.home-desktop .card {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; 
  column-gap: 64px; 
  row-gap: 32px;
  width: 100%;
  padding: 32px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 0;
  align-items: start; 
}

/* Make the newsletter (left) span only the first column */
.home-desktop .newsletter { grid-column: 1 / 2; }

/* The three “links” columns live in columns 2–4 */
.home-desktop .links {
  display: contents;
}

/* Column headings spacing like mock */
.home-desktop .div-4 > .text-wrapper-6 { margin: 0 0 12px 0; }

/* Standard footer link list */
.home-desktop .footer-links { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

/* Follow us list (tighter like screenshot) */
.home-desktop .social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Social row: icon + label */
.home-desktop .social-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--neutralswhite);
  font-family: var(--text-small-normal-font-family);
  font-size: 14px;
  line-height: 1.4;
  transition: opacity .2s ease, transform .2s ease;
}
.home-desktop .social-item:hover { opacity: .85; transform: translateX(2px); }

/* Glassy circular icon (compact) */
.home-desktop .social-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  color: var(--neutralswhite);
  flex-shrink: 0;
}

/* Keep “Follow us” label from wrapping */
.home-desktop .social-label { white-space: nowrap; }

/* Tablet: stack into two rows (Newsletter spans full width, then 3 columns) */
@media (max-width: 1024px) {
  .home-desktop .card {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
  .home-desktop .newsletter { grid-column: 1 / -1; }
}

/* Mobile: single column stack */
@media (max-width: 768px) {
  .home-desktop .card {
    grid-template-columns: 1fr;
    row-gap: 24px;
    column-gap: 0;
    padding: 24px;
  }
}




/* ---------- Focus visibility ---------- */
.home-desktop a:focus-visible,
.home-desktop button:focus-visible,
.home-desktop input:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* ---------- Breakpoints ---------- */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --spacing-sizing-page-padding-padding-global: 32px;
    --spacing-sizing-section-padding-padding-section-large: 88px;
    --spacing-sizing-section-padding-padding-section-medium: 64px;
  }
  .navbar .nav-right { gap: 12px; }
  .home-desktop .component { flex-direction: column; gap: 32px; }
  .home-desktop .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .home-desktop .card { gap: 48px; padding: 32px; }
}

/* Mobile header toggle */
@media (max-width: 860px) {
  .navbar .nav-links,
  .navbar .nav-cta { display: none; }
  .navbar .nav-toggle { display: inline-flex; }
}

/* Mobile layout */
@media (max-width: 768px) {
  :root {
    --spacing-sizing-page-padding-padding-global: 20px;
    --spacing-sizing-section-padding-padding-section-large: 64px;
    --spacing-sizing-section-padding-padding-section-medium: 48px;
  }

  /* --- START: Modified styles for mobile hero (CENTERED) --- */
  .home-desktop .medium-length-hero {
    font-size: 40px;
  }
  .home-desktop .column-3 {
    gap: 24px;
    align-items: center; 
    text-align: center;
  }
  .home-desktop .column-3 .content {
    gap: 20px; 
    align-items: center; 
  }
  .home-desktop .column-5 {
    align-items: stretch;
    text-align: left;
  }
  /* --- END: Modified styles --- */

  .home-desktop .row { grid-template-columns: 1fr; gap: 24px; }
  .home-desktop .card { flex-direction: column; gap: 32px; padding: 24px; }
  .home-desktop .links { flex-direction: column; gap: 24px; }
  .home-desktop .row-3 { flex-direction: column; align-items: flex-start; gap: 16px; }

}

/* Small phones */
@media (max-width: 480px) {
  .home-desktop .actions,
  .home-desktop .CTA .actions { gap: 12px; }
}

/* ===== Services Hero ===== */
.services-hero {
  /* sizing */
  min-height: clamp(360px, 40vh, 520px);
  display: flex;
  align-items: center;

  /* spacing matches your site rhythm */
  padding-block: clamp(72px, 10vw, 112px);
  padding-inline: var(--spacing-sizing-page-padding-padding-global, 64px);

  /* background image + dark overlay (change path if needed) */
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%),
    url("../css/image/services_hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

.services-hero .container {
  max-width: 1280px;
  margin: 0 auto;
}

.services-hero .component {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  text-align: left;
}

.services-hero .our-core-services {
  margin: 0;
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.2;
  font-weight: 800;     /* bold on desktop too */
  letter-spacing: -0.01em;
  color: #fff;               /* ensure white */
}

.services-hero .explore-how-splexx {
  margin: 0;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
  font-weight: 400;
  color: #fff;               /* ensure white */
  max-width: 65ch;
}

@media (min-width: 1600px) {
  .services-hero { background-position: center top; }
}

/* Mobile: center the text */
@media (max-width: 768px) {
  .services-hero .component {
    align-items: center;
    text-align: center;
  }
  .services-hero .our-core-services {
    font-weight: 900;      /* stronger than paragraph */
  }
  .services-hero .explore-how-splexx {
    font-weight: 400;
  }
}

/* Section wrapper */
.layout-369 {
  width: 100%;
  background: #fff;
  padding-block: 112px;
  padding-inline: 64px;
  box-sizing: border-box;
  color: #0d0300;
  font-family: var(--font-roboto);
}

.layout-369 .container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: stretch;            /* left-align the grid under the centered title */
}

/* Title block (centered) */
.layout-369 .section-title {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; gap: 16px;
}
.layout-369 .tagline { font-weight: 600; line-height: 1.5; }
.layout-369 .content { display: flex; flex-direction: column; gap: 24px; }
.layout-369 .heading { margin: 0; font-size: clamp(24px, 4.5vw, 48px); line-height: 1.2; }
.layout-369 .text { margin: 0; font-size: clamp(14px, 2.2vw, 18px); line-height: 1.6; }

/* Grid */
.layout-369 .component { color: #000; }
.layout-369 .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

/* === Center align the tagline inside layout-369 section === */
.layout-369 .tagline-wrapper {
  display: flex;
  justify-content: center;   /* centers the tagline horizontally */
  align-items: center;       /* optional: vertically center if wrapper grows */
  width: 100%;               /* ensures full row width for centering */
  text-align: center;
  margin-bottom: 8px;        /* small spacing below the tagline */
}

.layout-369 .tagline {
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;               /* make sure it’s visible on white background */
  text-align: center;
}


/* Base card look (shared) */
.card,
.layout-369-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover,
.layout-369-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Images */
.image-icon,
.layout-369-image-icon {
  width: 100%;
  aspect-ratio: 16/9;       /* consistent height across cards */
  object-fit: cover;
  display: block;
}

/* Content areas */
.layout-369-content,
.content3 {
  display: flex; flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.content-top { display: flex; flex-direction: column; gap: 8px; }
.content2 { display: flex; flex-direction: column; gap: 8px; }

.layout-369-heading { margin: 0; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.4; }
.layout-369-text { margin: 0; font-size: 16px; line-height: 1.5; color: #222; }

/* CTA link-as-button */
.actions { display: flex; align-items: center; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; cursor: pointer;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 6px;
  color: #111;
  transition: background .18s ease, border-color .18s ease;
}
.button:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.24); }
.layout-369-button { line-height: 1.5; font-weight: 500; }
.chevron-right-icon { width: 20px; height: 20px; }

/* Optional: first card side-by-side on very wide screens */
@media (min-width: 1100px) {
  .card {
    flex-direction: row;              /* image left, content right */
  }
  .card .image-icon {
    width: 42%;
    min-width: 320px;
    aspect-ratio: auto;
    height: 100%;
  }
  .card .layout-369-content { flex: 1; }
}

/* Responsive paddings */
@media (max-width: 1024px) {
  .layout-369 { padding-inline: 32px; padding-block: 88px; }
}
@media (max-width: 768px) {
  .layout-369 { padding-inline: 20px; padding-block: 64px; }
  .card { flex-direction: column; }   /* stack image above content */
}

/* Ensure black text inside the services grid */
.layout-369 h2,
.layout-369 h3,
.layout-369 .text,
.layout-369 .layout-369-text,
.layout-369 .tagline { color: #000; }
.layout-369 .heading,
.layout-369 .text,
.layout-369 .tagline,
.layout-369 .layout-369-heading,
.layout-369 .layout-369-text {
  color: #000 !important;
}

/* --- Glassmorphism base for all service cards --- */
.card--glass,
.card.card--glass,
.layout-369-card.card--glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: #000;
}

/* Keep headings/paragraphs black on the frosted background */
.card--glass h3,
.card--glass p,
.card--glass .tagline,
.card--glass .layout-369-text,
.card--glass .layout-369-heading { color: #000; }

/* --- Glass button --- */
.button--glass {
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}


/* === Remove rounded corners on cards and buttons === */
.card,
.layout-369-card,
.card--glass,
.button,
.button--glass {
  border-radius: 0 !important;
}

/* === FEATURE CARD (Card 1) — match the reference === */
.layout-369 .row > .card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;   /* text | image */
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  background: #fff;
  border-radius: 0;                    /* square edges */
}

/* Put the image on the RIGHT even if it appears first in the HTML */
.layout-369 .row > .card .image-icon { order: 2; }
.layout-369 .row > .card .layout-369-content { order: 1; }

/* Image fills the entire right column */
.layout-369 .row > .card .image-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Tidy text block */
.layout-369 .row > .card .layout-369-content {
  padding: 32px 40px;
  max-width: 560px;                    /* keeps lines comfortable */
  display: flex;
  flex-direction: column;
  justify-content: center;              /* vertical align center */
  gap: 20px;
}

/* Typography rhythm */
.layout-369 .row > .card .tagline { font-weight: 700; font-size: 14px; line-height: 1.5; }
.layout-369 .row > .card .layout-369-heading { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; margin: 0; }
.layout-369 .row > .card .layout-369-text { font-size: 16px; line-height: 1.6; color: #222; margin: 0; }

/* Button: square, outlined */
.layout-369 .row > .card .actions { margin-top: 8px; }
.layout-369 .row > .card .button {
  border-radius: 0;
  padding: 12px 18px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  color: #111;
}
.layout-369 .row > .card .button:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.28); }
.layout-369 .row > .card .chevron-right-icon { width: 18px; height: 18px; }

/* Keep other cards as standard stacked cards */
.layout-369 .row > .layout-369-card { display: flex; }

/* Mobile: stack neatly */
@media (max-width: 900px) {
  .layout-369 .row > .card { grid-template-columns: 1fr; }
  .layout-369 .row > .card .image-icon { order: 2; height: 220px; }
  .layout-369 .row > .card .layout-369-content { padding: 24px 20px; justify-content: flex-start; }
}

.layout-369-card {
  flex: 1;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0; /* square corners */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.layout-369-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.layout-369-image-icon {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.content3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  gap: 24px;
  color: #000;
}

.layout-369-heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.layout-369-text {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #222;
}

.actions {
  display: flex;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,0.16);
  text-decoration: none;
  color: #111;
  border-radius: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.button:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.24);
}

.chevron-right-icon {
  width: 20px;
  height: 20px;
}
/* === Make all cards equal height in the grid === */
.layout-369 .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: stretch;          /* stretch all items to same row height */
  grid-auto-rows: 1fr;           /* every row cell has equal height */
}
.layout-369 .row > * { height: 100%; }  /* cards fill the grid cell height */

/* === Base card (keep square edges) === */
.layout-369-card,
.card {
  display: flex;
  flex-direction: column;
  border-radius: 0 !important;   /* no curves */
  height: 100%;
}

/* Card image keeps consistent height and covers */
.layout-369-image-icon,
.image-icon {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* === Glassmorphism for ALL service cards === */
.glass {
  background: rgba(255, 255, 255, 0.08);   /* frosted tint */
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: #000;
  border-radius: 0 !important;            /* square corners */
}

/* Ensure text on glass is black */
.glass h3,
.glass p,
.glass .tagline,
.glass .layout-369-text,
.glass .layout-369-heading { color: #000; }

/* Keep existing button shape square even if other rules try to round it */
.button { border-radius: 0 !important; }


/* === Equal height grid === */
.layout-369 .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.layout-369 .row > * {
  height: 100%;
}

/* === Card (shared) === */
.layout-369-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 0 !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  color: #000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.layout-369-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.12);
}

/* === Card image === */
.layout-369-image-icon {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* === Content area === */
.content3 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  justify-content: center;
}
.layout-369-heading {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}
.layout-369-text {
  font-size: 16px;
  color: #222;
  margin: 0;
  line-height: 1.6;
}

/* === Glass button === */
.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111;
  text-decoration: none;
  border-radius: 0 !important;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.chevron-right-icon {
  width: 20px;
  height: 20px;
}

/* === Responsive padding === */
@media (max-width: 1024px) {
  .layout-369 { padding-inline: 32px; padding-block: 88px; }
}
@media (max-width: 768px) {
  .layout-369 { padding-inline: 20px; padding-block: 64px; }
}


/* Digital Marketing page*/
.dm-page { font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

      /* --- HERO --- */
.dm-hero {
        width: 100%;
        position: relative;
        background-color: #0d0300; 
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 180px 64px;
        box-sizing: border-box;
        text-align: left;
        font-size: 56px;
        color: #fff;
        font-family: Roboto, sans-serif;
}

      .dm-hero .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 1280px;
      }

      .dm-hero .component {
        align-self: stretch;
        display: flex;
        align-items: flex-start;
        gap: 80px;
        flex-wrap: wrap;
      }

      .dm-hero .column {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .dm-hero .elevate-your-brand {
        align-self: stretch;
        position: relative;
        line-height: 120%;
        font-weight: 700;
      }

      .dm-hero-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 18px;
      }

      .dm-hero .at-splexx-we {
        align-self: stretch;
        position: relative;
        line-height: 150%;
      }

      @media (max-width: 768px) {
        .dm-hero {
          padding: 64px 24px;
          font-size: 40px;
          text-align: center;
        }
        .dm-hero .component {
          flex-direction: column;
          gap: 40px;
        }
        .dm-hero .column,
        .dm-hero-column {
          align-items: center;
          text-align: center;
        }
      }
      

      /* --- transform section --- */
      .layout-1 {
        width: 100%;
        position: relative;
        background-color: #11284c;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 112px 64px;
        box-sizing: border-box;
        text-align: left;
        font-size: var(--fs-16);
        color: var(--color-white);
        font-family: var(--font-roboto);
      }

      .layout-1 .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 1280px;
      }

      .layout-1 .component {
        align-self: stretch;
        display: flex;
        align-items: center;
        gap: 80px;
        flex-wrap: wrap;
        min-height: 640px;
      }

      .content-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
      }

      .section-title {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 16px;
      }

      .tagline-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
      }

      .tagline {
        position: relative;
        line-height: 150%;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #fff;
        text-align: left;
      }

      .content {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-24);
        font-size: 48px;
      }

      .heading {
        align-self: stretch;
        position: relative;
        line-height: 120%;
        font-weight: 700;
      }

      .text {
        align-self: stretch;
        position: relative;
        font-size: 18px;
        line-height: 150%;
        color: #f5f5f5;
      }

/* ===== Glass Buttons ===== */
.actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.button,
.button2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.button:hover,
.button2:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.button2 {
  gap: 8px;
}

/* ===== Glass SVG Icon ===== */
.chevron-right-icon {
  width: 24px;
  height: 24px;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.button-glass:hover .chevron-right-icon {
  opacity: 1;
  transform: translateX(3px);
}

.placeholder-image-icon {
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .layout-1 {
    padding: 88px 32px;
  }

  .layout-1 .component {
    flex-direction: column;
    gap: 48px;
    min-height: auto;
  }

  .content {
    font-size: 36px;
  }

  .text {
    font-size: 16px;
  }

  .actions {
    justify-content: center;
  }
}

/* ===== DM Solutions Section ===== */
.dm-solutions {
  width: 100%;
  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto);
}

.dm-solutions .container {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.dm-solutions .heading {
  max-width: 768px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #000;
}

.dm-solutions .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.dm-solutions .row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: center;
}

/* ===== List Item (Card) ===== */
.dm-solutions .list-item {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 32px;
  transition: all 0.3s ease;
}

.dm-solutions .list-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* ===== Card Inner Content ===== */
.dm-solutions-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.strategy-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.dm-solutions-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}

.dm-solutions .text {
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}


/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .dm-solutions {
    padding: 88px 32px;
  }

  .dm-solutions .heading {
    font-size: 32px;
  }

  .dm-solutions .list-item {
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  .dm-solutions {
    padding: 64px 20px;
  }

  .dm-solutions .heading {
    font-size: 28px;
    text-align: center;
  }

  .dm-solutions .row {
    flex-direction: column;
    align-items: center;
  }

  .dm-solutions .list-item {
    text-align: center;
  }

  .dm-solutions-heading {
    font-size: 20px;
  }
}

/* ===== DM Process Section ===== */
.dm-process {
  width: 100%;
  position: relative;
  background: #ebf3ff; 
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 112px 64px;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-roboto);
  color: #000;
}

/* Container */
.dm-process .container {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* Section Title */
.dm-process .section-title {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 16px;
}

.dm-process .tagline-wrapper {
  display: flex;
  justify-content: center;  
  width: 100%;
}

.dm-process .tagline {
  font-weight: 600;
  font-size: 16px;
  color: #000; 
  text-align: center;
}

.dm-process .content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 48px;
  text-align: center;
  align-items: center;
}

.dm-process .heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #000;
  text-align: center;
}

.dm-process .text {
  font-size: 18px;
  line-height: 1.6;
  color: #000;
  margin: 0;
}

/*  Steps Grid  */
.dm-process-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dm-process .row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 48px;
  flex-wrap: wrap;
}

.dm-process .column {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 32px;
  gap: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dm-process .column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Step Images */
.dm-process .placeholder-image-icon {
  width: 100%;
  max-width: 400px;
  height: 220px;
  object-fit: cover;
  border-radius: 0;
}

/* Step Content */
.dm-process .content2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.dm-process-heading {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.dm-process-text {
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .dm-process {
    padding: 88px 32px;
  }
  .dm-process .heading {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .dm-process {
    padding: 64px 20px;
  }
  .dm-process .heading {
    font-size: 28px;
  }
  .dm-process .text {
    font-size: 16px;
  }
  .dm-process .row {
    flex-direction: column;
    gap: 32px;
  }
  .dm-process .column {
    text-align: center;
  }
}

/* === TRANSFORM SECTION === */
.dm-transform {
  width: 100%;
  position: relative;
  background-color: #0d0300;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  min-height: 60vh;
  padding: 0 64px;
  box-sizing: border-box;
  color: #fff;
  font-family: var(--font-roboto);
}

.dm-transform .container {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
}

.dm-transform .component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  flex-wrap: wrap;
  width: 100%;
}

.dm-transform .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: left;
}

.dm-transform .heading {
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.dm-transform .text {
  font-size: 18px;
  line-height: 1.5;
  color: #f0f0f0;
  margin: 0;
}

.dm-transform .placeholder-image-icon {
  flex: 1;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0; 
}

/* === Responsive layout === */
@media (max-width: 900px) {
  .dm-transform {
    padding: 64px 24px; 
  }

  .dm-transform .component {
    flex-direction: column;
    gap: 40px;
  }

  .dm-transform .content {
    text-align: left;
    align-items: center;
    padding: 0 12px; 
  }

  .dm-transform .placeholder-image-icon {
    width: 100%;
    border-radius: 0; 
    object-fit: cover;
    padding: 0 12px; 
  }
}

/* Section spacing (white page background with roomy margins) */
.dm-cta {
  background: #fff;
  padding: 56px 64px;       
}

/* Framed card */
.dm-cta .cta-frame {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  border: 1px solid rgba(0,0,0,0.65);
  background: #fff;
  box-sizing: border-box;
}

/* Left column (text) */
.dm-cta .cta-copy {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dm-cta .cta-title {
  margin: 0;
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 1.08;
  font-weight: 900;
  color: #111;
}

.dm-cta .cta-desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #222;
  max-width: 56ch;
}

/* ===== GLASS BUTTONS (White Frosted) ===== */

/* 1. This is the base style for both buttons */
.dm-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px; /* Added font size */
  border-radius: 0; /* Square corners */
  border: 1px solid #000; /* Base border */
  transition: all 0.2s ease;
  cursor: pointer;
}

/* 2. This styles the BLACK "Get Started" button */
.dm-cta .btn-glass-dark {
  background-color: #000;
  color: #fff;
}
.dm-cta .btn-glass-dark:hover {
  background-color: #333; /* Darker hover */
  border-color: #333;
}

/* 3. This styles the WHITE "Learn More" button */
.dm-cta .btn-glass-light {
  background-color: #fff;
  color: #000;
  border: 1px solid #000; /* Explicitly set black border */
}
.dm-cta .btn-glass-light:hover {
  background-color: #f5f5f5; /* Light grey hover */
}

/* Responsive stack */
@media (max-width: 960px) {
  .dm-cta { padding: 40px 20px; }
  .dm-cta .cta-frame { grid-template-columns: 1fr; }
  .dm-cta .cta-copy { padding: 28px 20px; }
  .dm-cta .cta-media { height: 260px; order: -1; }
}

/* UI-UX page*/

/* ---------- Layout skeleton ---------- */


.home-desktop {
  /* display: inline-flex; */ /* CHANGED: Replaced inline-flex */
  display: block;
  flex-direction: column;
  align-items: stretch;
  /* position: relative; */ /* CRITICAL: Ensure this line is removed or commented out */
  width: 100%;
}

.home-desktop .navbar,
.home-desktop .container-wrapper,
.home-desktop .layout,
.home-desktop .layout-2,
.home-desktop .layout-3,
.home-desktop .CTA,
.home-desktop .footer {
  width: 100%;
}

.home-desktop .container,
.home-desktop .container-2,
.home-desktop .component-wrapper,
.home-desktop .container-3 {
  width: 100%;
  max-width: var(--spacing-sizing-container-container-large, 1280px);
  margin-inline: auto;
  padding-inline: var(--spacing-sizing-page-padding-padding-global);
}

body {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* ---------- Navbar / Header ---------- */

.navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  z-index: 1000;      
  overflow: visible;  
}

.navbar .header {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-sizing-page-padding-padding-global);
  width: 100%;
  background-color: transparent; 
  overflow: visible;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
}

.navbar .column {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.navbar .company-logo {
  display: inline-block;
  width: 84px;
  height: 36px;
  position: relative;
}

.navbar .logo-wide {
  max-width: 100%;
  height: auto;
  display: block;
}

.navbar .nav-right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.navbar .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}

.navbar .link-text {
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  color: var(--foundation-greylight);
  font-size: var(--text-regular-normal-font-size);
  letter-spacing: var(--text-regular-normal-letter-spacing);
  line-height: var(--text-regular-normal-line-height);
  white-space: nowrap;
  text-decoration: none;
}
.navbar .link-text:hover { text-decoration: underline; }

.navbar .nav-link-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--foundation-greylight);
}

.navbar .chevron-down {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.navbar .chevron-down::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.navbar .nav-dropdown.open .chevron-down {
  transform: rotate(180deg);
}

/* Desktop dropdown wrapper */
.navbar .nav-dropdown {
  position: relative;
}
.navbar .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  min-width: 220px;
  background: var(--foundationgreydarker);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 8px;
  display: none;
  z-index: 60;
}
.navbar .nav-dropdown.open .nav-dropdown-menu { display: block; }

.navbar .dropdown-link {
  display: block;
  padding: 10px 12px;
  color: var(--neutralswhite);
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
  line-height: 1.4;
}
.navbar .dropdown-link:hover { background: rgba(255,255,255,0.08); }

/* --- START: Frosted Glass Header Buttons --- */
.navbar .button,
.navbar .button-wrapper {

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  cursor: pointer;
  text-decoration: none;

  /* Glassmorphism Properties */
  background: rgba(255, 255, 255, 0.1); 
  border-radius: 0px; 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  transition: background 0.2s ease; 
}
.navbar .button:hover,
.navbar .button-wrapper:hover {
  background: rgba(255, 255, 255, 0.2); 
}



.navbar .text-wrapper,
.navbar .button-2 {
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  font-size: var(--text-regular-normal-font-size);
  line-height: var(--text-regular-normal-line-height);
  letter-spacing: var(--text-regular-normal-letter-spacing);
}
.navbar .text-wrapper { color: var(--neutralswhite); }
.navbar .button-2 { color: var(--neutralswhite); } 

/* NEW SVG Hamburger  */
.navbar .nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.navbar .nav-toggle svg {
  width: 28px;
  height: 28px;
}

.navbar .line {
  fill: none;
  stroke: white; /* Explicitly set to white */
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.navbar .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.navbar .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.navbar .nav-toggle.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.navbar .nav-toggle.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.navbar .nav-toggle.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
/* === /END SVG Hamburger === */


/* Drawer + overlay (mobile) */
.navbar .nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999;
}

.navbar .nav-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(84vw, 380px);
  background: var(--foundationgreydarker);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -8px 0 24px rgba(0,0,0,0.35);
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 1000;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.navbar .nav-drawer.open { transform: translateX(0); }

.navbar .drawer-close {
  align-self: flex-end;
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--neutralswhite);
  cursor: pointer;
}

.navbar .drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.navbar .drawer-link { /* Style for non-dropdown links */
  color: var(--neutralswhite);
  text-decoration: none;
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 8px;
  border-radius: 6px;
}
.navbar .drawer-link:hover { background: rgba(255,255,255,0.08); }

.navbar .drawer-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.navbar .block { width: 100%; }

/* === Drawer Dropdown Styles === */
.navbar .drawer-dropdown {
  position: relative;
}

.navbar .drawer-dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 8px;
  text-align: left;
  cursor: pointer;
  color: var(--neutralswhite);
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
  line-height: 1.5;
  border-radius: 6px;
}
.navbar .drawer-dropdown-toggle:hover {
   background: rgba(255,255,255,0.08);
}
/* Explicit style for the text inside the toggle button */
.navbar .drawer-link-text {
  /* Inherits color, font etc from parent button */
  flex-grow: 1; /* Allow text to take up space */
}


.navbar .drawer-chevron {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  margin-left: 8px;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

.navbar .drawer-chevron::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.navbar .drawer-dropdown.open .drawer-chevron {
  transform: rotate(180deg);
}

.navbar .drawer-dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 4px;
  display: none;
}

.navbar .drawer-dropdown.open .drawer-dropdown-menu {
  display: block;
}

/* Style for sublinks within the drawer dropdown */
.navbar .drawer-sublink {
  display: block;
  color: var(--neutralswhite);
  text-decoration: none;
  font-family: var(--text-regular-normal-font-family);
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 8px; /* Base padding */
  border-radius: 6px;
  padding-left: 28px; /* Indent sublinks */
}
.navbar .drawer-sublink:hover {
  background: rgba(255,255,255,0.08);
}
/* === /End Drawer Dropdown Styles === */

/* ---------- Hero ---------- */
.home-desktop .container-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(720px, 70vh, 900px);

  /* Updated background to include image + tint */
  background-image:
    linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.7) 100%),
    url('image/team.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home-desktop .column-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}
.home-desktop .column-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--spacing-sizing-max-width-max-width-large, 768px);
}

.home-desktop .content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  align-items: center;
}

.home-desktop .medium-length-hero {
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--heading-h1-font-family);
  font-weight: var(--heading-h1-font-weight);
  color: var(--primitives-color-white, #fff);
  font-size: clamp(28px, 6vw, var(--heading-h1-font-size, 56px));
  text-align: center;
  letter-spacing: var(--heading-h1-letter-spacing);
  line-height: var(--heading-h1-line-height);
}

.home-desktop .lorem-ipsum-dolor {
  align-self: stretch;
  font-family: var(--text-medium-normal-font-family);
  font-weight: var(--text-medium-normal-font-weight);
  color: var(--primitives-color-white, #fff);
  font-size: clamp(14px, 2.2vw, 18px);
  text-align: center;
  line-height: var(--text-medium-normal-line-height);
}

.home-desktop .actions { display: inline-flex; align-items: center; gap: 16px; }

/* --- START: Modified Hero Buttons for Glass Effect --- */
.home-desktop .div-wrapper,
.home-desktop .button-4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  text-decoration: none;
  cursor: pointer;

  /* Glassmorphism Properties */
  background: rgba(255, 255, 255, 0.1); /* Frosted background */
  border-radius: 0px; /* SHARP corners */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Softer semi-transparent border */
  backdrop-filter: blur(10px); /* Stronger blur */
  -webkit-backdrop-filter: blur(10px); /* Safari fallback */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle drop shadow for lift */
  transition: background 0.2s ease; /* Smooth hover transition */
}

.home-desktop .div-wrapper:hover,
.home-desktop .button-4:hover {
  background: rgba(255, 255, 255, 0.2); /* Lighten on hover */
}
/* --- END: Modified Hero Buttons --- */

.home-desktop .button-3,
.home-desktop .button-5 {
  font-family: var(--text-regular-normal-font-family);
  font-weight: var(--text-regular-normal-font-weight);
  font-size: var(--text-regular-normal-font-size);
  line-height: var(--text-regular-normal-line-height);
}
.home-desktop .button-3 { color: var(--foundation-blueblue-50); }
.home-desktop .button-5 { color: var(--primitives-color-white, #fff); }

/* ---------- Services ---------- */

#services .section-title .text {
  line-height: 1.5; 
  letter-spacing: 0.01em; 
}

/* Each card’s heading and paragraph */
#services .heading-2 {
  line-height: 1.25; 
  letter-spacing: 0.005em;   
  margin-bottom: 4px;
}

#services .p {
  line-height: 1;
  letter-spacing: 0.01em;
}


#services .column-4 {
  gap: 40px;
}

/* Center the whole section content */
#services .container-2 {
  display: flex;
  flex-direction: column;
  align-items: center;          
  gap: 80px;
  width: 100%;
  max-width: var(--spacing-sizing-container-container-large, 1280px);
  margin-inline: auto;
}

/* Title block stays centered and readable */
#services .section-title {
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#services .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 5vw, 48px);
  width: 100%;
  align-items: start;
  justify-items: center;
  margin-inline: auto;
}

/* Each card is centered and constrained for comfortable reading */
#services .column-4 {
  width: 100%;
  max-width: 380px;             /* prevents extra-wide lines on huge screens */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 8px;
}

/* Icon sizing stays consistent */
#services .img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Typographic scaling for headings and text inside the cards */
#services .heading-2 {
  font-size: clamp(18px, 2.4vw, 28px);
}
#services .p {
  font-size: clamp(14px, 2vw, 16px);
  max-width: 60ch;
  margin: 0;
}

/* Optional: tighten vertical rhythm on smaller screens */
@media (max-width: 768px) {
  #services .container-2 { gap: 64px; }
  #services .row-wrapper { gap: 48px; }
}

.home-desktop .layout {
  background-color: var(--foundationgreydarker);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 1px 0 0 rgba(255,255,255,0.32),
    inset 0 -1px 1px rgba(0,0,0,0.13),
    inset -1px 0 1px rgba(0,0,0,0.11);
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: var(--spacing-sizing-section-padding-padding-section-large, 112px);
}

.home-desktop .container-2 { display: flex; flex-direction: column; gap: 80px; width: 100%; }
.home-desktop .section-title { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 768px; align-items: center; margin-inline: auto; }
.home-desktop .tagline { color: var(--foundation-greylight); font-family: var(--heading-tagline-font-family); }
.home-desktop .heading { color: var(--foundation-greylight); font-family: var(--heading-h2-font-family); font-weight: var(--heading-h2-font-weight); font-size: clamp(22px, 4.5vw, 48px); }
.home-desktop .text { color: var(--foundation-greylight); font-family: var(--text-medium-normal-font-family); font-size: clamp(14px, 2.2vw, 18px); }
.home-desktop .row-wrapper { display: flex; flex-direction: column; gap: 64px; width: 100%; }
.home-desktop .row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; }
.home-desktop .column-4 { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; padding: 8px; }
.home-desktop .img { width: 48px; height: 48px; }
.home-desktop .heading-2 { color: var(--foundation-greylight); font-family: var(--heading-h4-font-family); font-size: clamp(18px, 3.2vw, 32px); }
.home-desktop .p { color: var(--foundation-greylight); font-family: var(--text-regular-normal-font-family); font-size: clamp(14px, 2.1vw, 16px); }

.home-desktop .container-wrapper {
  margin-bottom: 0;
  border-bottom: none;
  box-shadow: none;
  background-color: transparent;
}

.home-desktop .layout {
  margin-top: 0;
  border-top: none;
  box-shadow: none;
}

.home-desktop .container-wrapper {
  position: relative;
}
.home-desktop .container-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: transparent;
}

.home-desktop .layout {
  margin-top: -0px;
}


/* ---------- Metrics ---------- */

.home-desktop .layout-2 { background-color: var(--dodger-bluedarkest); display: flex; flex-direction: column; gap: 80px; padding-block: var(--spacing-sizing-section-padding-padding-section-large, 112px); }
.home-desktop .component-wrapper { display: flex; flex-direction: column; gap: 80px; }
.home-desktop .component { display: flex; align-items: center; gap: 80px; width: 100%; }
.home-desktop .placeholder-image { flex: 1; aspect-ratio: 0.94; object-fit: cover; max-width: 100%; height: auto; }
.home-desktop .content-wrapper { display: flex; flex-direction: column; gap: 32px; flex: 1; }
.home-desktop .div-2 { display: flex; flex-direction: column; gap: 32px; }
.home-desktop .div-3 { display: flex; flex-direction: column; gap: 16px; }
.home-desktop .tagline-2 { color: var(--neutralswhite); font-family: var(--heading-tagline-font-family); }
.home-desktop .content-2 { display: flex; flex-direction: column; gap: 24px; }
.home-desktop .text-wrapper-2 { color: var(--neutralswhite); font-family: var(--heading-h2-font-family); font-size: clamp(22px, 4.5vw, 48px); }
.home-desktop .text-2 { color: var(--neutralswhite); font-family: var(--text-medium-normal-font-family); font-size: clamp(14px, 2.2vw, 18px); }
.home-desktop .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; padding-block: 8px; }
.home-desktop .list-item { display: flex; flex-direction: column; gap: 8px; }
.home-desktop .text-wrapper-3 { color: var(--neutralswhite); font-family: var(--text-regular-normal-font-family); font-size: clamp(14px, 2.1vw, 16px); }

/* ---------- Innovation ---------- */

.home-desktop .layout-3 { background-color: var(--neutralswhite); display: flex; flex-direction: column; gap: 80px; padding-block: var(--spacing-sizing-section-padding-padding-section-large, 112px); }
.home-desktop .tagline-3 { color: var(--color-schemes-color-scheme-1-text, #000); font-family: var(--heading-tagline-font-family); }
.home-desktop .heading-3 { color: var(--color-schemes-color-scheme-1-text, #000); font-family: var(--heading-h2-font-family); font-size: clamp(22px, 4.5vw, 48px); }
.home-desktop .text-3, .home-desktop .text-4 { color: var(--color-schemes-color-scheme-1-text, #000); font-family: var(--text-medium-normal-font-family); font-size: clamp(14px, 2.2vw, 18px); }
.home-desktop .div-4 { display: flex; flex-direction: column; gap: 16px; }
.home-desktop .text-wrapper-4 { color: var(--color-schemes-color-scheme-1-text, #000); font-family: var(--heading-h6-font-family); }

/* ---------- CTA ---------- */

/* ---------- CTA (Section) ---------- */
.home-desktop .CTA {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 80px;
  padding-block: var(--spacing-sizing-section-padding-padding-section-large, 112px);
  padding-inline: var(--spacing-sizing-page-padding-padding-global, 64px);

  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%),
    url('image/cta.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: var(--primitives-color-white, #fff);
  text-align: left;
  overflow: hidden;
}

.home-desktop .column-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 768px;
  text-align: left;
}

.home-desktop .heading-4 {
  color: var(--primitives-color-white, #fff);
  font-family: var(--heading-h2-font-family);
  font-size: clamp(22px, 4.5vw, 48px);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.home-desktop .text-5 {
  color: var(--primitives-color-white, #fff);
  font-family: var(--text-medium-normal-font-family);
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  max-width: 60ch;
  margin: 0;
}

/* ---------- CTA actions row ---------- */
.home-desktop .CTA .actions {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left aligned */
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Glassmorphism Buttons (Sharp Corners, Equal Height) ---------- */
.home-desktop .button-6,
.home-desktop .button-8 {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;             /* identical padding */
  min-height: 48px;               /* ✅ same height for both buttons */
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;

  /* Shared Glassmorphism Look */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
  border-radius: 0;               /* ✅ sharp corners */
  transition: all 0.25s ease-in-out;
}

/* Hover effect for both */
.home-desktop .button-6:hover,
.home-desktop .button-8:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 255, 255, 0.15);
}

/* Book Button (Primary emphasis) */
.home-desktop .button-6 {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Text inside both buttons */
.home-desktop .button-7,
.home-desktop .button-5 {
  font-family: var(--text-regular-normal-font-family);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .home-desktop .CTA {
    padding-block: 80px;
    gap: 64px;
    padding-inline: 20px;
  }
}


/* ---------- Footer ---------- */

/* ---------- Footer (responsive + glass) ---------- */
.home-desktop .footer {
  background-color: var(--dodger-bluedarkest);
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: var(--spacing-sizing-section-padding-padding-section-medium, 80px);
}

/* Glass card container */
.home-desktop .card {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* newsletter | links */
  gap: 48px;
  width: 100%;
  padding: 32px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 0; /* sharp edges */
}

/* Left column (newsletter) */
.home-desktop .newsletter {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(520px, 100%);
}

/* Disclaimer text — force white */
.home-desktop .text-wrapper-5 {
  color: #fff;            /* ✅ white */
  opacity: 0.9;           /* optional softness */
  line-height: 1.6;
}

/* Ensure links in disclaimer are white */
.home-desktop .newsletter a {
  color: #fff;
  text-decoration: underline;
}
.home-desktop .newsletter a:hover { opacity: 0.8; }

/* Form + inputs + glass subscribe button */
.home-desktop .actions-2 { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.home-desktop .form {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  flex-wrap: nowrap;
}

.home-desktop .text-input {
  flex: 1;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
  color: var(--neutralswhite);
}
.home-desktop .text-input::placeholder { color: var(--neutralswhite); opacity: .7; }
.home-desktop .text-input:focus { outline: 2px solid var(--neutralswhite); outline-offset: 2px; }

/* Glassmorphism Subscribe button (sharp, equal height) */
.home-desktop .button-9 {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  min-height: 48px;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--neutralswhite);
  box-shadow: 0 4px 10px rgba(255,255,255,0.10);
  border-radius: 0;
  transition: all .25s ease-in-out;
}
.home-desktop .button-9:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255,255,255,0.15);
}

/* Right column (links grid) */
.home-desktop .links {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
  gap: 28px 32px;
}
.home-desktop .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.home-desktop .text-wrapper-6 { color: var(--neutralswhite); font-family: var(--text-regular-semi-bold-font-family); }
.home-desktop .text-wrapper-7 { color: var(--neutralswhite); text-decoration: none; font-family: var(--text-small-normal-font-family); }
.home-desktop .text-wrapper-7:hover { text-decoration: underline; }
.home-desktop .social-links { width: 100%; height: auto; display: block; }

/* Bottom row */
.home-desktop .row-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}
.home-desktop .footer-links-2 { display: inline-flex; gap: 24px; }
.home-desktop .text-wrapper-8 { color: var(--neutralswhite); font-family: var(--text-small-normal-font-family); white-space: nowrap; }
.home-desktop .text-wrapper-9 { color: var(--neutralswhite); text-decoration: underline; cursor: pointer; }

/* Footer responsiveness */
@media (max-width: 1024px) {
  .home-desktop .card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px;
  }
  .home-desktop .links {
    grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) );
  }
}
@media (max-width: 768px) {
  .home-desktop .form { flex-wrap: wrap; }
  .home-desktop .text-input { width: 100%; }
  .home-desktop .button-9 { width: 100%; }

  .home-desktop .row-3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Follow us list layout */
.home-desktop .social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

/* One row: icon + label */
.home-desktop .social-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--neutralswhite);
  font-family: var(--text-small-normal-font-family);
  line-height: 1.4;
  transition: opacity .2s ease, transform .2s ease;
}

.home-desktop .social-item:hover {
  opacity: 0.85;
  transform: translateX(2px);
}

/* Glassy circular icon */
.home-desktop .social-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border-radius: 50%;
  color: var(--neutralswhite);
  flex-shrink: 0;
}

/* Label text */
.home-desktop .social-label {
  color: var(--neutralswhite);
  font-size: 14px;
}

/* Keep column title spacing consistent with others */
.home-desktop .div-4 > .text-wrapper-6 {
  margin-bottom: 8px;
}

/* Footer card: 4 columns on desktop (Newsletter | Col1 | Col2 | Follow) */
.home-desktop .card {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; /* proportions like the mock */
  column-gap: 64px;                         /* space between columns */
  row-gap: 32px;
  width: 100%;
  padding: 32px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 0;
  align-items: start;                        /* top-align content */
}

/* Make the newsletter (left) span only the first column */
.home-desktop .newsletter { grid-column: 1 / 2; }

/* The three “links” columns live in columns 2–4 */
.home-desktop .links {
  display: contents; /* let each .div-4 sit in its grid column */
}

/* Column headings spacing like mock */
.home-desktop .div-4 > .text-wrapper-6 { margin: 0 0 12px 0; }

/* Standard footer link list */
.home-desktop .footer-links { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

/* Follow us list (tighter like screenshot) */
.home-desktop .social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;             /* tighter vertical gap */
}

/* Social row: icon + label */
.home-desktop .social-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;              /* tighter icon-text gap */
  text-decoration: none;
  color: var(--neutralswhite);
  font-family: var(--text-small-normal-font-family);
  font-size: 14px;
  line-height: 1.4;
  transition: opacity .2s ease, transform .2s ease;
}
.home-desktop .social-item:hover { opacity: .85; transform: translateX(2px); }

/* Glassy circular icon (compact) */
.home-desktop .social-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  color: var(--neutralswhite);
  flex-shrink: 0;
}

/* Keep “Follow us” label from wrapping */
.home-desktop .social-label { white-space: nowrap; }

/* Tablet: stack into two rows (Newsletter spans full width, then 3 columns) */
@media (max-width: 1024px) {
  .home-desktop .card {
    grid-template-columns: 1fr 1fr; /* 2 columns */
    column-gap: 40px;
  }
  .home-desktop .newsletter { grid-column: 1 / -1; } /* newsletter full width */
}

/* Mobile: single column stack */
@media (max-width: 768px) {
  .home-desktop .card {
    grid-template-columns: 1fr;
    row-gap: 24px;
    column-gap: 0;
    padding: 24px;
  }
}




/* ---------- Focus visibility ---------- */
.home-desktop a:focus-visible,
.home-desktop button:focus-visible,
.home-desktop input:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* ---------- Breakpoints ---------- */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --spacing-sizing-page-padding-padding-global: 32px;
    --spacing-sizing-section-padding-padding-section-large: 88px;
    --spacing-sizing-section-padding-padding-section-medium: 64px;
  }
  .navbar .nav-right { gap: 12px; }
  .home-desktop .component { flex-direction: column; gap: 32px; }
  .home-desktop .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .home-desktop .card { gap: 48px; padding: 32px; }
}

/* Mobile header toggle */
@media (max-width: 860px) {
  .navbar .nav-links,
  .navbar .nav-cta { display: none; }
  .navbar .nav-toggle { display: inline-flex; }
}

/* Mobile layout */
@media (max-width: 768px) {
  :root {
    --spacing-sizing-page-padding-padding-global: 20px;
    --spacing-sizing-section-padding-padding-section-large: 64px;
    --spacing-sizing-section-padding-padding-section-medium: 48px;
  }

  /* --- START: Modified styles for mobile hero (CENTERED) --- */
  .home-desktop .medium-length-hero {
    font-size: 40px; /* Keep mobile font size */
  }
  .home-desktop .column-3 {
    gap: 24px; /* Keep mobile gap */
    align-items: center; /* RE-CENTER: Align hero content to center */
    text-align: center;  /* RE-CENTER: Align hero text to center */
  }
  .home-desktop .column-3 .content {
    gap: 20px; /* Keep mobile gap */
    align-items: center; /* RE-CENTER: Align hero text block to center */
  }
  .home-desktop .column-5 { /* This rule is for the CTA section, not hero */
    align-items: stretch;
    text-align: left;
  }
  /* --- END: Modified styles --- */

  .home-desktop .row { grid-template-columns: 1fr; gap: 24px; }
  .home-desktop .card { flex-direction: column; gap: 32px; padding: 24px; }
  .home-desktop .links { flex-direction: column; gap: 24px; }
  .home-desktop .row-3 { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Original .column-3, .column-5 rule is now handled above */
}

/* Small phones */
@media (max-width: 480px) {
  .home-desktop .actions,
  .home-desktop .CTA .actions { gap: 12px; }
}

/* ===== Services Hero ===== */
.services-hero {
  /* sizing */
  min-height: clamp(360px, 40vh, 520px);
  display: flex;
  align-items: center;

  /* spacing matches your site rhythm */
  padding-block: clamp(72px, 10vw, 112px);
  padding-inline: var(--spacing-sizing-page-padding-padding-global, 64px);

  /* background image + dark overlay (change path if needed) */
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%),
    url("image/services_hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff; /* make all text white by default */
}

.services-hero .container {
  max-width: 1280px;
  margin: 0 auto;
}

.services-hero .component {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  text-align: left;          /* desktop/tablet: left */
}

.services-hero .our-core-services {
  margin: 0;
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.2;
  font-weight: 800;     /* bold on desktop too */
  letter-spacing: -0.01em;
  color: #fff;               /* ensure white */
}

.services-hero .explore-how-splexx {
  margin: 0;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
  font-weight: 400;
  color: #fff;               /* ensure white */
  max-width: 65ch;
}

@media (min-width: 1600px) {
  .services-hero { background-position: center top; }
}

/* Mobile: center the text */
@media (max-width: 768px) {
  .services-hero .component {
    align-items: center;
    text-align: center;
  }
  .services-hero .our-core-services {
    font-weight: 900;      /* stronger than paragraph */
  }
  .services-hero .explore-how-splexx {
    font-weight: 400;
  }
}

/* Section wrapper */
.layout-369 {
  width: 100%;
  background: #fff;
  padding-block: 112px;
  padding-inline: 64px;
  box-sizing: border-box;
  color: #0d0300;
  font-family: var(--font-roboto);
}

.layout-369 .container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: stretch;            /* left-align the grid under the centered title */
}

/* Title block (centered) */
.layout-369 .section-title {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; gap: 16px;
}
.layout-369 .tagline { font-weight: 600; line-height: 1.5; }
.layout-369 .content { display: flex; flex-direction: column; gap: 24px; }
.layout-369 .heading { margin: 0; font-size: clamp(24px, 4.5vw, 48px); line-height: 1.2; }
.layout-369 .text { margin: 0; font-size: clamp(14px, 2.2vw, 18px); line-height: 1.6; }

/* Grid */
.layout-369 .component { color: #000; }
.layout-369 .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

/* === Center align the tagline inside layout-369 section === */
.layout-369 .tagline-wrapper {
  display: flex;
  justify-content: center;   /* centers the tagline horizontally */
  align-items: center;       /* optional: vertically center if wrapper grows */
  width: 100%;               /* ensures full row width for centering */
  text-align: center;
  margin-bottom: 8px;        /* small spacing below the tagline */
}

.layout-369 .tagline {
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;               /* make sure it’s visible on white background */
  text-align: center;
}


/* Base card look (shared) */
.card,
.layout-369-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover,
.layout-369-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Images */
.image-icon,
.layout-369-image-icon {
  width: 100%;
  aspect-ratio: 16/9;       /* consistent height across cards */
  object-fit: cover;
  display: block;
}

/* Content areas */
.layout-369-content,
.content3 {
  display: flex; flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.content-top { display: flex; flex-direction: column; gap: 8px; }
.content2 { display: flex; flex-direction: column; gap: 8px; }

.layout-369-heading { margin: 0; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.4; }
.layout-369-text { margin: 0; font-size: 16px; line-height: 1.5; color: #222; }

/* CTA link-as-button */
.actions { display: flex; align-items: center; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; cursor: pointer;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 6px;
  color: #111;
  transition: background .18s ease, border-color .18s ease;
}
.button:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.24); }
.layout-369-button { line-height: 1.5; font-weight: 500; }
.chevron-right-icon { width: 20px; height: 20px; }

/* Optional: first card side-by-side on very wide screens */
@media (min-width: 1100px) {
  .card {
    flex-direction: row;              /* image left, content right */
  }
  .card .image-icon {
    width: 42%;
    min-width: 320px;
    aspect-ratio: auto;
    height: 100%;
  }
  .card .layout-369-content { flex: 1; }
}

/* Responsive paddings */
@media (max-width: 1024px) {
  .layout-369 { padding-inline: 32px; padding-block: 88px; }
}
@media (max-width: 768px) {
  .layout-369 { padding-inline: 20px; padding-block: 64px; }
  .card { flex-direction: column; }   /* stack image above content */
}

/* Ensure black text inside the services grid */
.layout-369 h2,
.layout-369 h3,
.layout-369 .text,
.layout-369 .layout-369-text,
.layout-369 .tagline { color: #000; }
.layout-369 .heading,
.layout-369 .text,
.layout-369 .tagline,
.layout-369 .layout-369-heading,
.layout-369 .layout-369-text {
  color: #000 !important;
}

/* --- Glassmorphism base for all service cards --- */
.card--glass,
.card.card--glass,
.layout-369-card.card--glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: #000;
}

/* Keep headings/paragraphs black on the frosted background */
.card--glass h3,
.card--glass p,
.card--glass .tagline,
.card--glass .layout-369-text,
.card--glass .layout-369-heading { color: #000; }

/* --- Glass button --- */
.button--glass {
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}


/* === Remove rounded corners on cards and buttons === */
.card,
.layout-369-card,
.card--glass,
.button,
.button--glass {
  border-radius: 0 !important;
}

/* === FEATURE CARD (Card 1) — match the reference === */
.layout-369 .row > .card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;   /* text | image */
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  background: #fff;
  border-radius: 0;                    /* square edges */
}

/* Put the image on the RIGHT even if it appears first in the HTML */
.layout-369 .row > .card .image-icon { order: 2; }
.layout-369 .row > .card .layout-369-content { order: 1; }

/* Image fills the entire right column */
.layout-369 .row > .card .image-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Tidy text block */
.layout-369 .row > .card .layout-369-content {
  padding: 32px 40px;
  max-width: 560px;                    /* keeps lines comfortable */
  display: flex;
  flex-direction: column;
  justify-content: center;              /* vertical align center */
  gap: 20px;
}

/* Typography rhythm */
.layout-369 .row > .card .tagline { font-weight: 700; font-size: 14px; line-height: 1.5; }
.layout-369 .row > .card .layout-369-heading { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; margin: 0; }
.layout-369 .row > .card .layout-369-text { font-size: 16px; line-height: 1.6; color: #222; margin: 0; }

/* Button: square, outlined */
.layout-369 .row > .card .actions { margin-top: 8px; }
.layout-369 .row > .card .button {
  border-radius: 0;
  padding: 12px 18px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  color: #111;
}
.layout-369 .row > .card .button:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.28); }
.layout-369 .row > .card .chevron-right-icon { width: 18px; height: 18px; }

/* Keep other cards as standard stacked cards */
.layout-369 .row > .layout-369-card { display: flex; }

/* Mobile: stack neatly */
@media (max-width: 900px) {
  .layout-369 .row > .card { grid-template-columns: 1fr; }
  .layout-369 .row > .card .image-icon { order: 2; height: 220px; }
  .layout-369 .row > .card .layout-369-content { padding: 24px 20px; justify-content: flex-start; }
}

.layout-369-card {
  flex: 1;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 0; /* square corners */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.layout-369-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.layout-369-image-icon {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.content3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  gap: 24px;
  color: #000;
}

.layout-369-heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.layout-369-text {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #222;
}

.actions {
  display: flex;
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,0.16);
  text-decoration: none;
  color: #111;
  border-radius: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.button:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.24);
}

.chevron-right-icon {
  width: 20px;
  height: 20px;
}
/* === Make all cards equal height in the grid === */
.layout-369 .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: stretch;          /* stretch all items to same row height */
  grid-auto-rows: 1fr;           /* every row cell has equal height */
}
.layout-369 .row > * { height: 100%; }  /* cards fill the grid cell height */

/* === Base card (keep square edges) === */
.layout-369-card,
.card {
  display: flex;
  flex-direction: column;
  border-radius: 0 !important;   /* no curves */
  height: 100%;
}

/* Card image keeps consistent height and covers */
.layout-369-image-icon,
.image-icon {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* === Glassmorphism for ALL service cards === */
.glass {
  background: rgba(255, 255, 255, 0.08);   /* frosted tint */
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: #000;
  border-radius: 0 !important;            /* square corners */
}

/* Ensure text on glass is black */
.glass h3,
.glass p,
.glass .tagline,
.glass .layout-369-text,
.glass .layout-369-heading { color: #000; }

/* Keep existing button shape square even if other rules try to round it */
.button { border-radius: 0 !important; }


/* === Equal height grid === */
.layout-369 .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.layout-369 .row > * {
  height: 100%;
}

/* === Card (shared) === */
.layout-369-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 0 !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  color: #000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.layout-369-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.12);
}

/* === Card image === */
.layout-369-image-icon {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* === Content area === */
.content3 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  justify-content: center;
}
.layout-369-heading {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}
.layout-369-text {
  font-size: 16px;
  color: #222;
  margin: 0;
  line-height: 1.6;
}

/* === Glass button === */
.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111;
  text-decoration: none;
  border-radius: 0 !important;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.chevron-right-icon {
  width: 20px;
  height: 20px;
}

/* === Responsive padding === */
@media (max-width: 1024px) {
  .layout-369 { padding-inline: 32px; padding-block: 88px; }
}
@media (max-width: 768px) {
  .layout-369 { padding-inline: 20px; padding-block: 64px; }
}


/* Digital Marketing page*/
.dm-page { font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

      /* --- HERO --- */
.dm-hero {
        width: 100%;
        position: relative;
        background-color: #0d0300; 
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 180px 64px;
        box-sizing: border-box;
        text-align: left;
        font-size: 56px;
        color: #fff;
        font-family: Roboto, sans-serif;
}

      .dm-hero .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 1280px;
      }

      .dm-hero .component {
        align-self: stretch;
        display: flex;
        align-items: flex-start;
        gap: 80px;
        flex-wrap: wrap;
      }

      .dm-hero .column {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .dm-hero .elevate-your-brand {
        align-self: stretch;
        position: relative;
        line-height: 120%;
        font-weight: 700;
      }

      .dm-hero-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 18px;
      }

      .dm-hero .at-splexx-we {
        align-self: stretch;
        position: relative;
        line-height: 150%;
      }

      @media (max-width: 768px) {
        .dm-hero {
          padding: 64px 24px;
          font-size: 40px;
          text-align: center;
        }
        .dm-hero .component {
          flex-direction: column;
          gap: 40px;
        }
        .dm-hero .column,
        .dm-hero-column {
          align-items: center;
          text-align: center;
        }
      }
      

      /* --- transform section --- */
      .layout-1 {
        width: 100%;
        position: relative;
        background-color: #11284c;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 112px 64px;
        box-sizing: border-box;
        text-align: left;
        font-size: var(--fs-16);
        color: var(--color-white);
        font-family: var(--font-roboto);
      }

      .layout-1 .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 1280px;
      }

      .layout-1 .component {
        align-self: stretch;
        display: flex;
        align-items: center;
        gap: 80px;
        flex-wrap: wrap;
        min-height: 640px;
      }

      .content-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
      }

      .section-title {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 16px;
      }

      .tagline-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
      }

      .tagline {
        position: relative;
        line-height: 150%;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #fff;
        text-align: left;
      }

      .content {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-24);
        font-size: 48px;
      }

      .heading {
        align-self: stretch;
        position: relative;
        line-height: 120%;
        font-weight: 700;
      }

      .text {
        align-self: stretch;
        position: relative;
        font-size: 18px;
        line-height: 150%;
        color: #f5f5f5;
      }

/* ===== Glass Buttons ===== */
.actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.button,
.button2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.button:hover,
.button2:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.button2 {
  gap: 8px;
}

/* ===== Glass SVG Icon ===== */
.chevron-right-icon {
  width: 24px;
  height: 24px;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.button-glass:hover .chevron-right-icon {
  opacity: 1;
  transform: translateX(3px);
}

.placeholder-image-icon {
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .layout-1 {
    padding: 88px 32px;
  }

  .layout-1 .component {
    flex-direction: column;
    gap: 48px;
    min-height: auto;
  }

  .content {
    font-size: 36px;
  }

  .text {
    font-size: 16px;
  }

  .actions {
    justify-content: center;
  }
}

/* ===== DM Solutions Section ===== */
.dm-solutions {
  width: 100%;
  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto);
}

.dm-solutions .container {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.dm-solutions .heading {
  max-width: 768px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #000;
}

.dm-solutions .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.dm-solutions .row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: center;
}

/* ===== List Item (Card) ===== */
.dm-solutions .list-item {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 32px;
  transition: all 0.3s ease;
}

.dm-solutions .list-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* ===== Card Inner Content ===== */
.dm-solutions-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.strategy-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.dm-solutions-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}

.dm-solutions .text {
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}


/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .dm-solutions {
    padding: 88px 32px;
  }

  .dm-solutions .heading {
    font-size: 32px;
  }

  .dm-solutions .list-item {
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  .dm-solutions {
    padding: 64px 20px;
  }

  .dm-solutions .heading {
    font-size: 28px;
    text-align: center;
  }

  .dm-solutions .row {
    flex-direction: column;
    align-items: center;
  }

  .dm-solutions .list-item {
    text-align: center;
  }

  .dm-solutions-heading {
    font-size: 20px;
  }
}

/* ===== DM Process Section ===== */
.dm-process {
  width: 100%;
  position: relative;
  background: #ebf3ff; 
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 112px 64px;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-roboto);
  color: #000;
}

/* Container */
.dm-process .container {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* Section Title */
.dm-process .section-title {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 16px;
}

.dm-process .tagline-wrapper {
  display: flex;
  justify-content: center;  
  width: 100%;
}

.dm-process .tagline {
  font-weight: 600;
  font-size: 16px;
  color: #000; 
  text-align: center;
}

.dm-process .content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 48px;
  text-align: center;
  align-items: center;
}

.dm-process .heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #000;
  text-align: center;
}

.dm-process .text {
  font-size: 18px;
  line-height: 1.6;
  color: #000;
  margin: 0;
}

/*  Steps Grid  */
.dm-process-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dm-process .row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 48px;
  flex-wrap: wrap;
}

.dm-process .column {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 32px;
  gap: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dm-process .column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Step Images */
.dm-process .placeholder-image-icon {
  width: 100%;
  max-width: 400px;
  height: 220px;
  object-fit: cover;
  border-radius: 0;
}

/* Step Content */
.dm-process .content2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.dm-process-heading {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.dm-process-text {
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .dm-process {
    padding: 88px 32px;
  }
  .dm-process .heading {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .dm-process {
    padding: 64px 20px;
  }
  .dm-process .heading {
    font-size: 28px;
  }
  .dm-process .text {
    font-size: 16px;
  }
  .dm-process .row {
    flex-direction: column;
    gap: 32px;
  }
  .dm-process .column {
    text-align: center;
  }
}

/* === TRANSFORM SECTION === */
.dm-transform {
  width: 100%;
  position: relative;
  background-color: #0d0300;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  min-height: 60vh;
  padding: 0 64px;
  box-sizing: border-box;
  color: #fff;
  font-family: var(--font-roboto);
}

.dm-transform .container {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
}

.dm-transform .component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  flex-wrap: wrap;
  width: 100%;
}

.dm-transform .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: left;
}

.dm-transform .heading {
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.dm-transform .text {
  font-size: 18px;
  line-height: 1.5;
  color: #f0f0f0;
  margin: 0;
}

.dm-transform .placeholder-image-icon {
  flex: 1;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0; 
}

/* === Responsive layout === */
@media (max-width: 900px) {
  .dm-transform {
    padding: 64px 24px; 
  }

  .dm-transform .component {
    flex-direction: column;
    gap: 40px;
  }

  .dm-transform .content {
    text-align: left;
    align-items: center;
    padding: 0 12px; 
  }

  .dm-transform .placeholder-image-icon {
    width: 100%;
    border-radius: 0; 
    object-fit: cover;
    padding: 0 12px; 
  }
}

/* Section spacing (white page background with roomy margins) */
/* ===== CTA Section (layout 39) ===== */

/* =========================
   Digital Marketing CTA
   ========================= */

/* ===== CTA layout ===== */
.dm-cta {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  color: #000000;
}

.dm-cta__container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

.dm-cta__card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); /* text | image */
  border: 1px solid #000000;
  background-color: #ffffff;
  overflow: hidden;
}

.dm-cta__col {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

.dm-cta__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dm-cta__heading {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 800;
}

.dm-cta__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.dm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ===== Glass button overrides for THIS CTA (light background) ===== */
.dm-cta .glass-btn {
  --pad-y: 12px;
  --pad-x: 24px;
  --blur: 14px;

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

  padding: var(--pad-y) var(--pad-x);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;

  color: #111 !important;                         /* dark text */
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));

  transition: 0.25s ease;
}

.dm-cta .glass-btn:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* "Ghost" version for Learn More */
.dm-cta__btn--ghost {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}
.dm-cta__btn--ghost:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Right image */
.dm-cta__media {
  margin: 0;
  height: 100%;
}

.dm-cta__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .dm-cta {
    padding: 64px 24px;
  }

  .dm-cta__card {
    grid-template-columns: 1fr;
  }

  .dm-cta__col {
    padding: 32px 24px;
  }
}




/* UI-UX page*/

/* === UI/UX Hero (flush-left baseline, no images) === */
.uiux-hero {
  width: 100%;
  position: relative;
  background-color: #0d0300;
  color: #fff;
  overflow: hidden;

  display: flex;
  align-items: center;         
  justify-content: flex-start; 
  min-height: 50vh;

  padding: 80px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif);
}

.uiux-hero .container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.uiux-hero .component {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   
  justify-content: center;
  gap: 24px;
  max-width: 768px;         
  text-align: left;
}

.uiux-hero .section-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;  
}

.uiux-hero .heading {
  margin: 0;
  padding: 0;
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
}

.uiux-hero .subtext {
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
  color: #ddd;
  max-width: 65ch;          
  text-align: left;          
}

/* Actions row */
.uiux-hero .actions {
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  gap: 16px;
  margin-top: 8px;
  width: 100%; 
}

.uiux-hero .button,
.uiux-hero .button2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  min-height: 44px; 
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 0; 
}

.uiux-hero .button:hover,
.uiux-hero .button2:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.uiux-hero .button2 { gap: 8px; }

.uiux-hero .chevron-right-icon {
  width: 20px;
  height: 20px;
  color: #fff;
  opacity: 0.9;
  transition: transform 0.3s ease;
}
.uiux-hero .button2:hover .chevron-right-icon {
  transform: translateX(3px);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .uiux-hero {
    padding: 64px 24px; 
  }
  .uiux-hero .container {
    padding: 0 12px;      
  }
  .uiux-hero .component {
    align-items: center;    
    text-align: center;
  }
  .uiux-hero .section-title { align-items: center; }
  .uiux-hero .subtext { text-align: center; }
  .uiux-hero .actions { justify-content: center; flex-wrap: wrap; }
}


/* ===== Layout 18: UI/UX Intro ===== */
.layout-18 {
  width: 100%;
  background-color: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

/* Container & Grid */
.layout-18 .container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.layout-18 .component {
  display: grid;
  grid-template-columns: 1.1fr 1fr; 
  align-items: center;
  gap: 80px;
  width: 100%;
}

/* ===== LEFT CONTENT ===== */
.layout-18 .content {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: flex-start;
  text-align: left;
  gap: 32px;
}

.layout-18 .layout-18-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  text-align: left;
  max-width: 720px;
}

.layout-18 .heading {
  margin: 0;
  line-height: 1.25;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  color: #000;
}

.layout-18 .text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #222;
}

/* ===== LIST SECTION ===== */
.layout-18 .list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.layout-18 .list-item {
  display: flex !important;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  line-height: 1.6;
  color: #111;
}

.layout-18 .enhanced-encryption-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  margin-top: 2px; 
}

.layout-18 .lorem-ipsum-dolor {
  flex: 1;
  font-size: 16px;
  color: #111;
  line-height: 1.6;
  text-align: left;
}

/* ===== RIGHT IMAGE ===== */
.layout-18 .placeholder-image-icon {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .layout-18 {
    padding: 88px 32px;
  }
  .layout-18 .component {
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .layout-18 {
    padding: 64px 24px;
  }

  .layout-18 .component {
    grid-template-columns: 1fr;
  }

  .layout-18 .content {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .layout-18 .placeholder-image-icon {
    margin-top: 32px;
  }

  .layout-18 .heading {
    font-size: 32px;
  }

  .layout-18 .text {
    font-size: 16px;
  }
}


/* ===== ICON + TEXT ON ONE LINE (layout-18 only) ===== */
.layout-18 ul.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.layout-18 ul.list > li.list-item {
  display: flex !important;
  flex-direction: row;
  align-items: baseline; 
  gap: 12px;
  line-height: 1.6;
  color: #111;
}

.layout-18 ul.list > li.list-item > img.enhanced-encryption-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px; 
  object-fit: contain;
  margin-top: 2px;                   
}

.layout-18 ul.list > li.list-item > .lorem-ipsum-dolor {
  display: block;                     
  flex: 1 1 auto;
  font-size: 16px;
  text-align: left;
}


/* ===  UI/UX – layout-240 (scoped) === */
.layout-240 {
  width: 100%;
  background-color: #11284c;
  color: #fff; 
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 112px 64px;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif);
}

.layout-240__container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Section title (centered) */
.layout-240__heading {
  margin: 0 auto;
  max-width: 900px;
  text-align: center;
  font-weight: 800;
  line-height: 1.25;
  font-size: clamp(26px, 4.2vw, 40px);
}

/* Grid */
.layout-240__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}

/* Card */
.layout-240__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: transparent;
}

/* Image (square corners, cover, consistent height) */
.layout-240__image {
  width: 100%;
  aspect-ratio: 16 / 9; 
  object-fit: cover;
  display: block;
  border-radius: 0;
  
}

/* Text block under image */
.layout-240__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  color: #fff;
}

/* Card title & text */
.layout-240__title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  line-height: 1.35;
  font-size: clamp(18px, 2.6vw, 24px);
}

.layout-240__text {
  margin: 0;
  font-size: 16px; 
  line-height: 1.6;
  text-align: center;
  color: #e9eef7;                       
}

/* =====  Responsive ==== */
@media (max-width: 1200px) {
  .layout-240__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .layout-240 {
    padding: 88px 32px;
  }
}

@media (max-width: 768px) {
  .layout-240 {
    padding: 64px 20px;
  }
  .layout-240__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* ===== UI/UX Development – Process ===== */
.layout-237 {
  width: 100%;
  background-color: #ebf3ff;
  color: #000;
  display: flex;
  justify-content: center;
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif);
}

.layout-237__container {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Section header */
.layout-237__section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 768px;
  margin-inline: auto;
}

.layout-237__tagline {
  font-weight: 600;
  line-height: 1.5;
}

.layout-237__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.layout-237__heading {
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.2;
}

.layout-237__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

/* ===== Process cards ===== */
.layout-237__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
  text-align: center;
}

.layout-237__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.layout-237__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 8px;
}

.layout-237__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.4;
}

.layout-237__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 320px;
  color: #333;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .layout-237 {
    padding: 88px 32px;
  }
  .layout-237__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .layout-237 {
    padding: 64px 20px;
  }
  .layout-237__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
/* ============ Innovate Section ============ */
.layout-10 {
  width: 100%;
  background-color: #0d0300;
  color: #fff;
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif);
}

.layout-10__container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.layout-10__component {
  display: grid;
  grid-template-columns: 1.1fr 1fr; 
  align-items: center;
  gap: 80px;
}

/* --- Header block --- */
.layout-10__section-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.layout-10__tagline {
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .9;
}

.layout-10__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.layout-10__heading {
  margin: 0;
  line-height: 1.2;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 48px);
  color: #fff;
}

.layout-10__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #f0f0f0;
}

/* --- Features (two items) --- */
.layout-10__features { margin-top: 8px; }
.layout-10__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}

.layout-10__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
}

.layout-10__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  grid-row: 1 / span 2; 
}

.layout-10__subheading {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.4;
  font-weight: 700;
}

.layout-10__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #ddd;
}

/* --- Actions --- */
.layout-10__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}

.layout-10__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  text-decoration: none;
  color: #fff;
  border-radius: 0; 
  transition: all .25s ease;
  border: 1px solid rgba(255,255,255,.3);
  background: transparent;
  backdrop-filter: blur(10px);
}

.layout-10__btn--outline:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

.layout-10__btn--glass {
  background: rgba(255,255,255,.15);
}
.layout-10__btn--glass:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

.layout-10__chevron {
  width: 20px;
  height: 20px;
  opacity: .95;
  transition: transform .25s ease;
}
.layout-10__btn--glass:hover .layout-10__chevron { transform: translateX(3px); }

/* --- Right image --- */
.layout-10__media { margin: 0; }
.layout-10__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  /* Optional border
     border: 1px solid rgba(255,255,255,.2);
  */
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .layout-10__component { gap: 48px; }
}

@media (max-width: 900px) {
  .layout-10 { padding: 64px 24px; }
  .layout-10__component { grid-template-columns: 1fr; }
  .layout-10__row { grid-template-columns: 1fr; }
  .layout-10__actions { gap: 16px; }
}

/* ===== Compact card look to match screenshot ===== */
.layout-10__row--compact {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 48px; 
}

.layout-10__item--compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.layout-10__icon--sm {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-bottom: 6px; 
}

.layout-10__subheading--sm {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
}

.layout-10__copy--sm {
  margin: 0;
  font-size: 14.5px; 
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 46ch; 
}

/* Compact actions under cards, left aligned */
.layout-10__actions--compact {
  margin-top: 14px; 
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
}

/* Small outline button */
.layout-10__btn--sm {
  padding: 10px 16px;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  border-radius: 0;                   /* square edges */
}
.layout-10__btn--sm:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

/* Text-style "View >" link */
.layout-10__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  opacity: 0.92;
  transition: opacity .2s ease, transform .2s ease;
}
.layout-10__link--sm { font-size: 14px; }
.layout-10__link:hover { opacity: 1; }

.layout-10__chevron--sm {
  width: 16px;
  height: 16px;
  transition: transform .2s ease;
}
.layout-10__link:hover .layout-10__chevron--sm { transform: translateX(2px); }

/* Mobile: stack cards; keep compact spacing */
@media (max-width: 900px) {
  .layout-10__row--compact { grid-template-columns: 1fr; gap: 24px; }
  .layout-10__actions--compact { gap: 14px; }
}

/* --- Spacing refinements to match the reference image --- */

.layout-10__features {
  margin-top: 48px;
}

.layout-10__actions--compact {
  margin-top: 36px;
}

.layout-10__row--compact {
  row-gap: 24px;
  column-gap: 48px;
}

/* ============ AI-Machine Learning Page ============ */


/* Section container */
.ai-hero{
  background:var(--bg);
  color:var(--text);
  padding:112px 64px;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
}
.ai-hero__container{ width:100%; max-width:1280px; }
.ai-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr; 
  align-items:center;
  column-gap:80px;
}

/* Left title */
.ai-hero__title{
  margin:0;
  font-weight:800;
  line-height:1.05;
  font-size: clamp(40px, 7.2vw, 52px);
  letter-spacing:.2px;
}

/* Right block */
.ai-hero__right{
  display:flex;
  flex-direction:column;
  gap:var(--gap-24);
}
.ai-hero__copy{
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
  max-width:58ch; 
}

/* Glass buttons */
.ai-hero__actions{ display:flex; gap:16px; }

.glass-btn{
  --pad-y:12px; --pad-x:24px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--pad-y) var(--pad-x);
  color:var(--text); text-decoration:none; font-weight:600; font-size:16px;
  border:1px solid rgba(255,255,255,var(--border-alpha));
  background: rgba(255,255,255,var(--alpha));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: .22s ease;
}
.glass-btn:hover{
  background: rgba(255,255,255,var(--alpha-hover));
  border-color: rgba(255,255,255,var(--border-alpha-h));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}


.glass-btn--ghost{
  background: transparent;
}
.glass-btn--ghost:hover{
  background: rgba(255,255,255, .10);
}

/* Responsive */
@media (max-width: 1024px){
  .ai-hero{ padding:88px 32px; }
  .ai-hero__grid{ grid-template-columns:1fr; row-gap:var(--gap-32); }
  .ai-hero__right{ max-width:720px; }
}
@media (max-width: 640px){
  .ai-hero{ padding:72px 24px; }
  .ai-hero__actions{ flex-wrap:wrap; }
}

/* Section wrapper */
.ai-unlock{
  background:var(--ai-bg);
  color:var(--ai-text);
  padding:112px 64px;
  box-sizing:border-box;
}

/* Container & Grid */
.ai-unlock__container{ max-width:var(--ai-maxw); margin:0 auto; }
.ai-unlock__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr; /* text | image */
  align-items:center;
  gap:var(--ai-gap-lg);
}

/* Left content */
.ai-unlock__content{ display:flex; flex-direction:column; gap:var(--ai-gap-md); }
.ai-unlock__intro{ display:flex; flex-direction:column; gap:24px; }

.ai-unlock__heading{
  margin:0;
  font-weight:800;
  line-height:1.2;
  font-size:var(--ai-h2);
  color:#000;
}

.ai-unlock__text{
  margin:0;
  font-size:var(--ai-p);
  line-height:1.6;
  color:var(--ai-muted);
  max-width:70ch;
}

/* Feature bullets (2) */
.ai-unlock__features{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:24px;
}

.ai-unlock__item{ display:flex; flex-direction:column; gap:var(--ai-gap-sm); }
.ai-unlock__icon{ width:24px; height:24px; object-fit:contain; }

.ai-unlock__subheading{
  margin:0;
  font-size:var(--ai-sub);
  line-height:1.4;
  font-weight:700;
  color:#000;
}

.ai-unlock__copy{
  margin:0;
  font-size:16px;
  line-height:1.55;
  color:#222;
}

/* Right image (square corners, cover) */
.ai-unlock__media{ margin:0; }
.ai-unlock__image{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:0;         /* no curved edges */
}

/* Responsive */
@media (max-width:1100px){
  .ai-unlock{ padding:88px 32px; }
  .ai-unlock__grid{ gap:48px; }
}

@media (max-width:900px){
  .ai-unlock{ padding:64px 24px; }
  .ai-unlock__grid{ grid-template-columns:1fr; }
  .ai-unlock__features{ grid-template-columns:1fr; }
}



/*   AI Transform Section */

.ai-transform {
  width: 100%;
  background: #ebf3ff;               /* aliceblue tone */
  padding: 112px 64px;
  box-sizing: border-box;
  color: #000;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
}

.ai-transform__container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

/* ----- Title Block ----- */
.ai-transform__section-title {
  max-width: 768px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.ai-transform__tagline {
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .85;
  color: #0d0300;
}

.ai-transform__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-transform__heading {
  margin: 0;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.2;
  font-weight: 800;
  color: #0d0300;
}

.ai-transform__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #222;
}

/* ----- Grid ----- */
.ai-transform__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.ai-transform__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ----- Cards (base) ----- */
.ai-transform__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0;                   /* square edges */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ai-transform__card--tall .ai-transform__img,
.ai-transform__card .ai-transform__img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.ai-transform__card-content {
  padding: 32px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-transform__mini-tag {
  font-weight: 600;
  text-transform: uppercase;
  opacity: .85;
}

.ai-transform__subheading {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #000;
}

.ai-transform__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Row of two small cards */
.ai-transform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.ai-transform__card--small .ai-transform__card-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-transform__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* ----- SPLIT CARD (exact look from your screenshot) ----- */
.ai-transform__card--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  overflow: hidden;
}

.ai-transform__media { width: 100%; height: 100%; }

.ai-transform__split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ai-transform__details {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .ai-transform { padding: 88px 32px; }
}

@media (max-width: 900px) {
  .ai-transform { padding: 64px 24px; }

  .ai-transform__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ai-transform__row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ai-transform__card--split {
    grid-template-columns: 1fr;
  }

  .ai-transform__split-img {
    height: 260px;
  }

  .ai-transform__details {
    padding: 32px 24px;
  }
}

/*   AI Solution  */

.ai-solution {
  width: 100%;
  background: #11284c;
  color: #fff;
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
}

.ai-solution__container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Heading */
.ai-solution__heading {
  margin: 0;
  max-width: 768px;
  line-height: 1.2;
  font-weight: 800;
  font-size: clamp(26px, 4.5vw, 40px);
}

/* Grid */
.ai-solution__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}

/* Card */
.ai-solution__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18); 
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
}

/* Image on top */
.ai-solution__image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* Text area */
.ai-solution__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-solution__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.4;
  color: #fff;
}

.ai-solution__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ai-solution { padding: 88px 32px; }
  .ai-solution__grid { gap: 32px; }
}

@media (max-width: 900px) {
  .ai-solution { padding: 64px 24px; }
  .ai-solution__grid {
    grid-template-columns: 1fr 1fr; 
    gap: 24px;
  }
  .ai-solution__image { height: 220px; }
}

@media (max-width: 600px) {
  .ai-solution__grid {
    grid-template-columns: 1fr;     
  }
  .ai-solution__image { height: 200px; }
}

/*  AI & ML Overview (layout-24) */

.layout-24 {
  --bg: #0d0300;
  --fg: #fff;
  --muted: rgba(255,255,255,.9);
  --gap-24: 24px;

  width: 100%;
  background: var(--bg);
  color: var(--fg);
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
}

.layout-24__container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.layout-24__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* text | image */
  align-items: center;
  gap: 80px;
}

/* Left column */
.layout-24__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.layout-24__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.layout-24__copy {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.layout-24__heading {
  margin: 0;
  line-height: 1.2;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  color: var(--fg);
}

.layout-24__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

/* Right column (image) */
.layout-24__media { margin: 0; }

.layout-24__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;                 /* square edges */
  /* Toggle a subtle border by adding the modifier class below */
}

.layout-24__image--border {
  border: 1px solid rgba(255,255,255,.22);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .layout-24 { padding: 88px 32px; }
  .layout-24__grid { gap: 48px; }
}

@media (max-width: 900px) {
  .layout-24 { padding: 64px 24px; }
  .layout-24__grid {
    grid-template-columns: 1fr;   /* stack */
  }
  .layout-24__media { order: 2; }
}

/* =======================
   CTA – Transform with AI
   ======================= */

.cta-1{
  --bg: #ffffff;
  --fg: #000000;
  --muted: #1b1b1b;
  --gap-16: 16px;
  --gap-24: 24px;
  --pad-12: 12px;
  --pad-24: 24px;

  width: 100%;
  background: var(--bg);
  color: var(--fg);
  padding: 112px 64px;
  box-sizing: border-box;
  font-family: var(--font-roboto, Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
}

.cta-1__container{
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.cta-1__grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* copy | image */
  align-items: center;
  gap: 80px;
}

/* Left */
.cta-1__col{
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cta-1__content{
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.cta-1__heading{
  margin: 0;
  line-height: 1.2;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 48px);
  color: var(--fg);
}

.cta-1__text{
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

.cta-1__actions{
  display: flex;
  align-items: center;
  gap: var(--gap-16);
}

/* Buttons */

/* Glass button with configurable color channel */
.glass-btn{
  
  --rgb: 255,255,255; 
  --text: #fff; 
  --alpha: .15; 
  --alpha-hover: .25;
  --border-alpha: .35;
  --border-alpha-h: .55;
  --blur: 10px;

  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 24px; font-weight:600; font-size:16px;
  color:var(--text); text-decoration:none; border-radius:0;
  background: rgba(var(--rgb), var(--alpha));
  border: 1px solid rgba(var(--rgb), var(--border-alpha));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: all .22s ease;
}
.glass-btn:hover{
  background: rgba(var(--rgb), var(--alpha-hover));
  border-color: rgba(var(--rgb), var(--border-alpha-h));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Transparent variant */
.glass-btn--ghost{
  background: transparent;
  border: 1px solid rgba(var(--rgb), .25);
}
.glass-btn--ghost:hover{
  background: rgba(var(--rgb), .12);
  border-color: rgba(var(--rgb), .55);
}

/* Make sure the action row lays out the buttons */
.cta-1__actions{display:flex; gap:16px; margin-top:12px;}



/* Right image */
.cta-1__media{ margin: 0; }
.cta-1__image{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;                 /* keep edges square */
}
.cta-1__image--border{
  border: 1px solid rgba(0,0,0,.15); /* optional border */
}

/* Responsive */
@media (max-width: 1100px){
  .cta-1{ padding: 88px 32px; }
  .cta-1__grid{ gap: 48px; }
}

@media (max-width: 900px){
  .cta-1{ padding: 64px 24px; }
  .cta-1__grid{
    grid-template-columns: 1fr;     /* stack on mobile */
  }
  .cta-1__media{ order: 2; }
}