/* ==========================================================================
   ==========================================================================
   SECTION I: GLOBAL & REUSABLE STYLES
   ==========================================================================
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */
:root {
  /* Primary Brand Colors */
  --green-900: #023e1e;
  --green-600: #118244;
  --green-400: #4abf66;
  --green-300: #6d9c78;

  /* Green Tints & Backgrounds */
  --green-tint-50: #f4f9f6;
  --green-tint-75: #f0f8f4;
  --green-tint-100: #eff8f3;
  --green-tint-150: #e8f3ed;
  --green-tint-200: #e4f0ec;
  --green-tint-250: #e2eee8;
  --green-tint-300: #d5f2dc;
  --green-tint-400: #cfe4d8;
  --green-tint-500: #c8e8d8;
  --color-text-dark: #1e1e1e;
  --color-black: #000000;
  --color-text-dark-gray: #5d636c;

  /* Neutrals */
  --neutral-white: #ffffff;
  --neutral-gray-100: #ddeaea;
  --neutral-gray-400: #838383;
  --neutral-gray-600: #5d636c;
  --neutral-gray-800: #333333;
  --neutral-gray-900: #1e1e1e;
  --neutral-black: #000000;

  /* Semantic Theme Mappings */
  --color-primary: var(--green-600);
  --color-primary-rgb: 17, 130, 68;
  --color-primary-hover: var(--green-900);
  --color-secondary: var(--green-400);
  --color-secondary-light: var(--green-tint-150);
  --color-accent: #00bcd4;
  --color-bg-dark: var(--neutral-white);
  --color-bg-light: var(--green-tint-50);
  --color-card-bg: var(--neutral-white);
  --color-card-border: rgba(17, 130, 68, 0.08);
  --color-text-primary: var(--neutral-gray-900);
  --color-text-secondary: var(--neutral-gray-600);
  --color-text-muted: var(--neutral-gray-400);
  --color-text-light: var(--neutral-white);
  --color-text-subheading: var(--neutral-gray-900);

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-map-bg: #031c16;
  --color-footer-base: #000000;
  --color-footer-gradient-start: #141f19;
  --color-footer-gradient-end: #0d4b2a;

  /* Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--green-900) 100%
  );
  --gradient-glow: radial-gradient(
    circle at top,
    var(--color-secondary-light) 0%,
    var(--neutral-white) 100%
  );

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 10px 20px rgba(17, 130, 68, 0.03);
  --shadow-lg: 0 20px 40px rgba(17, 130, 68, 0.06);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-base: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Spacing System */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Layout Dimensions */
  --topbar-height: 35px;
  --main-header-height: 80px;
  --header-height: calc(var(--topbar-height) + var(--main-header-height));
  --header-scrolled-height: var(--main-header-height);
  --container-max-width: 1200px;
  --container-padding: clamp(1rem, 3vw, var(--space-6));

  /* Typography */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 24px;
  --fs-4xl: 28px;
  --fs-5xl: 36px;
  --fs-6xl: 44px;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ==========================================================================
   2. CSS RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: 100px;
}

body {
  font-family: "Google Sans Flex", sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  outline: none;
}

/* ==========================================================================
   3. BASE STYLES & TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-primary);
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: var(--fs-xl);
}

p {
  color: var(--neutral-black);
}

/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* --- Global Section Title Badge --- */
.section-title {
  font-family: "Google Sans Code", monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #1e1e1e;
}

/* --- Global Section Heading --- */
.section-heading {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--neutral-gray-900);
  margin: 0;
}

.section-heading span {
  color: var(--color-primary, #118244);
}


@media (max-width: 1199px) {
  .section-heading {
    font-size: 36px;
  }
}

@media (max-width: 991px) {
  .section-heading {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .section-heading {
    font-size: 24px;
    line-height: 32px;
  }
  .section-title {
    font-size: var(--fs-xs);
  }
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- 5.1. BUTTONS --- */

/* Request Demo Outline Button */
.header-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--fs-xs);
  color: var(--color-primary);
}

.header-actions a {
  background: var(--color-primary);
  color: var(--neutral-white);
}

/* --- 5.4. NAVIGATION --- */
/* Logo Layout */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-primary);
}

.logo img {
  width: 83px;
  height: 52px;
}

/* Mobile Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  position: static;
  width: auto;
  height: auto;
  background: transparent;
  backdrop-filter: none;
  flex-direction: row;
  gap: var(--space-8);
  box-shadow: none;
  z-index: auto;
  transform: none;
  transition: none;
}

.nav-menu a {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--color-text-subheading);
  position: relative;
  padding: var(--space-2) 0;
  display: inline-flex;
  align-items: center;
}

.nav-menu a.nav-drawer-only {
  display: none !important;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--color-primary);
}

.nav-menu a::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  margin-right: 0;
  opacity: 0;
  transition:
    width var(--transition-fast) ease,
    margin-right var(--transition-fast) ease,
    opacity var(--transition-fast) ease;
}

.nav-menu a.active::before {
  width: 6px;
  margin-right: 8px;
  opacity: 1;
}

/* --- 5.5. HEADER --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal);
}

.top-bar {
  background: linear-gradient(
    90deg,
    var(--green-600) 0%,
    var(--green-300) 60%,
    #7dbb98 100%
  );
  color: var(--neutral-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  text-align: center;
  transition:
    margin-top var(--transition-normal),
    opacity var(--transition-normal);
  line-height: 22px;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-header {
  background: var(--neutral-white);
  height: var(--main-header-height);
  display: flex;
  align-items: center;
  transition: all var(--transition-normal);
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}

.site-header.scrolled .top-bar {
  margin-top: calc(-1 * var(--topbar-height));
  opacity: 0;
  pointer-events: none;
}

.site-header.scrolled .main-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-card-border);
}

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

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* --- 5.6. MAIN CONTENT --- */

.main-content h1 {
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  font-size: 30px;
}

.main-content p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
}

.main-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   5.7. WHERE WE OPERATE SECTION
   ========================================================================== */

/* --- 5.8. WHERE WE OPERATE SECTION --- */
.where-we-operate {
  position: relative;
  z-index: 9;
  background-color: var(--color-map-bg);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  overflow: hidden;
  color: var(--neutral-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Background maps overlay positioning */
.where-we-operate .map-bg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 402px;
  pointer-events: none;
  z-index: 1;
}

.where-we-operate .left-map {
  left: 0;
  width: 477px;
}

.where-we-operate .right-map {
  right: 0;
  width: 423px;
}

.where-we-operate .map-bg img {
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: contain;
}

.where-we-operate .left-map .map-shadow {
  left: 0;
  width: 477px;
  opacity: 0.8;
}

.where-we-operate .left-map .map-outline {
  left: 0;
  width: 433px;
  opacity: 0.9;
}

.where-we-operate .right-map .map-shadow {
  right: 0;
  width: 423px;
  opacity: 0.8;
}

.where-we-operate .right-map .map-outline {
  right: 0;
  width: 379px;
  opacity: 0.9;
}

/* Container & Header */
.operate-container {
  position: relative;
  z-index: 2;
  text-align: center;
}
.operate-container .section-heading {
  color: var(--neutral-white);
}
.operate-container .section-header {
  margin-bottom: var(--space-5);
}

.operate-container .section-header p {
  font-size: var(--fs-base);
  color: var(--neutral-white);
  font-weight: var(--fw-normal);
  max-width: 700px;
  margin: 0 auto;
  line-height: 24px;
}

/* Location Cards Grid */
.location-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.location-card {
  background: rgba(9, 31, 24, 0.4);
  border: 1px solid rgba(74, 191, 102, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  backdrop-filter: blur(10px);
  transition: all var(--transition-normal);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.location-card:hover {
  transform: translateY(-5px);
  border-color: rgba(74, 191, 102, 0.4);
  background: rgba(9, 31, 24, 0.6);
  box-shadow: 0 10px 30px rgba(74, 191, 102, 0.15);
}

/* Flag Circle */
.location-card .flag-container {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.location-card .flag-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  /* Ensure it fills the circle nicely */
}

/* Card details */
.location-card .card-details {
  display: flex;
  gap: var(--space-3);
}

.location-card .card-title-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card-title-row h3 {
  font-size: var(--fs-xl);
  color: var(--neutral-white);
  font-weight: var(--fw-bold);
  line-height: 22px;
}

.location-card .card-details img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.location-card > img {
  width: auto;
  height: 50px;
  object-fit: contain;
}

.card-title-row span {
  color: var(--green-400);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  line-height: 19px;
}

.card-title-row p {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--green-300);
  line-height: 19px;
  margin-top: 2px;
}

/* --- 5.8. FOOTER --- */
.site-footer {
  position: relative;
  z-index: 10;
  color: var(--neutral-white);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);

  background-color: var(--color-footer-base);
  background-image: repeating-linear-gradient(
    90deg,
    #022713 0,
    #092f1a calc(100% / 24)
  );
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--space-8);
}

.footer-brand a img {
  width: 140px;
  height: auto;
  margin-bottom: var(--space-4);
}

.footer-brand > p {
  font-size: var(--fs-sm);
  color: var(--green-tint-500);
  line-height: 22px;
  margin-bottom: var(--space-6);
  max-width: 280px;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.footer-contact-info p {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

.footer-contact-info i {
  color: var(--green-400);
  font-size: var(--fs-base);
  width: 16px;
  text-align: center;
}

.footer-contact-info p img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.footer-contact-info a {
  color: var(--green-tint-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-contact-info a:hover {
  color: var(--green-400);
}

.footer-socials {
  display: flex;
  gap: var(--space-3);
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: transform var(--transition-fast);
}

.footer-socials a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-socials a:hover {
  transform: translateY(-2px);
}

.col-title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.col-title-wrapper img {
  width: 40px;
  height: 40px;
  display: inline-block;
  flex-shrink: 0;
}

.col-title-wrapper h3 {
  color: var(--neutral-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 21px;
}

.footer-nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav-col ul li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--green-tint-500);
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 19px;
}

.footer-nav-col ul li a img {
  width: 20px;
  height: 20px;
  opacity: 0.8;
  transition: transform var(--transition-fast);
  display: inline-block;
}

.footer-nav-col ul li a:hover {
  color: var(--green-400);
  padding-left: var(--space-1);
}

.footer-nav-col ul li a:hover img {
  transform: translate(2px, -2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
}

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

.footer-bottom-inner > p {
  color: var(--green-tint-500);
  font-size: var(--fs-xs);
  margin-bottom: 0;
  line-height: 18px;
  font-weight: var(--fw-normal);
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-6);
}

.footer-bottom-links a {
  color: var(--green-tint-500);
  font-size: var(--fs-xs);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-weight: var(--fw-normal);
  line-height: 18px;
}

.footer-bottom-links a:hover {
  color: var(--green-400);
}

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES (DESKTOP FIRST)
   ========================================================================== */

/* 1199px breakpoint (Less than Extra Large / Large Desktops) */
@media (max-width: 1199px) {
  h1 {
    font-size: var(--fs-5xl);
  }

  h2 {
    font-size: var(--fs-3xl);
  }

  .main-content h1 {
    font-size: var(--fs-3xl);
  }

  .location-cards {
    gap: var(--space-4);
  }

  .location-card {
    padding: var(--space-4) var(--space-5);
    gap: var(--space-4);
  }

  .location-card .flag-container {
    width: 50px;
    height: 50px;
  }

  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

/* 991px breakpoint (Less than Large / Desktops) */
@media (max-width: 991px) {
  .hamburger {
    display: flex;
  }

  .header-actions {
    display: none;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    gap: var(--space-4);
    transform: translateX(-100%);
    transition:
      transform var(--transition-slow),
      top var(--transition-normal),
      height var(--transition-normal);
    z-index: 999;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }

  .site-header.scrolled .nav-menu {
    top: var(--header-scrolled-height);
    height: calc(100vh - var(--header-scrolled-height));
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-menu a.nav-drawer-only {
    display: inline-flex !important;
  }

  .nav-menu::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #e8e8e8;
    margin: 4px 0;
    flex-shrink: 0;
  }
  .location-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: var(--space-6) auto 0;
  }

  .where-we-operate {
    padding-top: 60px;
    padding-bottom: 60px;
    --fs-6xl: 32px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

/* 767px breakpoint (Less than Medium / Tablets) */
@media (max-width: 767px) {
  .logo img {
    width: 65px;
    height: 40px;
  }

  .operate-container .section-header h2 {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .where-we-operate {
    padding-top: 40px;
    padding-bottom: 40px;
    --fs-6xl: 24px;
  }
  .operate-container .section-heading {
    margin-bottom: 10px;
  }
  .where-we-operate .map-bg img {
    top: -100px;
  }
}
/* ==========================================================================
   ==========================================================================
   SECTION II: HOME PAGE STYLES (index.html)
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   HOME PAGE — HERO SECTION
   ========================================================================== */

/* --- Extended tokens for hero product cards --- */
:root {
  --hero-accent-purple: #6d5bd0;
  --hero-accent-teal: #16b8c9;
  --hero-accent-orange: #f5a524;
  --hero-badge-blue: #0f6fe0;
  --hero-badge-dark: #12121a;

  /* Hero background gradient — light aqua/mint wash matching the Figma */
  --hero-bg-start: #eef8f4;
  --hero-bg-mid: #e6f4f0;
  --hero-bg-end: #dff0eb;
}

/* ==========================================================================
   HERO — SECTION SHELL
   ========================================================================== */
.hero-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-top: calc(var(--header-height) + 20px);
  padding-bottom: 0;
  background: linear-gradient(to top, #eff5f8, #ffffff);
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   HERO — CONTAINER & LAYOUT GRID
   The container uses a fixed min-height so the absolute-positioned cards
   and globe don't collapse it.
   ========================================================================== */
.hero-container {
  position: relative;
  min-height: calc(100vh - var(--header-height) - 20px);
  padding-top: var(--space-10);
  padding-bottom: var(--space-20);
  width: 100%;
}

/* ==========================================================================
   HERO — DECORATIVE DOT IMAGES
   Four SVG dots positioned to match the Figma design:
   green  → inside the left side, vertically centred between top/bottom cards
   purple → inside the right side, near top-right card
   blue   → bottom-left corner, outside the SAAS Connect card
   yellow → bottom-right corner, outside the One365 card
   ========================================================================== */
.hero-dot {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  /* above cards so dots are always visible */
  display: block;
}

/* Green dot — between left cards and globe, vertically centred */
.hero-dot--green {
  width: 70px;
  height: 70px;
  top: 12%;
  left: calc(16% + 2px);
}

/* Purple dot — right side, between top-right card and globe */
.hero-dot--purple {
  width: 45px;
  height: 45px;
  top: 13%;
  right: 18%;
}

/* Blue dot — far bottom-left, outside SAAS Connect card */
.hero-dot--blue {
  width: 50px;
  height: 50px;
  bottom: 40%;
  left: -1%;
}

/* Yellow dot — far bottom-right, outside One365 card */
.hero-dot--yellow {
  width: 52px;
  height: 52px;
  bottom: 40%;
  right: -1%;
}

/* ==========================================================================
   HERO — SIDE DECORATIVE IMAGES (left / right gradient overlays)
   Now bare <img> elements — class moved directly onto the img tag.
   ========================================================================== */
.hero-side-img--left,
.hero-side-img--right {
  position: absolute;
  top: 95px;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  width: auto;
  object-fit: cover;
  object-position: center;
}

.hero-side-img--left {
  left: 0;
}

.hero-side-img--right {
  right: 0;
}

/* ==========================================================================
   HERO — CENTRAL TEXT CONTENT
   ========================================================================== */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

.hero-content h1 {
  font-size: 52px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  line-height: 65px;
  margin-bottom: var(--space-4);
}

.hero-content h1 span {
  color: var(--color-primary);
  display: block;
}

/* Description paragraph — only plain <p> inside .hero-content (no class) */
.hero-content > p:not(.section-title) {
  font-size: var(--fs-base);
  color: var(--color-text-dark-gray);
  line-height: 24px;
  max-width: 600px;
  margin: 0 auto var(--space-8);
}

/* ==========================================================================
   HERO — CTA BUTTONS ROW
   ========================================================================== */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* ==========================================================================
   HERO — DECORATION WRAPPER
   ========================================================================== */
.hero-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

/* ==========================================================================
   HERO — GLOBE ILLUSTRATION
   ========================================================================== */
.hero-globe {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(700px, 100%, 1130px);
  z-index: 1;
  pointer-events: none;
}

/* Base globe map — large, centered, bleeds out at bottom */
.hero-globe-map {
  width: 100%;
  height: auto;
  display: block;
}

.hero-globe-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.hero-globe-lines:nth-of-type(1) {
  transform: scale(1.05);
  transform-origin: center bottom;
}

.hero-globe-lines:nth-of-type(2) {
  transform: scale(1.2);
  transform-origin: center bottom;
}

/* ==========================================================================
   HERO — PRODUCT CARDS LIST
   ========================================================================== */
.hero-products {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.hero-cards {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ==========================================================================
   HERO — INDIVIDUAL PRODUCT CARD
   ========================================================================== */
.product-card {
  position: absolute;
  width: 210px;
  pointer-events: auto;
  background: var(--neutral-white);
  border-radius: 32px;
  box-shadow: 0px 0px 54px 10px #e5e9eb;
  padding: var(--space-5) var(--space-5) 0px var(--space-4);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(17, 130, 68, 0.14);
}

.product-card-logo img {
  width: 72px;
  height: 72px;
}

/* Logo tint variants */
.product-card-logo--blue {
  background: #dbeafe;
}

.product-card-logo--multi {
  background: var(--green-tint-150);
}

/* --- FR avatar badge --- */
.product-card-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  pointer-events: none;
}

.product-card-badge > span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--neutral-white);
  border: 2px solid var(--neutral-white);
  line-height: 1;
}

.product-card-badge > span:first-child {
  background: var(--hero-badge-blue);
  margin-right: -8px;
  z-index: 2;
}

.product-card-badge > span:last-child {
  background: var(--hero-badge-dark);
  z-index: 1;
}

/* --- Title --- */
.product-card > h3 {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  line-height: 24px;
}

/* --- Description --- */
.product-card > p {
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--color-text-dark-gray);
  margin-bottom: var(--space-4);
  text-align: center;
}

/* --- Accent bar --- */
.product-card-accent {
  display: block;
  height: 6px;
  width: 82px;
  border-radius: 70px;
  background: #4abf66;
  box-shadow: 0px 4px 17px 0px #4abf66a6;
  margin-top: auto;
}

.product-card--databox .product-card-accent {
  background: #6a66d7;
  box-shadow: 0px 4px 17px 0px #6a66d7a6;
}

.product-card--saas-connect .product-card-accent {
  background: #19bace;
  box-shadow: 0px 4px 17px 0px #19bacea6;
}

.product-card--one365 .product-card-accent {
  background: #fcb12d;
  box-shadow: 0px 4px 17px 0px #fcb12da6;
}

/* ==========================================================================
   HERO — CARD POSITIONS (desktop ≥ 992px)
   Top cards sit at top, roughly 6% from top edge.
   Bottom cards sit ~55% from top (middle of section lower half).
   ========================================================================== */
.product-card--it-marketplace {
  top: 5%;
  left: 0;
}

.product-card--databox {
  top: 5%;
  right: 0;
}

.product-card--saas-connect {
  top: 52%;
  left: 55px;
}

.product-card--one365 {
  top: 52%;
  right: 55px;
}

/* ==========================================================================
   HERO — RESPONSIVE (desktop-first)
   ========================================================================== */

/* ---- ≤ 1199px ---- */
@media (max-width: 1199px) {
  .hero-container {
    min-height: calc(100vh - var(--header-height) - 10px);
  }
  .hero-section {
    padding-top: calc(var(--header-height) + 5px);
  }
  .hero-content {
    max-width: 700px;
  }
  .hero-content > p:not(.section-title) {
    max-width: 460px;
  }
  .hero-content h1 {
    font-size: 33px;
    line-height: 40px;
  }
  .product-card {
    width: 190px;
  }
  .hero-globe {
    width: clamp(460px, 100%, 960px);
  }
  .product-card--it-marketplace {
    left: 23px;
  }
  .product-card--databox {
    right: 23px;
  }
  .product-card--saas-connect {
    left: 70px;
  }
  .product-card--one365 {
    right: 70px;
  }
  .hero-side-img--left {
    left: 32px;
  }
  .hero-side-img--right {
    right: 32px;
  }
  .hero-side-img--left,
  .hero-side-img--right {
    top: 75px;
  }
  .hero-dot--green {
    width: 52px;
    height: 52px;
    top: 9%;
    left: calc(16% + 33px);
  }
  .hero-dot--blue {
    width: 45px;
    height: 45px;
    bottom: 33%;
    left: 2%;
  }
  .hero-dot--purple {
    width: 30px;
    height: 30px;
    top: 10%;
    right: 22%;
  }
  .hero-dot--yellow {
    width: 42px;
    height: 42px;
    bottom: 33%;
    right: 2%;
  }
}

/* ---- ≤ 991px  — tablet and mobile ---- */
@media (max-width: 991px) {
  .hero-side-img--left,
  .hero-side-img--right {
    display: none;
  }
  .hero-content h1 {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ---- ≤ 767px  — stack layout ---- */
@media (max-width: 768px) {
  .hero-section {
    padding-bottom: 0;
    height: auto;
    min-height: 100vh;
    display: block;
  }
  .hero-container {
    min-height: unset;
    padding-top: var(--space-8);
    padding-bottom: 0;
  }
  /* Globe flows in document flow below content */
  .hero-globe {
    position: relative;
    inset: auto;
    transform: none;
  }
  .hero-section {
    padding-top: calc(var(--header-height) + 0px);
    height: auto;
    min-height: 100vh;
    display: block;
  }
  /* Cards wrapper exits absolute positioning */
  .hero-products {
    position: static;
    inset: auto;
    width: 100%;
  }
  .hero-cards {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
    pointer-events: auto;
  }
  .product-card {
    position: static;
    width: 100%;
    height: 100%;
  }
  .product-card--it-marketplace {
    order: 1;
  }
  .product-card--saas-connect {
    order: 2;
  }
  .product-card--databox {
    order: 3;
  }
  .product-card--one365 {
    order: 4;
  }
  .hero-decoration {
    display: none;
  }
}
/* ---- ≤ 576px ---- */
@media (max-width: 576px) {
  .hero-content h1 {
    font-size: 24px;
    line-height: 32px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-content > p:not(.section-title) {
    font-size: var(--fs-xs);
    line-height: 20px;
  }
  .hero-actions .btn-explore,
  .hero-actions .btn-demo {
    width: 100%;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
  }
  .hero-globe {
    width: 95%;
  }
  .product-card > h3 {
    font-size: var(--fs-sm);
    text-align: center;
  }
  .product-card > p {
    font-size: var(--fs-xs);
  }
  .product-card-logo img {
    height: 48px;
    width: 48px;
  }
}

/* ==========================================================================
   SMART SOLUTIONS SECTION
   ========================================================================== */
.smart-solutions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
  overflow: hidden;
}

/* --- Shared panel base --- */
.smart-solutions-left,
.smart-solutions-right {
  position: relative;
  overflow: hidden;
}
.smart-solutions-image {
  width: 100%;
}
/* ---- Left panel ---- */

/* Subtle overall dim so the card contrasts against the photo */
.smart-solutions-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Frosted glass content card — floats over the photo */
.smart-solutions-left-content {
  position: absolute;
  z-index: 2;
  /* Position: centred vertically, inset from left edge */
  top: 50%;
  left: var(--space-8);
  transform: translateY(-50%);
  /* Card dimensions */
  width: clamp(240px, 68%, 480px);
  /* Glassmorphism */
  background: #b9b9b933;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(18px);
  /* The border will be handled by the pseudo-element below for animation */
  border: 1px solid transparent;
  border-radius: 16px;
  padding: var(--space-6) var(--space-6) var(--space-6);
  /* Layout */
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Moving gradient border for the glassmorphism card */
@keyframes border-bg-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.smart-solutions-left-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px; /* border thickness */
  background: linear-gradient(
    90deg,
    #118244,
    rgba(74, 191, 102, 0.2),
    #118244,
    rgba(74, 191, 102, 0.2)
  );
  background-size: 200% 200%;
  animation: border-bg-move 4s linear infinite;
  z-index: 10;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Badge — override colours for dark bg */
.smart-solutions-left-content .section-title {
  color: var(--neutral-white) !important;
  font-size: var(--fs-xs);
  margin-bottom: var(--space-4);
  background: #11824433;
  border: 1px solid #ffffff12;
  padding: 3px 10px;
  border-radius: 2px;
}

.smart-solutions-left-content .section-title span {
  background: var(--green-400);
}

/* Headline */
.smart-solutions-left-content h2 {
  font-size: 32px;
  font-weight: var(--fw-semibold);
  color: var(--neutral-white);
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.smart-solutions-left-content h2 span {
  color: var(--green-600);
  display: block;
}

/* Body copy */
.smart-solutions-left-content > p {
  font-size: var(--fs-xs);
  color: var(--neutral-white);
  line-height: 20px;
  margin-bottom: var(--space-4);
}

/* Feature pills list — single row, wraps on small */
.smart-solutions-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.smart-solutions-features li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.85);
  background: #11824433;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  padding: 4px 8px;
  backdrop-filter: blur(6px);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.smart-solutions-features li:hover {
  background: rgba(74, 191, 102, 0.18);
  border-color: rgba(74, 191, 102, 0.4);
}

.smart-solutions-features li i {
  color: var(--green-400);
  font-size: 12px;
}

/* ---- Right panel ---- */

/* CTA card — glassmorphism, bottom-right corner */
.smart-solutions-cta {
  position: absolute;
  bottom: var(--space-12);
  right: var(--space-8);
  z-index: 2;
  display: flex;
  gap: var(--space-5);
  background: #118244b2;
  border: 1px solid #4abf664d;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  max-width: 280px;
  transition:
    background var(--transition-normal),
    border-color var(--transition-normal);
}

.smart-solutions-cta-btn img {
  height: 40px;
  width: 40px;
}
/* CTA text group */
.smart-solutions-cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.smart-solutions-cta-text > p {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--neutral-white);
  line-height: 25px;
  margin: 0;
}

.smart-solutions-cta-text > a {
  font-size: var(--fs-xs);
  color: var(--neutral-white);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.smart-solutions-cta-text > a:hover {
  color: var(--green-400);
}

.smart-solutions-features li img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.smart-solutions-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

/* ==========================================================================
   SMART SOLUTIONS — RESPONSIVE (desktop-first)
   ========================================================================== */

/* ---- ≤ 1199px ---- */
@media (max-width: 1199px) {
  .smart-solutions {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .smart-solutions-left,
  .smart-solutions-right {
    position: relative;
    width: 100%;
  }

  .smart-solutions-left {
    min-height: 480px;
  }

  .smart-solutions-right {
    min-height: 380px;
  }

  .smart-solutions-left > img,
  .smart-solutions-right > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .smart-solutions-left-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 440px;
    padding: var(--space-6);
  }

  .smart-solutions-cta {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: calc(100% - 40px);
    max-width: 440px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---- ≤ 768px ---- */
@media (max-width: 768px) {
  .smart-solutions-left {
    min-height: 450px;
  }

  .smart-solutions-right {
    min-height: 340px;
  }

  .smart-solutions-left-content {
    padding: var(--space-5);
    max-width: 380px;
  }

  .smart-solutions-left-content h2 {
    font-size: 28px;
    margin-bottom: var(--space-3);
  }

  .smart-solutions-left-content > p {
    font-size: 13px;
    line-height: 19px;
  }

  .smart-solutions-cta {
    bottom: var(--space-8);
    max-width: 380px;
    padding: var(--space-4);
  }

  .smart-solutions-cta-text > p {
    font-size: 16px;
    line-height: 22px;
  }
}

/* ---- ≤ 576px ---- */
@media (max-width: 576px) {
  .smart-solutions-left {
    min-height: 400px;
  }

  .smart-solutions-right {
    min-height: 280px;
  }

  .smart-solutions-left-content {
    width: calc(100% - 32px);
    max-width: 343px;
    padding: 20px 16px;
  }

  .smart-solutions-left-content h2 {
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 8px;
  }

  .smart-solutions-left-content > p {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: var(--space-4);
  }

  .smart-solutions-features {
    gap: 8px 6px;
  }

  .smart-solutions-features li {
    font-size: 11px;
    padding: 3px 6px;
  }

  .smart-solutions-cta {
    bottom: var(--space-4);
    width: calc(100% - 32px);
    max-width: 343px;
    padding: var(--space-4) 16px;
    gap: var(--space-3);
  }

  .smart-solutions-cta-text > p {
    font-size: 15px;
    line-height: 20px;
  }

  .smart-solutions-cta-text > a {
    font-size: 11px;
  }

  .smart-solutions-cta-btn img {
    width: 34px;
    height: 34px;
  }
}
/* ==========================================================================
   5.9. WHAT WE DO (SERVICES) SECTION
   ========================================================================== */
.services-section {
  position: relative;
  z-index: 10;
  margin-top: -20px;
  /* Overlap on top of smart-solutions */
  padding-bottom: 80px;
}
.services-section .section-title {
  color: #1e1e1e;
}
.services-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-base);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.03),
    0 5px 15px rgba(0, 0, 0, 0.01);
  padding: 60px 0 30px 0;
  border: 1px solid rgba(17, 130, 68, 0.04);
}

.services-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-10);
  padding: 0 50px;
}

.services-header h2 {
  color: var(--color-text-primary);
  margin-top: var(--space-2);
  line-height: 52px;
}

.services-header h2 span {
  color: var(--color-primary);
}

.services-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-item {
  border-top: 1px solid rgba(17, 130, 68, 0.08);
  transition: all var(--transition-normal);
}

.service-item:hover,
.service-item[aria-expanded="true"] {
  background-color: var(--green-tint-50);
}

.service-header {
  display: grid;
  grid-template-columns: 80px 280px 1fr 80px;
  gap: 0 30px;
  align-items: center;
  padding: 32px 50px;
  cursor: pointer;
}

.service-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.service-icon img {
  width: 28px;
  height: 28px;
  display: block;
}

.service-header h3 {
  font-size: 24px;
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  transition: color var(--transition-normal);
  line-height: 32px;
  margin: 0;
}

.service-header p {
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
  line-height: 24px;
  transition: color var(--transition-normal);
  margin: 0;
}

.service-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(17, 130, 68, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: all var(--transition-normal);
  justify-self: flex-end;
  background: transparent;
  cursor: pointer;
}

.service-arrow img {
  width: 16px;
  height: 16px;
  display: block;
  transition: all var(--transition-normal);
}

/* Hover & Active States */
.service-item:hover h3,
.service-item[aria-expanded="true"] h3 {
  color: var(--color-primary);
}

/* Collapsed hover state: turn background primary and invert icon color */
.service-item:not([aria-expanded="true"]):hover .service-arrow {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.service-item:not([aria-expanded="true"]):hover .service-arrow img {
  filter: brightness(0) invert(1);
}

/* Expanded active state: keep transparent background and use 40px size with original colors */
.service-item[aria-expanded="true"] .service-arrow,
.service-item[aria-expanded="true"]:hover .service-arrow {
  background-color: transparent;
  border-color: transparent;
  transform: scale(1.05);
}

.service-item[aria-expanded="true"] .service-arrow img,
.service-item[aria-expanded="true"]:hover .service-arrow img {
  width: 40px;
  height: 40px;
  filter: none;
}

/* Collapse Panel & Details */
.service-collapse-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
}

.service-item[aria-expanded="true"] .service-collapse-content {
  opacity: 1;
}

.service-collapse-inner {
  display: grid;
  grid-template-columns: 390px 1fr 80px;
  gap: 0 30px;
  padding: 0 50px 32px 50px;
}

.service-details-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-8);
  align-items: flex-start;
}

.service-details-left {
  display: flex;
  flex-direction: column;
}

.service-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-bullets li {
  font-size: 15px;
  color: var(--color-text-secondary);
  position: relative;
  padding-left: 20px;
  line-height: 1.5;
}

.service-bullets li::before {
  content: "•";
  color: var(--color-primary);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
}

.service-feature-image {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Responsive Breakpoints - Desktop-First */
@media (max-width: 1199px) {
  .services-section {
    margin-top: -15px;
    padding-bottom: 60px;
  }
  .services-header h2 {
    line-height: 45px;
  }
  .service-header h3 {
    font-size: 20px;
  }
  .services-card {
    padding: 50px 0 20px 0;
  }

  .services-header {
    padding: 0 40px;
    margin-bottom: var(--space-8);
  }

  .service-header {
    grid-template-columns: 70px 240px 1fr 70px;
    gap: 0 20px;
    padding: 28px 40px;
  }

  .service-collapse-inner {
    grid-template-columns: 330px 1fr 70px;
    gap: 0 20px;
    padding: 0 40px 28px 40px;
  }

  .service-details-grid {
    gap: var(--space-6);
  }
}

@media (max-width: 991px) {
  .services-section {
    --fs-6xl: 32px;
  }
}

@media (max-width: 768px) {
  .services-section {
    margin-top: -15px;
    padding-bottom: 40px;
  }

  .services-card {
    border-radius: var(--radius-md);
    padding: 40px 0 10px 0;
  }

  .services-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: 0 24px;
    margin-bottom: var(--space-6);
  }

  .services-header .btn-explore {
    width: 100%;
    justify-content: center;
  }

  .service-header {
    grid-template-columns: 60px 1fr 60px;
    gap: var(--space-2) var(--space-4);
    padding: 20px 24px;
  }

  .service-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 4px;
  }

  .service-header h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 18px;
    margin: 0;
  }

  .service-header p {
    grid-column: 2;
    grid-row: 2;
    font-size: 14.5px;
    margin: 0;
  }

  .service-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    align-self: center;
  }

  .service-collapse-inner {
    grid-template-columns: 60px 1fr 60px;
    padding: 0 24px 20px 24px;
  }

  .service-details-grid {
    grid-column: 2;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .service-feature-image {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 576px) {
  .services-section .container {
    padding-inline: 0;
  }
  .services-section {
    margin-top: -10px;
    --fs-6xl: 24px;
  }
  .services-header {
    padding: 0 16px;
  }

  .services-header h2 {
    line-height: 30px;
  }

  .service-header {
    grid-template-columns: 40px 1fr 40px;
    gap: 10px 10px;
    padding: 16px 16px;
  }

  .service-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
  }

  .service-icon img {
    width: 24px;
    height: 24px;
  }

  .service-header h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-lg);
    line-height: 25px;
    align-self: center;
  }

  .service-header p {
    grid-column: 1 / span 3;
    grid-row: 2;
    font-size: var(--fs-xs);
  }

  .service-arrow {
    grid-column: 3;
    grid-row: 1;
    width: 34px;
    height: 34px;
  }

  .service-collapse-inner {
    grid-template-columns: 1fr;
    padding: 0 16px 16px 16px;
  }

  .service-details-grid {
    grid-column: 1;
    gap: var(--space-3);
  }

  .service-bullets li {
    font-size: var(--fs-xs);
  }
}
/* ==========================================================================
   5.10. SECTOR EXPERTISE SECTION
   ========================================================================== */
