/* =============================
   CSS Variables: Design Tokens
   ============================= */
:root {

  /* === Radius === */
  --radius-pill: 50px;
  --radius-overlay: 12px;
  --radius-section-bottom: 1rem;
  --radius-hero-overlay: 8px;
  --radius-case-card: 16px;
  --radius-hero-btn: 30px;
  --radius-default: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-md: 1rem;

  /* === Container Widths === */
  --container-xs: 576px;
  --container-s: 687px;
  --container-m: 768px;

  /* === Hero Section === */
  --hero-padding: 50px;
  --hero-height: 100vh;
  --hero-overlay-padding: 50px;

  /* === Pagination === */
  --pagination-size: 0.75rem;
  --pagination-gap: 0.25rem;
  --pagination-bg: rgba(255, 255, 255, 0.4);
  --pagination-bg-active: #ffffff;

  /* === Arrows === */
  --arrow-size: 40px;
  --arrow-offset: -20px;

  /* === Splide === */
  --splide-arrow-size: 40px;
  --splide-arrow-offset: -40px;
  --splide-arrow-offset-mobile: 10px;
  --splide-pagination-size: 0.75rem;
  --splide-pagination-gap: 0.25rem;
  --splide-pagination-bg: rgba(255, 255, 255, 0.4);
  --splide-pagination-active-bg: #ffffff;
  --splide-pagination-active-border: purple;

  /* === Image Sizes === */
  --logo-height: 40px;
  --brand-logo-height: 40px;
  --brand-img-height: 40px;

  /* === Fonts === */
  --font-heading: "Inter", sans-serif;
  --font-body: "Open Sans", sans-serif;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* === Font Sizes === */
  --font-size-base: clamp(1rem, 1.25vw, 1.125rem);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.95rem;
  --font-size-caption: 12px;
  --font-size-meta: 0.85rem;
  --font-size-post-title: 1.1rem;
  --font-size-category: 0.8rem;
  --font-size-feature-category: 0.85rem;

  --font-size-h1: clamp(2.5rem, 5vw, 3.2rem);
  --font-size-h2: clamp(2rem, 4vw, 3rem);
  --font-size-h3: clamp(1.75rem, 3vw, 2.5rem);
  --font-size-h4: clamp(1.5rem, 2.5vw, 2rem);
  --font-size-h5: clamp(1rem, 2vw, 1.2rem);
  --font-size-h6: clamp(0.95rem, 1.5vw, 1rem);

  --font-size-section-title: 2.5rem;
  --font-size-section-title-mobile: 2rem;
  --font-size-hero-title: 2.8rem;
  --font-size-hero-text: 1rem;
  --font-size-partners-title: 2.5rem;
  --font-size-capability-title: 1.5rem;
  --font-size-case-title: 1.4rem;
  --font-size-case-meta: 0.75rem;

  /* === Overlay Font Sizes === */
  --overlay-title-size: 2.5rem;
  --overlay-text-size: 1.1rem;

  /* === Line Heights === */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;

  /* === Spacing === */
  --spacing-small: 0.2rem;
  --spacing-small-medium: 0.3rem;
  --spacing-medium: 0.5rem;
  --spacing-medium-large: 0.6rem;
  --spacing-large: 0.75rem;
  --spacing-xlarge: 1rem;
  --spacing-xxlarge: 1.5rem;
  --spacing-xxxl: 1.75rem;
  --spacing-xxxxl: 2rem;
  --spacing-huge: 30px;
  --spacing-larger-gap: 30px;
  --spacing-gap-large: 50px;
  --spacing-gap-huge: 50px;

  --spacing-padding-hero: 50px;
  --spacing-padding-hero-overlay: 30px;
  --spacing-padding-case-overlay: 2rem;
  --spacing-case-title-bottom: 1.5rem;
  --spacing-case-title-left: 1.5rem;

  --space-md: 64px;
  --space-lg: 60px;
  --space-xl: 120px;
  --space-xxl: 180px;

  --section-padding: 80px;
  --margin-bottom-xl: 50px;
  --margin-bottom-title: 30px;
  --spacer-m: 60px;

  --padding-top-large: 180px;
  --padding-bottom-large: 180px;
  --padding-top-medium: 120px;
  --padding-bottom-medium: 120px;
  --padding-top-small: 64px;
  --padding-bottom-small: 64px;
  --overlay-padding: 2rem;

  /* === Dot Sizes === */
  --dot-size: 0.75rem;
  --dot-bg: rgba(255, 255, 255, 0.4);

  /* === Colors === */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-muted: #6c757d;
  --color-subtle: #7a7a7a;
  --color-paragraph: #333;
  --color-paragraph-text: #333;
  --color-body-text: #222;
  --color-footer-text: #fff;
  --color-meta-text: #6b7280;
  --color-heading-dark: #111827;
  --color-text-default: #111827;
  --color-text-muted: #6c757d;
  --color-text-primary: #5d5c6a;
  --color-text-secondary: #210f36;
  --color-text-white: #fff;
  --color-text-black: #000;

  --color-brand-primary: #2e1a47;
  --color-brand-secondary: #6331a2;
  --color-accent-yellow: #e9a900;
  --color-accent-purple: #6b21a8;

  --color-btn-primary: #2e1a47;
  --color-btn-primary-hover: #6331a2;
  --color-btn-secondary: #6b7280;
  --color-btn-warning: #e8a317;
  --color-btn-warning-hover: #efc230;
  --color-btn-warning-text: #000;

  --color-cta-btn: #f3b600;
  --color-cta-btn-hover: #d9a400;

  --color-case-overlay-bg: #e9a900;
  --color-case-overlay-text: #2e1b47;
  --color-case-overlay-gradient: rgba(0, 0, 0, 0.3);
  --color-case-title: #fff;

  --color-yellow: #f3b600;
  --color-yellow-dark: #d9a400;

  --color-shadow-light: rgba(0, 0, 0, 0.05);
  --color-link-hover: #6331a2;
  --color-form-focus-border: #000;

  --color-bg-light: #f8f9fa;
  --color-bg-dark: #121212;
  --color-bg-section: #f7f7f7;
  --color-bg-secondary: #e7e2e8;
  --color-bg-plum: #f2f0f3;
  --color-bg-plum-100: #f2f0f3;
  --color-bg-purple: #2d1a44;
  --color-purple-dark: #2d1a44;
  --color-border-secondary: #160c22;

  --color-warning: #e8a317;
  --color-warning-hover: #efc230;
  --color-success: #198754;
  --color-success-hover: #0f5132;

  --color-badge-bg: #2e1a47;

  /* === Backgrounds & Gradients === */
  --bg-light: #f8f9fa;
  --bg-dark: #121212;
  --bg-white: #ffffff;
  --bg-purple: #2d1a44;
  --bg-secondary: #e7e2e8;
  --bg-section: #f7f7f --bg-section: #f7f7f7;
  --bg-gradient-dark: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  --bg-gradient-light: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0));
  --bg-case-bottom: linear-gradient(transparent, rgba(0, 0, 0, 0.3));

  /* === Buttons === */
  --btn-primary-bg: var(--color-btn-primary);
  --btn-primary-hover-bg: var(--color-btn-primary-hover);
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: var(--color-btn-secondary);
  --btn-secondary-text: #ffffff;

  --btn-warning-bg: var(--color-btn-warning);
  --btn-warning-hover-bg: var(--color-btn-warning-hover);
  --btn-warning-text: var(--color-btn-warning-text);

  --btn-black-bg: #000;
  --btn-black-text: #fff;

  --btn-cta-bg: var(--color-cta-btn);
  --btn-cta-hover-bg: var(--color-cta-btn-hover);
  --btn-cta-text: #000;
  --btn-cta-hover-text: #fff;

  --btn-padding: 0.6rem 1.5rem;
  --btn-padding-y: 0.6rem;
  --btn-padding-x: 1.5rem;
  --btn-font-size: 1rem;
  --btn-font-weight: 600;
  --btn-border-radius: 50px;
  --btn-transition: all 0.3s ease;

  --bs-btn-active-bg: var(--btn-primary-bg);
  --bs-btn-active-border-color: var(--btn-primary-bg);

  /* === Cards === */
  --card-hover-scale: 1.05;
  --card-shadow: 0 0 15px var(--color-shadow-light);
  --card-radius: 16px;
  --card-radius-team: 10px;

  /* === Form Elements === */
  --form-border-radius: 30px;
  --form-padding-x: 20px;
  --form-min-height: 40px;
  --form-font-size: 14px;

  /* === Shadows === */
  --shadow-light: 0 0 15px var(--color-shadow-light);



  /* Colors */
  --color-primary-dark: #2e1a47;
  --color-primary-light: #7a7a7a;
  --color-accent-purple: #6b21a8;
  --color-text-dark: #111827;
  --color-text-muted: #6b7280;
  --color-white: #fff;
  --color-black: #000;
  --color-muted-border: #e5e7eb;
  --color-shadow-light: rgba(0, 0, 0, 0.05);
  --color-link-hover: #6331a2;
  --color-form-focus-border: #000;

  /* Font weights */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* Font sizes */
  --font-size-small: 0.75rem;
  --font-size-smaller: 0.8rem;
  --font-size-small-medium: 0.85rem;
  --font-size-medium: 0.9rem;
  --font-size-medium-large: 1rem;
  --font-size-large: 1.1rem;
  --font-size-xlarge: 1.2rem;

  /* Spacing */
  --spacing-small: 0.2rem;
  --spacing-small-medium: 0.3rem;
  --spacing-medium: 0.5rem;
  --spacing-medium-large: 0.6rem;
  --spacing-large: 0.75rem;
  --spacing-xlarge: 1rem;
  --spacing-xxlarge: 1.5rem;
  --spacing-xxxl: 1.75rem;
  --spacing-xxxxl: 2rem;
  --spacing-huge: 30px;
  --spacing-larger-gap: 30px;
  --spacing-gap-large: 50px;
  --spacing-gap-huge: 50px;

  /* Border radius */
  --radius-default: 8px;
  --radius-lg: 10px;
  --radius-xl: 20px;

  /* Box-shadow */
  --shadow-light: 0 0 15px var(--color-shadow-light);
}


