/* =============================
 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: #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;

 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;
 }

}