.expertise-section {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding-bottom: 80px;
}
.expertise-section::before {
  content: "";
  position: absolute;
  inset: 6% 3%;
  border-radius: 40px;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 245, 245, 0.95) 0%,
    rgba(235, 235, 235, 0.65) 45%,
    rgba(220, 220, 220, 0.2) 75%,
    transparent 100%
  );
  filter: blur(35px);
  z-index: -1;
}
/* Decorative Cubes Background */
.expertise-cubes {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  display: block;
}

.expertise-cubes--top-left {
  top: 40px;
  left: 0px;
  height: auto;
}

.expertise-cubes--top-right {
  top: 40px;
  right: 0px;
  height: auto;
}

.expertise-cubes--bottom-left {
  bottom: 40px;
  left: 0px;
  height: auto;
}

.expertise-cubes--bottom-right {
  bottom: 40px;
  right: 0px;
  height: auto;
}

/* Header */
.expertise-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.expertise-header h2 {
  color: var(--neutral-black);
  margin-top: var(--space-2);
}

.expertise-header h2 span {
  color: var(--color-primary);
}

/* Grid */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
  z-index: 2;
  align-items: stretch;
}

/* Card */
.expertise-card {
  background: var(--neutral-white);
  border-radius: 16px;
  padding: 15px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* Equal height */
  min-height: 270px; /* Adjust as needed */
  border: 1px solid rgba(17, 130, 68, 0.05);
  box-shadow: var(--shadow-md);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.expertise-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30px;
  width: 100px;
  height: 3px;
  background-color: var(--card-accent);
  border-radius: 10px 10px 0 0;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Content wrapper */
.expertise-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Description */
.expertise-card p {
  margin-bottom: auto; /* Push bottom accent to the bottom */
}
.expertise-arrow {
  transition: transform 0.5s ease;
  box-shadow: 0px 4px 4px 0px #4abf661a inset;
  box-shadow: 0px -4px 4px 0px #4abf661a inset;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
}
/* Color Themes */
.card-green {
  --card-accent: var(--color-primary);
  --card-icon-bg: rgba(17, 130, 68, 0.07);
}

.card-blue {
  --card-accent: var(--hero-accent-teal);
  --card-icon-bg: rgba(22, 184, 201, 0.07);
}

.card-orange {
  --card-accent: var(--hero-accent-orange);
  --card-icon-bg: rgba(245, 165, 36, 0.07);
}

.card-purple {
  --card-accent: var(--hero-accent-purple);
  --card-icon-bg: rgba(109, 91, 208, 0.07);
}

/* Top Area */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Card Content */
.card-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-gray-900);
  margin-bottom: 12px;
}

.card-content p {
  font-size: 15px;
  color: var(--neutral-gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Wave Pattern Background (image) */
.card-wave-pattern {
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
  object-fit: contain;
  object-position: bottom right;
  transition: all 0.4s ease;
}

/* Hover Actions */
.expertise-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(17, 130, 68, 0.1);
}

.expertise-card:hover::after {
  width: 120px;
}

.expertise-card:hover .expertise-icon {
  transform: scale(1.08);
}

.expertise-card:hover .expertise-icon svg {
  transform: rotate(5deg);
}

.expertise-card:hover .expertise-arrow {
  background-color: var(--card-accent);
  border-color: var(--card-accent);
}

.expertise-card:hover .expertise-arrow svg {
  color: var(--neutral-white);
  transform: translateX(2px);
}

.expertise-card:hover .card-wave-pattern {
  transform: scale(1.08) translate(-4px, -4px);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS FOR SECTOR EXPERTISE
   ========================================================================== */
@media (max-width: 1200px) {
  .expertise-section {
    padding-bottom: 60px;
  }

  .expertise-grid {
    gap: 24px;
  }

  .expertise-card {
    padding: 32px;
  }

  .expertise-card::after {
    left: 32px;
  }
}

@media (max-width: 992px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .expertise-section {
    padding-bottom: 40px;
  }

  .expertise-grid {
    gap: 20px;
  }

  .expertise-card {
    padding: 15px;
  }
}

@media (max-width: 991px) {
  .expertise-section {
    --fs-6xl: 32px;
  }
}

@media (max-width: 576px) {
  .expertise-section {
    --fs-6xl: 24px;
  }
  .expertise-header h2 {
    line-height: 35px;
  }
  .expertise-header {
    align-items: start;
    margin-bottom: 20px;
  }
  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .expertise-card {
    padding: 15px;
    min-height: 210px;
  }
  .expertise-card::after {
    left: 30px;
  }
  .card-content h3 {
    font-size: 18px;
    font-weight: var(--fw-medium);
  }
  .card-content p {
    font-size: var(--fs-xs);
  }
  .expertise-icon {
    height: 80px;
    width: 80px;
  }
}

/* ==========================================================================
   WHY CHOOSE SAAS SECTION STYLES
   ========================================================================== */

/* Theme Variables Scope */
:root {
  --why-choose-bg-emerald: #147640;
  --why-choose-bg-dark: #0e5a30;
  --why-choose-bg-deep: #094022;

  --why-choose-glass-bg: rgba(255, 255, 255, 0.12);
  --why-choose-glass-bg-hover: rgba(255, 255, 255, 0.18);
  --why-choose-glass-border: rgba(255, 255, 255, 0.18);
  --why-choose-glass-border-hover: rgba(255, 255, 255, 0.32);
  --why-choose-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --why-choose-glass-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.14);

  --why-choose-text-light: #ffffff;
  --why-choose-text-muted: rgba(255, 255, 255, 0.82);

  --why-choose-icon-color: #147640;

  --why-choose-btn-hover-bg: #f2faf5;
  --why-choose-btn-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  --why-choose-radius-card: 16px;
  --why-choose-radius-icon: 8px;
}

/* Main Section Container */
.why-choose-section {
  position: relative;
  z-index: 4;
  background-color: var(--why-choose-bg-emerald);
  background-image: linear-gradient(
    165deg,
    var(--why-choose-bg-emerald) 0%,
    var(--why-choose-bg-dark) 55%,
    var(--why-choose-bg-deep) 100%
  );
  padding: 80px 0;
  overflow: hidden;
  color: var(--why-choose-text-light);
}

/* Decorative Background Container & Layers */
.why-choose-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Full-section reeded glass pattern overlay */
.why-choose-reeded-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: 100%;
  object-position: center;
  opacity: 1;
  pointer-events: none;
}

/* Top-right curved wave lines (whyChooseWave1.png) */
.why-choose-wave-top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top right;
  opacity: 1;
  pointer-events: none;
}

/* Bottom-left flowing wave lines (whyChooseWave2.png) */
.why-choose-wave-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom left;
  opacity: 1;
  pointer-events: none;
}

/* Wrapper Layout: Two Column Grid */
.why-choose-wrapper {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.75fr;
  gap: 56px;
  align-items: center;
}

/* Left Column Content */
.why-choose-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.why-choose-content .section-title {
  color: var(--why-choose-text-light);
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.why-choose-content .section-title span {
  background-color: var(--neutral-white);
}

.why-choose-content h2 {
  color: var(--neutral-white);
  margin-bottom: 20px;
}

.why-choose-content > p {
  font-size: var(--fs-base);
  line-height: 24px;
  color: var(--neutral-white);
  margin-bottom: 20px;
}

/* Statistics Grid (2x2) */
.why-choose-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  margin-bottom: 36px;
}

/* Statistics Card Reusable Component */
.stat-card {
  border-radius: var(--why-choose-radius-card);
  padding: 22px;
  background: #ffffff1a;
}

.stat-card:hover {
  transform: translateY(-4px);
  background: var(--why-choose-glass-bg-hover);
  border-color: var(--why-choose-glass-border-hover);
  box-shadow: var(--why-choose-glass-shadow-hover);
}

.stat-card h3 {
  font-size: 38px;
  font-weight: var(--fw-normal);
  line-height: 38px;
  color: var(--neutral-white);
  margin-bottom: 6px;
}

.stat-card p {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--neutral-white);
  line-height: 19px;
}

/* CTA Button */
.why-choose-content > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--neutral-white);
  color: #118244;
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  border-radius: 8px;
}