/* ======================================
   Original Styles Start Here (From You)
   ====================================== */

/* Example - Use of Variables in Button */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
  transition: var(--btn-transition);
  font-weight: var(--btn-font-weight);
}

.btn-primary:hover {
  border-color: var(--btn-primary-hover-bg);
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-text);
}

/* CONTINUE WITH ALL OTHER CSS YOU SHARED... */
/* Keep the rest of your original CSS here unchanged for now */

body {
  font-family: var(--font-body);
  background-color: var(--color-white);
  color: #222;
  line-height: var(--line-height-normal);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
}

a {
  text-decoration: none;
  color: var(--color-text-secondary);
}

/* 2. Typography */
.text-primary {
  color: var(--color-text-primary) !important;
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}

.text-color-white {
  color: var(--color-white);
}

.text-color-black {
  color: var(--color-black);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-btn-primary);
}

/* 3. Utility Classes */

h1 {
  font-size: clamp(2.5rem, 5vw, 3.2rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: var(--font-medium);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

h4 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: var(--font-medium);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

h5 {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  font-weight: var(--font-medium);
  line-height: var(--line-height-normal);
  font-family: var(--font-heading);
}

h6 {
  font-size: clamp(0.95rem, 1.5vw, 1rem) !important;
  font-weight: var(--font-medium);
  line-height: var(--line-height-normal);
  font-family: var(--font-heading);
}

/* Heading Style Utilities */

.heading-style-xl {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

.heading-style-1 {
  font-size: clamp(2.7rem, 5vw, 3.2rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

.heading-style-2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

.heading-style-3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

.heading-style-4 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

.heading-style-5 {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

.heading-style-6 {
  font-size: clamp(0.95rem, 1.5vw, 1rem) !important;
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  font-family: var(--font-heading);
}

p {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  font-weight: var(--font-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-default, #333);
  margin-bottom: 1rem;
}

/* Font Weight Utility Classes */
.font-light {
  font-weight: var(--font-light, 300);
}

.font-normal {
  font-weight: var(--font-regular, 400);
}

.font-medium {
  font-weight: var(--font-medium, 500);
}

.font-semibold {
  font-weight: var(--font-semibold, 600);
}

.font-bold {
  font-weight: var(--font-bold, 700);
}

.font-extrabold {
  font-weight: var(--font-extrabold, 800);
}

.font-black {
  font-weight: var(--font-black, 900);
}

/* Badge/Label */
.small {
  font-size: var(--font-size-small, 10px);
  padding: 4px 10px;
  background: var(--color-btn-primary, #2e1a47);
  color: var(--color-white);
  display: inline-block;
  border-radius: var(--radius-pill, 50px);
}

/* Text Alignment */
.text-center {
  text-align: center;
}

/* Text Colors */
.text-muted {
  color: var(--color-muted, #6c757d);
}

/* Background Utilities */
.bg-light {
  background-color: var(--color-bg-light, #f8f9fa);
}

.bg-dark {
  background-color: var(--color-bg-dark, #121212);
  color: var(--color-white);
}

section {
  background-color: var(--color-bg-section, #f7f7f7);
}

.background-color-secondary {
  background-color: var(--color-bg-secondary, #e7e2e8);
}

.background-color-plum-100 {
  background-color: var(--color-bg-plum, #f2f0f3);
}

.background-color-purple {
  background-color: var(--color-purple-dark, #2d1a44);
}

/* Padding Utility Classes */
.padding-top-large {
  padding-top: var(--space-xxl, 180px);
}

.padding-bottom-large {
  padding-bottom: var(--space-xxl, 180px);
}

.padding-top-medium {
  padding-top: var(--space-xl, 120px);
}

.padding-bottom-medium {
  padding-bottom: var(--space-xl, 120px);
}

.padding-top-small {
  padding-bottom: var(--space-md, 64px);
}

.padding-bottom-small {
  padding-bottom: var(--space-md, 64px);
}

.spacer-m {
  width: 100%;
  padding-top: var(--space-lg, 60px);
}

/* Border/Divider */
.border-bottm-secondary {
  width: 100%;
  height: 1px;
  background: var(--color-border-secondary, #160c22);
}

.btn-primary {
  background-color: var(--color-btn-primary, #2e1a47);
  color: var(--color-white);
  border-color: var(--color-btn-primary, #2e1a47);
  transition: all 0.3s;
  font-weight: var(--font-medium, 500) !important;
}

.btn-primary:hover {
  border-color: var(--color-btn-primary-hover, #6331a2);
  background-color: var(--color-btn-primary-hover, #6331a2);
  color: var(--color-white);
}

.btn-secondary {
  background-color: var(--color-btn-secondary, #6B7280);
  color: var(--color-white);
}

.btn {
  display: inline-block;
  padding: var(--btn-padding, 0.6rem 1.5rem);
  font-weight: var(--font-semibold, 600);
  text-decoration: none;
  border-radius: var(--radius-pill, 50px);
  transition: all 0.3s ease;
  --bs-btn-active-bg: var(--color-btn-primary, #2e1a47);
  --bs-btn-active-border-color: var(--color-btn-primary, #2e1a47);
}

.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: var(--color-white);
}

.btn-warning {
  background-color: var(--color-warning, #e8a317);
  color: var(--color-black);
  border-color: var(--color-warning, #e8a317);
}

.btn-warning:hover {
  background-color: var(--color-warning-hover, #efc230);
  border-color: var(--color-warning-hover, #efc230);
}

.btn-black {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Sections */
.section {
  padding: var(--section-padding, 80px) 0;
}

.section-title {
  font-size: var(--section-title-size, 2.5rem);
  margin-bottom: var(--section-title-margin, 30px);
}

/* Containers */
.container-xs {
  max-width: 576px;
  width: 100%;
}

.container-m {
  max-width: 768px;
}

.container-s {
  max-width: 687px;
}

.margin-auto-y {
  margin: 0 auto;
}

/* Header */
header {
  z-index: var(--z-header, 1000);
}

.social-icons a {
  font-size: 1.2rem;
  color: var(--color-success, #198754);
  transition: 0.3s;
}

.social-icons a:hover {
  color: var(--color-success-hover, #0f5132);
}

/* Home Page */
a.navbar-brand img {
  width: auto;
  height: var(--logo-height, 40px);
  object-fit: cover;
}

.dropdown-menu a {
  text-decoration: none;
  color: var(--color-text-secondary, #210f36);
}

/* Splide Fullscreen Setup */
#vertical-slider {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 0;
}

.overlay-gradient {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0));
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}

.splide__pagination__page.is-active {
  background: var(--color-white);
  border: 2px solid var(--color-primary, purple);
  opacity: 1;
}

.splide__slide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
}


.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--overlay-bg, rgba(0, 0, 0, 0.5));
  padding: var(--overlay-padding, 2rem);
  border-radius: var(--radius-lg, 12px);
  text-align: center;
  color: var(--color-white);
  max-width: 600px;
  width: 90%;
}

.overlay h2 {
  font-size: var(--overlay-title-size, 2.5rem);
  margin-bottom: 0.5rem;
}

.overlay p {
  font-size: var(--overlay-text-size, 1.1rem);
  margin-bottom: 1rem;
}

.overlay .btn {
  padding: var(--btn-padding, 0.6rem 1.5rem);
  font-size: var(--btn-font-size, 1rem);
}

/* Vertical Slider Pagination */
#vertical-slider .splide__pagination {
    width: 20px;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
}

#vertical-slider .splide__pagination__page {
  width: var(--dot-size, 0.75rem);
  height: var(--dot-size, 0.75rem);
  margin: 0.25rem 0;
  background: var(--dot-bg, rgba(255, 255, 255, 0.4));
  border-radius: 50%;
}

#vertical-slider .splide__pagination__page.is-active {
  background: var(--color-white);
}

#vertical-slider .splide__slide {
  justify-content: flex-start;
  align-items: flex-end;
  min-height: 650px;
  background-size: cover;
  background-position: center;
}

#vertical-slider .splide__slide .hero-overlay {
  padding: var(--hero-overlay-padding, 50px);
  z-index: 2;
}

#vertical-slider .featured-work .splide__slide {
  padding: 0 10px;
}

/* Featured Slider Arrows */
#featured-slider .splide__arrow--next {
  right: -20px !important;
}

#featured-slider .splide__arrow--prev {
  left: -20px !important;
}

#featured-slider .splide__arrow {
  position: relative !important;
  transform: none !important;
  width: var(--arrow-size, 40px);
  height: var(--arrow-size, 40px);
  padding: 0;
}

#featured-arrows {
  display: flex;
  margin-top: 40px;
  justify-content: center;
}

#featured-slider .splide__pagination {
  display: none !important;
}

/* Brand Slider */
#brand-slider-track .splide__slide img {
  height: var(--brand-img-height, 40px) !important;
}

/* Background Gradient Overlay */
.bg-overlay {
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0));
  border-radius: 0 0 var(--radius-md, 1rem) var(--radius-md, 1rem);
}

.accordion-button::after {
  display: none;
}

/* Icon toggling */
.accordion-button:not(.collapsed) .icon i {
  content: "";
  font-family: bootstrap-icons !important;
}

.accordion-button.collapsed .icon i::before {
  content: "\f4fe";
  /* bi-plus */
}

.accordion-button:not(.collapsed) .icon i::before {
  content: "\f2ea";
  /* bi-dash */
}

/* Accordion Appearance */
#servicesAccordion.accordion,
.accordion-button:focus,
.accordion-button:not(.collapsed) {
  --bs-accordion-bg: transparent !important;
  background-color: transparent !important;
}

.accordion-button:focus {
  box-shadow: none !important;
}

#servicesAccordion .accordion-button:focus {
  border: none;
}

/* Featured Work Cards */
.featured-work .card {
  aspect-ratio: 5 / 6;
}

.featured-work .splide__slide img {
  vertical-align: bottom;
  aspect-ratio: 1;
}

/* Logo Testimonial */
.logo-testimonial {
  width: var(--testimonial-logo-size, 48px);
  height: var(--testimonial-logo-size, 48px);
  object-fit: cover;
  border-radius: var(--radius-full, 50px);
}

/* Testimonial Arrows */


.testimonials {
  padding-right: 16px;
  padding-left: 16px;
}


#testimonial-arrows .splide__arrow--next {
  right: -60px;
}

#testimonial-arrows .splide__arrow--prev {
  left: -60px;
}

#testimonial-arrows .splide__arrow {
  position: absolute;
  transform: none;
  width: var(--arrow-size, 40px);
  height: var(--arrow-size, 40px);
  padding: 0;
}

/* Card Image Zoom */
.card-img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

/* Grayscale Utility */
.grayscale {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.grayscale:hover {
  filter: none;
  opacity: 1;
}

/* CTA Button */
.cta-section .btn {
  letter-spacing: 0.5px;
  font-size: 0.95rem;
}

/* Borders */
.border-bottom {
  border-bottom: 1px solid var(--border-white-muted, #ffffff1a) !important;
}

.border-bottom-2 {
  border-bottom: 1px solid var(--border-gray-light, #b3b4b575) !important;
}

/* Overlay Text */
.card-img-overlay p {
  color: var(--color-white) !important;
  font-size: 12px;
  letter-spacing: 1px;
}

/* Blog Section */
.blog-section .card-img-top {
  height: 240px;
  object-fit: cover;
}

.blog-section .blog-meta img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.blog-section .blog-meta small {
  color: var(--text-muted, #6c757d);
  font-size: 12px;
}

.blog-section .btn-view-all {
  background-color: var(--btn-purple, #6f42c1);
  color: var(--color-white);
  font-weight: 500;
}

.blog-section .btn-view-all:hover {
  background-color: var(--btn-purple-hover, #59359c);
}

/* Footer */
footer p {
  color: var(--color-white) !important;
}

.footer-logo img {
  width: 120px;
  /* height: 80px; */
  object-fit: cover;
}

/* Hero Background */
.hero-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero-background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
  display: block;
}

.sticky-left {
  position: sticky;
  top: 100px;
}

.capabilities-section h2 {
  margin-bottom: 2rem;
}

.capabilities-section h2 span {
  color: var(--color-primary-light);
  font-weight: 400;
}

.capability-group {
  border-top: 1px solid #ccc;
  padding: 40px 0 20px;
}

.capability-title {
  font-size: var(--font-size-capability-title);
  font-weight: var(--font-bold);
}

.capability-list li {
  margin-bottom: 0.5rem;
  color: var(--color-primary-dark);
}

.hero-section {
  position: relative;
  /* background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80') no-repeat center center / cover; */
  /* height: 100vh; */
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-padding-hero);
  min-height: 500px;
}

.hero-overlay {
  padding: var(--spacing-padding-hero-overlay);
  max-width: 600px;
  border-radius: var(--radius-hero-overlay);
  position: relative;
  z-index: 5;
}

.hero-title {
  font-size: var(--font-size-hero-title);
  font-weight: var(--font-bold);
}

.hero-text {
  font-size: var(--font-size-hero-text);
  margin: 15px 0;
  color: var(--color-white);
}

.hero-btn {
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-weight: var(--font-semibold);
  padding: 10px 24px;
  border-radius: var(--radius-hero-btn);
  border: none;
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero-btn:hover {
  background-color: var(--color-yellow-dark);
  color: var(--color-white);
}

.partners-section {
  text-align: center;
}

.partners-title {
  font-size: var(--font-size-partners-title);
  font-weight: var(--font-bold);
  margin-bottom: 50px;
}

.partners-title span {
  color: var(--color-primary-light);
  font-weight: normal;
}

.partner-logo {
  max-height: 50px;
  object-fit: contain;
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Case Studies */
.case-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-case-card);
  width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-overlay-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, var(--color-case-overlay-gradient));
}

.case-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-case-overlay-bg);
  color: var(--color-case-overlay-text);
  padding: var(--spacing-padding-case-overlay);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(100%);
  transition: transform 0.4s ease-in-out;
  z-index: 9;
}

.case-card:hover .case-overlay {
  transform: translateY(0);
}

.case-title {
  position: absolute;
  bottom: var(--spacing-case-title-bottom);
  left: var(--spacing-case-title-left);
  color: var(--color-case-title);
  font-size: var(--font-size-case-title);
  font-weight: 600;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.case-card:hover .case-title {
  opacity: 0;
}

.case-overlay .meta {
  text-transform: uppercase;
  font-size: var(--font-size-case-meta);
  letter-spacing: 1px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.case-overlay a {

  text-decoration: none;
  color: var(--color-case-overlay-text);

}

/* Featured Slider */
#featured-slider .is-active .case-card .case-overlay {
  transform: translateY(0);
}

#featured-slider .is-active .case-title {
  opacity: 0;
}

/* Small link */
.small-link {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.small-link i {
  margin-left: 5px;
}

/* About Page - Team Card */
.team-card {
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

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

.role-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-xl);
}

.team-card-body {
  padding: var(--spacing-xlarge);
}

.team-card .social-icons a {
  color: var(--color-primary-dark);
  font-size: 1.2rem;
  margin: 0 8px;
}

.team-card .social-icons a:hover {
  color: var(--color-link-hover);
}

/* Blog Page */
.blog-label {
  color: var(--color-accent-purple);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-medium);
  text-transform: uppercase;
  margin-bottom: var(--spacing-medium);
}

.subtitle {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xxxl);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-medium-large);
}

.filter-bar {
  border-bottom: 1px solid var(--color-muted-border);
  margin-bottom: var(--spacing-gap-large);
  padding-bottom: var(--spacing-medium);
}

.filter-bar a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-right: 1.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s;
}

.filter-bar a.active,
.filter-bar a:hover {
  color: var(--color-accent-purple);
  text-decoration: underline;
}

.post-card {
  margin-bottom: 2.5rem;
  cursor: default;
}

.post-image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  height: 280px;
  margin-bottom: var(--spacing-medium-large);
}

.post-category {
  color: var(--color-accent-purple);
  font-size: var(--font-size-smaller);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--spacing-small);
  display: inline-block;
}

.post-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-small-medium);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-dark);
  text-decoration: none;
}