.why-choose-content > a:hover {
  background-color: var(--why-choose-btn-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* Right Column: Stacked Feature Cards */
.feature-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Feature Card Reusable Component */
.why-choose-section .why-choose-feature-card {
  display: flex;
  align-items: center;
  gap: 22px;
  border-radius: var(--why-choose-radius-card);
  padding: 22px;
  background: #ffffff1a;
}

.why-choose-section .why-choose-feature-card:hover {
  transform: translateX(6px);
  background: var(--why-choose-glass-bg-hover);
  border-color: var(--why-choose-glass-border-hover);
  box-shadow: var(--why-choose-glass-shadow-hover);
}

/* Feature Card Icon Badge */
.feature-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--neutral-white);
  border-radius: var(--why-choose-radius-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.why-choose-section .why-choose-feature-card:hover .feature-card-icon {
  transform: scale(1.05);
}

/* Feature Card Typography */
.why-choose-section .why-choose-feature-card h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  color: var(--neutral-white);
  margin-bottom: 4px;
}

.why-choose-section .why-choose-feature-card p {
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #c8e8d8;
  font-weight: var(--fw-normal);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS FOR WHY CHOOSE SAAS
   ========================================================================== */

/* Breakpoint 1200px (Laptops & Small Desktops) */
@media (max-width: 1200px) {
  .why-choose-wrapper {
    gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .why-choose-section {
    padding: 60px 0;
    margin-bottom: 60px;
  }
}

/* Breakpoint 992px (Tablets - Stack Two Columns Vertically) */
@media (max-width: 992px) {
  .why-choose-wrapper {
    grid-template-columns: 1fr;
  }

  .why-choose-content > p {
    max-width: 100%;
  }

  .why-choose-section .why-choose-feature-card:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 991px) {
  .why-choose-section {
    --fs-6xl: 32px;
  }
}

@media (max-width: 576px) {
  .why-choose-section {
    --fs-6xl: 24px;
  }
}

/* Breakpoint 768px (Small Tablets / Large Phones) */
@media (max-width: 768px) {
  .why-choose-section {
    padding: 40px 0;
    margin-bottom: 40px;
  }

  .why-choose-stats-grid {
    gap: 16px;
  }

  .stat-card {
    padding: 20px 22px;
  }

  .why-choose-section .why-choose-feature-card {
    padding: 20px 24px;
    gap: 18px;
  }
}

/* Breakpoint 576px (Mobile Devices) */
@media (max-width: 576px) {
  .why-choose-section {
    padding: 40px 0;
    margin-bottom: 40px;
    opacity: 0.9;
    border-radius: 10px;
  }

  .stat-card {
    padding: 16px 18px;
  }
  .stat-card h3 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 0;
  }
  .stat-card p {
    font-size: var(--fs-xs);
  }
  .why-choose-content > a {
    width: 100%;
    text-align: center;
  }

  .why-choose-content > p {
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    line-height: 20px;
  }
  .why-choose-section .why-choose-feature-card {
    padding: 18px 20px;
    gap: 16px;
    align-items: start;
  }

  .why-choose-section .why-choose-feature-card .feature-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
  }
  .why-choose-section .why-choose-feature-card .feature-card-icon img {
    width: 20px;
    height: 20px;
  }

  .why-choose-section .why-choose-feature-card h3 {
    font-size: var(--fs-base);
  }
  .feature-card p {
    font-size: 0.85rem;
  }
  .why-choose-content h2 {
    margin-bottom: 10px;
  }
  .why-choose-wave-top-right {
    object-fit: none;
  }
  .why-choose-wave-bottom-left {
    object-fit: none;
  }
  .why-choose-reeded-pattern {
    display: none;
  }
}

/* ==========================================================================
   FEATURED BRANDS SECTION STYLES
   ========================================================================== */

/* Theme Variables Scope */
:root {
  --brands-bg: #ffffff;
  --brands-bg-glow: radial-gradient(
    ellipse at bottom,
    rgba(17, 130, 68, 0.08) 0%,
    rgba(17, 130, 68, 0.02) 45%,
    transparent 70%
  );
  --brands-banner-bg: linear-gradient(
    180deg,
    rgba(244, 249, 246, 0.55) 0%,
    rgba(234, 246, 239, 0.75) 100%
  );
  --brands-cube-bg: rgba(226, 238, 232, 0.6);
  --brands-nav-border: #e5e7eb;
  --brands-nav-active-color: #1e1e1e;
  --brands-nav-active-bar: #118244;
  --brands-nav-active-bg: rgba(17, 130, 68, 0.05);
  --brands-text-color: #1e1e1e;
  --brands-muted-color: #5d636c;
}

/* Main Section Container */
.brands-section {
  position: relative;
  z-index: 5;
  background-color: var(--brands-bg, #ffffff);
  overflow: hidden;
}
.brands-section-sub-container {
  border-right: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  padding-top: 80px;
}

/* Subtle background lines/gradient decoration overlay */
.brands-bg-overlay {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Decorative Corner Background Images */
.brands-cubes-img {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  animation: hp-float-slow 8s ease-in-out infinite;
}

.brands-cubes-img--top-left {
  left: 380px;
  width: 189px;
  height: auto;
}

.brands-cubes-img--top-right {
  right: 380px;
  width: 135px;
  height: auto;
}

/* Centered Header Block */
.brands-header {
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brands-header .section-title {
  color: #1e1e1e;
  margin-bottom: 10px;
}
.brands-header .section-heading {
  margin-bottom: 10px;
}
.brands-header > p {
  font-size: var(--fs-base);
  line-height: 24px;
  color: #5d636c;
  font-weight: var(--fw-normal);
  margin-bottom: 40px;
  max-width: 680px;
}

/* Horizontal Category Navigation Tabs */
/* Horizontal Category Navigation Tabs wrapper (matching tech-tabs-wrapper) */
.brands-nav-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto var(--space-8);
  display: flex;
  align-items: center;
}

.brands-tab-arrow {
  display: none;
  background: var(--neutral-white);
  border: 1px solid #eaeaea;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
}

.brands-tab-arrow.prev-arrow {
  left: 4px;
}

.brands-tab-arrow.next-arrow {
  right: 4px;
}

.brands-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.brands-nav::-webkit-scrollbar {
  display: none;
}

.brands-nav a {
  font-size: var(--fs-base);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  padding: 12px 20px;
  cursor: pointer;
  position: relative;
  transition: var(--transition-base);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}

.brands-nav a:hover {
  color: var(--color-text-dark);
}

.brands-nav a.active {
  color: var(--color-text-dark);
  font-weight: var(--fw-medium);
  background: linear-gradient(180deg, #ffffff 0%, #dceae2 100%);
}

.brands-nav a.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
}

/* Brand Logos Showcase Banner & Tab Panels */
.brands-logos-wrapper {
  position: relative;
  width: 100%;
}

.brands-logos {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 40px 48px;
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brands-tab-panel:not(.active) {
  display: none !important;
}

.brands-tab-panel {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  border-top: 1px solid #e6e6e6;
}

.brands-tab-panel.active {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
}
.brands-section-container {
  border-bottom: 1px solid #e6e6e6;
}
/* Bottom Overlay Image */
.brands-overlay-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
}

.brands-logos div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 120px;
}

.brands-logos img {
  max-height: 42px;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(0%);
  opacity: 0.9;
  transition:
    transform var(--transition-fast, 0.2s ease),
    opacity var(--transition-fast, 0.2s ease);
}

.brands-logos img:hover {
  opacity: 1;
  transform: scale(1.06);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS FOR FEATURED BRANDS
   ========================================================================== */

@media (max-width: 1441px) {
  .brands-cubes-img--top-left {
    left: 150px;
  }

  .brands-cubes-img--top-right {
    right: 150px;
  }
}

/* Breakpoint 1200px (Laptops) */
@media (max-width: 1200px) {
  .brands-cubes {
    transform: scale(0.85);
  }

  .brands-cubes-img--top-left {
    left: 20px;
  }

  .brands-cubes-img--top-right {
    right: 20px;
  }

  .brands-logos {
    padding: 36px 32px;
  }
  .brands-section-sub-container {
    padding-top: 0;
  }
}

@media (max-width: 991px) {
  .brands-section {
    --fs-6xl: 32px;
  }
}

@media (max-width: 576px) {
  .brands-section {
    --fs-6xl: 24px;
  }
}

/* Breakpoint 992px (Tablets) */
@media (max-width: 992px) {
  .brands-cubes-img {
    opacity: 0.5;
  }

  .brands-nav-wrapper {
    padding: 0 30px;
    width: 100%;
  }

  .brands-tab-arrow {
    display: flex;
  }

  .brands-nav {
    gap: 12px;
  }

  .brands-nav a {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .brands-logos {
    gap: 24px;
    padding: 32px 24px;
  }

  .brands-logos img {
    max-height: 36px;
    max-width: 120px;
  }

  .brands-bg-overlay {
    height: 90px;
  }
  .brands-section .container {
    padding-top: 40px;
  }
}

/* Breakpoint 768px (Small Tablets) */
@media (max-width: 768px) {
  .brands-cubes-img {
    display: none;
  }

  .brands-bg-overlay {
    height: 70px;
  }

  .brands-nav {
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .brands-nav a {
    padding: 8px 12px;
    font-size: var(--fs-sm);
  }

  .brands-logos {
    overflow-x: auto;
    justify-content: flex-start;
    padding: 28px 20px;
    gap: 36px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .brands-logos::-webkit-scrollbar {
    display: none;
  }

  .brands-logos div {
    flex: 0 0 auto;
  }
  .brands-section .container {
    padding-top: 20px;
  }
}

/* Breakpoint 576px (Mobile Devices) */
@media (max-width: 576px) {
  .brands-bg-overlay {
    height: 50px;
  }

  .brands-header > p {
    font-size: var(--fs-xs);
    margin-bottom: 24px;
  }



  .brands-logos {
    gap: 28px;
    padding: 24px 16px;
  }

  .brands-logos img {
    max-height: 32px;
    max-width: 100px;
  }
  .brands-section .container {
    padding-top: 0px;
  }
}

/* ==========================================================================
   CUSTOMER SUCCESS (TESTIMONIALS) SECTION STYLES
   ========================================================================== */

/* Theme Variables Scope */
:root {
  --testimonials-bg: #f5f9f6;
  --testimonials-card-bg: #ffffff;
  --testimonials-card-border: rgba(17, 130, 68, 0.08);
  --testimonials-card-radius: 20px;
  --testimonials-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  --testimonials-card-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.09);

  --promo-card-bg-start: #1b854b;
  --promo-card-bg-end: #0f5431;

  --testimonials-star-color: #1e1e1e;
  --testimonials-text-dark: #1e1e1e;
  --testimonials-text-muted: #5d636c;

  --testimonials-btn-color: #1e1e1e;
  --testimonials-btn-hover-bg: #118244;
  --testimonials-btn-hover-color: #ffffff;
}

/* Main Section Container */
.testimonials-section {
  position: relative;
  z-index: 6;
  overflow: hidden;
  border: 1px solid #e6e6e6;
}

/* Large Outer Container Panel */
.testimonials-container {
  background-color: #ffffff;
  border-right: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
}

/* Header Row Layout */
.testimonials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 36px 40px;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0;
}

.testimonials-section .section-title {
  margin-bottom: 10px;
}

/* Header Prev/Next Arrow Navigation Buttons */
.testimonials-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  color: var(--testimonials-btn-color, #1e1e1e);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast, 0.2s ease);
  background-color: #ffffff;
}

.testimonial-btn:hover {
  background-color: var(--testimonials-btn-hover-bg, #118244);
  color: var(--testimonials-btn-hover-color, #ffffff);
  border-color: var(--testimonials-btn-hover-bg, #118244);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(17, 130, 68, 0.2);
}

/* Testimonials Inner Body Soft Panel */
.testimonials-body {
  background: linear-gradient(to top, #dceae2 0%, #ffffff 100%);
  padding: 36px 40px;
}

/* Testimonials Swiper Slider Track */
.testimonials-swiper {
  width: 100%;
  padding: 4px 4px 10px 4px !important;
  overflow: hidden;
}

.testimonials-swiper .swiper-slide {
  height: auto;
  display: flex;
}

/* Card 1: Branded Left Card */
.promo-card {
  width: 100%;
  height: 100%;
  background-color: #147640;
  /* background-image moved to inline <style> in index.html (home page only) */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  box-shadow: 0 8px 24px rgba(17, 130, 68, 0.15);
  transition:
    transform var(--transition-normal, 0.3s ease),
    box-shadow var(--transition-normal, 0.3s ease);
}

.promo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(17, 130, 68, 0.22);
}

.promo-card img {
  max-width: 140px;
  height: auto;
  filter: brightness(0) invert(1);
}

.promo-card h2 {
  font-size: 28px;
  font-weight: var(--fw-medium);
  color: #ffffff;
  line-height: 36px;
}

/* Cards 2+: Testimonial Cards */
.testimonial-card {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  transition:
    transform var(--transition-normal, 0.3s ease),
    box-shadow var(--transition-normal, 0.3s ease),
    border-color var(--transition-normal, 0.3s ease);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: rgba(17, 130, 68, 0.25);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Rating Stars */
.rating-stars {
  display: flex;
  gap: 6px;
  color: var(--testimonials-star-color, #1e1e1e);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

/* Testimonial Text */
.testimonial-card > p {
  font-size: var(--fs-base);
  line-height: 20px;
  font-weight: var(--fw-normal);
  color: #5d636c;
  margin-bottom: 32px;
  flex-grow: 1;
}

/* Author Info Block */
.author-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.author-info .avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform var(--transition-fast, 0.2s ease);
}

.testimonial-card:hover .author-info .avatar-img {
  transform: scale(1.08);
}

.author-info h3 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #1e1e1e;
  line-height: 20px;
  margin-bottom: 2px;
}

.author-info p {
  font-size: var(--fs-xs);
  color: #858c97;
  line-height: 14px;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS FOR CUSTOMER SUCCESS (TESTIMONIALS)
   ========================================================================== */

/* Breakpoint 1200px (Laptops) */
@media (max-width: 1200px) {
  .promo-card,
  .testimonial-card {
    padding: 32px 28px;
  }
}

@media (max-width: 991px) {
  .testimonials-section {
    --fs-6xl: 32px;
  }
}

@media (max-width: 576px) {
  .testimonials-section {
    --fs-6xl: 24px;
  }
}

/* Breakpoint 992px (Tablets) */
@media (max-width: 992px) {
  .testimonials-header {
    padding: 28px 32px;
  }

  .testimonials-body {
    padding: 28px 32px;
  }

  .promo-card,
  .testimonial-card {
    min-height: 350px;
  }
}

/* Breakpoint 768px (Small Tablets) */
@media (max-width: 768px) {
  .testimonials-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
  }

  .testimonials-controls {
    align-self: flex-end;
  }

  .testimonials-body {
    padding: 24px 20px;
  }

  .promo-card,
  .testimonial-card {
    padding: 28px 24px;
  }
}

/* Breakpoint 576px (Mobile Devices) */
@media (max-width: 576px) {
  .testimonials-header {
    padding: 20px 16px;
  }

  .testimonials-body {
    padding: 20px 16px;
  }

  .promo-card,
  .testimonial-card {
    padding: 24px 20px;
    min-height: 320px;
  }

  .promo-card h2 {
    font-size: 1.35rem;
  }

  .testimonial-card > p {
    font-size: var(--fs-sm);
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   LATEST NEWS SECTION STYLES
   ========================================================================== */

/* Theme Variables Scope */
:root {
  --news-bg: #ffffff;
  --news-card-bg: #f7f9f7;
  --news-card-border: rgba(17, 130, 68, 0.08);
  --news-card-radius: 20px;
  --news-badge-bg: #e6f4eb;
  --news-badge-color: #118244;
  --news-text-dark: #1e1e1e;
  --news-text-muted: #646a73;
  --news-link-color: #118244;
  --news-cta-bg: #118244;
  --news-cta-hover-bg: #0d6836;
}

/* Section Container */
.news-section {
  background-color: var(--news-bg);
  position: relative;
  z-index: 7;
  border: 1px solid #e6e6e6;
  margin-top: 80px;
}
.news-section .section-title {
  margin-bottom: 10px;
}
/* Header Row */
.news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 48px 30px;
  border-right: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
}

/* Top-Right CTA Button */
.btn-news-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--news-cta-bg);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  padding: 14px 26px;
  border-radius: 12px;
  text-decoration: none;
  transition: all var(--transition-fast, 0.2s ease);
  box-shadow: 0 4px 14px rgba(17, 130, 68, 0.2);
}

.btn-news-cta:hover {
  background-color: var(--news-cta-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 130, 68, 0.3);
  color: #ffffff;
}

.btn-news-cta i {
  font-size: 0.85rem;
  transition: transform var(--transition-fast, 0.2s ease);
}

.btn-news-cta:hover i {
  transform: translateX(4px);
}

/* News Grid (3 Columns) */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 30px;
  border-top: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
}

/* News Card */
.news-card {
  background-color: #f7f7f7;
  border-radius: var(--news-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--transition-normal, 0.3s ease),
    box-shadow var(--transition-normal, 0.3s ease),
    border-color var(--transition-normal, 0.3s ease);
}

.news-card:hover {
  transform: translateY(-8px);
  border-color: rgba(17, 130, 68, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
}

/* Card Featured Image */
.news-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-card-image img {
  transform: scale(1.06);
}

/* Card Content Body */
.news-card-body {
  padding: 28px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Metadata Row (Badge + Date) */
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.news-card-meta span {
  background-color: #e4f0ec;
  color: var(--news-badge-color);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 4px;
  line-height: 1;
}

.news-card-meta time {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: #838383;
}

/* Title & Description */
.news-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--neutral-black);
  line-height: 23px;
  margin-bottom: 12px;
  transition: color var(--transition-fast, 0.2s ease);
}

.news-card:hover h3 {
  color: var(--news-link-color);
}

.news-card p {
  font-size: var(--fs-sm);
  line-height: 20px;
  color: #5d636c;
  margin-bottom: 24px;
  flex-grow: 1;
}

/* Card Footer Link */
.news-card-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 18px;
  margin-top: auto;
}

.news-card-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--news-link-color);
  text-decoration: none;
  transition: gap var(--transition-fast, 0.2s ease);
}

.news-card-footer a i {
  font-size: 0.85rem;
  transition: transform var(--transition-fast, 0.2s ease);
}

.news-card:hover .news-card-footer a i {
  transform: translateX(4px);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR LATEST NEWS
   ========================================================================== */

/* Breakpoint 1200px (Laptops) */
@media (max-width: 1200px) {
  .news-grid {
    gap: 24px;
  }

  .news-card-body {
    padding: 24px 22px 20px 22px;
  }
}

@media (max-width: 991px) {
  .news-section {
    --fs-6xl: 32px;
  }
}

@media (max-width: 576px) {
  .news-section {
    --fs-6xl: 24px;
  }
}

/* Breakpoint 992px (Tablets - 2 Columns) */
@media (max-width: 992px) {
  .news-section {
    margin-top: 60px;
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Breakpoint 768px (Small Tablets) */
@media (max-width: 768px) {
  .news-section {
    margin-top: 40px;
  }

  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .btn-news-cta {
    align-self: flex-start;
  }
}

/* Breakpoint 576px (Mobile Devices - 1 Column) */
@media (max-width: 576px) {
  .news-section {
    margin-top: 40px;
  }

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

  .news-card-body {
    padding: 20px 18px;
  }

  .news-card h3 {
    font-size: 1.08rem;
  }
  .btn-news-cta {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .news-header {
    padding: 20px;
  }
  .news-grid {
    padding: 20px;
  }
}

/* ==========================================================================
   MARKETPLACE PREVIEW & CONTACT US SECTION STYLES
   ========================================================================== */

/* Theme Variables Scope */
:root {
  --mp-bg: #f4f8f5;
  --mp-card-bg: #ffffff;
  --mp-card-border: rgba(17, 130, 68, 0.08);
  --mp-card-radius: 18px;
  --mp-contact-radius: 24px;
  --mp-badge-cat-bg: #f0f2f0;
  --mp-badge-cat-color: #5d636c;
  --mp-badge-status-bg: #e6f4eb;
  --mp-badge-status-color: #118244;
  --mp-text-dark: #1e1e1e;
  --mp-text-muted: #646a73;
  --mp-btn-green: #118244;
  --mp-btn-green-hover: #0d6836;
  --mp-input-bg: #f4f6f4;
}

/* Main Section Container with Background Artwork */
.marketplace-contact-section {
  position: relative;
  z-index: 8;
  background-color: var(--mp-bg);
  padding: 80px 0;
  overflow: visible;
  margin-top: 80px;
}
.marketplace-contact-section .section-title {
  margin-bottom: 20px;
}

.marketplace-contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-image moved to inline <style> in index.html (home page only) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.marketplace-contact-section .container {
  position: relative;
  z-index: 1;
}

/* Top Header Row */
.marketplace-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
}

/* Top Right CTA Button */
.btn-marketplace-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--mp-btn-green);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 12px;
  text-decoration: none;
  transition: all var(--transition-fast, 0.2s ease);
  box-shadow: 0 4px 14px rgba(17, 130, 68, 0.2);
}

.btn-marketplace-cta:hover {
  background-color: var(--mp-btn-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 130, 68, 0.3);
  color: #ffffff;
}

.btn-marketplace-cta i {
  font-size: 0.85rem;
  transition: transform var(--transition-fast, 0.2s ease);
}

.btn-marketplace-cta:hover i {
  transform: translateX(4px);
}

/* Marketplace Product Cards Grid (4 Columns) */
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.marketplace-card {
  background-color: var(--mp-card-bg);
  border: 1px solid var(--mp-card-border);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
  transition:
    transform var(--transition-normal, 0.3s ease),
    box-shadow var(--transition-normal, 0.3s ease),
    border-color var(--transition-normal, 0.3s ease);
}

.marketplace-card:hover {
  transform: translateY(-6px);
  border-color: rgba(17, 130, 68, 0.25);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

/* Card Badges Row */
.card-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.badge-cat {
  background-color: #f5f5f5;
  color: #838383;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 5px 10px;
  border-radius: 4px;
}

.badge-status {
  background-color: #e4f0ec;
  color: #118244;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 5px 10px;
  border-radius: 4px;
}

/* Card Title */
.marketplace-card h3 {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  color: #1e1e1e;
  line-height: 28px;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Card Price Row */
.card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.card-price-row p {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
}

.card-price-row p span:first-child {
  color: #118244;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 17px;
}

.card-price-row p strong {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: #118244;
  line-height: 17px;
}

.card-price-row p span:last-child {
  color: #5d636c;
  font-weight: var(--fw-normal);
  font-size: var(--fs-base);
  line-height: 17px;
}

.card-price-row .price-quote {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mp-btn-green);
}

.btn-add-product {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--mp-btn-green);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast, 0.2s ease);
}

.btn-add-product:hover {
  background-color: var(--mp-btn-green-hover);
  transform: scale(1.12);
  box-shadow: 0 4px 10px rgba(17, 130, 68, 0.3);
}

/* ==========================================================================
   CONTACT US CARD CONTAINER
   ========================================================================== */
.contact-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid var(--mp-card-border);
  border-radius: 32px;
  padding: 60px 50px 50px 50px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
  overflow: visible;
  z-index: 1;
}

/* Wavy Background Graphic Overlay */
.contact-wavy-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.contact-wavy-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  /* background-image moved to inline <style> in index.html (home page only) */
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  pointer-events: none;
}

.contact-wavy-bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* background-image moved to inline <style> in index.html (home page only) */
  background-size: contain;
  background-position: right top;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Contact Header Centered */
.contact-header {
  text-align: center;
  margin: 0 auto 40px auto;
}

.contact-header p {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 25px;
  color: #5d636c;
  margin-top: 10px;
}

/* Contact Info 4-Column Grid */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px;
  margin-bottom: 40px;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-info-item .info-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 6px 6px 16px 0px #7a7f8240;
}

.item-email .info-icon {
  background: linear-gradient(
    120.12deg,
    rgba(74, 191, 102, 0.1) -11.32%,
    rgba(74, 191, 102, 0.2) 51.65%,
    rgba(255, 255, 255, 0) 119.17%
  );
}

.item-phone .info-icon {
  background: linear-gradient(
    120.12deg,
    rgba(25, 186, 206, 0.1) -11.32%,
    rgba(25, 186, 206, 0.2) 51.65%,
    rgba(255, 255, 255, 0) 119.17%
  );
}

.item-location .info-icon {
  background: linear-gradient(
    120.12deg,
    rgba(252, 177, 45, 0.1) -11.32%,
    rgba(252, 177, 45, 0.2) 51.65%,
    rgba(255, 255, 255, 0) 119.17%
  );
}

.item-hours .info-icon {
  background: linear-gradient(
    120.12deg,
    rgba(106, 102, 215, 0.1) -11.32%,
    rgba(106, 102, 215, 0.2) 51.65%,
    rgba(255, 255, 255, 0) 119.17%
  );
}

.contact-info-item h3 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  color: #1e1e1e;
  margin-bottom: 2px;
}

.contact-info-item p {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: #5d636c;
  line-height: 25px;
}

.contact-info-item p a {
  color: var(--mp-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast, 0.2s ease);
}

.contact-info-item p a:hover {
  color: var(--mp-btn-green);
}

/* Contact Form */
.contact-form {
  position: relative;
  z-index: 3;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background-color: #f6f6f6;
  border: none;
  border-radius: 8px;
  padding: 15px 20px;
  font-size: var(--fs-sm);
  color: #5d636c;
  transition: all var(--transition-fast, 0.2s ease);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9aa0a6;
}

.contact-form input:focus,
.contact-form textarea:focus {
  background-color: #ffffff;
  border-color: var(--mp-btn-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 130, 68, 0.12);
}

.contact-form textarea {
  resize: vertical;
  margin-bottom: 24px;
}

.form-submit-row {
  text-align: center;
}

.btn-submit-request {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--mp-btn-green);
  color: #ffffff;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  padding: 12px 25px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast, 0.2s ease);
  box-shadow: 0 6px 18px rgba(17, 130, 68, 0.25);
}

.btn-submit-request:hover {
  background-color: var(--mp-btn-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(17, 130, 68, 0.35);
}

.btn-submit-request i {
  font-size: 0.85rem;
  transition: transform var(--transition-fast, 0.2s ease);
}

.btn-submit-request:hover i {
  transform: translateX(4px);
}

/* Globe Decorative Overlay (Card Bottom Right Overflow) */
.marketplace-globe-img {
  position: absolute;
  right: -150px;
  bottom: -440px;
  height: auto;
  pointer-events: none;
  z-index: 5;
}

.marketplace-globe-mobile {
  display: none;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR MARKETPLACE PREVIEW & CONTACT US
   ========================================================================== */

/* Breakpoint 1200px (Laptops) */
@media (max-width: 1200px) {
  .marketplace-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .marketplace-card {
    padding: 20px 16px;
  }

  .contact-info-grid {
    gap: 14px;
  }

  .contact-info-item {
    padding: 14px 12px;
  }

  .marketplace-globe-img {
    right: -30px;
    bottom: -450px;
  }
}

@media (max-width: 991px) {
  .marketplace-contact-section {
    --fs-6xl: 32px;
  }
}

@media (max-width: 576px) {
  .marketplace-contact-section {
    --fs-6xl: 24px;
  }
}

/* Breakpoint 992px (Tablets) */
@media (max-width: 992px) {
  .marketplace-contact-section {
    padding: 60px 0;
    margin-top: 60px;
  }

  .marketplace-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .contact-card {
    padding: 40px 30px;
  }

  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .contact-form .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .marketplace-globe-img {
    right: -30px;
    bottom: -400px;
  }
}

/* Breakpoint 768px (Small Tablets) */
@media (max-width: 768px) {
  .marketplace-contact-section {
    padding: 40px 0;
    margin-top: 40px;
  }

  .marketplace-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .btn-marketplace-cta {
    align-self: flex-start;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .marketplace-globe-img {
    right: -30px;
    bottom: -400px;
  }
}

/* Breakpoint 576px (Mobile Devices) */
@media (max-width: 576px) {
  .marketplace-contact-section {
    padding: 40px 0 120px 0;
    margin-top: 40px;
  }

  .marketplace-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .contact-card {
    padding: 30px 15px;
  }

  .btn-submit-request {
    width: 100%;
    justify-content: center;
  }

  .marketplace-globe-desktop {
    display: none;
  }

  .marketplace-globe-mobile {
    display: block;
    right: 18px;
    bottom: -500px;
  }
  .contact-header p {
    font-size: var(--fs-xs);
    line-height: 20px;
  }
  .contact-header {
    margin: 0 auto 30px auto;
  }
  .contact-info-item {
    padding: 12px 0px;
  }
  .marketplace-contact-section::before {
    background-size: 100% 100%;
  }
  .marketplace-contact-section .section-title {
    margin-bottom: 10px;
  }
}

/* --------------------------------------------------------------------------
   UTILITY: Scroll anchor (replaces inline style on anchor divs)
   -------------------------------------------------------------------------- */
.scroll-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   CONTACT CARD — Wave background z-index layering
   -------------------------------------------------------------------------- */
.contact-wavy-bg {
  z-index: 0;
}

.contact-header,
.contact-info-grid,
.contact-form {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   ==========================================================================
   SECTION III: ABOUT US PAGE STYLES (about.html)
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   ABOUT US PAGE
   ========================================================================== */

/* --- Hero Section --- */
.about-hero-section {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: center;
  padding-top: calc(var(--header-height) + 40px);
  margin-bottom: var(--space-16);
}

.section-title span {
  width: 8px;
  height: 8px;
  background-color: #118244;
  border-radius: 50%;
  display: inline-block;
}

.digital-future-card {
  background-color: #e7f1ec;
  border-radius: 32px;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.digital-future-card h1 {
  font-size: var(--fs-6xl);
  font-weight: 500;
  color: var(--color-black);
  line-height: 1.12;
  margin-bottom: var(--space-1);
}

.digital-future-card h1 span {
  color: var(--color-primary);
  display: block;
}

.digital-future-card p {
  font-family:
    "Google Sans Flex",
    "Outfit",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  font-weight: var(--fw-normal);
  color: #5d636c;
  margin-bottom: var(--space-2);
  max-width: 520px;
}

.digital-future-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-weight: var(--fw-medium);
  color: #ffffff;
  margin-bottom: var(--space-2);
}

.btn-explore {
  background-color: #1e7542;
  color: #ffffff;
  height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: var(--fw-medium);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--transition-fast);
  border: none;
  box-shadow: none;
}

.btn-explore i,
.btn-explore img {
  transition: transform var(--transition-fast);
}

.btn-explore i {
  font-size: 13px;
}

.btn-explore img {
  width: 24px;
  height: 24px;
}

.btn-explore:hover {
  background-color: #165b33;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn-explore:hover i,
.btn-explore:hover img {
  transform: translateX(4px);
}

.btn-demo {
  background-color: #ffffff;
  color: var(--color-primary);
  height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: var(--fw-medium);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: 0px 0px 14px 0px #eef0f1;
}

.btn-demo:hover {
  background-color: #f8fafc;
  color: #165b33;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: var(--space-2);
}

.stat-item {
  background: #ffffff;
  border-radius: 20px;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-fast);
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.stat-icon-wrapper {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background-color: #e7f1ec;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #118244;
}

.stat-icon-wrapper img,
.stat-icon-wrapper i {
  width: 24px;
  height: 24px;
  display: block;
}

.stat-item > div:last-child {
  display: flex;
  flex-direction: column;
}

.stat-item > div:last-child span:first-child {
  font-family: "Google Sans Flex", "Outfit", sans-serif;
  font-size: 28px;
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  line-height: 1.1;
}

.stat-item > div:last-child span:last-child {
  font-family: "Google Sans Flex", "Outfit", sans-serif;
  font-size: 16px;
  font-weight: var(--fw-normal);
  color: #5d636c;
  line-height: 1.2;
}

.digital-future-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.digital-future-visual img {
  width: 100%;
  height: auto;
  max-width: 520px;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.04));
  transition: transform var(--transition-normal);
  animation: floatIllustration 5s ease-in-out infinite alternate;
}

@media (min-width: 1200px) {
  .about-hero-section.container {
    max-width: 1320px;
  }
  .digital-future-visual img {
    max-width: 600px;
  }
}

@media (min-width: 1400px) {
  .about-hero-section.container {
    max-width: 1440px;
  }
  .digital-future-visual img {
    max-width: 680px;
  }
}

.digital-future-visual:hover img {
  transform: translateY(-8px);
}

@media (max-width: 991px) {
  .about-hero-section {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    padding-top: calc(var(--header-height) + 10px);
  }

  .digital-future-card h1 {
    font-size: 32px;
    line-height: 1.3;
  }

  .digital-future-visual {
    order: -1;
    width: 100%;
    justify-content: center;
  }

  .digital-future-visual img {
    max-width: 520px;
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 576px) {
  .about-hero-section {
    padding-top: calc(var(--header-height) + 0px);
  }

  .digital-future-card {
    padding: var(--space-6) var(--space-5);
    border-radius: 24px;
  }

  .digital-future-card h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  .digital-future-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .btn-explore,
  .btn-demo {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* PARTNER SECTION */

.about-partner {
  background-color: var(--color-bg-dark);
  padding-top: 40px;
  padding-bottom: 80px;
}

.partner-header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.partner-header h2 {
  font-size: var(--fs-6xl);
  color: var(--color-black);
  margin-bottom: 0;
  font-weight: 500;
}

.partner-header h2 span {
  color: var(--color-primary);
}

.partner-header p {
  color: var(--color-text-dark-gray);
  font-size: 15px;
  margin: 0;
}

.partner-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.partner-card {
  background-color: var(--neutral-white);
  border: 1px solid #f1f5f9;
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
  cursor: pointer;
}

.partner-card:not(.active):hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.partner-card.active:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(17, 130, 68, 0.25);
}

.partner-card > div:first-child {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  background-color: #e8f5ed;
  transition: background-color var(--transition-normal);
}

.partner-card > div:first-child img {
  width: 24px;
  height: 24px;
  transition: filter var(--transition-normal);
}

.partner-card h3 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: var(--space-4);
  color: var(--color-black);
  transition: color var(--transition-normal);
}

.partner-card p {
  font-size: 15px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  color: var(--color-text-dark-gray);
  transition: color var(--transition-normal);
}

.partner-card > img.bg-graphic {
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: 0;
  transition:
    filter var(--transition-normal),
    opacity var(--transition-normal);
}

.has-bg-purpose > img.bg-graphic {
  max-width: 120px;
  opacity: 0.8;
}

.has-bg-map > img.bg-graphic {
  max-width: 180px;
}

.partner-card.active {
  background-color: var(--green-600);
  border-color: var(--green-600);
}

.partner-card.active > div:first-child {
  background-color: rgba(255, 255, 255, 0.15);
}

.partner-card.active > div:first-child img {
  filter: brightness(0) invert(1);
}

.partner-card.active h3 {
  color: var(--neutral-white);
}

.partner-card.active p {
  color: var(--neutral-white);
}

.partner-card.active > img.bg-graphic {
  filter: brightness(0) invert(1);
  opacity: 0.35;
}

.presence-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
  z-index: 1;
  margin-top: var(--space-6);
}

.presence-list > div {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.presence-list > div > div:first-child {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.presence-list > div > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presence-list > div > div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.presence-list h4 {
  font-size: 15px;
  color: var(--color-black);
  margin: 0 0 2px 0;
  font-weight: 600;
  transition: color var(--transition-normal);
}

.presence-list span {
  font-size: 13px;
  color: var(--color-text-dark-gray);
  transition: color var(--transition-normal);
}

.partner-card.active .presence-list h4,
.partner-card.active .presence-list span {
  color: var(--neutral-white);
}

@media (max-width: 991px) {
  .partner-cards {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .partner-header h2 {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .partner-header h2 {
    font-size: 24px;
  }
}

/* who we are section */

.who-we-are-container {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.who-we-are-image {
  flex: 1;
  max-width: 45%;
}

.who-we-are-image img {
  width: 100%;
  height: auto;
  display: block;
  animation: floatIllustration 6s ease-in-out infinite alternate;
}

.who-we-are-content {
  flex: 1;
}

.who-we-are-content h2 {
  font-size: var(--fs-6xl);
  color: var(--color-black);
  margin-bottom: var(--space-4);
  font-weight: 500;
}

.who-we-are-content h2 span {
  color: var(--color-primary);
  font-weight: 500;
}

.who-we-are-content p {
  color: var(--color-text-dark-gray);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.about-features .feature-card {
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.about-features .feature-card::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 60%,
    rgba(17, 130, 68, 0.4) 80%,
    var(--color-primary) 100%
  );
  animation: borderRotate 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.about-features .feature-card::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--color-bg-dark);
  border-radius: calc(var(--radius-md) - 1.5px);
  z-index: 1;
  transition: background-color var(--transition-normal);
}

.about-features .feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.about-features .feature-icon,
.about-features .feature-text,
.about-features .feature-number {
  position: relative;
  z-index: 2;
}

.about-features .feature-icon {
  width: 72px;
  height: 72px;
  background: var(--color-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  flex-shrink: 0;
}

.about-features .feature-icon img {
  width: 40px;
  height: 40px;
  display: block;
  transition: transform var(--transition-fast);
}

.about-features .feature-card:hover .feature-icon img {
  transform: scale(1.1);
}

.about-features .feature-text {
  flex: 1;
  max-width: none;
}

.about-features .feature-text h3 {
  font-size: var(--fs-base);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-medium);
}

.about-features .feature-text p {
  font-size: var(--fs-sm);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  margin-bottom: 0;
  line-height: 1.5;
}

.about-features .feature-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: var(--space-4);
  padding-top: 4px;
}

.about-features .feature-number span {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: #1182441a;
  line-height: 0.8;
}

@keyframes borderRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 991px) {
  .who-we-are-container {
    flex-direction: column;
  }

  .who-we-are-image {
    max-width: 80%;
  }

  .who-we-are-content h2 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .who-we-are-image {
    max-width: 100%;
  }

  .about-features .feature-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-features .feature-number {
    position: static;
    margin-top: 10px;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .who-we-are-content h2 {
    font-size: 24px;
  }
}

/* MILESTONES SECTION */
.about-milestones {
  padding-top: var(--space-12);
  padding-bottom: 140px;
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

.milestones-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

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

.milestones-header h2 {
  font-size: var(--fs-6xl);
  color: var(--color-black);
  margin-bottom: 0;
  font-weight: 500;
}

.milestones-header h2 span {
  color: var(--color-primary);
}

.timeline-container {
  position: relative;
  max-width: 1054px;
  margin: 0 auto;
  padding: 220px 0;
}

.timeline-track {
  position: absolute;
  top: 50%;
  left: 9%;
  width: 82.5%;
  border-top: 2px dashed #cbd5e1;
  transform: translateY(-50%);
  z-index: 1;
}

.timeline-cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.timeline-card {
  position: absolute;
  width: 270px;
  pointer-events: none;
}

.timeline-card-inner {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  width: 100%;
  height: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
}

.timeline-card-inner::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 60%,
    rgba(17, 130, 68, 0.4) 80%,
    var(--color-primary) 100%
  );
  animation: borderRotate 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.timeline-card-inner::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--color-card-bg);
  border-radius: calc(var(--radius-lg) - 1.5px);
  z-index: 1;
}

.timeline-card-inner .year-badge,
.timeline-card-inner h3,
.timeline-card-inner p {
  position: relative;
  z-index: 2;
}

.timeline-card::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: #4abf66;
}

.top-card {
  bottom: 50%;
  margin-bottom: 50px;
}

.top-card::after {
  top: calc(100% + 10px);
  height: 40px;
}

.bottom-card {
  top: 50%;
  margin-top: 50px;
}

.bottom-card::after {
  bottom: calc(100% + 10px);
  height: 40px;
}

.track-dot {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #4abf66;
  box-shadow:
    0 0 0 4px #ffffff,
    0 0 0 10px rgba(74, 191, 102, 0.2);
  z-index: 3;
}

.top-card .track-dot {
  top: calc(100% + 50px);
  transform: translate(-50%, -50%);
}

.bottom-card .track-dot {
  bottom: calc(100% + 50px);
  transform: translate(-50%, 50%);
}

.card-dot {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4abf66;
  z-index: 3;
}

.top-card .card-dot {
  top: calc(100% + 10px);
  transform: translate(-50%, -50%);
}

.bottom-card .card-dot {
  bottom: calc(100% + 10px);
  transform: translate(-50%, 50%);
}

.card-1 {
  left: 9%;
  transform: translateX(-50%);
}

.card-2 {
  left: 25.5%;
  transform: translateX(-50%);
}

.card-3 {
  left: 42%;
  transform: translateX(-50%);
}

.card-4 {
  left: 58.5%;
  transform: translateX(-50%);
}

.card-5 {
  left: 75%;
  transform: translateX(-50%);
}

.card-6 {
  left: 91.5%;
  transform: translateX(-50%);
}

.timeline-card .year-badge {
  background-color: var(--color-primary);
  color: var(--color-bg-dark);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: var(--space-3);
  font-weight: var(--fw-medium);
}

.timeline-card h3 {
  font-size: var(--fs-lg);
  color: var(--color-black);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-medium);
}

.timeline-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-dark-gray);
  line-height: 1.5;
  margin-bottom: 0;
  font-weight: var(--fw-normal);
}

@media (max-width: 991px) {
  .about-milestones {
    padding: var(--space-12) 0;
  }

  .timeline-container {
    padding: var(--space-1) 0;
    max-width: 100%;
  }

  .timeline-track {
    top: 90px;
    bottom: 90px;
    left: 20px;
    width: 0;
    height: auto;
    border-top: none;
    border-left: 2px dashed #cbd5e1;
    transform: none;
  }

  .timeline-cards {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding-left: 60px;
    padding-right: var(--space-4);
  }

  .timeline-card {
    position: relative;
    transform: none !important;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .card-1 {
    order: 1;
  }

  .card-2 {
    order: 2;
  }

  .card-3 {
    order: 3;
  }

  .card-4 {
    order: 4;
  }

  .card-5 {
    order: 5;
  }

  .card-6 {
    order: 6;
  }

  .timeline-card::after {
    display: block;
    top: 50% !important;
    left: -30px !important;
    bottom: auto !important;
    width: 20px !important;
    height: 1px !important;
    transform: translateY(-50%) !important;
  }

  .top-card .track-dot,
  .bottom-card .track-dot {
    display: block;
    left: -40px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  .top-card .card-dot,
  .bottom-card .card-dot {
    display: block;
    left: -10px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  .milestones-header h2 {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .milestones-header h2 {
    font-size: 24px;
  }
}

/* ==========================================================================
   GET IN TOUCH / TAKE THE NEXT STEP SECTION
   ========================================================================== */
.about-get-in-touch {
  padding-top: var(--space-16);
  padding-bottom: 100px;
  background-color: #f8faf9;
  position: relative;
}

.get-in-touch-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 48px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.get-in-touch-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.get-in-touch-header h2 span {
  color: var(--color-primary);
}

.get-in-touch-header p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Top Row: 3 Equal Cards */
.get-in-touch-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

/* Base Card Style */
.touch-card {
  background-color: #ffffff;
  border: 1px solid #e8efeb;
  border-radius: 28px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-normal);
  cursor: pointer;
}

/* Card Header (Icon + Title) */
.touch-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Icon Box 52px */
.touch-card-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 16px;
  background-color: var(--color-secondary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-normal);
}

.touch-card-icon img {
  width: 26px;
  height: 26px;
  filter: brightness(0) saturate(100%) invert(37%) sepia(74%) saturate(674%)
    hue-rotate(102deg) brightness(94%) contrast(92%);
  transition: filter var(--transition-normal);
}

/* Card Title */
.touch-card-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: #000000;
  margin: 0;
  line-height: 1.25;
  transition: color var(--transition-normal);
}

/* Card Description */
.touch-card-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  font-weight: var(--fw-normal);
  margin: 0 0 32px 0;
  flex-grow: 1;
  transition: color var(--transition-normal);
}

/* Card Link */
.touch-card-link {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  transition: color var(--transition-normal);
}

.touch-card-link span {
  font-size: var(--fs-lg);
  transition: transform var(--transition-normal);
}

.touch-card:hover .touch-card-link span,
.touch-card.active-touch-card .touch-card-link span {
  transform: translateX(4px);
}

/* Hover & Selected Active Green State */
.touch-card:hover,
.touch-card.active-touch-card {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 100%
  );
  border-color: var(--color-primary);
  box-shadow: 0 16px 36px rgba(17, 130, 68, 0.2);
}

.touch-card:hover .touch-card-icon,
.touch-card.active-touch-card .touch-card-icon {
  background-color: rgba(255, 255, 255, 0.2);
}

.touch-card:hover .touch-card-icon img,
.touch-card.active-touch-card .touch-card-icon img {
  filter: brightness(0) invert(1);
}

.touch-card:hover .touch-card-title,
.touch-card.active-touch-card .touch-card-title {
  color: #ffffff;
}

.touch-card:hover .touch-card-desc,
.touch-card.active-touch-card .touch-card-desc {
  color: rgba(255, 255, 255, 0.85);
}

.touch-card:hover .touch-card-link,
.touch-card.active-touch-card .touch-card-link {
  color: #ffffff;
}

/* Bottom Row Grid: 6, 6 Equal Columns */
.get-in-touch-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Card 4 & 5 Banner Layout with Side Image */
.touch-card-partner,
.touch-card-contact {
  padding: 0;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}

.touch-card-partner-content,
.touch-card-contact-content {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  z-index: 2;
  position: relative;
}

.touch-card-partner-content .touch-card-desc,
.touch-card-contact-content .touch-card-desc {
  max-width: 260px;
}

.touch-card-partner-content .touch-card-link,
.touch-card-contact-content .touch-card-link {
  justify-content: flex-start;
  gap: 8px;
  width: auto;
}

.touch-card-partner-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 58%;
  overflow: hidden;
  z-index: 1;
}

.touch-card-contact-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  overflow: hidden;
  z-index: 1;
  mask-image: linear-gradient(to right, transparent 0%, black 20%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
}

.touch-card-partner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: transform var(--transition-normal);
}

.touch-card-contact-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform var(--transition-normal);
}

.touch-card-partner:hover .touch-card-partner-img img,
.touch-card-contact:hover .touch-card-contact-img img,
.touch-card-partner.active-touch-card .touch-card-partner-img img,
.touch-card-contact.active-touch-card .touch-card-contact-img img {
  transform: scale(1.04);
}

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES (DESKTOP FIRST)
   ========================================================================== */

/* 1199px breakpoint (Less than Extra Large / Large Desktops) */
@media (max-width: 1199px) {
  h1 {
    font-size: var(--fs-5xl);
  }

  h2 {
    font-size: var(--fs-3xl);
  }

  .main-content h1 {
    font-size: var(--fs-3xl);
  }

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

/* 991px breakpoint (Less than Large / Desktops) */
@media (max-width: 991px) {
  .hamburger {
    display: flex;
  }

  .header-actions {
    display: none;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    gap: var(--space-4);
    transform: translateX(-100%);
    transition:
      transform var(--transition-slow),
      top var(--transition-normal),
      height var(--transition-normal);
    z-index: 999;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }

  .site-header.scrolled .nav-menu {
    top: var(--header-scrolled-height);
    height: calc(100vh - var(--header-scrolled-height));
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-menu::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #e8e8e8;
    margin: 4px 0;
    flex-shrink: 0;
  }
}

@media (max-width: 1200px) {
  .what-we-do-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

/* 767px breakpoint (Less than Medium / Tablets) */
@media (max-width: 767px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .about-hero-section {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .digital-future-visual {
    height: 480px;
    min-height: 480px;
  }

  .partner-cards {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .mission-vision-grid {
    grid-template-columns: 1fr;
  }

  .values-header h2 {
    font-size: 32px;
  }

  .core-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .what-we-do-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .what-we-do-header h2 {
    font-size: 32px;
  }

  .about-what-we-do {
    padding-bottom: 80px;
  }

  .get-in-touch-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .get-in-touch-bottom-grid {
    grid-template-columns: 1fr;
  }

  .get-in-touch-header h2 {
    font-size: 32px;
  }
}

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

  .digital-future-visual {
    height: 380px;
    min-height: 380px;
  }

  .digital-future-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-explore,
  .btn-demo {
    justify-content: center;
    text-align: center;
  }

  .core-values-grid {
    grid-template-columns: 1fr;
  }

  .values-header h2,
  .core-values-title {
    font-size: 24px;
  }

  .what-we-do-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }

  .what-we-do-header h2 {
    font-size: 24px;
  }

  .about-what-we-do {
    padding-bottom: 60px;
  }

  .get-in-touch-top-grid {
    grid-template-columns: 1fr;
  }

  .get-in-touch-header h2 {
    font-size: 24px;
  }

  .touch-card-partner {
    flex-direction: column;
  }

  .touch-card-partner-img {
    position: relative;
    width: 100%;
    height: 200px;
  }

  .what-we-do-card {
    padding: 20px 14px;
    border-radius: 16px;
  }

  .what-we-do-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .what-we-do-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .what-we-do-card-icon img {
    width: 22px;
    height: 22px;
  }

  .what-we-do-card-title {
    font-size: var(--fs-lg);
  }

  .what-we-do-card-desc {
    font-size: var(--fs-sm);
    margin-bottom: 16px;
  }

  .what-we-do-card-tag {
    font-size: var(--fs-xs);
    padding: 4px 8px;
  }
}

/* ==========================================================================
   MISSION, VISION & CORE VALUES SECTION
   ========================================================================== */
.about-values {
  padding: var(--space-20) 0;
  background-color: #ebf5f0;
  position: relative;
  overflow: hidden;
}

/* Background Swoosh Images */
.about-values > img.bg-swoosh-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 65vw;
  max-width: 950px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.about-values > img.bg-swoosh-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 50vw;
  object-fit: cover;
  object-position: right top;
  pointer-events: none;
  z-index: 0;
}

.about-values .container {
  position: relative;
  z-index: 1;
}

.values-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.values-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.values-header h2 span {
  color: var(--color-primary);
}

/* Mission & Vision 2-Column Grid */
.mission-vision-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  align-items: stretch;
}

/* Mission Card (Dark Green) */
.card-mission {
  background: linear-gradient(
    160deg,
    #178347 0%,
    var(--color-primary) 60%,
    #0d6c37 100%
  );
  border-radius: 32px;
  padding: clamp(36px, 4vw, 48px) clamp(32px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 450px;
  box-shadow: 0 10px 30px rgba(17, 130, 68, 0.15);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.card-mission:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(17, 130, 68, 0.22);
}

.card-mission-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.card-mission-icon img {
  width: 46px;
  height: 46px;
}

.card-mission > span {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}

.card-mission > h3 {
  font-size: clamp(26px, 2.5vw, var(--fs-4xl));
  font-weight: var(--fw-medium);
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

.card-mission > p {
  font-size: var(--fs-lg);
  font-weight: var(--fw-normal);
  color: var(--color-text-light);
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin-bottom: 10px;
  margin: 0;
  opacity: 0.95;
}

.card-mission > img.card-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 180px;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* Vision Card (White) */
.card-vision {
  background-color: var(--color-card-bg);
  border-radius: 32px;
  padding: clamp(36px, 4vw, 48px) clamp(32px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.card-vision:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

.card-vision-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background-color: var(--color-secondary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.card-vision-icon img {
  width: 46px;
  height: 46px;
}

.card-vision > span {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  color: var(--color-primary);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}

.card-vision > h3 {
  font-size: clamp(26px, 2.5vw, var(--fs-4xl));
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.card-vision > p {
  font-size: var(--fs-lg);
  font-weight: var(--fw-normal);
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0;
}

.card-vision > img.card-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 360px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Core Values Title */
.core-values-title {
  font-size: 32px;
  font-weight: var(--fw-medium);
  color: #000000;
  margin-bottom: var(--space-6);
}

/* Core Values 4-Column Grid */
.core-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.value-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 20px 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.07);
  border-color: var(--color-primary);
}

.value-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.value-icon img {
  transition: transform var(--transition-fast);
}

.value-card:hover .value-icon img {
  transform: scale(1.15);
}

.val-innovation .value-icon {
  background-color: #fff6e9;
}

.val-commitment .value-icon {
  background-color: #eaf8fb;
}

.val-transparency .value-icon {
  background-color: #e8f5ed;
}

.val-partnership .value-icon {
  background-color: #f0effe;
}

.value-icon img {
  width: 40px;
  height: 40px;
}

.value-title {
  font-size: 22px;
  font-weight: var(--fw-medium);
  color: #000000;
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.value-desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
  font-weight: var(--fw-normal);
  margin: 0;
}

/* ==========================================================================
   WHAT WE DO / SOLUTIONS & SERVICES SECTION
   ========================================================================== */
.about-what-we-do {
  padding-top: var(--space-20);
  padding-bottom: 100px;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Corner Graphic Images */
.about-what-we-do > img.bg-top-right {
  position: absolute;
  top: 180px;
  right: 17%;
  max-width: 190px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.about-what-we-do > img.bg-bottom-left {
  position: absolute;
  bottom: 60px;
  left: 16%;
  max-width: 140px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.about-what-we-do .container {
  position: relative;
  z-index: 1;
}

.what-we-do-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.what-we-do-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.what-we-do-header h2 span {
  color: var(--color-primary);
}

.what-we-do-header p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* 8-Card Grid */
.what-we-do-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.what-we-do-card {
  background-color: #ffffff;
  border: 1px solid #e8efeb;
  border-radius: 28px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  position: relative;
  z-index: 1;
}

.what-we-do-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 16px 36px rgba(17, 130, 68, 0.08);
}

/* Card Header: Icon + Title inline */
.what-we-do-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* Icon Box 52px x 52px */
.what-we-do-card-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 16px;
  background-color: var(--color-secondary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-normal);
}

.what-we-do-card:hover .what-we-do-card-icon {
  background-color: var(--color-primary);
}

/* Icon SVG 26px x 26px */
.what-we-do-card-icon img {
  width: 26px;
  height: 26px;
  transition: filter var(--transition-normal);
}

.what-we-do-card:hover .what-we-do-card-icon img {
  filter: brightness(0) invert(1);
}

/* Card Title */
.what-we-do-card-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: #000000;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Card Description */
.what-we-do-card-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  font-weight: var(--fw-normal);
  margin: 0 0 24px 0;
  flex-grow: 1;
}

/* Tag Pills Container */
.what-we-do-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Tag Pills */
.what-we-do-card-tag {
  background-color: var(--color-secondary-light);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--fw-medium);
  padding: 5px 12px;
  border-radius: 8px;
  display: inline-block;
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal);
}

.what-we-do-card:hover .what-we-do-card-tag {
  background-color: rgba(17, 130, 68, 0.12);
}

/* ==========================================================================
   GET IN TOUCH / TAKE THE NEXT STEP SECTION
   ========================================================================== */
.about-get-in-touch {
  padding-top: var(--space-16);
  padding-bottom: 100px;
  background-color: #f8faf9;
  position: relative;
}

.get-in-touch-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 48px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.get-in-touch-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.get-in-touch-header h2 span {
  color: var(--color-primary);
}

.get-in-touch-header p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Top Row: 3 Equal Cards */
.get-in-touch-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

/* Base Card Style */
.touch-card {
  background-color: #ffffff;
  border: 1px solid #e8efeb;
  border-radius: 28px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-normal);
  cursor: pointer;
}

/* Card Header (Icon + Title) */
.touch-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Icon Box 52px */
.touch-card-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 16px;
  background-color: var(--color-secondary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-normal);
}

.touch-card-icon img {
  width: 26px;
  height: 26px;
  filter: brightness(0) saturate(100%) invert(37%) sepia(74%) saturate(674%)
    hue-rotate(102deg) brightness(94%) contrast(92%);
  transition: filter var(--transition-normal);
}

/* Card Title */
.touch-card-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: #000000;
  margin: 0;
  line-height: 1.25;
  transition: color var(--transition-normal);
}

/* Card Description */
.touch-card-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  font-weight: var(--fw-normal);
  margin: 0 0 32px 0;
  flex-grow: 1;
  transition: color var(--transition-normal);
}

/* Card Link */
.touch-card-link {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  transition: color var(--transition-normal);
}

.touch-card-link span {
  font-size: var(--fs-lg);
  transition: transform var(--transition-normal);
}

.touch-card:hover .touch-card-link span,
.touch-card.active-touch-card .touch-card-link span {
  transform: translateX(4px);
}

/* Hover & Selected Active Green State */
.touch-card:hover,
.touch-card.active-touch-card {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 100%
  );
  border-color: var(--color-primary);
  box-shadow: 0 16px 36px rgba(17, 130, 68, 0.2);
}

.touch-card:hover .touch-card-icon,
.touch-card.active-touch-card .touch-card-icon {
  background-color: rgba(255, 255, 255, 0.2);
}

.touch-card:hover .touch-card-icon img,
.touch-card.active-touch-card .touch-card-icon img {
  filter: brightness(0) invert(1);
}

.touch-card:hover .touch-card-title,
.touch-card.active-touch-card .touch-card-title {
  color: #ffffff;
}

.touch-card:hover .touch-card-desc,
.touch-card.active-touch-card .touch-card-desc {
  color: rgba(255, 255, 255, 0.85);
}

.touch-card:hover .touch-card-link,
.touch-card.active-touch-card .touch-card-link {
  color: #ffffff;
}

/* Bottom Row Grid: 6, 6 Equal Columns */
.get-in-touch-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Card 4 & 5 Banner Layout with Side Image */
.touch-card-partner,
.touch-card-contact {
  padding: 0;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}

.touch-card-partner-content,
.touch-card-contact-content {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  z-index: 2;
  position: relative;
}

.touch-card-partner-content .touch-card-desc,
.touch-card-contact-content .touch-card-desc {
  max-width: 260px;
}

.touch-card-partner-content .touch-card-link,
.touch-card-contact-content .touch-card-link {
  justify-content: flex-start;
  gap: 8px;
  width: auto;
}

.touch-card-partner-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 58%;
  overflow: hidden;
  z-index: 1;
}

.touch-card-contact-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  overflow: hidden;
  z-index: 1;
  mask-image: linear-gradient(to right, transparent 0%, black 20%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
}

.touch-card-partner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: transform var(--transition-normal);
}

.touch-card-contact-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform var(--transition-normal);
}

.touch-card-partner:hover .touch-card-partner-img img,
.touch-card-contact:hover .touch-card-contact-img img,
.touch-card-partner.active-touch-card .touch-card-partner-img img,
.touch-card-contact.active-touch-card .touch-card-contact-img img {
  transform: scale(1.04);
}

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES (DESKTOP FIRST)
   ========================================================================== */