.post-title svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.post-excerpt {
  margin-bottom: var(--spacing-medium);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-small-medium);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.author-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

/* Top Feature Post */
.feature-post {
  display: flex;
  gap: var(--spacing-larger-gap);
  margin-bottom: var(--spacing-gap-huge);
}

.feature-image {
  width: 460px;
  height: 320px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex-shrink: 0;
}

.feature-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-category {
  font-size: var(--font-size-small-medium);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}

.feature-title {
  margin: 0 0 14px 0;
}

.feature-excerpt {
  margin-bottom: 24px;
}

/* Blog post page */
.featured-img {
  max-height: 500px;
  object-fit: cover;
}

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 1rem 0;
}

.icon-share i {
  font-size: 1.1rem;
  color: #333;
  margin-right: 12px;
  cursor: pointer;
}
.icon-share svg{
   margin-right: 12px;
}

.icon-share i:hover, .icon-share svg:hover {
  color: var(--color-primary-dark);
}

/* Accordion */
.accordion-button::after {
  content: '\f067';
  /* Font Awesome plus icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

.accordion-button:not(.collapsed)::after {
  content: '\f068';
  /* Minus icon */
}

/* Splide Carousel Customization */
.splide__pagination {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.splide__arrow--prev {
  left: -40px;
}

.splide__arrow--next {
  right: -40px;
}

/* Success Story */
.sucess-story img {
  max-height: 400px;
  object-fit: cover;
}

/* Contact Page */
.form-control:focus {
  box-shadow: none;
  border-color: var(--color-form-focus-border);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.form-control {
  border-radius: 30px;
  padding-left: 20px;
  min-height: 40px;
  font-size: 14px;
}

.contact_page .section-title {
  text-transform: uppercase;
  font-size: 13px;
  color: #6366f1;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact_page .section-header {
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 10px;
}

.contact_page .section-description {
  color: #6b7280;
  font-size: 15px;
  margin-bottom: 40px;
}

.contact_page .info-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.contact_page .info-card i {
  font-size: 24px;
  color: #4f46e5;
  margin-bottom: 10px;
}

.contact_page .info-card h5 {
  font-weight: 600;
  margin-bottom: 10px;
}

.contact_page .info-card a {
  text-decoration: none;
  color: #4f46e5;
  font-weight: 500;
}

.contact_page .contact_page .form-wrapper {
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.contact_page .contact_page label {
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 14px;
}

.contact_page .form-control {
  border-radius: 30px;
  padding-left: 20px;
  font-size: 14px;
}

.contact_page textarea.form-control {
  border-radius: 15px;
  resize: none;
}

.contact_page .btn-submit {
  border-radius: 30px;
  background-color: #4f46e5;
  color: white;
  padding: 10px 30px;
  border: none;
}

.contact_page .btn-submit:hover {
  background-color: #4338ca;
}

.contact_page .contact-box {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact_page .contact-box i {
  font-size: 18px;
  color: #4f46e5;
}

.contact_page .social-icons a {
  margin-right: 10px;
  color: #4f46e5;
  font-size: 16px;
  text-decoration: none;
}


/* 404 page*/

.error-404 {
  background: url("https://images.pexels.com/photos/5258152/pexels-photo-5258152.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920") no-repeat center center / cover;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.overlay-404 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
}

.error-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  max-width: 500px;
}

.error-content h1 {
  font-size: 6rem;
  font-weight: 700;
}

.error-content h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.btn-home {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  border-radius: 2rem;
}

.btn-home i {
  margin-right: 8px;
  vertical-align: middle;
}


@media (max-width: 991.98px){
   #navbarNav{
    max-height: 80vh !important; 
    overflow-y: auto;
    padding-bottom: 1rem;
  }

    .contact_page .info-card a{
    font-size: 12px;
  }

  .mega-menu {
    max-height: 70vh;
    overflow-y: auto;
  }
  
  #testimonial-slider #testimonial-arrows .splide__arrow {
    position: relative;
    margin-top: 30px;
    left: 0;
  }

  #testimonial-arrows .splide__arrow--next {
    right: 0;
  }

  #testimonial-slider ul.splide__pagination {
    display: none;
  }

}