/* 1199px breakpoint (Less than Extra Large / Large Desktops) */
@media (max-width: 1199px) {
  h1 {
    font-size: var(--fs-5xl);
  }

  h2 {
    font-size: var(--fs-3xl);
  }

  .main-content h1 {
    font-size: var(--fs-3xl);
  }

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

/* 991px breakpoint (Less than Large / Desktops) */
@media (max-width: 991px) {
  .hamburger {
    display: flex;
  }

  .header-actions {
    display: none;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    gap: var(--space-4);
    transform: translateX(-100%);
    transition:
      transform var(--transition-slow),
      top var(--transition-normal),
      height var(--transition-normal);
    z-index: 999;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }

  .site-header.scrolled .nav-menu {
    top: var(--header-scrolled-height);
    height: calc(100vh - var(--header-scrolled-height));
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-menu::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #e8e8e8;
    margin: 4px 0;
    flex-shrink: 0;
  }
}

@media (max-width: 1200px) {
  .what-we-do-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

/* 767px breakpoint (Less than Medium / Tablets) */
@media (max-width: 767px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .about-hero-section {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .digital-future-visual {
    height: 480px;
    min-height: 480px;
  }

  .partner-cards {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .mission-vision-grid {
    grid-template-columns: 1fr;
  }

  .values-header h2 {
    font-size: 32px;
  }

  .core-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .what-we-do-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .what-we-do-header h2 {
    font-size: 32px;
  }

  .about-what-we-do {
    padding-bottom: 80px;
  }

  .get-in-touch-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .get-in-touch-bottom-grid {
    grid-template-columns: 1fr;
  }

  .get-in-touch-header h2 {
    font-size: 32px;
  }
}

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

  .digital-future-visual {
    height: 380px;
    min-height: 380px;
  }

  .digital-future-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-explore,
  .btn-demo {
    justify-content: center;
    text-align: center;
  }

  .core-values-grid {
    grid-template-columns: 1fr;
  }

  .values-header h2,
  .core-values-title {
    font-size: 24px;
  }

  .what-we-do-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }

  .what-we-do-header h2 {
    font-size: 24px;
  }

  .about-what-we-do {
    padding-bottom: 60px;
  }

  .get-in-touch-top-grid {
    grid-template-columns: 1fr;
  }

  .get-in-touch-header h2 {
    font-size: 24px;
  }

  .touch-card-partner {
    flex-direction: column;
  }

  .touch-card-partner-img {
    position: relative;
    width: 100%;
    height: 200px;
  }

  .what-we-do-card {
    padding: 20px 14px;
    border-radius: 16px;
  }

  .what-we-do-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .what-we-do-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .what-we-do-card-icon img {
    width: 22px;
    height: 22px;
  }

  .what-we-do-card-title {
    font-size: var(--fs-lg);
  }

  .what-we-do-card-desc {
    font-size: var(--fs-sm);
    margin-bottom: 16px;
  }

  .what-we-do-card-tag {
    font-size: var(--fs-xs);
    padding: 4px 8px;
  }
}

/* ==========================================================================
   ==========================================================================
   SECTION IV: PARTNERS PAGE STYLES (partners.html)
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   Hero Section
   ========================================================================== */

.main-content-partners {
  padding-top: var(--header-height);
}

.main-content .partners-hero-content h1,
.partners-hero-content h1 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: var(--color-bg-dark);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.main-content .partners-hero-content h1 span,
.partners-hero-content h1 span {
  color: #4abf66;
  font-weight: var(--fw-medium);
}

.main-content .partners-hero-content p,
.partners-hero-content p {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-bg-dark);
  max-width: 530px;
  margin-bottom: 36px;
  font-weight: var(--fw-normal);
}

.partners-hero-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.partners-badge {
  display: inline-block;
  background: #ffffff33;
  color: var(--color-bg-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: 8px 22px;
  border-radius: 50px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #ffffff33;
  letter-spacing: 0.2px;
}

.partners-hero-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-become-partner {
  background-color: var(--color-primary);
  color: var(--color-bg-dark);
  height: 44px;
  padding: 0 28px;
  border-radius: 8px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--transition-fast);
  text-decoration: none;
  border: none;
}

.btn-become-partner:hover {
  background-color: #177840;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn-talk-team {
  background-color: var(--color-bg-dark);
  color: var(--color-primary);
  height: 44px;
  padding: 0 26px;
  border-radius: 8px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-talk-team:hover {
  background-color: #f8fafc;
  color: #0b3f2b !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.btn-become-partner img,
.btn-become-partner i,
.btn-talk-team img,
.btn-talk-team i {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform var(--transition-fast);
}

.btn-become-partner:hover img,
.btn-become-partner:hover i,
.btn-talk-team:hover img,
.btn-talk-team:hover i {
  transform: translateX(4px);
}

.partners-hero-stats-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  padding: 10px;
}

.partners-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.partner-stat-card {
  background: #ffffff1a;
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all var(--transition-normal);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.partner-stat-card:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #e4f0ec;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.partner-stat-card h2 {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-semibold);
  color: var(--color-bg-dark);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.partner-stat-card p {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-bg-dark);
  line-height: 1.35;
  margin: 0;
}

.partners-center-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}

.center-badge-outer {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #ffffff1a;
  border: 1px solid #ffffff1a;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.center-badge-inner {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.center-badge-inner img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.partners-feature-banner-container {
  margin-top: 40px;
  margin-bottom: -60px;
  position: relative;
  z-index: 10;
}

.partners-feature-banner {
  background: transparent;
  border-radius: 16px;
  padding: 24px 36px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}

.partners-feature-banner::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 60%,
    rgba(17, 130, 68, 0.4) 80%,
    var(--color-primary) 100%
  );
  animation: borderRotate 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.partners-feature-banner::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: 14.5px;
  background: linear-gradient(to right, #eaf7ed 50%, var(--color-bg-dark) 50%)
    right / 200% 100% no-repeat;
  transition: background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  z-index: 1;
}

.partners-feature-banner:hover::after {
  background-position: left;
}

.feature-banner-item {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  padding-right: 12px;
  z-index: 2;
}

.feature-banner-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background-color: #b6bac1;
}

.feature-banner-icon {
  width: 51px;
  height: 51px;
  min-width: 48px;
  border-radius: 14px;
  background-color: #e4f0ec;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-banner-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.feature-banner-item p {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: #1e1e1e;
  line-height: 1.35;
  max-width: 165px;
  margin: 0;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .partners-hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .partners-hero-content {
    text-align: left;
  }

  .partners-hero-content h1 {
    font-size: 32px;
    line-height: 1.3;
  }

  .partners-hero-content p {
    max-width: 100%;
  }

  .partners-hero-stats-wrapper {
    margin-left: 0;
    max-width: 100%;
  }

  .center-badge-outer {
    width: 75px;
    height: 75px;
  }

  .center-badge-inner {
    width: 50px;
    height: 50px;
  }

  .center-badge-inner img {
    width: 36px;
    height: 36px;
  }

  .partners-feature-banner-container {
    margin-bottom: -100px;
  }

  .partners-hero-section {
    margin-bottom: 50px;
  }

  .partners-feature-banner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px 24px;
  }

  .feature-banner-item:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .main-content .partners-hero-content h1,
  .partners-hero-content h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  .partners-hero-section {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 20px;
  }

  .main-content-partners {
    padding-bottom: 0;
    padding-top: var(--header-height);
  }

  .partners-hero-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .btn-become-partner,
  .btn-talk-team {
    width: 100%;
  }

  .partners-stats-grid {
    gap: 12px;
  }

  .partner-stat-card {
    padding: 20px 16px;
  }

  .partner-stat-card h2 {
    font-size: 30px;
  }

  .center-badge-outer {
    width: 60px;
    height: 60px;
  }

  .center-badge-inner {
    width: 40px;
    height: 40px;
  }

  .center-badge-inner img {
    width: 26px;
    height: 26px;
  }

  .partners-feature-banner-container {
    margin-bottom: -180px;
  }

  .partners-feature-banner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }

  .feature-banner-item p {
    max-width: 100%;
  }
}

/* ==========================================================================
   Why Partner Section
   ========================================================================== */

.why-partner-section {
  padding-top: 80px;
  padding-bottom: 90px;
  background-color: #fafcfb;
  position: relative;
  z-index: 1;
}

.why-partner-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.why-partner-header .section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-normal);
  font-size: 14px;
  color: var(--color-text-dark);
  margin-bottom: var(--space-4);
  letter-spacing: 1px;
}

.why-partner-header .section-title span {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
}

.why-partner-header h2 {
  font-size: var(--fs-6xl);
  color: var(--color-black);
  margin-bottom: 0;
  font-weight: 500;
}

.why-partner-header h2 span {
  color: var(--color-primary);
}

.why-partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why-partner-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-partner-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.1);
}

.why-partner-card-media {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f2faf6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.why-partner-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 51px;
  height: 51px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff9f3 0%, #c6edd8 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.why-partner-card-badge img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.why-partner-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.why-partner-card:hover .why-partner-card-img {
  transform: scale(1.04);
}

.why-partner-card-body {
  padding: 24px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.why-partner-card-body h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  margin-bottom: 8px;
  line-height: 1.3;
}

.why-partner-card-accent {
  width: 22px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
  margin-bottom: 14px;
}

.why-partner-card-body p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-dark-gray);
  margin-bottom: 24px;
  font-weight: var(--fw-normal);
  flex-grow: 1;
}

.why-partner-card-link {
  align-self: flex-end;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #118244;
  color: #118244;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.why-partner-card-link img {
  width: 8px;
  height: 13px;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.why-partner-card-link:hover {
  background-color: #28c76f;
  color: #ffffff;
  transform: scale(1.08);
}

.why-partner-card-link:hover img {
  transform: translateX(2px);
}

/* Why Partner Responsive */
@media (max-width: 1199px) {
  .why-partner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 991px) {
  .why-partner-header h2 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .why-partner-section {
    padding-top: 150px;
    padding-bottom: 60px;
  }

  .why-partner-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .why-partner-header {
    margin-bottom: 36px;
  }
}

@media (max-width: 576px) {
  .why-partner-header h2 {
    font-size: 24px;
  }
}

/* ==========================================================================
   Partnership Program section
   ========================================================================== */

.partnership-programs-section {
  background-color: #ebf5f0;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.program-bg-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 52%;
  max-width: 800px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.program-bg-top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  max-width: 800px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.partnership-programs-container {
  position: relative;
  z-index: 2;
}

.partnership-programs-header {
  text-align: center;
  margin-bottom: 54px;
}

.partnership-programs-header .section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-normal);
  font-size: 14px;
  color: var(--color-text-dark);
  margin-bottom: var(--space-4);
  letter-spacing: 1px;
}

.partnership-programs-header .section-title span {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
}

.partnership-programs-header h2 {
  font-size: var(--fs-6xl);
  color: var(--color-black);
  margin-bottom: 0;
  font-weight: 500;
}

.partnership-programs-header h2 span {
  color: var(--color-primary);
}

.partnership-programs-header p {
  max-width: 680px;
  margin: 16px auto 0 auto;
  color: var(--color-text-dark-gray);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: 1.6;
}

.partnership-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.program-card {
  background-color: var(--color-bg-dark);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  transition:
    background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.03);
  position: relative;
  cursor: pointer;
}

.program-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.program-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    #4abf6633 0%,
    #4abf661a 50%,
    rgba(74, 191, 102, 0.08) 100%
  );
  border: 1px solid rgba(74, 191, 102, 0.12);
  box-shadow: 0 4px 10px rgba(74, 191, 102, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.program-card-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.program-card-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-bg-dark);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.program-card-link img {
  width: 8px;
  height: 12px;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.program-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin-bottom: 12px;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.program-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-dark-gray);
  margin-bottom: 0;
  flex-grow: 1;
  font-weight: var(--fw-normal);
  transition:
    color 0.3s ease,
    margin-bottom 0.3s ease;
}

.program-card-ideal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  transition:
    max-height 0.4s ease,
    opacity 0.35s ease,
    margin-top 0.35s ease,
    padding-top 0.35s ease,
    border-color 0.35s ease;
}

.program-card-ideal span {
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #84bf9f;
  display: block;
  margin-bottom: 10px;
}

.program-card-ideal ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.program-card-ideal li {
  font-size: 13px;
  color: #c8e8d8;
  font-weight: var(--fw-normal);
  position: relative;
  padding-left: 14px;
  line-height: 1.45;
}

.program-card-ideal li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #a8e8c5;
}

/* Card Hover State (Green Background & In-Flow Height Expansion) */
.program-card:hover {
  background-color: var(--color-primary);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(30, 142, 77, 0.25);
}

.program-card:hover h3 {
  color: #ffffff;
}

.program-card:hover p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
}

.program-card:hover .program-card-icon {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.program-card:hover .program-card-link {
  background-color: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
}

.program-card:hover .program-card-link img {
  transform: translateX(2px);
}

.program-card:hover .program-card-ideal {
  max-height: 250px;
  opacity: 1;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Puzzle Illustration Box */
.program-puzzle-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
}

.program-puzzle-box img {
  width: 100%;
  max-width: 340px;
  height: auto;
  object-fit: contain;
}

/* Partnership Programs Responsive */
@media (max-width: 1199px) {
  .partnership-programs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .partnership-programs-header h2 {
    font-size: 32px;
  }
  .main-content-partners {
    --fs-6xl: 32px;
  }
}

@media (max-width: 767px) {
  .partnership-programs-section {
    padding: 60px 0;
  }

  .partnership-programs-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .program-bg-top-left,
  .program-bg-top-right {
    width: 250px;
  }
}

@media (max-width: 576px) {
  .main-content .partners-hero-content h1,
  .partners-hero-content h1 {
    font-size: 32px;
  }

  .partners-hero-section {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 20px;
  }

  .partners-hero-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .btn-become-partner,
  .btn-talk-team {
    width: 100%;
  }

  .partners-stats-grid {
    gap: 12px;
  }

  .partner-stat-card {
    padding: 20px 16px;
  }

  .partner-stat-card h2 {
    font-size: 30px;
  }

  .center-badge-outer {
    width: 60px;
    height: 60px;
  }

  .center-badge-inner {
    width: 40px;
    height: 40px;
  }

  .center-badge-inner img {
    width: 26px;
    height: 26px;
  }

  .partners-feature-banner-container {
    margin-bottom: -180px;
  }

  .partners-feature-banner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }

  .feature-banner-item p {
    max-width: 100%;
  }

  .partnership-programs-header h2 {
    font-size: 24px;
  }

  .main-content-partners {
    --fs-6xl: 24px;
  }

  .partnership-programs-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
}

/* Why Partner Section */

.why-partner-section {
  padding-top: 80px;
  padding-bottom: 90px;
  background-color: #fafcfb;
  position: relative;
  z-index: 1;
}

.why-partner-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.why-partner-header .section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-normal);
  font-size: 14px;
  color: var(--color-text-dark);
  margin-bottom: var(--space-4);
  letter-spacing: 1px;
}

.why-partner-header .section-title span {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
}

.why-partner-header h2 {
  font-size: var(--fs-6xl);
  color: var(--color-black);
  margin-bottom: 0;
  font-weight: 500;
}

.why-partner-header h2 span {
  color: var(--color-primary);
}

.why-partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why-partner-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-partner-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.1);
}

.why-partner-card-media {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f2faf6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.why-partner-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 51px;
  height: 51px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff9f3 0%, #c6edd8 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.why-partner-card-badge img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.why-partner-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.why-partner-card:hover .why-partner-card-img {
  transform: scale(1.04);
}

.why-partner-card-body {
  padding: 24px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.why-partner-card-body h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  margin-bottom: 8px;
  line-height: 1.3;
}

.why-partner-card-accent {
  width: 22px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
  margin-bottom: 14px;
}

.why-partner-card-body p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-dark-gray);
  margin-bottom: 24px;
  font-weight: var(--fw-normal);
  flex-grow: 1;
}

.why-partner-card-link {
  align-self: flex-end;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #118244;
  color: #118244;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.why-partner-card-link img {
  width: 8px;
  height: 13px;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.why-partner-card-link:hover {
  background-color: #28c76f;
  color: #ffffff;
  transform: scale(1.08);
}

.why-partner-card-link:hover img {
  transform: translateX(2px);
}

/* Why Partner Responsive */
@media (max-width: 1199px) {
  .why-partner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .why-partner-section {
    padding-top: 150px;
    padding-bottom: 60px;
  }

  .why-partner-header h2 {
    font-size: 24px;
  }

  .why-partner-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .why-partner-header {
    margin-bottom: 36px;
  }
}

@media (max-width: 576px) {
  .why-partner-header h2 {
    font-size: 24px;
  }
}



/* ==========================================================================
   What We Gain Section
   ========================================================================== */

.partner-benefits-section {
  position: relative;
  padding-block: var(--space-20) calc(var(--space-20) + 40px);
  overflow: hidden;
}

.partner-benefits-row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: var(--space-16);
  align-items: center;
}

/* Image column styles */
.partner-image-col {
  position: relative;
}

.partner-image-col img {
  width: 100%;
  height: auto;
  display: block;
  animation: floatIllustration 6s ease-in-out infinite alternate;
}

/* Content column styles */
.partner-content-col {
  display: flex;
  flex-direction: column;
}

/* Subtitle/label */
.partner-subtitle {
  color: var(--color-text-dark);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.partner-subtitle::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

/* Heading */
.partner-content-col h2 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  line-height: 1.15;
  margin-bottom: var(--space-5);
  letter-spacing: -0.01em;
}

.partner-content-col h2 span {
  color: var(--color-primary);
}

/* Description paragraph */
.partner-content-col p {
  font-size: var(--fs-base);
  color: var(--color-text-dark-gray);
  line-height: 1.6;
  margin-bottom: var(--space-10);
  max-width: 600px;
  font-weight: var(--fw-normal);
}

/* Benefits Grid */
.partner-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-10);
  row-gap: var(--space-5);
}

/* Benefit Item */
.partner-benefit-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: transform var(--transition-fast);
}

.partner-benefit-item:hover {
  transform: translateX(4px);
}

.partner-benefit-icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-bg-dark);
  background-image: linear-gradient(
    135deg,
    rgba(74, 191, 102, 0.2) 0%,
    rgba(74, 191, 102, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  border: none;
  box-shadow: 0px 10px 30px rgba(74, 191, 102, 0.15);
}

.partner-benefit-item:hover .partner-benefit-icon {
  box-shadow: 0px 15px 35px rgba(74, 191, 102, 0.25);
  transform: scale(1.05);
}

.partner-benefit-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.partner-benefit-item span {
  color: var(--color-text-dark);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

.partner-decorations {
  position: absolute;
  bottom: 0;
  right: 15%;
  display: flex;
  gap: var(--space-4);
  pointer-events: none;
  z-index: -1;
}

.partner-decorations div {
  width: 50px;
  height: 80px;
  border-radius: 16px;
  background: rgba(17, 130, 68, 0.03);
}

.partner-decorations div:nth-child(1) {
  transform: translateY(20px);
  background: rgba(17, 130, 68, 0.02);
}

.partner-decorations div:nth-child(2) {
  background: rgba(17, 130, 68, 0.04);
}

.partner-decorations div:nth-child(3) {
  transform: translateY(40px);
  background: rgba(17, 130, 68, 0.015);
}

/* Responsive Media Queries */
@media (max-width: 1199px) {
  .partner-benefits-row {
    gap: var(--space-10);
  }
  .partner-content-col h2 {
    font-size: 40px;
  }
  .partner-benefits-grid {
    column-gap: var(--space-6);
  }
}

@media (max-width: 991px) {
  .partner-benefits-row {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .partner-image-col {
    max-width: 600px;
    margin-inline: auto;
    width: 100%;
  }
  .partner-content-col h2 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .partner-benefits-section {
    padding-block: var(--space-12);
  }

  .partner-benefits-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }
}

@media (max-width: 576px) {
  .partner-content-col h2 {
    font-size: 24px;
  }
}

/* ==========================================================================
  Partnership Process Section
   ========================================================================== */

.partner-process-section {
  position: relative;
  padding-top: 16px;
  padding-bottom: 40px;
  background-color: var(--color-bg-dark);
}

.process-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-header h2 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.process-header h2 span {
  color: var(--color-primary);
}

.process-header p {
  color: var(--color-text-dark-gray);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: 1.6;
}

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

.process-decor-img {
  position: absolute;
  top: -100px;
  right: 0%;
  width: 250px;
  z-index: 0;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  z-index: 1;
}

.process-grid::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 12.5%;
  right: 12.5%;
  height: 0;
  border-top: 2px dashed var(--color-primary);
  z-index: -1;
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-icon-halo {
  width: 100px;
  height: 100px;
  background-color: #1182440f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 40px;
  z-index: 2;
}

.process-icon-halo::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 40px;
  border-left: 2px dashed var(--color-primary);
  z-index: -1;
}

.process-icon-core {
  width: 72px;
  height: 72px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-icon-core img {
  width: 46px;
  height: 46px;
  display: block;
}

.process-number {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 21px;
  height: 21px;
  background-color: var(--color-bg-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--fw-normal);
  color: var(--color-black);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid #eaeaea;
}

.process-card {
  background: transparent;
  text-align: left;
  position: relative;
  width: 100%;
  flex-grow: 1;
}

.process-card::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(17, 130, 68, 0.12);
  z-index: 3;
}

.process-card-inner {
  background: transparent;
  border-radius: 20px;
  padding: 30px 24px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.process-card-inner::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 60%,
    rgba(17, 130, 68, 0.4) 80%,
    var(--color-primary) 100%
  );
  animation: borderRotate 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.process-card-inner::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--neutral-white);
  border-radius: 18.5px;
  z-index: 1;
}

.process-card-inner h3 {
  font-size: var(--fs-lg);
  color: var(--color-black);
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  font-weight: var(--fw-medium);
  z-index: 2;
}

.process-card-inner h3::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
  z-index: 2;
}

.process-card-inner p {
  color: var(--color-text-dark-gray);
  font-size: var(--fs-sm);
  line-height: 1.6;
  font-weight: var(--fw-normal);
  position: relative;
  z-index: 2;
}

.process-arrow {
  position: absolute;
  top: 50px;
  right: 0;
  transform: translate(calc(50% + 15px), -50%);
  width: 32px;
  height: 32px;
  background-color: var(--neutral-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 2;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 1199px) {
  .process-grid {
    gap: 20px;
  }
  .process-arrow {
    transform: translate(calc(50% + 10px), -50%);
  }
}

@media (max-width: 991px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 50px;
  }
  .process-grid::before {
    display: none;
  }
  .process-arrow {
    display: none;
  }
  .process-decor-img {
    top: -100px;
    right: 4%;
    width: 200px;
    height: 150px;
  }
  .process-header h2 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .partner-process-section {
    padding-top: 40px;
  }
  .process-grid {
    grid-template-columns: 1fr;
  }
  .process-decor-img {
    top: -50px;
    right: 4%;
    width: 150px;
    height: 90px;
  }
}

@media (max-width: 576px) {
  .process-header h2 {
    font-size: 24px;
  }
}

/* ==========================================================================
   Technology Partners Section
   ========================================================================== */
.technology-partners-section {
  position: relative;
  padding-top: 150px;
  padding-bottom: 100px;
  background-color: var(--color-bg-dark);
  overflow: hidden;
}

.tech-decor-left {
  position: absolute;
  top: 20px;
  left: 4%;
  width: 188px;
  height: 134px;
  z-index: 0;
}

.tech-decor-right {
  position: absolute;
  top: 20px;
  right: 4%;
  width: 134px;
  height: 188px;
  z-index: 0;
}

.technology-partners-section .container {
  position: relative;
  z-index: 2;
}

.technology-partners-section h2 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin-bottom: var(--space-2);
}

.technology-partners-section h2 span {
  color: var(--color-primary);
}

.technology-partners-section p {
  color: var(--color-text-dark-gray);
  font-size: var(--fs-base);
  margin-bottom: var(--space-10);
  font-weight: var(--fw-normal);
}

.tech-tabs-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto var(--space-8);
  display: flex;
  align-items: center;
}

.tech-tab-arrow {
  display: none;
  background: var(--neutral-white);
  border: 1px solid #eaeaea;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
}

.tech-tab-arrow.prev-arrow {
  left: -16px;
}

.tech-tab-arrow.next-arrow {
  right: -16px;
}

.tech-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tech-tabs::-webkit-scrollbar {
  display: none;
}

.tech-tabs li {
  font-size: var(--fs-base);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  padding: 12px 20px;
  cursor: pointer;
  position: relative;
  transition: var(--transition-base);
  white-space: nowrap;
}

.tech-tabs li:hover {
  color: var(--color-text-dark);
}

.tech-tabs li.active {
  color: var(--color-text-dark);
  font-weight: var(--fw-medium);
  background: linear-gradient(180deg, #ffffff 0%, #dceae2 100%);
}

.tech-tabs li.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
}

.tech-logos-card {
  background-color: var(--color-bg-dark);
  border: 1px solid #e6e6e6;
  border-radius: 1px;
  padding: 40px 60px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  margin: 0 auto;
  max-width: 1000px;
}

.tech-swiper {
  width: 100%;
  height: 100%;
}

.tech-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.tech-swiper img {
  max-width: 140px;
  max-height: 50px;
  object-fit: contain;
}

/* Responsive Styles for Technology Partners */
@media (max-width: 991px) {
  .technology-partners-section {
    padding-top: 100px;
    padding-bottom: 70px;
  }
  .technology-partners-section h2 {
    font-size: 32px;
  }
  .tech-tabs-wrapper {
    padding: 0 30px;
  }
  .tech-tab-arrow {
    display: flex;
  }
  .tech-logos-card {
    padding: 30px 40px;
  }
}

@media (max-width: 767px) {
  .technology-partners-section {
    padding-top: 100px;
    padding-bottom: 70px;
  }
  .tech-decor-left {
    position: absolute;
    top: 20px;
    left: 4%;
    width: 100px;
    height: 80px;
    z-index: 0;
  }

  .tech-decor-right {
    position: absolute;
    top: 20px;
    right: 4%;
    width: 60px;
    height: 100px;
    z-index: 0;
  }
  .tech-tabs li {
    padding: 8px 12px;
    font-size: var(--fs-sm);
  }
  .tech-logos-card {
    padding: 20px 15px;
  }
  .tech-swiper img {
    max-width: 100px;
    max-height: 40px;
  }
}

@media (max-width: 576px) {
  .technology-partners-section h2 {
    font-size: 24px;
  }
}

/* ==========================================================================
   FAQs Section
   ========================================================================== */
.faq-section {
  position: relative;
  padding-block: var(--space-20);
  background: linear-gradient(
    180deg,
    rgba(220, 234, 226, 0.3) 0%,
    rgba(220, 234, 226, 0.8) 100%
  );
  overflow: hidden;
}

.faq-bg-left {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  z-index: 0;
}

.faq-bg-right {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
  z-index: 0;
}

.faq-section .container {
  position: relative;
  z-index: 2;
}

.faq-container {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-10);
  margin-top: var(--space-12);
  text-align: left;
}

/* FAQ Accordion */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.faq-item {
  background-color: var(--color-bg-dark);
  border-radius: 12px;
  padding: 24px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: var(--transition-base);
}

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

.faq-question h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin: 0;
}

.faq-icon {
  width: 32px;
  height: 32px;
  background-color: var(--green-tint-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-icon img {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon img {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer-content {
  padding-top: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-1);
}

.faq-answer-content p {
  flex: 1;
  color: var(--color-text-dark-gray);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: var(--fw-normal);
  margin: 0;
}

.faq-answer-image img {
  max-width: 200px;
  object-fit: contain;
  max-height: 133px;
}

/* Contact Card */
.faq-contact-card {
  background-color: var(--color-bg-dark);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: sticky;
  top: 100px;
}

.contact-icon-circle {
  width: 80px;
  height: 80px;
  background-color: #ecf5f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-35px);
}

.contact-card-body {
  padding: 0px 30px 30px;
}

.contact-card-body h3 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin-bottom: 5px;
}

.contact-card-body h3.highlight {
  color: var(--color-primary);
  margin-bottom: 25px;
  position: relative;
}

.contact-card-body h3.highlight::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 20px;
  height: 4px;
  background-color: var(--color-primary);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

.contact-card-body p {
  color: var(--color-text-dark-gray);
  font-size: var(--fs-base);
  margin-bottom: 24px;
  font-weight: var(--fw-normal);
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-method-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--color-bg-dark);
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px #e5e9eb;
  transition: all var(--transition-fast);
}

.contact-method-item:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  background-color: #f6faf7;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.method-icon {
  width: 50px;
  height: 50px;
  background-color: var(--green-tint-200);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.contact-method-item:hover .method-icon {
  transform: scale(1.08);
}

.method-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform var(--transition-fast);
}

.contact-method-item:hover .method-icon img {
  transform: scale(1.1);
}

.method-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.method-details h4 {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin: 0 0 2px 0;
}

.method-details span {
  font-size: var(--fs-sm);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
}

/* FAQ Responsive Styles */
@media (max-width: 991px) {
  .faq-container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .faq-bg-left,
  .faq-bg-right {
    opacity: 0.2;
  }
  .faq-contact-card {
    position: static;
  }
}

@media (max-width: 767px) {
  .contact-card-body {
    padding: 0px 20px 20px;
  }
  .contact-card-header {
    height: 120px;
  }
  .contact-icon-circle {
    transform: translateY(-20px);
  }
  .faq-answer-image img {
    max-width: 100%;
    margin-top: 15px;
  }
  .faq-answer-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .faq-question h3 {
    font-size: 16px;
  }
}

/* ==========================================================================
   Grow Together Section
   ========================================================================== */
.grow-together-section {
  padding-top: 100px;
  padding-bottom: 70px;
  background-color: var(--neutral-white);
}

.grow-main-card {
  background-color: var(--green-900);
  border-radius: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 60px;
  position: relative;
  overflow: hidden;
  color: var(--color-bg-dark);
  margin-bottom: 30px;
}

.grow-content {
  flex: 1;
  max-width: 800px;
  z-index: 2;
  position: relative;
}

.grow-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff33;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.grow-badge img {
  width: 24px;
  height: 24px;
}

.grow-badge span {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-bg-dark);
}

.grow-content h2 {
  font-size: 28px;
  font-weight: var(--fw-medium);
  margin-bottom: 16px;
  text-transform: uppercase;
  color: var(--color-bg-dark);
}

.grow-content p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-bg-dark);
  margin-bottom: 40px;
  font-weight: var(--fw-normal);
  max-width: 600px;
}

.grow-stats-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 40px;
}

.grow-stat-item {
  background-color: #ffffff1a;
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.grow-stat-item:hover {
  transform: translateY(-6px);
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.grow-stat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 1;
}

.grow-stat-item:nth-child(1)::before {
  animation: cardFlash 6s infinite ease-in-out;
}

.grow-stat-item:nth-child(2)::before {
  animation: cardFlash 6s infinite ease-in-out;
  animation-delay: 1.5s;
}

.grow-stat-item:nth-child(3)::before {
  animation: cardFlash 6s infinite ease-in-out;
  animation-delay: 3s;
}

.grow-stat-item:nth-child(4)::before {
  animation: cardFlash 6s infinite ease-in-out;
  animation-delay: 4.5s;
}

@keyframes cardFlash {
  0% {
    left: -150%;
  }
  30% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

.stat-icon {
  width: 40px;
  height: 40px;
  background-color: var(--green-tint-200);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon img {
  width: 24px;
  height: 24px;
}

.stat-text {
  display: flex;
  flex-direction: column;
}

.stat-text strong {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-bg-dark);
}

.stat-text span {
  font-size: var(--fs-xs);
  color: var(--color-bg-dark);
  font-weight: var(--fw-medium);
}

.grow-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.grow-btn-solid {
  background-color: var(--color-bg-dark);
  color: var(--color-primary);
  border: none;
  font-weight: var(--fw-medium);
  padding: 14px 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.grow-btn-solid:hover {
  background-color: #f0f0f0;
  color: #0b4d26;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.grow-btn-outline {
  background-color: transparent;
  color: var(--color-bg-dark);
  border: 1px solid var(--neutral-white);
  font-weight: var(--fw-medium);
  padding: 14px 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.grow-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--neutral-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.grow-btn-solid img,
.grow-btn-solid i,
.grow-btn-outline img,
.grow-btn-outline i {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform var(--transition-fast);
}

.grow-btn-solid:hover img,
.grow-btn-solid:hover i,
.grow-btn-outline:hover img,
.grow-btn-outline:hover i {
  transform: translateX(4px);
}

.grow-image {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  z-index: 1;
}

.grow-image img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right center;
  width: 540px;
}

/* Bottom Light Banner */
.grow-bottom-banner {
  background-color: #f0f7f3;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 40px;
}

.banner-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.banner-icon {
  width: 72px;
  height: 72px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.banner-icon img {
  width: 42px;
  height: 42px;
}

.banner-text h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin-bottom: 5px;
}

.banner-text p {
  font-size: var(--fs-sm);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  margin: 0;
}

.banner-btn {
  background-color: var(--color-primary);
  color: var(--color-bg-dark);
  padding: 14px 28px;
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--fs-base);
  transition: all var(--transition-fast);
}

.banner-btn:hover {
  background-color: #085a2f;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.banner-btn img,
.banner-btn i {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform var(--transition-fast);
}

.banner-btn:hover img,
.banner-btn:hover i {
  transform: translateX(4px);
}

/* Responsive adjustments */
@media (max-width: 1199px) {
  .grow-image {
    opacity: 0.3;
    right: -100px;
  }
}

@media (max-width: 991px) {
  .grow-main-card {
    padding: 40px;
  }
  .grow-stats-grid {
    flex-wrap: wrap;
  }
  .grow-stat-item {
    flex: 1 1 45%;
  }
  .grow-image {
    opacity: 0.1;
  }
  .grow-bottom-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 30px;
  }
  .banner-right {
    width: 100%;
  }
  .banner-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .grow-main-card {
    padding: 30px 20px;
  }
  .grow-stats-grid {
    flex-direction: column;
  }
  .grow-stat-item {
    flex: 1 1 100%;
  }
  .grow-content h2 {
    font-size: 20px;
  }
  .grow-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .grow-btn-solid,
  .grow-btn-outline {
    justify-content: center;
  }
  .banner-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* Utility: icon spacing inside buttons/links */
.btn-icon-right {
  margin-left: 8px;
}

/* ==========================================================================
   ==========================================================================
   CONTACT PAGE STYLES (contact.html)
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.main-content-contact {
  padding-top: var(--header-height) !important;
  padding-bottom: 0 !important;
}

.contact-hero-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.contact-hero-left {
  display: flex;
  flex-direction: column;
}

.contact-badge {
  display: inline-block;
  align-self: flex-start;
  background-color: #ffffff33;
  color: var(--color-bg-dark);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: 24px;
  border: 1px solid #ffffff33;
  backdrop-filter: blur(4px);
}

.main-content .contact-title,
.contact-hero-section .contact-title {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: var(--neutral-white);
  line-height: 1.15;
  margin-bottom: 20px;
}

.main-content .contact-subtitle,
.contact-hero-section .contact-subtitle {
  font-size: var(--fs-base);
  color: var(--color-bg-dark);
  margin-bottom: 48px;
  max-width: 580px;
  line-height: 1.6;
  font-weight: var(--fw-normal);
}

/* Features Grid */
.contact-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.contact-feature-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-feature-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #45b17733;
  background: #45b17733;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.contact-feature-item:hover .contact-feature-icon-wrapper {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.contact-feature-icon {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}

.main-content .contact-feature-item h3,
.contact-feature-item h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-bg-dark);
}

.main-content .contact-feature-item p,
.contact-feature-item p {
  font-size: 12px;
  color: var(--color-bg-dark);
  line-height: 1.5;
  font-weight: var(--fw-normal);
}

/* Right Side Image & Card */
.contact-hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-image-container {
  position: relative;
  width: 100%;
  max-width: 580px;
  padding: 10px;
  margin-left: auto;
  z-index: 1;
}

/* Pulsing concentric rings behind the image */
@keyframes ringPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(74, 191, 102, 0.4),
      0 0 0 0 rgba(74, 191, 102, 0.2);
  }
  100% {
    box-shadow:
      0 0 0 40px rgba(74, 191, 102, 0),
      0 0 0 80px rgba(74, 191, 102, 0);
  }
}

.contact-image-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  animation: ringPulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: -1;
  pointer-events: none;
}

.contact-hero-image {
  width: 100%;
  height: auto;
  display: block;
  z-index: 2;
  position: relative;
  animation: hp-scale-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.3s;
}

/* Floating card */
.contact-floating-card {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-dark);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  z-index: 10;
  width: calc(100% - 40px);
  max-width: 358px;
  animation: floatCard 4s ease-in-out infinite alternate;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}

.contact-floating-card:hover {
  transform: translateX(-50%) translateY(-10px) scale(1.02);
  box-shadow: 0 25px 45px rgba(17, 130, 68, 0.25);
  animation-play-state: paused;
}

@keyframes floatCard {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -8px;
  }
}

.floating-card-icon-wrapper {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 18px;
  background-color: #e7f1ec;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-card-icon {
  width: 46px;
  height: 46px;
}

.floating-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.floating-card-info .floating-card-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--color-text-dark-gray);
  margin: 0;
  line-height: 1.2;
}

.floating-card-info .floating-card-subtitle {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.2;
  margin-top: 5px;
}

.floating-card-info .floating-card-phone {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin: 0;
  margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Responsive styles */
@media (max-width: 1199px) {
  .contact-hero-container {
    gap: 40px;
  }

  .contact-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 991px) {
  .contact-hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-hero-left {
    text-align: left;
    align-items: flex-start;
  }

  .contact-subtitle {
    margin-inline: 0;
  }

  .contact-title {
    font-size: 32px;
  }

  .contact-features-grid {
    width: 100%;
    max-width: 700px;
  }

  .contact-hero-section::after {
    width: 100%;
    max-width: none;
  }

  .contact-image-container {
    margin-inline: 0;
  }
}

@media (max-width: 576px) {
  .contact-hero-section {
    padding: 50px 0 70px 0;
  }

  .contact-title {
    font-size: 24px !important;
    line-height: 1.2;
  }

  .contact-features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 16px;
    text-align: left;
  }

  .contact-feature-item {
    align-items: flex-start;
  }

  .contact-floating-card {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 358px;
    padding: 12px 14px;
    gap: 12px;
    animation: floatCard 4s ease-in-out infinite alternate;
  }

  .floating-card-icon-wrapper {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 12px;
  }

  .floating-card-icon {
    width: 32px;
    height: 32px;
  }

  .floating-card-info .floating-card-title {
    font-size: 13px;
  }

  .floating-card-info .floating-card-subtitle {
    font-size: 13px;
    margin-top: 2px;
  }

  .floating-card-info .floating-card-phone {
    font-size: 16px;
    margin-top: 1px;
  }
}

/* ==========================================================================
   CONTACT PAGE TABS SECTION
   ========================================================================== */

.contact-tabs-section {
  background-color: #f3f9f6;
  padding: 80px 0 100px 0;
  position: relative;
  overflow: hidden;
}

.contact-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  border-bottom: 1.5px solid #e6e6e6;
  margin-bottom: 56px;
  padding-bottom: 0;
}

.contact-tab-btn {
  background: transparent;
  border: none;
  padding: 14px 24px;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--color-text-dark-gray);
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  font-family: inherit;
  border-radius: 4px 4px 0 0;
}

.contact-tab-btn::after {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-tab-btn:hover {
  color: var(--color-primary);
}

.contact-tab-btn.active {
  color: var(--color-text-dark);
  font-weight: var(--fw-semibold);
  background: linear-gradient(to bottom, #f3f9f6 0%, #dceae2 100%);
}

.contact-tab-btn.active::after {
  transform: scaleX(1);
}

.contact-tabs-content {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
}

/* Info Column & Panes */
.contact-info-column {
  display: flex;
  flex-direction: column;
}

.contact-info-pane {
  display: none;
}

.contact-info-pane.active {
  display: block;
  animation: fadeIn 0.4s ease forwards;
}

.team-info-box {
  background-color: #01482b;
  color: var(--brands-bg);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(9, 71, 37, 0.15);
}

.team-info-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.team-icon-wrapper {
  width: 56px;
  height: 56px;
  min-width: 48px;
  border-radius: 10px;
  background-color: #45b17733;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-icon {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}

.team-info-header h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--brands-bg);
  margin: 0;
}

.main-content .team-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--green-tint-500);
  font-weight: var(--fw-normal);
  margin: 0 0 24px 0;
}

.team-contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--green-tint-500);
  font-weight: var(--fw-normal);
}

.detail-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.detail-item a {
  color: var(--green-tint-500);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.detail-item a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Extra Cards Below Green Box */
.extra-info-card {
  background-color: var(--brands-bg);
  border-radius: 24px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.extra-info-card h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-dark);
  margin: 0 0 16px 0;
}

/* Priority list (Support tab) */
.priority-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
}

.badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-priority {
  background-color: #ffe2e2;
  color: #e7000b;
}

.badge-standard {
  background-color: var(--green-tint-200);
  color: var(--green-600);
}

.badge-general {
  background-color: #e7e8ea;
  color: var(--color-text-dark-gray);
}

.priority-time {
  font-size: 14px;
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
}

/* Bullet list (Business tab) */
.extra-info-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.extra-info-card ul li {
  font-size: 14px !important;
  color: var(--color-text-dark-gray);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
  font-weight: var(--fw-normal);
}

.extra-info-card ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 16px;
  line-height: 1;
  top: 1px;
}

/* Form Column & Panes */
.contact-form-column {
  position: relative;
}

.form-card-container {
  background-color: var(--brands-bg);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.04);
  border: 1px solid #0000000f;
  position: relative;
  z-index: 2;
}

.contact-form-pane {
  display: none;
}

.contact-form-pane.active {
  display: block;
  animation: fadeIn 0.4s ease forwards;
}

.form-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.form-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    #4abf661a 0%,
    #4abf6633 50%,
    #ffffff00 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 8px 12px 24px rgba(9, 71, 37, 0.18);
  flex-shrink: 0;
}

.form-header-icon {
  width: 34px;
  height: 34px;
}

.form-header-text h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text-dark);
  margin: 0 0 4px 0;
}

.form-header-text p {
  font-size: var(--fs-base);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  margin: 0;
}

/* Grid Layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group.full-width {
  grid-column: span 2;
}

.form-group input,
.form-group textarea {
  width: 100%;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background-color: #f6f6f6;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--color-text-dark);
  font-family: inherit;
  transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-dark-gray);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  background-color: var(--brands-bg);
  border-color: rgba(17, 130, 68, 0.4);
  box-shadow: 0 0 0 3px rgba(17, 130, 68, 0.08);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit Button */
.submit-btn {
  width: 100%;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-primary);
  color: var(--brands-bg);
  border: none;
  border-radius: 8px;
  padding: 16px 24px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(17, 130, 68, 0.2);
}

.submit-btn:active {
  transform: translateY(0);
}

.btn-arrow {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

.submit-btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* Decorative Envelope & Airplane */
.decorative-mail-box {
  position: absolute;
  right: -210px;
  bottom: 25px;
  z-index: 3;
  pointer-events: none;
}

.decorative-mail-img {
  width: 231px;
  height: 168px;
  animation: floatIllustration 5s ease-in-out infinite alternate;
}

@keyframes floatIllustration {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CONTACT PAGE TABS RESPONSIVE */

@media (max-width: 1200px) {
  .decorative-mail-box {
    right: -30px;
    bottom: -80px;
  }
  .decorative-mail-img {
    width: 130px;
    height: 100px;
  }
}

@media (max-width: 1024px) {
  .contact-tabs-content {
    grid-template-columns: 280px 1fr;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .contact-tabs-nav {
    gap: 16px;
    margin-bottom: 40px;
  }

  .contact-tab-btn {
    padding: 10px 12px;
    font-size: 14.5px;
  }

  .contact-tabs-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-info-column {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }

  .form-card-container {
    padding: 30px 24px;
  }
}

@media (max-width: 576px) {
  .contact-tabs-section {
    padding: 50px 0 60px 0;
  }

  .form-header-text h2 {
    font-size: 16px;
  }

  .form-header-text p {
    font-size: 14px;
  }

  .contact-tabs-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .contact-tab-btn {
    font-size: 13px;
    padding: 8px 10px;
  }

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

  .form-group.full-width {
    grid-column: span 1;
  }
}

/* ==========================================================================
   Work With Us Section & Open Positions
   ========================================================================== */
.work-with-us-section {
  padding: 70px 0;
  background-color: #fcfdff;
}

.work-callout-card {
  background: var(--brands-bg);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}

.work-info-content {
  flex: 1.3;
  max-width: 480px;
}

.work-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.work-badge-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--green-tint-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.work-badge-icon {
  width: 22px;
  height: 22px;
}

.work-badge span {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.work-title {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.work-title .highlight-green {
  color: var(--color-primary);
}

.work-description {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  margin: 0;
}

.work-illustration {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-chair-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.work-contacts {
  flex: 0.9;
  background: #f7faf9;
  border: 1px solid #0000000f;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 290px;
}

.work-contact-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.work-contact-box:not(:last-child) {
  border-bottom: 1px solid #d7d8da;
  padding-bottom: 20px;
}

.work-contact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.work-contact-label {
  display: block;
  font-size: 14px;
  color: #92959a;
  margin-bottom: 4px;
  font-weight: var(--fw-normal);
}

.work-contact-value {
  font-size: 14px;
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  line-height: 1.4;
}

a.work-contact-value {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.work-contact-value:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.positions-section-title {
  font-size: 28px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin: 0 0 24px 0;
}

.positions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.position-card {
  background: var(--brands-bg);
  border-radius: 16px;
  padding: 24px 32px;
  border: 1px solid #0000000f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.015);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: all 0.3s ease;
}

.position-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
  border-color: rgba(74, 191, 102, 0.2);
}

.position-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.position-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.position-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.position-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.position-title-row {
  display: flex;
  align-items: center;
}

.position-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin: 0;
}

.job-tag {
  background-color: var(--green-tint-200);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--fw-medium);
  padding: 4px 10px;
  border-radius: 4px;
  margin-left: 12px;
  text-transform: capitalize;
}

.position-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.position-loc-wrapper {
  display: inline-flex;
  align-items: center;
}

.position-dept {
  font-size: var(--fs-base);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
}

.meta-dot {
  width: 4px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 8px;
}

.meta-location-icon {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

.position-loc {
  font-size: var(--fs-base);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
}

.apply-btn {
  background-color: var(--color-primary);
  color: var(--brands-bg);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.apply-btn:hover {
  background-color: #0b3f2b;
  transform: translateY(-1px);
}

.apply-arrow {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* Responsive styles for Work With Us */
@media (max-width: 991px) {
  .work-with-us-section {
    padding: 60px 0;
  }

  .work-callout-card {
    flex-direction: column;
    align-items: stretch;
    padding: 30px 24px;
    gap: 32px;
  }

  .work-info-content {
    max-width: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .work-title {
    font-size: 32px;
  }

  .work-contacts {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 576px) {
  .position-card {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
  }

  .position-left {
    align-items: flex-start;
  }

  .position-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .job-tag {
    margin-left: 0;
  }

  .position-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .meta-dot {
    display: none;
  }

  .position-loc-wrapper {
    display: inline-flex;
    align-items: center;
  }

  .apply-btn {
    justify-content: center;
    width: 100%;
  }

  .work-title {
    font-size: 24px;
  }
}

/* ==========================================================================
   Job Application Side Drawer
   ========================================================================== */
.job-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.job-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.job-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 600px;
  max-width: 100%;
  height: 100%;
  background: var(--brands-bg);
  z-index: 10000;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.job-drawer.active {
  transform: translateX(0);
}

body.body-no-scroll {
  overflow: hidden;
  height: 100vh;
}

.job-drawer-header {
  position: relative;
  background-color: #01482b;
  padding: 48px 36px 36px 36px;
  color: var(--neutral-white);
  overflow: hidden;
  flex-shrink: 0;
}

.job-drawer-header::before,
.job-drawer-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.15;
}

.job-drawer-header::before {
  left: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
}

.job-drawer-header::after {
  right: 0;
  top: 0;
  width: 150px;
  height: 150px;
}

.drawer-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.drawer-badge-dept {
  background-color: var(--green-600);
  color: var(--neutral-white);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 6px 12px;
  border-radius: 500px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.drawer-badge-level {
  background-color: #ffffff1a;
  color: #84bf9f;
  font-size: 11px;
  font-weight: var(--fw-normal);
  padding: 6px 12px;
  border-radius: 500px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-transform: capitalize;
}

.drawer-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--neutral-white);
  margin: 0;
  position: relative;
  z-index: 2;
}

.drawer-meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  position: relative;
  z-index: 2;
}

.drawer-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #84bf9f;
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

.drawer-meta-item img {
  width: 13px;
  height: 13px;
}

.drawer-close-btn {
  position: absolute;
  top: 36px;
  right: 36px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff1a;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 3;
}

.drawer-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.drawer-close-btn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

/* Tabs styling */
.job-drawer-tabs {
  display: flex;
  border-bottom: 1px solid #edf2f7;
  background: var(--neutral-white);
  padding: 0 36px;
  flex-shrink: 0;
}

.drawer-tab-btn {
  position: relative;
  flex: 1;
  border: none;
  background: none;
  padding: 20px 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--neutral-gray-600);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.drawer-tab-btn:hover {
  color: var(--green-600);
}

.drawer-tab-btn.active {
  color: var(--neutral-gray-900);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
}

.drawer-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--green-600);
}

.drawer-tab-btn.active::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom, #ffffff00, #dceae2);
  pointer-events: none;
}

/* Body and Tab Contents */
.job-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 36px;
  background: var(--neutral-white);
  display: flex;
  flex-direction: column;
}

.drawer-tab-content {
  display: none;
}

.drawer-tab-content.active {
  display: block;
  animation: fadeInDrawerTab 0.3s ease forwards;
}

@keyframes fadeInDrawerTab {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Job Details Tab elements */
.details-section {
  margin-bottom: 32px;
}

.details-section h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--neutral-gray-900);
  margin: 0 0 16px 0;
}

.details-section p {
  font-size: 14px;
  color: #555555;
  font-weight: var(--fw-normal);
  line-height: 1.6;
  margin: 0;
}

.responsibilities-list,
.requirements-list,
.nicetohave-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.responsibilities-list li,
.requirements-list li,
.nicetohave-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: var(--neutral-gray-800);
  line-height: 1.6;
  font-weight: var(--fw-normal);
}

.responsibilities-list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 6px;
  height: 6px;
  background-color: var(--green-600);
  border-radius: 50%;
}

/* Apply Form elements */
.apply-heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-normal);
  color: var(--neutral-gray-900);
  margin: 0 0 24px 0;
}

.drawer-apply-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group-drawer input,
.form-group-drawer textarea {
  width: 100%;
  padding: 14px 18px;
  background-color: #f7faf9;
  border: 1px solid #e0ede7;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: #1e293b;
  transition: all 0.3s ease;
  font-weight: var(--fw-normal);
}

.form-group-drawer input::placeholder,
.form-group-drawer textarea::placeholder {
  color: #aaaaaa;
}

.form-group-drawer input:focus,
.form-group-drawer textarea:focus {
  outline: none;
  background-color: var(--neutral-white);
  border-color: var(--green-600);
  box-shadow: 0 0 0 4px rgba(17, 130, 68, 0.1);
}

.form-group-drawer textarea {
  resize: vertical;
  min-height: 120px;
}