/* 9. Media Queries */
@media (max-width: 768px) {

  .section-title {
    font-size: 2rem;
  }

  .btn {
    padding: 0.5rem 1.2rem;
  }

  .splide__arrow--prev,
  .splide__arrow--next {
    left: 10px;
    right: 10px;
  }

  /* hpme page */
  .hero-overlay {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 30px !important;
  }

  #brand-slider-track .splide__slide img {
    height: auto !important;
  }

  /* .footer-logo img {
    height: 50px;
} */
  .hero-section {
    padding: 10px;
  }

  .hero-section {
    padding: 10px;
  }

  .padding-bottom-medium {
    padding-bottom: 80px;
  }

  .padding-top-medium {
    padding-top: 80px;
  }

  .sticky-left {
    margin-bottom: 40px;
  }

  .padding-top-large {
    padding-top: 80px;
  }

  .feature-post {
    flex-direction: column;
  }

}

/* 9. Media Queries */
@media (max-width: 576px) {

#vertical-slider .splide__slide {
  min-height: 500px;
}

#vertical-slider .splide__pagination {
    width: auto;
    position: absolute;
    left: 0;
    top: auto;
    transform: none;
    flex-direction: initial;
    bottom: 0;
    gap: 8px;
}

  .featured-work {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* Blog page */
  .feature-image {
    width: 100%;
    height: 320px;

  }

  .post-meta {
    gap: 5px;
  }

}