/* Upload box */
.upload-resume-area {
  border: 2px dashed #c8e4d6;
  background-color: #f7faf9;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-resume-area:hover,
.upload-resume-area.dragover {
  background-color: rgba(17, 130, 68, 0.05);
  border-color: var(--green-600);
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.upload-icon-wrapper img {
  width: 28px;
  height: 28px;
}

.upload-title {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--green-600);
  margin: 0;
}

.upload-info {
  font-size: 11px;
  color: var(--neutral-gray-400);
  font-weight: var(--fw-normal);
  margin: 0;
}

.selected-filename {
  font-size: 14px;
  color: var(--green-600);
  font-weight: 500;
  margin-top: 8px;
  word-break: break-all;
  background: rgba(17, 130, 68, 0.08);
  padding: 6px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.selected-filename .remove-file-btn {
  border: none;
  background: none;
  color: #ef4444;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.drawer-submit-btn {
  width: 100%;
  padding: 16px;
  background-color: var(--green-600);
  color: var(--neutral-white);
  border: none;
  border-radius: 500px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.drawer-submit-btn:hover {
  background-color: #0b3f2b;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 20px rgba(17, 130, 68, 0.25);
}

.drawer-submit-btn:active {
  transform: translateY(0);
}

.drawer-submit-btn:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Tablet / Mobile view */
@media (max-width: 768px) {
  .job-drawer {
    width: 100%;
  }

  .job-drawer-header {
    padding: 36px 24px 24px 24px;
  }

  .drawer-close-btn {
    top: 24px;
    right: 24px;
  }

  .job-drawer-tabs {
    padding: 0 24px;
  }

  .job-drawer-body {
    padding: 24px;
  }

  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================
   Form
========================== */

.apply-form-wrapper {
  flex: 1;
  max-width: 540px;
}

.apply-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apply-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.apply-form input,
.apply-form textarea {
  width: 100%;

  padding: 15px 18px;

  background: #fff;

  border: 1px solid #dfe0e2;
  border-radius: 8px;

  font-size: 15px;
  font-family: inherit;

  transition: 0.3s;
}

.apply-form textarea {
  resize: none;
  min-height: 110px;
}

.apply-form input:focus,
.apply-form textarea:focus {
  outline: none;
  border-color: #118244;
  box-shadow: 0 0 0 3px rgba(17, 130, 68, 0.08);
}

.btn-submit-application {
  height: 56px;

  border: none;
  border-radius: 8px;

  background: #118244;
  color: #fff;

  font-size: 16px;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;

  transition: 0.3s;
}

.btn-submit-application img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s;
}

.btn-submit-application:hover {
  background: #0f713b;
}

.btn-submit-application:hover img {
  transform: translateX(4px);
}

/* ==========================
   Speculative Application
========================== */

.apply-section {
  padding: 10px 0;
}

.apply-card {
  background: #f8fafa;
  border: 1px solid #dfe0e2;
  border-radius: 32px;
  box-shadow: 7px 24px 54px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 50px;
  max-width: 1280px;
  margin: 0 auto;
}

.apply-info {
  flex: 1;
  max-width: 460px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.apply-header {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.apply-document {
  width: 100px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
}

.apply-header-content {
  flex: 1;
}

.apply-title {
  margin: 0 0 2px;

  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: #222;
}

.apply-desc {
  margin: 0;

  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-dark-gray);
  line-height: 1.7;
}

.apply-illustration {
  margin-top: 45px;
}

.apply-cv-image {
  width: 320px;
  max-width: 100%;
  display: block;
}

/* ---- Responsive ---- */

/* ---- Tablet: ≤ 991px ---- */
@media (max-width: 991px) {
  .apply-section {
    padding: 40px 0 0;
  }

  .apply-card {
    flex-direction: column;
    align-items: stretch;
    padding: 36px;
    gap: 32px;
    border-radius: 24px;
  }

  .apply-info {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .apply-icon-badge {
    margin-bottom: 16px;
  }

  .apply-title {
    font-size: 1.2rem;
  }

  .apply-desc {
    max-width: 440px;
    margin-bottom: 24px;
  }

  .apply-illustration {
    width: 200px;
    height: 180px;
    margin: 0 auto;
  }

  .apply-form-wrapper {
    max-width: 100%;
  }
}

/* ---- Small tablet / large phone: ≤ 767px ---- */
@media (max-width: 767px) {
  .apply-card {
    padding: 28px;
    gap: 28px;
    border-radius: 20px;
  }

  .apply-title {
    font-size: 1.1rem;
  }

  .apply-desc {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .apply-illustration {
    width: 170px;
    height: 155px;
  }

  .apply-envelope {
    width: 130px;
  }

  .apply-cv {
    width: 75px;
    top: 15px;
    left: 32px;
  }

  .apply-dot-ring {
    width: 105px;
    height: 105px;
    top: 8px;
    left: 15px;
  }

  .apply-plane-icon {
    font-size: 1.15rem;
    top: 20px;
    right: 5px;
  }

  .apply-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .apply-form {
    gap: 12px;
  }

  .apply-form input,
  .apply-form textarea {
    padding: 12px 16px;
    font-size: 13.5px;
  }

  .btn-submit-application {
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* ---- Mobile: ≤ 576px ---- */
@media (max-width: 576px) {
  .apply-section {
    padding: 28px 0 0;
  }

  .apply-card {
    padding: 22px;
    gap: 24px;
    border-radius: 16px;
  }

  .apply-icon-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    font-size: 1.15rem;
  }

  .apply-title {
    font-size: 1.05rem;
  }

  .apply-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .apply-illustration {
    width: 150px;
    height: 135px;
  }

  .apply-envelope {
    width: 115px;
  }

  .apply-cv {
    width: 65px;
    top: 12px;
    left: 28px;
  }

  .apply-dot-ring {
    width: 90px;
    height: 90px;
    top: 5px;
    left: 12px;
  }

  .apply-plane-icon {
    font-size: 1rem;
    top: 16px;
    right: 2px;
  }

  /* Stack full-width fields on smallest screens */
  .apply-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .apply-form {
    gap: 12px;
  }

  .apply-form input,
  .apply-form textarea {
    padding: 12px 14px;
    font-size: 13px;
  }

  .btn-submit-application {
    font-size: 14px;
    padding: 13px 18px;
  }
}

/* ==========================
   Contact Features Section
========================== */
.contact-features-section {
  padding: 60px 0;
  position: relative;
  z-index: 2;
}

/* --- Features Card --- */
.features-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #dfe0e2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
  max-width: 1280px;
  margin: 0 auto;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
  justify-content: center;
}

.feature-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.feature-icon img {
  width: 50px;
  height: 50px;
  display: block;
}

.feature-icon i {
  font-size: 1.4rem;
  color: #0f7e41;
}

.feature-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  max-width: 140px;
  line-height: 1.3;
}

.feature-divider {
  height: 40px;
  width: auto;
  opacity: 0.3;
}

@media (max-width: 991px) {
  .features-card {
    flex-wrap: wrap;
    gap: 20px;
  }
  .feature-item {
    flex: 0 0 45%;
    justify-content: flex-start;
  }
  .feature-divider {
    display: none;
  }
}
@media (max-width: 575px) {
  .feature-item {
    flex: 0 0 100%;
  }
}

/* ==========================
   Office Locations Section
========================== */
.office-locations-section {
  position: relative;
  padding: 40px 0 80px;
  overflow: hidden;
}

.location-bg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}
.location-bg.bg-left {
  left: 0;
  max-width: 30%;
}
.location-bg.bg-right {
  right: 0;
  max-width: 30%;
}

.office-locations-section .container {
  position: relative;
  z-index: 1;
}

.section-header.text-center {
  text-align: center;
  margin-bottom: 50px;
}

.location-desc {
  max-width: 500px;
  margin: 15px auto 0;
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.office-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  gap: 24px;
}
.office-card:hover {
  transform: translateY(-5px);
}

.loc-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.loc-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.loc-header {
  display: flex;
  align-items: center;
  gap: 15px;
}
.loc-flag {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.loc-title-group h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 5px 0;
}
.loc-type {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f7e41;
}

.loc-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.loc-details li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.4;
}
.loc-details li img,
.loc-details li i {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #118244;
  opacity: 1;
}

@media (max-width: 991px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .locations-grid {
    grid-template-columns: 1fr;
  }
  .location-bg {
    display: none;
  }
}

/* ==========================
   MEETING REQUEST SECTION
========================== */

.contact-main {
  background: #ffffff;
  padding-top: calc(var(--header-height) + 60px);
  padding-bottom: 0px;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}



.meeting-request-section .container {
  --container-max-width: 1240px;
}

.meeting-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 7px 24px 54px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 452px;
}

.meeting-card-corner {
  position: absolute;
  height: auto;
  opacity: 0.75; /* was 0.5 — too faint on white */
  pointer-events: none;
  z-index: 0;
}
.corner-tr {
  top: 0;
  right: 0;
  width: 1300px;
  max-width: 140%;
}
.corner-tl {
  top: 0;
  left: 0;
  width: 400px;
  max-width: 60%;
}
.corner-bl {
  bottom: 0;
  left: 0;
  width: 750px;
  max-width: 90%;
}
.corner-br {
  bottom: 0;
  right: 0;
  width: 700px;
  max-width: 90%;
}

@media (max-width: 767px) {
  .corner-tr {
    width: 900px;
    max-width: 150%;
  }
  .corner-tl {
    width: 300px;
    max-width: 70%;
  }
  .corner-bl {
    width: 500px;
    max-width: 100%;
  }
  .corner-br {
    width: 500px;
    max-width: 100%;
  }
}
@media (max-width: 576px) {
  .corner-tr {
    width: 700px;
    max-width: 200%;
  }
  .corner-tl {
    width: 250px;
    max-width: 80%;
  }
  .corner-bl {
    width: 400px;
    max-width: 120%;
  }
  .corner-br {
    width: 400px;
    max-width: 120%;
  }
}

@media (min-width: 992px) {
  .meeting-card {
    flex-direction: row;
    padding: 80px;
    gap: 60px;
  }
}

.meeting-info,
.meeting-form-wrapper {
  position: relative;
  z-index: 1;
  flex: 1;
}

.meeting-info {
  padding: 40px;
}

@media (min-width: 992px) {
  .meeting-info {
    padding: 0;
  }
}

.meeting-subtitle {
  font-family: "Google Sans Code";
  font-size: 16px;
  color: var(--color-text-dark);
  font-weight: 400;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.meeting-subtitle .dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
}

.meeting-title {
  font-size: var(--fs-6xl);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 16px;
  line-height: 1.2;
}

.meeting-title span {
  color: var(--color-primary);
}

.meeting-desc {
  font-size: 16px;
  color: var(--color-text-dark-gray);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 30px;
}

.meeting-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.meeting-features li {
  font-size: 15px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.meeting-features li .dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: inline-block;
}

.meeting-form-wrapper {
  padding: 40px;
}

@media (min-width: 992px) {
  .meeting-form-wrapper {
    padding: 0;
    max-width: 480px;
  }
}

.meeting-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.meeting-form input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--neutral-gray-100);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text-dark-gray);
  background: var(--neutral-white);
  transition: all 0.3s ease;
}

.meeting-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(17, 130, 68, 0.1);
}

.meeting-form input::placeholder {
  color: #a0a0a0;
}

.btn-book-meeting {
  background-color: var(--color-primary);
  color: var(--neutral-white);
  border: none;
  border-radius: 8px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.3s ease;
  width: 100%;
}

.btn-book-meeting img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.btn-book-meeting i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.btn-book-meeting:hover {
  background-color: var(--color-primary-hover);
}

.btn-book-meeting:hover img,
.btn-book-meeting:hover i {
  transform: translateX(4px);
}

/* ---- Tablet: ≤ 991px ---- */
@media (max-width: 991px) {
  .contact-main {
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 40px;
    min-height: auto;
  }

  .meeting-card {
    min-height: auto;
  }

  .meeting-info {
    padding: 44px 44px 20px 44px;
  }

  .meeting-form-wrapper {
    padding: 20px 44px 44px 44px;
  }

  .meeting-title {
    font-size: 36px;
  }

  .meeting-desc {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .meeting-features {
    gap: 14px;
    margin-bottom: 8px;
  }

  .contact-card {
    padding: 48px 40px 40px;
  }
  .contact-info-grid {
    gap: 12px;
  }

  .brands-logos {
    padding: 40px 40px;
  }
}

/* ---- ≤ 991px ---- */
@media (max-width: 991px) {
  .hero-container {
    min-height: 600px;
  }

  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .expertise-cubes {
    opacity: 0.04;
  }

  .why-choose-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .meeting-card {
    border-radius: 16px;
  }

  .meeting-info {
    padding: 32px 28px 16px 28px;
  }

  .meeting-form-wrapper {
    padding: 16px 28px 32px 28px;
  }

  .meeting-subtitle {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .meeting-title {
    font-size: 32px;
    margin-bottom: 12px;
  }

  .meeting-desc {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  .meeting-features li {
    font-size: 14px;
  }

  .meeting-form {
    gap: 16px;
  }

  .meeting-form input {
    padding: 14px 18px;
    font-size: 14px;
  }

  .btn-book-meeting {
    padding: 14px 22px;
    font-size: 15px;
  }
}

/* ---- Mobile: ≤ 576px ---- */
@media (max-width: 576px) {
  .contact-main {
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: 16px;
  }

  .meeting-card {
    border-radius: 14px;
  }

  .meeting-info {
    padding: 24px 20px 12px 20px;
  }

  .meeting-form-wrapper {
    padding: 12px 20px 24px 20px;
  }

  .meeting-title {
    font-size: 24px;
  }

  .meeting-desc {
    font-size: 13.5px;
    margin-bottom: 18px;
  }

  .meeting-features {
    gap: 10px;
  }

  .meeting-features li {
    font-size: 13px;
    gap: 10px;
  }

  .meeting-form {
    gap: 14px;
  }

  .meeting-form input {
    padding: 13px 16px;
    font-size: 13.5px;
  }

  .btn-book-meeting {
    font-size: 14px;
    padding: 13px 20px;
  }
}

/* ==========================================================================
   ==========================================================================
   PRODUCTS AND SERVICES PAGE STYLES (productsAndServices.html)
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   PRODUCTS & SERVICES — HERO SECTION
   ========================================================================== */
.ps-hero-section {
  position: relative;
  background-color: #004620;
  overflow: hidden;
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: 80px;
}

.ps-hero-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* ---- Left Content ---- */
.ps-hero-content {
  max-width: 480px;
}

.ps-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 24px;
}

.ps-hero-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 20px;
}

.ps-hero-title span {
  display: block;
  color: #8fd4a8;
}

.ps-hero-desc {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 32px;
}

.ps-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.btn-ps-primary,
.btn-ps-secondary {
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-ps-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #118244;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-ps-primary:hover {
  background-color: #0d6836;
  transform: translateY(-2px);
}

.btn-ps-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #118244;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-ps-secondary:hover {
  background-color: #f2f2f2;
  transform: translateY(-2px);
}

/* ---- Right Visual ---- */
.ps-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 450px;
}

/* Dotted background image */
.ps-hero-dots {
  position: absolute;
  top: -50px; /* Move down */
  right: -30px; /* Move slightly right */
  width: 380px;
  height: auto;
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
}

/* Main image */
.ps-hero-img-main {
  position: relative;
  width: 480px;
  height: 450px;
  object-fit: contain;
  z-index: 2; /* Above the dots */
}

/* Decorative ring around hero visual */
@keyframes ring-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.ps-hero-ring {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  /* Conic gradient that spins to create a moving ring */
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(74, 191, 102, 0.7) 20%,
    rgba(17, 130, 68, 1) 40%,
    transparent 60%
  );
  /* Mask it so only a thin border ring is visible */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #fff calc(100% - 3px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #fff calc(100% - 3px)
  );
  animation: ring-rotate 4s linear infinite;
}

/* ==========================================================================
   PRODUCTS & SERVICES — HERO RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .ps-hero-container {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }

  .ps-hero-content {
    max-width: 100%;
    margin: 0 auto;
  }

  .ps-hero-actions {
    justify-content: center;
  }

  /* Hide the hero image section */
  .ps-hero-visual {
    display: none;
  }
}

@media (max-width: 576px) {
  .ps-hero-section {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 60px;
  }

  .ps-hero-badge {
    font-size: 0.7rem;
    padding: 6px 16px;
  }

  .ps-hero-title {
    font-size: 1.6rem;
  }

  .ps-hero-desc {
    font-size: 0.9rem;
  }

  .ps-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-ps-primary,
  .btn-ps-secondary {
    width: 100%;
  }
}
/* ==========================================================================
   PRODUCTS & SERVICES — SIGNATURE PRODUCTS SECTION
   ========================================================================== */
.ps-products-section {
  padding: 80px 0;
  background: #fcfdff;
}

.ps-products-header {
  margin-bottom: 40px;
}

.ps-products-title {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  color: #111;
  line-height: 1.2;
}

.ps-products-title span {
  color: #118244;
}

.ps-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ---- Card base ---- */
.ps-product-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e9eb;
  border-radius: 24px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.12);
  padding: 32px 32px 30px;
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.ps-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18);
}

.ps-products-section .container {
  max-width: var(--container-max-width);
}

/* Top accent bar (per card color) */
.ps-product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}
.ps-product-card--green::before {
  background: #118244;
}
.ps-product-card--orange::before {
  background: #f5a524;
}
.ps-product-card--teal::before {
  background: #19bace;
}
.ps-product-card--purple::before {
  background: #6a66d7;
}

/* Header row: icon + title/subtitle */
.ps-product-top {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.ps-product-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-product-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.ps-product-heading h3 {
  font-size: 1.15rem;
  font-weight: 500;
  color: #111;
  margin-bottom: 4px;
  line-height: 1.3;
}

.ps-product-heading span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ps-product-card--green .ps-product-heading span {
  color: #118244;
}
.ps-product-card--orange .ps-product-heading span {
  color: #f5a524;
}
.ps-product-card--teal .ps-product-heading span {
  color: #19bace;
}
.ps-product-card--purple .ps-product-heading span {
  color: #6a66d7;
}

.ps-product-desc {
  font-size: 0.9rem;
  color: #5d636c;
  line-height: 1.6;
  max-width: 78%;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

/* Tag pills */
.ps-product-tags {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 78%;
  position: relative;
  z-index: 1;
}

.ps-product-tags li {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 10px;

  background: #f4f9f6;
  border: 1px solid #d5e3db;
  border-radius: 999px;

  color: #3a3a3a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.ps-product-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: gap 0.2s ease;
}
.ps-product-link i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
.ps-product-link:hover {
  gap: 12px;
}
.ps-product-card--green .ps-product-link {
  color: #118244;
}
.ps-product-card--orange .ps-product-link {
  color: #f5a524;
}
.ps-product-card--teal .ps-product-link {
  color: #19bace;
}
.ps-product-card--purple .ps-product-link {
  color: #6a66d7;
}

/* Product visual — bottom-right, behind text */
.ps-product-visual {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 35%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}

/* ==========================================================================
   SIGNATURE PRODUCTS — RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .ps-products-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ps-product-desc,
  .ps-product-tags {
    max-width: 100%;
  }
  .ps-product-visual {
    max-width: 34%;
    max-height: 60%;
  }
  .ps-products-title {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .ps-products-section {
    padding: 56px 0;
  }
  .ps-products-header {
    margin-bottom: 28px;
  }
  .ps-products-title {
    font-size: 24px;
  }
  .ps-product-card {
    padding: 24px 20px 22px;
  }
  .ps-product-icon img {
    width: 64px;
    height: 64px;
  }
  .ps-product-heading h3 {
    font-size: 1rem;
  }
  .ps-product-desc {
    font-size: 0.85rem;
    max-width: 100%;
  }
  .ps-product-tags {
    max-width: 100%;
  }
  .ps-product-visual {
    position: static;
    display: block;
    max-width: 60%;
    margin: 16px auto 0;
  }
}

/* ==========================================================================
   END-TO-END TECHNOLOGY SERVICES SECTION
   ========================================================================== */

.ts-section {
  padding: 80px 0;
  background: #84bf9f14;
}

.ts-section .container {
  max-width: var(--container-max-width);
}

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

.ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

.ts-header-content {
  max-width: 560px;
}

.ts-title {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  color: #111;
  line-height: 1.2;
  margin: 12px 0 14px;
}

.ts-title span {
  display: block;
  color: #118244;
}

.ts-desc {
  font-size: 0.95rem;
  color: #5d636c;
  line-height: 1.6;
}

.ts-header-visual {
  position: relative;
  min-width: 430px;
  max-width: 430px;
  flex-shrink: 0;
}

/* Moving gradient ring around the rocket/tech image */
.ts-header-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(74, 191, 102, 0.8) 25%,
    rgba(17, 130, 68, 1) 45%,
    transparent 65%
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #fff calc(100% - 3px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #fff calc(100% - 3px)
  );
  animation: ring-rotate 3.5s linear infinite;
}

.ts-visual-dots {
  position: absolute;
  top: 72px;
  right: -8px;
  z-index: 0;
  max-width: 60%;
  height: auto;
}

.ts-visual-main {
  position: relative;
  z-index: 1;
  max-width: 100%;
  display: block;
}

/* ---------- Grid ---------- */

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

/* ---------- Card ---------- */

.ts-card {
  background: #fff;
  border: 1px solid #e5e9eb;
  border-radius: 24px;
  padding: 28px 24px;

  box-shadow: 0 0 60px 12px #e5e9eb;

  transition: all 0.35s ease;
}

.ts-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 75px 18px #e5e9eb;
}

/* ---------- Icon + Title ---------- */

.ts-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.ts-icon {
  width: 92px;
  height: 92px;
  object-fit: contain;
  flex-shrink: 0;
}

.ts-card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.35;
  color: #111;
}

/* ---------- Service Count ---------- */

.ts-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 18px;

  background: #f0f8f4;
  border-radius: 4px;

  color: #118244;
  font-size: 14px;
  font-weight: 500;

  margin-bottom: 18px;
}

/* ---------- Download ---------- */

.ts-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 16px;
  font-weight: 500;

  color: #118244;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ts-download img {
  width: 22px;
  height: 22px;
}

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

@media (max-width: 1200px) {
  .ts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .ts-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
  }

  .ts-header-visual {
    display: none;
  }

  .ts-title {
    font-size: 32px;
  }

  .ts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .ts-card {
    padding: 24px 20px;
  }

  .ts-card-header {
    gap: 14px;
    margin-bottom: 18px;
  }

  .ts-icon {
    width: 72px;
    height: 72px;
  }

  .ts-card-title {
    font-size: 1rem;
  }

  .ts-card-count {
    font-size: 13px;
    padding: 6px 14px;
  }

  .ts-download {
    font-size: 14px;
  }

  .ts-download img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 576px) {
  .ts-section {
    padding: 56px 0;
  }

  .ts-title {
    font-size: 24px;
  }

  /* Keep 2 cards per row on mobile */
  .ts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ts-card {
    padding: 18px 16px;
    border-radius: 18px;
  }

  .ts-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .ts-icon {
    width: 60px;
    height: 60px;
  }

  .ts-card-title {
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .ts-card-count {
    font-size: 12px;
    padding: 5px 12px;
    margin-bottom: 14px;
  }

  .ts-download {
    font-size: 13px;
    gap: 4px;
  }

  .ts-download img {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   OUR PEOPLE SECTION
   ========================================================================== */

.op-section {
  padding: 80px 0;
  background: #84bf9f14;
}

.op-section .container {
  max-width: var(--container-max-width);
}

.op-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* ---------- Left content ---------- */

.op-content {
  max-width: 560px;
  flex-shrink: 0;
}

.op-title {
  font-size: clamp(2rem, 3vw, 2.15rem);
  font-weight: 500;
  color: #111;
  line-height: 1.25;
  margin: 12px 0 16px;
}

.op-title span {
  color: #118244;
}

.op-desc {
  font-size: 0.95rem;
  color: #5d636c;
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ---------- Stats grid ---------- */

.op-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.op-stat-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 4px;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

/* No box-shadow on the card itself — only a subtle lift + tint on hover */
.op-stat-card:hover {
  transform: translateY(-6px);
  background: #f3faf6;
}

.op-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.op-stat-icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(6px 6px 16px rgba(122, 127, 130, 0.25));
}

.op-stat-text h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #118244;
  line-height: 1.2;
}

.op-stat-text span {
  font-size: 0.9rem;
  color: #5d636c;
}

/* ---------- Right visual ---------- */

.op-visual {
  position: relative;
  flex: 1;
  min-width: 380px;
  max-width: 480px;
  background: #073b27;
  border-radius: 24px;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
}

.op-photo-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 30% 65%,
      rgba(74, 191, 102, 0.25) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 75% 65%,
      rgba(74, 191, 102, 0.25) 0%,
      transparent 40%
    ),
    #073b27;
}

.op-person {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.op-logo {
  position: absolute;
  top: -20px;
  left: -50 px;
  width: 160px;
  height: 160px;
  object-fit: contain;
  z-index: 2;
}

/* Floating white "team" card — overlaps the bottom edge of the photo */
.op-team-card {
  position: relative;
  z-index: 3;
  margin: -32px 8px 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0.8;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.op-team-info h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #111;
}

.op-team-info span {
  font-size: 0.85rem;
  color: #5d636c;
}

.op-hiring-badge {
  flex-shrink: 0;
  background: #118244;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 9px 22px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Feature icon row — designer-provided graphic, sits on the green background */
.op-features-img {
  display: block;
  width: 100%;
  margin-top: 28px;
}

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

@media (max-width: 1200px) {
  .op-visual {
    min-width: 380px;
  }

  .op-photo-wrap {
    height: 340px;
  }
}

@media (max-width: 991px) {
  .op-container {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .op-content {
    max-width: 100%;
  }

  .op-title {
    font-size: 32px;
  }

  .op-visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .op-photo-wrap {
    height: 400px;
  }
}

@media (max-width: 576px) {
  .op-section {
    padding: 56px 0;
  }

  .op-title {
    font-size: 24px;
  }

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

  .op-visual {
    border-radius: 18px;
    padding: 16px 16px 24px;
  }

  .op-photo-wrap {
    height: 300px;
    border-radius: 12px;
  }

  .op-logo {
    width: 64px;
    height: 64px;
    top: 12px;
    left: 12px;
  }

  .op-team-card {
    margin-top: -26px;
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .op-hiring-badge {
    align-self: flex-start;
  }

  .op-features-img {
    margin-top: 20px;
  }
}

/* ==========================================================================
   INDUSTRIES WE SERVE SECTION
   ========================================================================== */
.industries-serve-section {
  position: relative;
  background-color: var(--neutral-white);
  padding: 100px 0;
  overflow: hidden;
}

.industries-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.industries-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
  position: relative;
  z-index: 5;
}

.industries-header-left {
  flex: 1;
  max-width: 580px;
  position: relative;
  z-index: 5;
}

.industries-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.industries-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--green-600);
  border-radius: 50%;
  display: inline-block;
}

.industries-badge span {
  font-family: "Google Sans Code";
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--color-text-dark);
  letter-spacing: 1.5px;
}

.industries-header-left h2 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin: 0 0 24px 0;
  line-height: 1.15;
}

.industries-header-left h2 .highlight-green {
  color: var(--green-600);
}

.industries-header-left p {
  font-size: var(--fs-base);
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  margin: 0;
  line-height: 1.6;
}

.industries-header-right {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 58%;
  height: 460px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 1;
  pointer-events: none;
}

.industries-map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
}

/* Grid Layout */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  position: relative;
  z-index: 5;
}

.industry-card {
  background: var(--neutral-white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(var(--color-primary-rgb), 0.06);
  border-color: var(--green-tint-300);
}

.industry-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--green-400) 20%, transparent),
    color-mix(in srgb, var(--green-400) 10%, transparent),
    transparent
  );
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 6px 12px color-mix(in srgb, var(--green-400) 22%, transparent);
}

.industry-icon-box img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.industry-card-content {
  display: flex;
  flex-direction: column;
}

.industry-card-content h3 {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin: 0 0 6px 0;
}

.industry-card-content p {
  font-size: 14px;
  color: var(--color-text-dark-gray);
  font-weight: var(--fw-normal);
  margin: 0;
  line-height: 1.5;
}

/* RESPONSIVE DESIGN FOR INDUSTRIES */
@media (max-width: 991px) {
  .industries-serve-section {
    padding: 70px 0;
  }

  .industries-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
  }

  .industries-header-right {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 62%;
    height: 420px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 1;
    pointer-events: none;
  }

  .industries-map-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right top;
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .industries-header-left h2 {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .industries-header-left h2 {
    font-size: 24px;
  }

  .industries-header-right {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    pointer-events: auto;
  }

  .industries-map-img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    object-position: center;
  }

  .industries-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .industry-card {
    padding: 20px;
  }
}

/* ==========================================================================
   TECHNOLOGY PORTFOLIO SECTION
   ========================================================================== */

.technology-portfolio-section {
  position: relative;
  background-color: #0a1f14;
  padding: 100px 0;
  overflow: hidden;
}

.portfolio-decorations {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.decor-circle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 110%;
  opacity: 0.6;
}

.portfolio-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
}

.portfolio-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.portfolio-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.portfolio-badge::before {
  content: "";
  width: 40px;
  height: 3px;
  background-color: #84bf9f;
  display: inline-block;
}

.portfolio-badge span {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: #84bf9f;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.portfolio-content h2 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: #ffffff;
  margin: 0 0 24px 0;
  line-height: 1.15;
}

.portfolio-content h2 .highlight-green {
  color: #84bf9f;
}

.portfolio-content p {
  font-size: var(--fs-base);
  color: #ffffff;
  margin: 0 0 40px 0;
  line-height: 1.6;
  max-width: 540px;
  font-weight: var(--fw-normal);
}

.portfolio-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-download-portfolio,
.btn-proposal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 28px;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-download-portfolio {
  background-color: var(--green-600);
  color: var(--neutral-white);
  border: 1px solid var(--green-600);
}

.btn-download-portfolio:hover {
  background-color: var(--green-900);
  border-color: var(--green-900);
  transform: translateY(-2px);
}

.btn-download-portfolio svg,
.btn-download-icon {
  width: 16px;
  height: 16px;
}

.btn-proposal {
  background-color: var(--neutral-white);
  color: var(--green-600);
  border: 1px solid var(--neutral-white);
}

.btn-proposal:hover {
  background-color: var(--green-tint-50);
  color: var(--green-900);
  transform: translateY(-2px);
}

/* Portfolio list style */
.portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.portfolio-item {
  background: color-mix(in srgb, var(--neutral-white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--neutral-white) 10%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-item:hover {
  background: color-mix(in srgb, var(--neutral-white) 6%, transparent);
  border-color: color-mix(in srgb, var(--neutral-white) 15%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.portfolio-item-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  flex-shrink: 0;
}

.portfolio-item-left svg,
.portfolio-item-left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portfolio-item-center {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portfolio-item-center h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--neutral-white);
  margin: 0;
}

.portfolio-item-center span {
  font-size: 14px;
  color: var(--green-400);
  font-weight: var(--fw-normal);
}

.portfolio-item-right {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-item-right {
  transform: translateY(2px);
}
.portfolio-item-right svg,
.card-download-icon {
  width: 26px;
  height: 25px;
}

.card-download-icon {
  filter: invert(41%) sepia(57%) saturate(583%) hue-rotate(95deg)
    brightness(92%) contrast(90%);
}

/* RESPONSIVE DESIGN FOR PORTFOLIO */
@media (max-width: 991px) {
  .portfolio-container {
    gap: 40px;
  }

  .portfolio-content h2 {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .portfolio-content h2 {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .technology-portfolio-section {
    padding: 70px 0;
  }

  .portfolio-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .portfolio-content {
    align-items: flex-start;
    text-align: left;
  }

  .portfolio-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .btn-download-portfolio,
  .btn-proposal {
    flex: unset;
    width: auto;
  }

  .hide-mobile {
    display: none;
  }

  .decor-circle {
    display: none;
  }
}

@media (max-width: 480px) {
  .portfolio-content h2 {
    font-size: 24px;
  }

  .portfolio-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .btn-download-portfolio,
  .btn-proposal {
    max-width: 100%;
    width: 100%;
  }

  .portfolio-item {
    padding: 20px;
    gap: 16px;
  }

  .portfolio-item-center h3 {
    font-size: 16px;
  }
}

/* ==========================================================================
   BUILD FUTURE TOGETHER SECTION
   ========================================================================== */

.main-content-products-services {
  padding-top: var(--header-height, 120px) !important;
  padding-bottom: 0 !important;
  background-color: #f3f9f6;
}

.build-future-section {
  padding: 70px 0;
  background-color: #f3f9f6;
}

.build-future-card {
  background-color: #002213;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(8, 60, 29, 0.15);
}

.build-future-content {
  padding: 38px 45px;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.future-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #ffffff33;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 500px;
  padding: 8px 16px;
  margin-bottom: 24px;
  color: #ffffff;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.future-badge img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.build-future-content h2 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-medium);
  color: #ffffff;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.build-future-content p {
  font-size: var(--fs-base);
  color: #ffffff;
  margin: 0 0 32px 0;
  line-height: 1.6;
  max-width: 520px;
  font-weight: var(--fw-normal);
}

.future-buttons {
  display: flex;
  gap: 16px;
}

.btn-consultation,
.btn-sales {
  display: inline-block;
  text-align: center;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-consultation {
  background-color: #118244;
  color: #ffffff;
  border: 1px solid #118244;
  box-shadow: 0 4px 12px rgba(17, 130, 68, 0.2);
}

.btn-consultation:hover {
  background-color: #0b5e30;
  border-color: #0b5e30;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(17, 130, 68, 0.3);
}

.btn-sales {
  background-color: #ffffff;
  color: #118244;
  border: 1px solid #ffffff;
}

.btn-sales:hover {
  background-color: #f5f9f6;
  color: #0b5e30;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* Right visual panel */
.build-future-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 2;
}

.build-future-img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
}

/* RESPONSIVE DESIGN */
@media (max-width: 991px) {
  .build-future-card {
    grid-template-columns: 1.2fr 0.8fr;
    padding: 0;
    gap: 0;
  }

  .build-future-content {
    padding: 38px 30px;
  }

  .build-future-content h2 {
    font-size: 32px;
  }

  .build-future-visual {
    padding: 0;
  }
}

@media (max-width: 576px) {
  .build-future-content h2 {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .build-future-section {
    padding: 60px 0;
  }

  .build-future-card {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 0;
    gap: 0;
  }

  .build-future-content {
    align-items: flex-start;
    padding: 40px 32px 32px;
  }

  .future-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .btn-consultation,
  .btn-sales {
    flex: unset;
    width: auto;
    padding: 14px 20px;
  }

  .build-future-visual {
    height: auto;
    padding: 0;
  }

  .build-future-img {
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .build-future-content {
    padding: 36px 20px 24px;
  }

  .build-future-content h2 {
    font-size: 24px;
  }

  .future-buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .btn-consultation,
  .btn-sales {
    max-width: 100%;
    width: 100%;
  }

  .build-future-img {
    max-height: 240px;
  }
}

/* ==========================================================================
   PARTNER APPLICATION DRAWER
   ========================================================================== */

.partner-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.partner-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 600px;
  max-width: 100%;
  height: 100%;
  background: var(--neutral-white);
  z-index: 10000;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.partner-drawer.active {
  transform: translateX(0);
}

.partner-drawer-badge {
  display: inline-block;
  background-color: var(--green-600);
  color: var(--neutral-white);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 6px 14px;
  border-radius: 500px;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.partner-drawer-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  color: var(--neutral-white);
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.partner-drawer-desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fw-normal);
  max-width: 90%;
  position: relative;
  z-index: 2;
  color: #84bf9f;
}

.partner-drawer-close-btn {
  position: absolute;
  top: 48px;
  right: 36px;
  background: #ffffff1a;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.partner-drawer-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.partner-drawer-close-btn img {
  width: 16px;
  height: 16px;
}

.partner-drawer-body {
  padding-left: 30px;
  padding-right: 30px;
  overflow-y: auto;
  flex: 1;
}

.drawer-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--neutral-gray-900);
  margin-top: 32px;
  margin-bottom: 20px;
}

.drawer-section-title::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: var(--green-600);
}

.drawer-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #00000014;
}

.section-instruction {
  font-size: var(--fs-xs);
  color: var(--neutral-gray-400);
  font-weight: var(--fw-normal);
  margin-top: 15px;
  margin-bottom: 16px;
}

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group-drawer {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group-drawer label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--neutral-gray-600);
}

.form-group-drawer input[type="text"],
.form-group-drawer input[type="email"],
.form-group-drawer input[type="tel"],
.form-group-drawer input[type="url"],
.form-group-drawer textarea {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--green-tint-50);
  border: 1px solid var(--green-tint-250);
  border-radius: 10px;
  font-size: 13px;
  color: var(--neutral-gray-900);
  outline: none;
  font-weight: var(--fw-normal);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.form-group-drawer input:focus,
.form-group-drawer textarea:focus {
  border-color: var(--green-600);
  background-color: var(--neutral-white);
}

.form-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.form-option-item,
.form-option-item span {
  font-size: 13px;
  font-weight: 400;
  color: var(--neutral-gray-800);
}

.form-option-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.form-option-item input[type="checkbox"],
.form-option-item input[type="radio"] {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  background-color: var(--neutral-white);
  border: 2px solid var(--green-tint-500);
  box-shadow: none;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-top: 2px;
  flex-shrink: 0;
}

.form-option-item input[type="radio"] {
  border-radius: 50%;
}

.form-option-item input[type="checkbox"]:checked {
  background-color: var(--green-600);
  border-color: var(--green-600);
}

.form-option-item input[type="checkbox"]:checked::after {
  content: "✓";
  color: var(--neutral-white);
  font-size: 11px;
  font-weight: bold;
}

.form-option-item input[type="radio"]:checked {
  border-color: var(--green-600);
  background-color: var(--neutral-white);
}

.form-option-item input[type="radio"]:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--green-600);
  border-radius: 50%;
  display: block;
}

.table-container {
  overflow-x: auto;
  margin-bottom: 20px;
}

.drawer-table {
  width: calc(100% + 24px);
  border-collapse: separate;
  border-spacing: 12px 10px;
  margin-left: -12px;
  margin-right: -12px;
  text-align: left;
}

.drawer-table th,
.drawer-table td {
  padding: 0 12px;
}

.drawer-table th {
  background-color: transparent;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--neutral-gray-600);
  text-transform: none;
  padding-bottom: 8px;
}

.drawer-table td input {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--green-tint-50);
  border: 1px solid var(--green-tint-250);
  border-radius: 10px;
  font-size: 13px;
  color: var(--neutral-gray-900);
  outline: none;
  font-weight: var(--fw-normal);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.drawer-table td input::placeholder {
  color: #aaaaaa;
}

.drawer-table td input:focus {
  outline: none;
  background-color: var(--neutral-white);
  border-color: var(--green-600);
  box-shadow: 0 0 0 4px rgba(17, 130, 68, 0.1);
}

.upload-docs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.upload-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--green-tint-50);
  border: 1px solid var(--green-tint-500);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.upload-doc-row:hover {
  background: var(--green-tint-75);
  border-color: var(--green-600);
}

.upload-doc-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.green-upload-icon {
  width: 18px;
  height: 18px;
  filter: invert(41%) sepia(57%) saturate(583%) hue-rotate(95deg)
    brightness(92%) contrast(90%);
}

.upload-doc-name {
  font-size: 13px;
  font-weight: var(--fw-normal);
  color: var(--neutral-gray-600);
}

.upload-doc-format {
  font-size: 11px;
  color: #aaaaaa;
  font-weight: var(--fw-normal);
}

.agreement-list {
  margin-bottom: 30px;
}

.partner-drawer-submit-btn {
  width: 100%;
  background-color: var(--green-600);
  color: var(--neutral-white);
  border: none;
  padding: 15px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  margin-top: 20px;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.partner-drawer-submit-btn:hover {
  background-color: var(--green-900);
}

.submit-disclaimer {
  font-size: 11px;
  color: var(--neutral-gray-400);
  font-weight: var(--fw-normal);
  text-align: center;
  margin-top: 12px;
  line-height: 1.4;
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .partner-drawer {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .form-grid-2col {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .partner-drawer-header {
    padding: 36px 24px 24px 24px;
  }
  .partner-drawer-close-btn {
    top: 36px !important;
    right: 24px !important;
  }
  .partner-drawer-body {
    padding: 24px 24px;
  }
  .drawer-table {
    min-width: 550px;
  }
}

/* Scroll Reveal Animations */
/* =======================================================
   HOME PAGE ENHANCED ANIMATIONS
======================================================= */

/* 1. ANIMATION KEYFRAMES */

/* Gentle float with slight rotation for a more organic feel */
@keyframes hp-float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

/* Slower, larger float with dynamic scaling */
@keyframes hp-float-slow {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-12px) rotate(1deg) scale(1.02);
  }
  66% {
    transform: translateY(10px) rotate(-1deg) scale(0.98);
  }
}

/* Enhanced Fade-up entrance with blur and scale */
@keyframes hp-fade-up {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Fade-in with slight blur resolve */
@keyframes hp-fade-in {
  from {
    opacity: 0;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* More dynamic scale-in for cards */
@keyframes hp-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(25px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0 10px 30px rgba(17, 130, 68, 0.08);
  }
}

/* Continuous rotation for globe lines */
@keyframes hp-spin-slow {
  from {
    transform: scale(1.05) rotate(0deg);
  }
  to {
    transform: scale(1.05) rotate(360deg);
  }
}
@keyframes hp-spin-slow-2 {
  from {
    transform: scale(1.2) rotate(0deg);
  }
  to {
    transform: scale(1.2) rotate(-360deg);
  }
}

/* Richer pulse on CTA arrow with glow */
@keyframes hp-pulse-arrow {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(17, 130, 68, 0.4);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 12px rgba(17, 130, 68, 0);
  }
}

/* Section title badge shimmer & glow */
@keyframes hp-shimmer {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 5px rgba(17, 130, 68, 0.2);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 15px rgba(17, 130, 68, 0.6);
  }
}

/* 2. HERO SECTION ANIMATIONS */
/* Entrance animations removed to use reveal-section transition style */

/* Decorative Dots */
.hero-dot--green {
  animation: hp-float 5s ease-in-out infinite;
}
.hero-dot--purple {
  animation: hp-float 6.5s ease-in-out infinite;
  animation-delay: 1.5s;
}
.hero-dot--blue {
  animation: hp-float 4.8s ease-in-out infinite;
  animation-delay: 0.8s;
}
.hero-dot--yellow {
  animation: hp-float 5.8s ease-in-out infinite;
  animation-delay: 2.1s;
}

/* Hero Globe */
.hero-globe-map {
  animation: hp-float-slow 10s ease-in-out infinite;
}
.hero-globe-lines:nth-of-type(1) {
  animation: hp-spin-slow 35s linear infinite;
  transform-origin: center bottom;
}
.hero-globe-lines:nth-of-type(2) {
  animation: hp-spin-slow-2 45s linear infinite;
  transform-origin: center bottom;
}

/* Side images */
/* Entrance animations removed to use reveal-section transition style */

/* 3. SCROLL-TRIGGERED FADE-UP — JS adds .hp-revealed on scroll (cross-browser) */
.hp-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hp-reveal.hp-revealed {
  opacity: 1;
  transform: translateY(0);
}

.hp-reveal-stagger > *:nth-child(1) {
  transition-delay: 0.05s;
}
.hp-reveal-stagger > *:nth-child(2) {
  transition-delay: 0.15s;
}
.hp-reveal-stagger > *:nth-child(3) {
  transition-delay: 0.25s;
}
.hp-reveal-stagger > *:nth-child(4) {
  transition-delay: 0.35s;
}
.hp-reveal-stagger > *:nth-child(5) {
  transition-delay: 0.45s;
}
.hp-reveal-stagger > *:nth-child(6) {
  transition-delay: 0.55s;
}
.hp-reveal-stagger > *:nth-child(7) {
  transition-delay: 0.65s;
}
.hp-reveal-stagger > *:nth-child(8) {
  transition-delay: 0.75s;
}

/* 4. CONTINUOUS ANIMATIONS FOR CARDS (Ultra-Attractive) */
@keyframes continuous-float-1 {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}
@keyframes continuous-float-2 {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
@keyframes continuous-pulse-glow {
  0%,
  100% {
    box-shadow: 0 4px 15px rgba(17, 130, 68, 0.05);
  }
  50% {
    box-shadow: 0 12px 30px rgba(17, 130, 68, 0.15);
  }
}

/* Apply continuous floating to various cards */
.expertise-card:nth-child(odd) {
  animation: continuous-float-1 6s ease-in-out infinite;
}
.expertise-card:nth-child(even) {
  animation: continuous-float-2 7s ease-in-out infinite;
}
.stat-card:nth-child(odd) {
  animation: continuous-float-1 5s ease-in-out infinite;
}
.stat-card:nth-child(even) {
  animation: continuous-float-2 6s ease-in-out infinite;
}
.why-choose-feature-card {
  animation: continuous-float-1 6.5s ease-in-out infinite;
}
.news-card {
  animation: continuous-float-2 8s ease-in-out infinite;
}
.marketplace-card {
  animation: continuous-float-1 5.5s ease-in-out infinite;
}
.promo-card,
.testimonial-card {
  animation: continuous-float-2 7.5s ease-in-out infinite;
}

/* 5. COMPONENT HOVERS & EFFECTS */

.section-title span {
  animation: hp-shimmer 2.5s ease-in-out infinite;
}

/* Overriding transforms for hover on cards to combine with continuous animation smoothly via pseudo or just overriding */
.expertise-card,
.stat-card,
.location-card,
.why-choose-feature-card,
.news-card,
.marketplace-card,
.promo-card,
.testimonial-card {
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s ease;
}

/* For cards with continuous animations, hovering needs to pop them more aggressively */
.expertise-card:hover,
.stat-card:hover,
.why-choose-feature-card:hover,
.news-card:hover,
.marketplace-card:hover,
.promo-card:hover,
.testimonial-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(17, 130, 68, 0.2);
  z-index: 10;
}

.location-card {
  animation: continuous-pulse-glow 4s ease-in-out infinite;
}
.location-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(17, 130, 68, 0.15);
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-dot--green,
  .hero-dot--purple,
  .hero-dot--blue,
  .hero-dot--yellow,
  .hero-globe-map,
  .hero-globe-lines,
  .smart-solutions-cta-btn,
  .section-title span,
  .expertise-card,
  .stat-card,
  .location-card,
  .why-choose-feature-card,
  .news-card,
  .marketplace-card,
  .promo-card,
  .testimonial-card {
    animation: none !important;
  }
  .hp-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .product-card--it-marketplace,
  .product-card--databox,
  .product-card--saas-connect,
  .product-card--one365,
  .hero-content .section-title,
  .hero-content h1,
  .hero-content > p:not(.section-title),
  .hero-actions,
  .hero-side-img--left,
  .hero-side-img--right {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .expertise-card:hover,
  .stat-card:hover,
  .location-card:hover,
  .why-choose-feature-card:hover,
  .news-card:hover,
  .marketplace-card:hover {
    transform: none !important;
  }
}

/* Ensure smooth hover for contact feature items */
.contact-feature-item {
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}
.contact-feature-item:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}

.contact-tabs-section {
  animation: hp-fade-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 0.3s;
}

/* Reduce motion accessibility for contact page */
@media (prefers-reduced-motion: reduce) {
  .contact-hero-section .contact-badge,
  .contact-hero-section .contact-title,
  .contact-hero-section .contact-subtitle,
  .contact-features-grid,
  .contact-tabs-section {
    animation: none !important;
  }
  .contact-feature-item:hover {
    transform: none !important;
  }
}

/* =======================================================
   SCROLL REVEAL — .reveal-section (All Pages)
   JS adds .reveal-active when scrolled into view (cross-browser)
======================================================= */
.reveal-section {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.reveal-section.reveal-active {
  opacity: 1;
  transform: translateY(0);
}

/* =======================================================
   CONTACT PAGE — CARD HOVER ANIMATIONS (Home-style)
======================================================= */

/* Position Cards (Job listings) */
.position-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}
.position-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 45px rgba(17, 130, 68, 0.14);
}

/* Work Callout Card */
.work-callout-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}
.work-callout-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(17, 130, 68, 0.12);
}

/* Work Contact Boxes */
.work-contact-box {
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}
.work-contact-box:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 28px rgba(17, 130, 68, 0.12);
}

/* Apply Card (Speculative application) */
.apply-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}
.apply-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(17, 130, 68, 0.12);
}

/* Office Location Cards */
.office-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}
.office-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 45px rgba(17, 130, 68, 0.16);
}

/* Meeting Card */
.meeting-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}
.meeting-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(17, 130, 68, 0.12);
}

/* Reduce motion for contact cards */
@media (prefers-reduced-motion: reduce) {
  .reveal-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .position-card:hover,
  .work-callout-card:hover,
  .work-contact-box:hover,
  .apply-card:hover,
  .office-card:hover,
  .meeting-card:hover {
    transform: none !important;
    box-shadow: none;
  }
}

/* =======================================================
   PRODUCTS & SERVICES PAGE ANIMATIONS
======================================================= */

/* Hero right-side visual: float + scale-in */
.ps-hero-img-main {
  animation: hp-scale-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.3s;
}
.ps-hero-dots {
  animation: hp-fade-in 1.2s ease both;
  animation-delay: 0.5s;
}
/* ps-hero-ring is now fully defined above near .ps-hero-img-main */
/* Additional float override from the animation section */
.ps-hero-ring {
  animation:
    ring-rotate 4s linear infinite,
    continuous-float-2 8s ease-in-out infinite;
}

/* --- Floating & Continuous animations on cards --- */
.ps-product-card:nth-child(odd) {
  animation: continuous-float-1 6s ease-in-out infinite;
}
.ps-product-card:nth-child(even) {
  animation: continuous-float-2 7s ease-in-out infinite;
}

.industry-card:nth-child(odd) {
  animation: continuous-float-1 5.5s ease-in-out infinite;
}
.industry-card:nth-child(even) {
  animation: continuous-float-2 6.5s ease-in-out infinite;
}

/* --- Card Hover Effects (buttery smooth, home-page style) --- */

/* Product Cards */
.ps-product-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}
.ps-product-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 55px rgba(17, 130, 68, 0.2);
  z-index: 10;
}

/* Service / Tech Cards */
.ts-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}
.ts-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 45px rgba(17, 130, 68, 0.18);
}

/* Industry Cards */
.industry-card {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}
.industry-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 22px 50px rgba(17, 130, 68, 0.18);
}

/* Portfolio Download Items */
.portfolio-item {
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}
.portfolio-item:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 35px rgba(17, 130, 68, 0.14);
}

/* Op / Stats cards */
.op-stat-card {
  animation: continuous-pulse-glow 4.5s ease-in-out infinite;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}
.op-stat-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px rgba(17, 130, 68, 0.2);
}

/* Build future card */
.build-future-card {
  transition: box-shadow 0.45s ease;
}
.build-future-card:hover {
  box-shadow: 0 25px 60px rgba(17, 130, 68, 0.14);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ps-hero-badge,
  .ps-hero-title,
  .ps-hero-desc,
  .ps-hero-actions,
  .ps-hero-img-main,
  .ps-hero-dots,
  .ps-hero-ring,
  .ps-product-card,
  .industry-card {
    animation: none !important;
  }
  .ps-product-card:hover,
  .ts-card:hover,
  .industry-card:hover,
  .portfolio-item:hover,
  .op-stat-card:hover {
    transform: none !important;
    box-shadow: none;
  }
}

/* =======================================================
   CONTACT PAGE ILLUSTRATIONS ANIMATIONS
======================================================= */
.decorative-mail-img {
  animation: continuous-float-2 3.5s ease-in-out infinite;
}

.apply-cv-image {
  animation: continuous-float-1 3s ease-in-out infinite;
}