:root {
    --dark: #000000;
    --darkBg: #000000;
	--whiteText: #ffffff;
    --whiteColor: #ffffff;
	--blueColor: #0033ff;
    --whiteBg: #ffffff;
    --primary: #0c26ce;
    --paragraph: rgba(29, 29, 31, 0.7);
    --font_inter_tight: "Inter Tight", sans-serif;
    --font_inter: "Inter", system-ui;
}

/* ======================================
*       TABLE OF CONTENT
*----------------------------------------
*   # Global
*   # Pre Loader
*   # Magic Cursor
*   # Hero
*   # Menu
*   # Popup Menu
*   # Hero Banner
*   # Service
*   # Work Details
*   # Task List
*   # Next Project
*   # About
*   # Client Logos
*   # Process
*   # Banner
*   # Motivation
*   # Experience
*   # Favourite Stack
*   # Testimonial
*   # Pricing
*   # Blog Details
*   # Faq
*   # CTA
*   # Contact
*   # 404
*   # Footer
*
*
*
*
*   # KeyFrame   
========================================*/

/* =====================================================
   DARK / LIGHT THEME SYSTEM
===================================================== */

:root,
html[data-theme="dark"] {

    --theme-bg: #050505;
    --theme-bg-soft: #0a0a0a;

    --theme-surface: rgba(255,255,255,.045);
    --theme-surface-strong: #101010;

    --theme-text: #ffffff;
    --theme-text-soft: rgba(255,255,255,.68);
    --theme-text-muted: rgba(255,255,255,.45);

    --theme-border: rgba(255,255,255,.12);

    --theme-header: rgba(5,5,5,.78);

    --theme-accent: #0c26ce;

    color-scheme: dark;
}


/* LIGHT */

html[data-theme="light"] {

    --theme-bg: #f1f1ef;
    --theme-bg-soft: #e9e9e6;

    --theme-surface: rgba(255,255,255,.62);
    --theme-surface-strong: #ffffff;

    --theme-text: #090909;
    --theme-text-soft: rgba(0,0,0,.68);
    --theme-text-muted: rgba(0,0,0,.46);

    --theme-border: rgba(0,0,0,.13);

    --theme-header: rgba(244,244,241,.82);

    --theme-accent: #0c26ce;

    color-scheme: light;
}


/* =====================================================
   BASIC PAGE THEME
===================================================== */

html,
body {
    background: var(--theme-bg);
    color: var(--theme-text);
}


/* Smooth theme transition */

body,
.site-header,
.hero-sec,
.hero-banner-sec,
.about-sec,
.service-sec,
.service-sec-2,
.process-sec,
.favourite-stack-sec,
.testimonials-sec,
.contact-sec,
.cta-sec-2,
.service-card,
.process-box,
.testimonial-card {
    transition:
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}


/* =====================================================
   HEADER
===================================================== */

.site-header {
    background: var(--theme-header) !important;

    border-color: var(--theme-border) !important;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


.site-header a,
.site-header nav a {
    color: var(--theme-text);
}


/* =====================================================
   LIGHT THEME — MAIN SECTIONS
===================================================== */

html[data-theme="light"] body,
html[data-theme="light"] .page-main,
html[data-theme="light"] #smooth-wrapper,
html[data-theme="light"] #smooth-content {

    background: var(--theme-bg);
    color: var(--theme-text);
}


html[data-theme="light"] .hero-sec,
html[data-theme="light"] .hero-banner-sec,
html[data-theme="light"] .about-sec,
html[data-theme="light"] .service-sec,
html[data-theme="light"] .service-sec-2,
html[data-theme="light"] .process-sec,
html[data-theme="light"] .favourite-stack-sec,
html[data-theme="light"] .testimonials-sec,
html[data-theme="light"] .contact-sec {

    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}


/* Headings */

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .section-title,
html[data-theme="light"] .section-title2 {

    color: var(--theme-text) !important;
}


/* General paragraph/text */

html[data-theme="light"] p,
html[data-theme="light"] li {

    color: var(--theme-text-soft);
}


/* =====================================================
   CARDS — LIGHT MODE
===================================================== */

html[data-theme="light"] .service-card,
html[data-theme="light"] .process-box,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .service-funfact-box {

    background:
        rgba(255,255,255,.62) !important;

    border-color:
        rgba(0,0,0,.12) !important;

    color: #090909;

    box-shadow:
        0 16px 40px rgba(0,0,0,.055),
        inset 0 1px 0 rgba(255,255,255,.8);
}


/* Preserve blue hover */

html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .process-box:hover,
html[data-theme="light"] .testimonial-card:hover {

    border-color: #0c26ce !important;

    box-shadow:
        0 16px 45px rgba(0,0,0,.08),
        0 0 30px rgba(12,38,206,.10);
}


/* =====================================================
   SECONDARY TEXT
===================================================== */

html[data-theme="light"] .testimonial-card blockquote,
html[data-theme="light"] .testimonial-client span,
html[data-theme="light"] .service-card-content p,
html[data-theme="light"] .process-text p {

    color: rgba(0,0,0,.66) !important;
}


/* =====================================================
   DIVIDERS
===================================================== */

html[data-theme="light"] .experience-item,
html[data-theme="light"] .process-box,
html[data-theme="light"] .case-meta-row {

    border-color: rgba(0,0,0,.12);
}


/* =====================================================
   THEME TOGGLE
===================================================== */

.theme-toggle {
    appearance: none;
    -webkit-appearance: none;

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

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    flex-shrink: 0;
}


.theme-toggle-track {

    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 68px;
    height: 36px;

    padding: 0 8px;

    border: 1px solid var(--theme-border);

    border-radius: 999px;

    background: var(--theme-surface);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        background-color .35s ease,
        border-color .35s ease;
}


/* ICONS */

.theme-icon {

    position: relative;
    z-index: 2;

    display: flex;

    width: 15px;
    height: 15px;

    align-items: center;
    justify-content: center;

    color: var(--theme-text);

    opacity: .5;

    transition:
        opacity .35s ease,
        color .35s ease;
}


.theme-icon svg {

    display: block;

    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* SLIDING CIRCLE */

.theme-toggle-thumb {

    position: absolute;

    top: 4px;
    left: 4px;

    width: 26px;
    height: 26px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 10px rgba(0,0,0,.2);

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1),
        background-color .35s ease;
}


/* DARK */

html[data-theme="dark"] .theme-toggle-thumb {

    transform: translateX(34px);

    background: #0c26ce;
}


html[data-theme="dark"] .theme-icon-moon {
    opacity: 1;
}


/* LIGHT */

html[data-theme="light"] .theme-toggle-thumb {

    transform: translateX(0);
}


html[data-theme="light"] .theme-icon-sun {

    opacity: 1;

    color: #0c26ce;
}


/* =====================================================
   KEYBOARD ACCESSIBILITY
===================================================== */

.theme-toggle:focus-visible .theme-toggle-track {

    outline: 3px solid rgba(12,38,206,.38);

    outline-offset: 4px;

    border-color: #0c26ce;
}


/* Screen reader only */

.visually-hidden {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 767px) {

    .theme-toggle-track {

        width: 58px;
        height: 32px;

        padding: 0 7px;
    }


    .theme-toggle-thumb {

        width: 22px;
        height: 22px;

        top: 4px;
        left: 4px;
    }


    html[data-theme="dark"] .theme-toggle-thumb {

        transform: translateX(26px);
    }


    .theme-icon {

        width: 13px;
        height: 13px;
    }

}


/* =====================================================
   REDUCED MOTION ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .theme-toggle-thumb,
    .theme-toggle-track,
    body,
    .site-header {

        transition: none !important;
    }

}




/* ===== # Global ===== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font-family: var(--font_inter);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--whiteColor);
    /* width: 100vw; */
    /* overflow-x: hidden; */

    background: var(--darkBg);

    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100vh;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
main.page-main {
    inset: 0px;
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: hidden;
}
.sticky-statement4,
.sticky-statement3,
.sticky-statement {
    /* height: 100%; */
    position: relative;
}

a {
    text-decoration: none;
    color: var(--whiteColor);
}
a:hover {
    color: var(--whiteColor);
}
img {
    max-width: 100%;
}
.mt-30 {
    margin-top: 30px;
}
.custom-row {
    display: flex;
}
.container {
    max-width: 1440px;
    padding-left: 40px;
    padding-right: 40px;
}

.theme-btn {
    font-size: 24px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 3px;
    background: var(--whiteBg);
    color: var(--dark);
    transition: .5s;
    -webkit-transition: .5s;
}
button.theme-btn:hover,
a.theme-btn:hover {
    background: var(--primary);
}
.theme-btn.primary-bg {
    background: var(--primary);
}
button.theme-btn.primary-bg:hover,
a.theme-btn.primary-bg:hover {
    background: var(--whiteBg);
}
a.theme-btn:hover {
    color: var(--dark);
}
.subtitle {
    font-size: 18px;
    line-height: 14px;
    display: inline-flex;
    align-items: center;
    margin: 0;
    gap: 9px;
    text-transform: uppercase;
    font-weight: 600;
}
.subtitle img {
    display: block;
}
.link-with-border {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 20px;
    margin: 0;
}
a.link-with-border:hover {
    color: var(--whiteColor);
}
a.link-with-border > span {
    border-bottom: 1.5px solid var(--whiteBg);
    line-height: 1.1rem;
}
a.link-with-border:hover {
    border-color: var(--whiteColor);
}
.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 109px;
    flex-wrap: wrap;
}
.title span {
    display: block;
}
.section-header .title {
    font-size: 90px;
    line-height: 87px;
    font-weight: 700;
    letter-spacing: -4.3px;
    margin: 0;
    text-transform: uppercase;
}
.section-header .section-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}
.section-header p {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.3px;
    margin: 0;
    font-family: var(--font_inter_tight);
    font-weight: 500;
    width: 599px;
    flex: none;
}
.section-header h5 {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.4px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
}
.section-header h5 .with-border {
    border-bottom: 1px solid var(--whiteBg);
}
.section-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-subtitle .white-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: block;
    background: var(--whiteBg);
}
.section-subtitle .theme-btn {
    font-size: 14px;
    padding: 3px 20px;
    color: #FFFFFF;
}
.section-header-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 70px;
}
.section-header-2 h6 {
    margin: 0;
    font-size: 24px;
    line-height: 28px;
    font-weight: 600;
    text-transform: uppercase;
}
.section-title2 span {
    display: block;
}
.section-title2 {
    font-size: 70px;
    line-height: 80px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -4.3px;
}
.section-header-2 .section-title2 {
    margin-bottom: 5px;
}

/* ===== Reusable Site Preloader ===== */
.site-is-loading {
    overflow: hidden !important;
}

.site-preloader {
    /* Important keeps the loader above templates that restyle direct body children. */
    position: fixed !important;
    z-index: 9999 !important;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--darkBg, #050505);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.site-preloader.is-complete {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-preloader__content {
    display: flex;
    width: min(360px, calc(100vw - 48px));
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.site-preloader__logo {
    display: block;
    width: clamp(150px, 18vw, 210px);
    height: auto;
}

.site-preloader__track {
    position: relative;
    width: 100%;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: #ffffff;
}

.site-preloader__progress {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    background: #0c26ce;
    transform: scaleX(0);
    transform-origin: left center;
    animation: sitePreloaderProgress 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes sitePreloaderProgress {
    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-preloader,
    .site-preloader__progress {
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
    }
}



/* ===== # Magic Cursor ===== */
#magic-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 10000;
    -webkit-transition: opacity 0.2s ease-in-out 0.5s;
    transition: opacity 0.2s ease-in-out 0.5s;
}
#ball {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 3px solid #0008CA;
    border-radius: 100%;
    pointer-events: none;
    opacity: 0;
    box-sizing: border-box;
    /* -webkit-transform: scale(0.5);
    transform: scale(0.5); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* -webkit-transition: 0.2s;
    transition: 0.2s; */
    margin-left: -20px;
    margin-top: -20px;
}
#ball.hovered {
    transition: opacity .3s;
    opacity: 0 !important;
}


/* ===== # Hero ===== */
.hero-sec {
    padding-top: 36px;
}
.hero-sec .hero-sec-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 147px;
}
.hero-sec .hero-sec-top .hero-left {
    display: flex;
    align-items: center;
    gap: 80px;
}
.logo {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    display: inline-flex;
    align-items: flex-start;
    text-transform: uppercase;
}
.logo:hover {
    color: #ffffff;
}
.logo img {
    display: block;
    width: 10px;
    height: 10px;
    margin-top: 3px;
    flex: none;
}
.location-and-time {
    font-size: 16px;
    line-height: 16px;
    display: block;
    font-weight: 600;
}
.hero-sec .hero-sec-top .hero-right {
    display: flex;
    align-items: center;
    gap: 74px;
}
.hero-sec .hero-sec-bottom .hero-sec-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hero-sec .hero-sec-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.hero-title {
    font-size: 150px;
    line-height: 135px;
    margin: 0;
    font-weight: 700;
    letter-spacing: -7.5px;
    text-transform: uppercase;
    position: relative;
}
.hero-title span {
    display: block;
    position: relative;
}
.with-circle-shape {
    position: relative;
}
.circle-primary-shape {
    position: absolute !important;
    background: var(--primary);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    right: -28px;
    bottom: 72px;
    z-index: -1;
}
.hero-title .white-circle-shape {
    position: absolute;
    bottom: 10px;
    margin-left: 15px;
}
.hero-sec .hero-sec-bottom .hero-sec-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 472px;
    flex: none;
    gap: 265px;
}
.hero-sec .hero-sec-bottom .hero-sec-bottom-right .hero-sec-bottom-right-content-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-right: 44px;
}
.hero-sec .hero-sec-bottom .hero-sec-bottom-right .hero-sec-bottom-right-content-top p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}
.work-hero-sec .hero-sec-top {
    margin-bottom: 228px;
}
.work-hero-sec .hero-sec-bottom {
    align-items: flex-start;
}
.work-hero-sec .hero-sec-bottom .hero-sec-bottom-right {
    width: 422px;
}
.work-hero-sec .hero-sec-bottom .hero-sec-bottom-right .hero-sec-bottom-right-content-top {
    padding-right: 0;
    gap: 8px;
}
.work-hero-sec .hero-sec-bottom .hero-sec-bottom-left {
    margin-top: 120px;
}
.work-hero-sec .hero-sec-bottom .hero-sec-bottom-left .hero-title .circle-primary-shape {
    right: 150px;
}
.service-hero-sec .hero-sec-bottom .hero-sec-bottom-left .hero-title .circle-primary-shape {
    right: 6px;
}

.hero-sec-2 {
    padding-bottom: 100px;
}
.hero-sec-2 .hero-title {
    font-size: 84px;
    line-height: 80px;
    letter-spacing: -3px;
    font-weight: 700;
}
.hero-sec-2 .hero-title .circle-primary-shape {
    width: 70px;
    height: 70px;
    right: 233px;
    bottom: 49px;
    right: 40%;
    bottom: 30%;
}
.hero-sec-2 .hero-sec-bottom {
    align-items: center;
    gap: 98px;
}
.work-detail-page .hero-sec-2 .hero-sec-bottom {
}
.hero-sec-2 .hero-sec-bottom .hero-sec-bottom-right {
    width: 601px;
}
.hero-sec-2 .hero-sec-bottom .hero-sec-bottom-right .hero-sec-bottom-right-content-top {
    padding-right: 0;
}
.hero-sec-2 .hero-sec-bottom .hero-sec-bottom-right .hero-sec-bottom-right-content-top p {
    font-size: 24px;
    line-height: 32px;
    font-family: var(--font_inter_tight);
    text-transform: none;
}
.erroe-hero-sec .hero-sec-top {
    margin-bottom: 0;
}

/* # Menu */
.main-menu ul {
    display: flex;
    align-items: center;
    gap: 46px;
}
.main-menu ul li a {
    font-size: 16px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    font-weight: 600;
    text-transform: uppercase;
    transition: .5s;
    -webkit-transition: .5s;
}
.main-menu ul li a:hover {
    color: var(--whiteColor);
}
.splite-text-anim span:nth-child(2) {
    color: var(--whiteColor);
}
.splite-text-anim {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 20px;
    gap: 6px;
    transition: .5s;
    -webkit-transition: .5s;
}
.splite-text-anim span {
    transition: .5s;
    -webkit-transition: .5s;
}
.splite-text-anim:hover span:first-child {
    margin-top: -26px;
}

/* Fixed glass header, shared visually with the project case-study page. */
.site-header {
    position: fixed;
    z-index: 1100;
    inset: 20px 2.4vw auto;
    min-height: 58px;
    padding: 8px 10px 8px 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(8, 8, 8, 0.72);
    color: #ffffff;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
}

.site-header .wordmark {
    justify-self: start;
    white-space: nowrap;
}

.site-header .wordmark img {
    display: block;
    width: clamp(118px, 11vw, 145px);
    height: auto;
    max-height: 38px;
    margin: 0;
}

.site-header nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.site-header nav a {
    color: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    opacity: 0.65;
}

.site-header .header-cta {
    justify-self: end;
    height: 42px;
    padding: 11px 18px;
    border-radius: 12px;
    background: #ffffff;
    color: #000000;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-header .header-cta span,
.site-header .header-cta:hover span {
    color: #000000;
}

@media (max-width: 900px) {
    .site-header {
        inset: 10px 10px auto;
        grid-template-columns: 1fr auto;
        row-gap: 10px;
        padding: 9px 10px 10px 14px;
        border-radius: 15px;
    }

    .site-header nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        gap: 10px 22px;
        flex-wrap: wrap;
    }

    .site-header nav a {
        font-size: 0.68rem;
    }
}

@media (max-width: 520px) {
    .site-header .wordmark img {
        width: 118px;
        max-height: 36px;
    }

    .site-header .header-cta {
        height: 36px;
        padding: 8px 12px;
        font-size: 0.62rem;
    }

    .site-header nav {
        column-gap: 15px;
    }

    .site-header nav a {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }
}

/* # Popup Menu */
.popup-menu-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    gap: 100px;
    z-index: 1024;
    background: var(--darkBg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(400px);
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    -webkit-transition: .5s;
}
.popup-menu-wrap.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.popup-menu-wrap .popup-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 35px 45px 0 45px;
}
.popup-menu-wrap .popup-menu-header .left {
    display: flex;
    align-items: center;
    gap: 80px;
}
.popup-menu-wrap .popup-menu ul {
    display: flex;
    flex-direction: column;
}
.popup-menu-wrap .popup-menu ul li a .count {
    display: block;
    font-size: 18px;
    line-height: 17px;
    font-weight: 600;
    flex: none;
    letter-spacing: normal;
}
.popup-menu-wrap .popup-menu ul li a {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    font-size: 100px;
    line-height: 74px;
    font-weight: 700;
    letter-spacing: -4.5px;
    text-transform: uppercase;
    padding: 36px 36px 36px 40px;
    transition: .5s;
    -webkit-transition: .5s;
}
.popup-menu-wrap .popup-menu ul li.active a,
.popup-menu-wrap .popup-menu ul li a:hover {
    background: var(--whiteBg);
    color: var(--dark);
}
.popup-menu-wrap .popup-menu-footer {
    padding: 0 40px 35px 40px;
}
.popup-menu-wrap .popup-menu-footer .copyright p {
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}
.popup-menu-wrap .popup-menu-footer .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* # Hero Banner */
.hero-banner-sec {
    padding-top: 100px;
}
.full-image-box {
    overflow: hidden;
}
.hero-banner-sec .hero-banner-img-inner {
    overflow: hidden;
    height: 725px;
}
.hero-banner-sec .hero-banner-img {
    overflow: hidden;
    border-radius: 10px;
    transform: scale(1);
}
.hero-banner-sec .hero-banner-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-banner-sec .hero-banner-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 20px;
    flex-wrap: wrap;
}
.hero-banner-sec .hero-banner-content p {
    margin: 0;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    width: 483px;
    flex: none;
}

/* # Service */
.service-sec {
    padding-top: 160px;
    padding-bottom: 160px;
}
.blog-sec {
    padding-bottom: 150px;
}
.work-lists {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 60px;
    column-gap: 50px;
}
.work-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}
.work-box .hover_mouse {
    position: absolute;
    z-index: 9;
    margin-top: 30px;
    transition: .1s;
    -webkit-transition: .1s;
}
.work-box .hover_mouse a {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: var(--dark);
    text-transform: uppercase;
    display: block;
    padding: 5px 16px;
    transform: scale(0);
    border-radius: 4px;
    background: var(--whiteBg);
    transition: .5s;
    -webkit-transition: .5s;
}
.work-box .hover_mouse.active a {
    transform: scale(1);
}
.work-box .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.work-box .work-img {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
}
.work-box .work-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;

    /* Grey and dull by default */
filter: grayscale(100%) brightness(.45) contrast(1.5);
opacity: 1;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        opacity 0.5s ease;
    -webkit-transition:
        transform 0.5s ease,
        -webkit-filter 0.5s ease,
        opacity 0.5s ease;
}



.work-box:hover .work-img img {
    transform: scale(1.05);

    /* Restore original colors on hover */
    filter: grayscale(0%) brightness(1) contrast(1);
    opacity: 1;
}
.work-box .work-bottom-content .work-number,
.work-box .work-bottom-content .work-cat,
.work-box .work-bottom-content .work-price {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    display: block;
    text-transform: uppercase;
}
.work-box .work-bottom-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 30px;
    flex-wrap: wrap;
}
/* Service 2 */
.service-sec-2 {
    padding-top: 140px;
    padding-bottom: 150px;
}
.service-page .service-sec-2 {
    padding-bottom: 0;
}
.service-sec-2 .section-header {
    align-items: flex-end;
}
.service-sec-2 .section-header .left .title {
    margin-bottom: 10px;
}
.service-sec-2 .section-header .left p {
    max-width: 893px;
    width: 100%;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.service-faq-wrap {
    max-width: 1150px;
    width: 100%;
    margin-left: auto;
    margin-bottom: 137px;
}
.service-faq-item {
    background: none;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
.service-faq-item .accordion-header button {
    background: none;
    padding: 51px 64px 51px 0;
    color: var(--whiteColor);
    font-size: 30px;
    line-height: 28px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 20px;
}
.service-faq-item .accordion-header button:focus {
    outline: none;
    box-shadow: none;
}
.service-faq-item .accordion-header button::after {
    display: none;
}
.service-faq-item .accordion-header button img {
    display: block;
}
.service-faq-item .accordion-header button .accordion-plus-icon {
    margin-left: auto;
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    flex: none;
}
.service-faq-item .accordion-header button .accordion-plus-icon span {
    position: absolute;
    background: var(--whiteBg);
    width: 100%;
    height: 3px;
    transform: translateY(-50%);
    left: 0;
    top: 11px;
    transition: .5s;
    -webkit-transition: .5s;
}
.service-faq-item .accordion-header button .accordion-plus-icon span:nth-child(2) {
    top: 10px;
    transform: rotate(0deg);
    transform-origin: center;
}
.service-faq-item .accordion-header button.collapsed .accordion-plus-icon span:nth-child(2) {
    transform: rotate(90deg);
}
.service-faq-item .accordion-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 102px 51px 48px;
    gap: 218px;
}
.service-faq-item .accordion-body .accordion-content {
    margin-top: 22px;
}
.service-faq-item .accordion-body .accordion-content p {
    font-size: 22px;
    line-height: 29px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
    letter-spacing: 0.2px;
    margin-bottom: 18px;
}
.service-faq-item .accordion-body .accordion-content .cast {
    margin-bottom: 28px;
}
.accordion-key-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 42px;
}
.accordion-key-features h5 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 30px;
    margin: 0;
}
.accordion-key-features ul li {
    font-size: 22px;
    line-height: 29px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
    letter-spacing: 0.2px;
}
.service-faq-item .accordion-body .accordion-content-right {
    display: flex;
    flex-direction: column;
    gap: 23px;
    align-items: flex-end;
    width: 280px;
    flex: none;
}
.service-faq-item .accordion-body .accordion-content-right .number {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}
.service-faq-item .accordion-body .accordion-content-right .accordion-content-img {
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    height: 314px;
    width: 100%;
}
.service-faq-item .accordion-body .accordion-content-right .accordion-content-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-list-wrap .service-no-accordion-faq-item:last-child {
    padding-bottom: 68px;
    border-bottom: none;
}
.service-list-wrap .service-no-accordion-faq-item:first-child {
    padding-top: 0;
}
.service-no-accordion-faq-item {
    padding-bottom: 52px;
    padding-top: 77px;
    border-bottom-color: #A3A3A380;
}
.service-no-accordion-faq-item .accordion-content {
    max-width: 502px;
    width: 100%;
}
.service-no-accordion-faq-item .accordion-header {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 30px;
    line-height: 28px;
    margin: 0 0 50px;
    font-weight: 600;
    text-transform: uppercase;
}
.service-no-accordion-faq-item .accordion-header .number {
    display: block;
    margin-left: auto;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    flex: none;
}
.service-no-accordion-faq-item .accordion-content-bottom .theme-btn {
    margin-bottom: 5px;
}
.service-no-accordion-faq-item .accordion-content-bottom {
    display: flex;
    align-items: flex-end;
    gap: 75px;
}
.service-no-accordion-faq-item .accordion-body {
    padding-right: 0;
    padding-bottom: 0;
}
.service-ratings {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px;
}
.service-ratings ul {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 18px;
    color: #FFD700;
    justify-content: center;
}
.service-ratings span {
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
}


/* # Work Details */
.work-service-detail-sec {
    padding: 80px 0;
}
.work-service-detail-sec .custom-row {
    justify-content: space-between;
}
.work-service-detail-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.work-service-detail-box h5 {
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    margin: 0;
}
.work-service-detail-box span {
    font-size: 18px;
    line-height: 28px;
    display: block;
    font-family: var(--font_inter_tight);
    text-transform: uppercase;
}

/* # Task List */
.task-sec {
    padding: 100px 0;
}
.task-sec .container {
    padding-left: 94px;
    padding-right: 94px;
}
.task-sec .task-lists {
    display: flex;
    flex-direction: column;
    gap: 90px;
}
.task-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.task-box h5 .circle-shape {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    background: var(--primary);
    flex: none;
}
.task-box .task-content p {
    font-size: 22px;
    line-height: 29px;
    letter-spacing: 0.2px;
    font-weight: 500;
    margin: 0;
}
.task-box .task-content {
    width: 644px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 39px;
}
.task-box h5 {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 35px;
    line-height: 40px;
    letter-spacing: -2px;
    font-weight: 600;
}

/* # Next Project */
.next-project-sec {
    padding-top: 80px;
    padding-bottom: 150px;
}
.next-project-sec .custom-row {
    justify-content: space-between;
}
.next-project-sec .section-header .title {
    font-size: 50px;
    line-height: 50px;
    letter-spacing: -3.3px;
    margin: 0 0 15px;
}
.next-project-sec .work-box {
    max-width: 650px;
    width: 100%;
    flex: none;
}
.next-project-sec .section-header p {
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: -0.4px;
}


/* Service Funfacts */
.service-funfacts {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.service-funfact-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}
.service-funfact-box .counter {
    font-size: 35px;
    font-weight: 600;
    margin: 0;
    line-height: 28px;
}
.service-funfact-box p {
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    margin: 0;
    font-weight: 600;
}


/* # About */
.about-sec {
    padding-bottom: 200px;
}
.about-sec .container {
    padding-left: 74px;
    padding-right: 74px;
}
.about-sec .section-header {
    align-items: flex-end;
}
.about-sec .section-header .title {
    margin-bottom: 20px;
}
.about-sec .section-header p {
    text-transform: uppercase;
    width: 100%;
    font-size: 20px;
    letter-spacing: 0.4px;
}
.about-sec .section-header p .border-bottom {
    border-bottom: 1.5px solid var(--whiteBg);
}
.about-sec .about-left-img {
    flex: none;
    width: 538px;
    height: 650px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.about-sec .custom-row {
    align-items: center;
    gap: 140px;
}
.about-sec .about-left-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-sec .about-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
}
.about-sec .about-bottom .est-date {
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    line-height: 20px;
}
.about-sec .about-content .about-title {
    font-size: 20px;
    line-height: 27px;
    display: block;
    font-weight: 600;
    margin-bottom: 15px;
}
.about-sec .about-content p {
    font-size: 22px;
    line-height: 29px;
    letter-spacing: 0.2px;
    margin: 0;
    font-weight: 500;
}
.about-awards-wrap {
    padding-top: 30px;
    padding-bottom: 40px;
}
.about-awards-wrap h6 {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -3%;
    font-weight: 600;
    margin: 0 0 24px;
}
.about-awards-wrap h6 span {
    border-bottom: 1.5px solid var(--whiteBg);
}
.awards-list {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.award-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    letter-spacing: -3%;
    line-height: 20px;
    font-weight: 700;
    padding: 19px 8px;
    border-bottom: 1px solid var(--whiteBg);
    transition: .5s;
    -webkit-transition: .5s;
}
.award-box .award-year {
    display: flex;
    align-items: center;
    gap: 119px;
}
.award-box .award-year img {
    display: block;
    transition: .5s;
    -webkit-transition: .5s;
}
.award-box .award-year span {
    display: block;
    min-width: 73px;
    text-align: right;
}
.award-box.active,
.award-box:hover {
    background: var(--whiteBg);
    color: var(--dark);
}
.award-box.active .award-year img,
.award-box:hover .award-year img {
    filter: invert(1);
}

/* # Client Logos */
.client-sec .client-logo-slide-wrap {
    overflow: hidden;
}
.client-logo-slide {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 50px;
    transform: translateX(0);
    animation: clientLogoSlide 25s infinite linear;
}
.client-logo-slide img {
    display: block;
}

/* =========================================
   PROCESS — 3 COLUMNS
========================================= */

.process-sec {
    padding-top: 160px;
    padding-bottom: 140px;
}

/* Hide/remove old image column influence */
.process-sec .process-img {
    display: none !important;
}

/* Make process list a 3-column grid */
.process-lists {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: 100%;
}

/* Individual process item */
.process-box {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 420px;

    padding: 28px 26px 30px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.025);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

/* Remove old separator logic */
.process-lists .process-box:first-child {
    padding-top: 28px;
}

.process-lists .process-box:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Hover */
.process-box:hover {
    transform: translateY(-6px);
    border-color: #0c26ce;
    background: rgba(12, 38, 206, 0.06);
}

/* Number */
.process-box .number {
    display: block;

    margin: 0 0 32px;

    color: rgba(255, 255, 255, 0.38);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Content */
.process-box .process-box-content {
    position: relative;
    padding-top: 0;
}

/* Icon */
.process-box .process-box-content img {
    position: static;

    display: block;

    width: 54px;
    height: 54px;

    margin-bottom: 30px;
    padding: 11px;

    object-fit: contain;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.04);
}

/* Heading */
.process-box .process-box-content h4 {
    margin: 0 0 20px;

    color: #ffffff;

    font-family: var(--font_inter_tight);
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1;
    font-weight: 800;

    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: normal;
}

/* Description */
.process-box .process-box-content p {
    margin: 0 0 26px;

    color: rgba(255, 255, 255, 0.65);

    font-family: var(--font_inter_tight);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;

    letter-spacing: 0;
}

/* Key points */
.process-box .process-box-content ul {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.process-box .process-box-content ul li {
    position: relative;

    margin: 0;
    padding-left: 15px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;
    line-height: 1.45;
}

/* Blue bullets */
.process-box .process-box-content ul li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.65em;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: #0c26ce;

    transform: translateY(-50%);
}



@media screen and (max-width: 991px) {

    .process-lists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}


@media screen and (max-width: 767px) {

    .process-sec {
        padding-top: 90px;
        padding-bottom: 90px;
    }

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

    .process-box {
        min-height: auto;
        padding: 24px 20px 26px;
    }

    .process-box .process-box-content h4 {
        font-size: 26px;
    }
}



/* # Banner */
.banner-sec .banner-img {
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    transform: scale(1.1);
}
.banner-sec .banner-img-inner {
    overflow: hidden;
    height: 872px;
}
.banner-sec .banner-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.work-detail-page .banner-sec .banner-img {
    /* height: 800px; */
}

/* # Motivation */
.motivation-sec {
    padding-top: 140px;
}
.motivation-sec .container {
    padding-left: 70px;
    padding-right: 70px;
}
.motivation-sec .motivation-left-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 99px;
}
.motivation-sec .custom-row {
    justify-content: space-between;
    gap: 218px;
}
.motivation-sec .motivation-left-content {
    flex: none;
    width: 418px;
}
.motivation-sec .motivation-left-content .section-header-2 {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.motivation-sec .motivation-left-content .section-header-2 .section-title2 {
    margin: 0;
}
.motivation-sec .motivation-left-content .section-header-2 h6 {
    font-size: 20px;
    margin: 0;
}
.motivation-sec .motivation-left-content .motivation-bottom-text {
    display: block;
    text-align: right;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}
.motivation-sec .motivation-left-content .section-header-2 h6 .with-border {
    border-bottom: 1px solid var(--whiteBg);
}
.motivation-sec .motivation-right-content .motivation-right-content-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 80px;
}
.motivation-sec .motivation-right-content .signature {
    display: block;
    margin-left: auto;
    margin-right: 41px;
    max-width: 312px;
    margin-bottom: 57px;
}
.motivation-sec .motivation-right-content .motivation-right-content-box p {
    margin: 0;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.1px;
    font-weight: 500;
}
.motivation-quote {
    padding-right: 30px;
    padding-bottom: 40px;
}
.motivation-quote .motivation-name,
.motivation-quote p {
    margin: 0;
    font-size: 22px;
    line-height: 29px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    font-family: var(--font_inter_tight);
}
.motivation-quote .motivation-name {
    display: block;
    text-align: center;
}


/* # Experience */
.experience-sec {
    padding-top: 100px;
    padding-bottom: 140px;
}
.experience-sec .section-header {
    align-items: flex-end;
    z-index: 9;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 69px;
    background: var(--darkBg);
}
.experience-sec .section-header .title {
    font-size: 70px;
    line-height: 80px;
    margin-bottom: 10px;
}
.experience-sec .section-header p {
    text-transform: uppercase;
    font-size: 20px;
    line-height: 24px;
}
.experience-lists {
    max-width: 839px;
    width: 100%;
    margin-left: auto;
}
.experience-lists .experience-box:last-child {
    margin-bottom: 0;
}
.experience-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 117px;
    margin-bottom: 65px;
}
.experience-box .left {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}
.experience-box .left img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex: none;
}
.experience-box .experience-date {
    flex: none;
    display: block;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
}
.experience-box .experience-content {
    flex: 1;
}
.experience-box .experience-content h5 {
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
    margin: 0 0 10px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.experience-box .experience-content p {
    font-size: 20px;
    line-height: 28px;
    margin: 0;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
    max-width: 448px;
}
.experience-box .experience-content .designation {
    display: block;
    font-size: 22px;
    line-height: 20px;
    letter-spacing: -0.2px;
    margin: 0 0 20px;
    font-weight: 600;
    text-transform: uppercase;
}
/* # Favourite Stack */
.favourite-stack-sec {
    padding-top: 0;
}
.favourite-stack-sec .section-header .left {
    max-width: 1320px;
    width: 100%;
    flex: none
		background: transparent;
}


/* =========================
   CLIENT TESTIMONIALS
========================= */

/* =========================================
   TESTIMONIALS — INFINITE HORIZONTAL CAROUSEL
========================================= */

.testimonials-sec {
    padding: 100px 0;
    overflow: hidden;
}


/* -----------------------------------------
   VIEWPORT
----------------------------------------- */

.testimonials-viewport {
    position: relative;

    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    cursor: grab;

    user-select: none;
    -webkit-user-select: none;

    touch-action: pan-y;
}

.testimonials-viewport:active {
    cursor: grabbing;
}


/* -----------------------------------------
   MOVING TRACK
----------------------------------------- */

.testimonials-list {
    display: flex !important;
    flex-wrap: nowrap !important;

    width: max-content !important;

    gap: 22px;

    padding: 20px 0 30px;

    will-change: transform;

    transform: translate3d(0, 0, 0);
}


/* -----------------------------------------
   TESTIMONIAL CARD
----------------------------------------- */

.testimonial-card {
    display: flex;

    flex: 0 0 clamp(340px, 34vw, 520px);

    min-height: 330px;

    flex-direction: column;
    justify-content: space-between;

    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.045);

    transform-origin: center center;

    will-change:
        transform,
        filter,
        opacity;

    transition:
        border-color 0.35s ease,
        background-color 0.35s ease,
        filter 0.18s linear,
        opacity 0.18s linear,
        transform 0.18s linear;
}


/* Center card gets blue detail */
.testimonial-card.is-center {
    border-color: rgba(12, 38, 206, 0.9);

    background:
        rgba(12, 38, 206, 0.08);
}


/* Disable old vertical hover movement */
.testimonial-card:hover {
    transform: none;
}


/* -----------------------------------------
   OPTIONAL EDGE DARKENING
----------------------------------------- */

.testimonials-viewport::before,
.testimonials-viewport::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 12vw;

    z-index: 20;

    pointer-events: none;
}

.testimonials-viewport::before {
    left: 0;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,0.95),
            rgba(0,0,0,0)
        );
}

.testimonials-viewport::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            rgba(0,0,0,0.95),
            rgba(0,0,0,0)
        );
}


@media screen and (max-width: 767px) {

    .testimonials-sec {
        padding: 70px 0;
    }

    .testimonials-list {
        gap: 14px;
        padding: 15px 0 25px;
    }

    .testimonial-card {
        flex-basis: 82vw;

        min-height: 300px;

        padding: 22px;
    }

    .testimonials-viewport::before,
    .testimonials-viewport::after {
        width: 7vw;
    }

}


/* # Pricing */
.pricing-sec {
    padding-top: 170px;
}
.pricing-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px;
}
.pricing-box {
    padding: 10px 27px 34px 10px;
}
.pricing-box .pricing-package-type .section-subtitle .theme-btn {
    letter-spacing: 3px;
    font-size: 14px;
    line-height: 20px;
    padding: 3px 20px;
}
.pricing-box .pricing-package-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 29px;
}
.pricing-box .price {
    font-size: 55px;
    line-height: 50px;
    margin: 0 0 34px;
    font-weight: 600;
    display: flex;
    align-items: flex-end;
}
.pricing-box .price span {
    display: block;
    font-size: 23px;
    line-height: 28px;
    text-transform: uppercase;
}
.pricing-box .pricing-body {
    padding-left: 17px;
}
.pricing-box .pricing-body p {
    margin: 0 0 36px;
    font-size: 19px;
    line-height: 28px;
    letter-spacing: 0.2px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
}
.pricing-box .pricing-body .pricing-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
.pricing-box .pricing-body .pricing-meta span {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-family: var(--font_inter_tight);
    text-transform: uppercase;
    gap: 10px;
}
.pricing-box .pricing-body .pricing-meta span img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: none;
}
.pricing-box .pricing-body .theme-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: 20px;
    padding: 13px 15px;
    font-family: var(--font_inter_tight);
    margin-bottom: 10px;
}
.pricing-box .pricing-body .theme-btn img {
    display: block;
    width: 14px;
    filter: invert(1);
}
.pricing-box .pricing-body .discuse {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 46px;
}
.pricing-box .pricing-body .discuse a {
    border-bottom: 1px solid var(--whiteBg);
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: 600;
}
.pricing-box .pricing-body .discuse a:hover {
    color: var(--whiteColor);
}
.pricing-box .pricing-body ul {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding-left: 4px;
}
.pricing-box .pricing-body ul li {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.2px;
    gap: 15px;
}
.pricing-box .pricing-body ul li img {
    width: 14px;
    height: 14px;
    display: block;
    flex: none;
}


/* # Blog Details */
.blog-detail-page .hero-sec-2 .hero-sec-bottom .hero-sec-bottom-right {
    width: 524px;
}
.blog-detail-page .hero-sec-2 .hero-title .circle-primary-shape {
    /* right: 26px;
    bottom: 31px; */
    right: 4%;
    bottom: 13%;
}
.blog-detail-sec {
    padding-bottom: 150px;
}
.blog-detail-sec .custom-row {
    gap: 100px;
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box > img {
    margin-bottom: 18px;
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box p {
    margin: 0;
    font-size: 22px;
    line-height: 29px;
    letter-spacing: 0.2px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box .blog-meta {
    display: flex;
    align-items: center;
    gap: 59px;
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box .blog-meta img {
    width: 16px;
    height: 16px;
    display: block;
    object-fit: contain;
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box .blog-meta > * {
    display: flex;
    align-items: center;
    gap: 12px;
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box h3 {
    margin: 0;
    font-size: 30px;
    line-height: 30px;
    letter-spacing: -1px;
    font-weight: 600;
    text-transform: uppercase;
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box ul {
    margin-bottom: 7px;
}
.blog-detail-sec .blog-detail-content-wrap .blog-content-box ul li {
    font-size: 22px;
    line-height: 36px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
    letter-spacing: 0.1px;
}
.blog-detail-sec .blog-detail-content-wrap img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 460px;
}
.blog-detail-sec .blog-detail-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 70px;
    margin-bottom: 52px;
}

/* # Comment */
.comment-lists-wrap {
    margin-bottom: 52px;
}
.comment-form-wrap .title-with-circle,
.comment-lists-wrap .title-with-circle {
    margin-bottom: 28px;
    font-size: 28px;
    line-height: 28px;
    letter-spacing: -0.1px;
}
.comment-lists {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.comment-box {
    display: flex;
    align-items: center;
    padding: 37px 26px;
    border-radius: 4px;
    gap: 30px;
    position: relative;
    background: rgba(255,255,255,0.1);
}
.comment-box .comment-body .name {
    display: block;
    font-size: 17px;
    line-height: 25px;
    letter-spacing: 0.2px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.comment-box .comment-body .date {
    display: block;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.2px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
}
.comment-box .comment-body .reply-btn img {
    display: block;
    width: 16px;
}
.comment-box .comment-body .reply-btn {
    position: absolute;
    right: 26px;
    top: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 5px 8px;
}
.comment-box .comment-body p {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.2px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
    margin: 10px 0 0 0;
}
.comment-box > img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* # Comment Form */
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.comment-form .form-col-2 {
    display: flex;
    gap: 28px;
}
.comment-form .input-group textarea,
.comment-form .input-group input {
    width: 100%;
    border: none;
    background: var(--whiteBg);
    color: var(--dark);
    border-radius: 4px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    padding: 24px 20px;
}
.comment-form .input-group textarea:focus,
.comment-form .input-group input:focus {
    outline: none;
    box-shadow: none;
}
.comment-form .input-group textarea {
    height: 176px;
}
.comment-form button {
    border: none;
    padding: 12px 15px;
    letter-spacing: 3px;
    font-size: 14px;
    line-height: 20px;
}

.blog-sidebar {
    width: 492px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.sidebar-widget {
    background: rgba(255,255,255,0.1);
    gap: 40px;
    border-radius: 4px;
    padding: 40px;
}
.sidebar-widget-search form {
    position: relative;
}
.sidebar-widget-search form input::placeholder {
    color: #00000099;
}
.sidebar-widget-search form input {
    width: 100%;
    background: var(--whiteBg);
    border-radius: 4px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    border: none;
    padding: 17px 20px;
}
.sidebar-widget-search form input:focus {
    outline: none;
    box-shadow: none;
}
.sidebar-widget-search form button {
    position: absolute;
    right: 20px;
    top: 8px;
    border: none;
    background: var(--primary);
    color: var(--dark);
    width: 42px;
    height: calc(100% - 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
    border-radius: 4px;
    cursor: pointer;
    font-size: 22px;
}
.sidebar-widget {
    display: flex;
    flex-direction: column;
    gap: 33px;
}
.title-with-circle,
.sidebar-widget h4 {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    gap: 12px;
    font-size: 22px;
    line-height: 27px;
    font-weight: 600;
    margin: 0;
}
.title-with-circle .circle-shape,
.sidebar-widget h4 .circle-shape {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--primary);
    flex: none;
}
.sidebar-widget-recent-comments ul li:first-child,
.sidebar-widget-categories ul li:first-child,
.sidebar-widget-recent-post ul li:first-child {
    padding-top: 0;
}
.sidebar-widget-categories ul li:last-child,
.sidebar-widget-recent-post ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.sidebar-widget-recent-comments ul li,
.sidebar-widget-categories ul li,
.sidebar-widget-recent-post ul li {
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 24px;
    padding-top: 24px;
}
.sidebar-widget-recent-comments ul li a,
.sidebar-widget-categories ul li a,
.sidebar-widget-recent-post ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    line-height: 29px;
    letter-spacing: 0.2px;
    transition: .5s;
    -webkit-transition: .5s;
}
.sidebar-widget-recent-comments ul li a:hover,
.sidebar-widget-categories ul li a:hover,
.sidebar-widget-recent-post ul li a:hover {
    color: var(--whiteColor);
    color: var(--primary);
}
.sidebar-widget-categories ul li {
    padding-bottom: 12px;
    padding-top: 20px;
}
.sidebar-widget-categories ul li a:hover {
    padding-left: 10px;
}
.sidebar-widget-recent-comments ul li {
    padding-bottom: 15px;
    padding-top: 28px;
}
.sidebar-widget-recent-comments ul li a {
    flex-direction: column;
    align-items: flex-start;
}
.sidebar-widget-tags ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 26px;
}
.sidebar-widget-tags ul li a {
    display: block;
    background: var(--whiteBg);
    color: var(--dark);
    font-size: 18px;
    line-height: 27px;
    font-weight: 500;
    padding: 6px 24px;
    border-radius: 4px;
    transition: .5s;
    -webkit-transition: .5s;
}
.sidebar-widget-tags ul li a:hover {
    background: var(--primary);
}


/* # Faq */
.faq-sec {
    padding-top: 140px;
    padding-bottom: 140px;
}
.faq-sec .section-header {
    align-items: flex-end;
    padding-bottom: 135px;
}
.faq-list-wrap {
    max-width: 1002px;
    width: 100%;
    margin-left: auto;
}
.faq-sec .section-header .title {
    font-size: 70px;
    line-height: 70px;
    margin-bottom: 15px;
}
.faq-sec .section-header .left p {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.4px;
}
.faq-item .accordion-header button{
    padding: 38px 35px 38px 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}
.faq-item .accordion-body {
    padding: 0 198px 26px 0;
}
.faq-item .accordion-body .accordion-content {
    margin-top: 0;
}
.faq-item .accordion-body .accordion-content p {
    margin-bottom: 0;
}

/* # CTA */
.cta-sec .custom-row {
    gap: 50px;
    align-items: center;
    justify-content: space-between;
}
.cta-sec .cta-content {
    text-align: center;
}
.cta-sec .cta-content .section-header-2 {
    margin-bottom: 30px;
}
.cta-sec .cta-content .section-header-2 .section-title2 {
    font-size: 110px;
    line-height: 100px;
    font-weight: 700;
    letter-spacing: -4.7px;
    margin-bottom: 15px;
}
.cta-sec .cta-content .section-header-2 h6 {
    font-size: 20px;
    margin: 0;
    line-height: 28px;
}
.cta-sec .social-links-text {
    margin-top: 80px;
}
.social-links-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}
.social-links-text li a {
    display: flex;
    align-items: center;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 20px;
    font-weight: 600;
    position: relative;
    transition: .5s;
    -webkit-transition: .5s;
}
.social-links-text li a img {
    display: block;
    width: 11px;
}
.social-links-text li a:hover {
    color: var(--whiteColor);
}
.social-links-text li a:hover::before {
    background: var(--whiteColor);
}
.social-links-text li a > span::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 15px);
    height: 1px;
    background: var(--whiteBg);
}
.social-links-text li a span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cta-sec .cta-img {
    width: 373px;
    height: 491px;
    flex: none;
    border-radius: 4px;
}
/* # CTA 2 */
.cta-sec-2 .custom-row {
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.4);
    padding-top: 70px;
}
.cta-widget {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.cta-widget h3 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}
.cta-link-widget ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.cta-phone-widget ul,
.cta-location-widget ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cta-phone-widget ul li,
.cta-location-widget ul li {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 1px;
    font-weight: 500;
    font-family: var(--font_inter_tight);
}
.cta-phone-widget ul li {
    display: flex;
    align-items: center;
    gap: 20px;
}
.cta-phone-widget ul li a:hover {
    color: var(--whiteColor);
}
.cta-phone-widget ul li span {
    min-width: 39px;

}


/* # Contact */
.contact-page .service-hero-sec .hero-sec-bottom .hero-sec-bottom-left .hero-title .circle-primary-shape {
    right: 62px;
    bottom: 79px;
}
.contact-sec {
    padding-top: 150px;
    padding-bottom: 95px;
}
.contact-sec .container {
    padding-left: 120px;
    padding-right: 120px;
}
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.contact-form .form-col-2 {
    display: flex;
    align-items: flex-start;
    gap: 70px;
    
}
.contact-form .input-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.contact-form .input-group label .circle-shape {
    display: block;
}
.contact-form .input-group label {
    display: flex;
    width: 100%;
    font-size: 22px;
    line-height: 27px;
    font-family: var(--font_inter_tight);
}
.contact-form .input-group select::placeholder,
.contact-form .input-group input::placeholder,
.contact-form .input-group textarea::placeholder {
    color: rgba(255,255,255,0.7);
}
.contact-form .input-group select,
.contact-form .input-group input,
.contact-form .input-group textarea {
    width: 100%;
    border: none;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.1);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    padding: 26px 20px;
    margin: 0 !important;
    color: var(--whiteColor);
}
.contact-form .input-group select:focus,
.contact-form .input-group input:focus,
.contact-form .input-group textarea:focus {
    outline: none;
    box-shadow: none;
}
.contact-form .input-group textarea {
    height: 320px;
}
.contact-form .input-group button {
    border: none;
    font-size: 25px;
    letter-spacing: 1px;
    line-height: 20px;
    font-family: var(--font_inter_tight);
    padding: 23px 20px;
}
.contact-form .input-group select {
    appearance: none;
	background-color: #1E1E1E;
    background-image: url(../imgs/select-icon.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 30px) 34px;
	
	
}

.contact-form .input-group select:invalid {
    color: rgba(255, 255, 255, 0.7);
}

.contact-form .input-group select:valid {
    color: #ffffff;
}

/* # 404 */
.error-sec {
    padding-top: 257px;
    padding-bottom: 200px;
}
.error-sec .error-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-width: 458px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}
.error-sec .error-content h1 {
    font-size: 84px;
    line-height: 80px;
    letter-spacing: -3px;
    margin: 0 0 12px;
    font-weight: 700;
}
.error-sec .error-content .theme-btn {
    font-size: 16px;
    line-height: 20px;
    padding: 8px 20px;
}
.error-sec .error-content p {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 0.3px;
    font-weight: 500;
    margin-bottom: 30px;
}


/* # Footer */
.footer-sec {
    padding-top: 160px;
}
.error-footer-sec {
    padding-top: 0;
}
.footer-sec .container {
    padding-left: 50px;
    padding-right: 50px;
}
.footer-sec .big-text {
    text-align: center;
    padding-bottom: 55px;
}
.footer-sec .big-text .circle-primary-shape {
    right: -10px;
    bottom: -40px;
    width: 120px;
    height: 120px;
}
.footer-sec .big-text .section-title2 {
    font-size: 275px;
    line-height: 206px;
    letter-spacing: -2.3px;
}
.footer-sec .copyright-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.4);
    padding-top: 35px;
    padding-bottom: 35px;
}
.footer-sec .copyright-wrap p {
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-sec .copyright-wrap p img {
    display: block;
}



@keyframes clientLogoSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1473px);
    }
}
@keyframes testimonialSlider1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-3462px);
    }
}
@keyframes testimonialSlider2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(3462px);
    }
}


/* Blue cursor halo behind the entire website */
#mouse-halo {
    position: fixed;
    left: 0;
    top: 0;

    width: 1000px;
    height: 1000px;
    border-radius: 80%;

    background: radial-gradient(
        circle,
        rgba(12, 38, 206, 0.32) 0%,
        rgba(12, 38, 206, 0.18) 28%,
        rgba(12, 38, 206, 0.08) 52%,
        rgba(12, 38, 206, 0) 72%
    );

    filter: blur(100px);
    transform: translate(-50%, -50%);

    pointer-events: none;
    z-index: 0;
    opacity: 0;

    transition: opacity 0.4s ease;
    will-change: transform;
}

/* Keep all visible website content above the halo */
body > *:not(#mouse-halo) {
    position: relative;
    z-index: 1;
}

/*
.video-title-wrap {
    position: relative;
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
    line-height: 0;
}

.video-title-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.video-title-foreign {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

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

    
    transform: scale(1.015);
    transform-origin: center;
}

.video-mask-text {
    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

.video-mask-text-top {
    font-size: 150px;
    letter-spacing: -5px;
}

.video-mask-text-bottom {
    font-size: 175px;
    letter-spacing: -6px;
}
-->


/* Overall website scale */
@media screen and (max-width: 991px) {
    body {
        zoom: 1 !important;
        width: 100% !important;
    }

    .site-scale {
        width: 100% !important;
        transform: none !important;
    }
}

/* Scroll smoothness*/
html {
    scroll-behavior: smooth;
}

.start-project-scroll {
    appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    cursor: pointer;
}


/* ===================================
   COMPACT SERVICE CARDS
=================================== */

.service-cards-sec {
    padding: 80px 0;
    background: transparent;
}

.service-cards-header {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: end;
    gap: 36px;
    margin-bottom: 42px;
}

.service-cards-label {
    padding-bottom: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.service-cards-header h2 {
    max-width: 950px;
    margin: 0;
    color: #ffffff;
    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: clamp(42px, 5.6vw, 82px);
    line-height: 0.92;
    font-weight: 800;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.service-card {
    position: relative;
    display: flex;
	height: auto
    min-height: 0px;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: auto -80px -100px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(12, 38, 206, 0.25),
        rgba(12, 38, 206, 0)
    );

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(12, 38, 206, 0.9);
    background: rgba(12, 38, 206, 0.09);
}

.service-card:hover::before {
    opacity: 1;
}

.service-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.service-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;

    transition:
        border-color 0.35s ease,
        background-color 0.35s ease,
        color 0.35s ease;
}

.service-icon svg {
    width: 29px;
    height: 29px;
    overflow: visible;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-card:hover .service-icon {
    border-color: #0c26ce;
    background: #0c26ce;
    color: #ffffff;
}

.service-number {
    color: rgba(255, 255, 255, 0.38);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.service-card-content {
    position: relative;
    z-index: 1;
    margin-top: 58px;
}

.service-card h3 {
    min-height: 72px;
    margin: 0 0 18px;
    color: #ffffff;

    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: 25px;
    line-height: 1.05;
    font-weight: 750;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.service-card-content > p {
    min-height: 86px;
    margin: 0 0 26px;

    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.55;
}

.service-features-label {
    display: block;
    margin-bottom: 13px;

    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.service-features {
    display: flex;
    flex-direction: column;
    gap: 9px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.service-features li {
    position: relative;
    padding-left: 15px;

    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    line-height: 1.4;
}

.service-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: #0c26ce;
    transform: translateY(-50%);
}

/* Large tablet */
@media (max-width: 1199px) {
    .service-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card {
        min-height: 430px;
    }

    .service-card h3,
    .service-card-content > p {
        min-height: auto;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .service-cards-header {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 16px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .service-cards-sec {
        padding: 75px 0;
    }

    .service-cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .service-card {
        min-height: auto;
        padding: 22px;
    }

    .service-card-content {
        margin-top: 48px;
    }

    .service-card h3 {
        font-size: 24px;
    }
}





/* =========================
   SMALL FUN FACT CARDS
========================= */

.service-funfacts {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.service-funfact-box {
    min-height: 145px;
    padding: 24px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

.service-funfact-box:hover {
    transform: translateY(-5px);
    border-color: rgba(12, 38, 206, 0.9);
    background: rgba(12, 38, 206, 0.1);
}

.service-funfact-box h4 {
    margin: 0 0 12px;

    color: #ffffff;
    font-size: clamp(36px, 3vw, 52px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.service-card-content > p {
    width: 100%;
    max-width: 100%;
    min-height: 86px;
    margin: 0 0 26px;

    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.55;

    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Tablet */
@media (max-width: 767px) {
    .service-funfacts {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 12px;
    }

    .service-funfact-box {
        min-height: 125px;
    }
}



/* Fix service-card text wrapping */

.service-card,
.service-card-content {
    min-width: 0;
}

.service-card-content {
    width: 100%;
    max-width: 100%;
}

.service-card-content > p {
    width: 100%;
    max-width: 100%;
    min-height: 86px;
    margin: 0 0 26px;

    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.55;

    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}
}

.service-card h3,
.service-features li {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}

.favourite-stack-content,
.favorite-stack-content,
.favourite-stack-title,
.favorite-stack-title {
    background: transparent !important;
}


/* ===================================
   FAVOURITE STACK
=================================== */

.favourite-stack-sec {
    padding-top: 100px;
    padding-bottom: 100px;
    background: transparent;
}

/* Section heading */

.favourite-stack-sec .section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 70px;
}

.favourite-stack-sec .section-header > .left {
    width: 100%;
    max-width: 760px;
    flex: none;
    background: transparent !important;
}

.favourite-stack-sec .section-header > .left::before,
.favourite-stack-sec .section-header > .left::after {
    display: none !important;
}

.favourite-stack-sec .section-header .title {
    margin: 0 0 18px;
    color: #ffffff;
    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: clamp(52px, 7vw, 100px);
    line-height: 0.88;
    font-weight: 900;
    letter-spacing: -0.06em;
    text-transform: uppercase;
}

.favourite-stack-sec .section-header .left > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Two-column skills layout */

.favourite-stack-sec .experience-lists {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 80px;
    row-gap: 0;
    width: 100%;
}

/* Remove existing box styling */

.favourite-stack-sec .experience-box {
    width: 100%;
    min-width: 0;
    min-height: auto;
    margin: 0 !important;
    padding: 40px 0 !important;

    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.favourite-stack-sec .experience-box:hover {
    transform: none;
    background: transparent !important;
}

/* Icon and content alignment */

.favourite-stack-sec .experience-box > .left {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 22px;

    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

.favourite-stack-sec .experience-box img {
    display: block;
    width: 52px;
    height: 52px;
    padding: 11px;

    object-fit: contain;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.04);
}

/* Text content */

.favourite-stack-sec .experience-content {
    width: 100%;
    min-width: 0;
}

.favourite-stack-sec .experience-content h5 {
    margin: 0 0 7px;
    color: #ffffff;

    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: clamp(25px, 2.2vw, 34px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-transform: uppercase;

    white-space: normal !important;
}

.favourite-stack-sec .experience-content .designation {
    display: block;
    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.52);
    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    white-space: normal !important;
}

.favourite-stack-sec .experience-content p {
    width: 100%;
    max-width: 540px;
    margin: 0;

    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;

    white-space: normal !important;
    overflow-wrap: break-word;
}

/* Optional percentage text */

.favourite-stack-sec .experience-date {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Hover treatment */

.favourite-stack-sec .experience-box img {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.favourite-stack-sec .experience-box:hover img {
    transform: translateY(-3px);
    border-color: #0c26ce;
    background: rgba(12, 38, 206, 0.16);
}

/* Tablet */

@media (max-width: 991px) {
    .favourite-stack-sec .section-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 50px;
    }

    .favourite-stack-sec .experience-lists {
        column-gap: 40px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    .favourite-stack-sec {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .favourite-stack-sec .experience-lists {
        grid-template-columns: 1fr;
    }

    .favourite-stack-sec .experience-box {
        padding: 30px 0 !important;
    }

    .favourite-stack-sec .experience-box > .left {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 16px;
    }

    .favourite-stack-sec .experience-box img {
        width: 46px;
        height: 46px;
        padding: 9px;
        border-radius: 12px;
    }

    .favourite-stack-sec .experience-content h5 {
        font-size: 25px;
    }
}


/* Force Favourite Stack grid to use full container width */

.favourite-stack-sec .experience-lists {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    transform: none !important;
    float: none !important;

    justify-content: stretch !important;
    align-items: start;
}



/* ===================================
   FAVOURITE STACK — MOBILE FIX
=================================== */

@media screen and (max-width: 767px) {

    .favourite-stack-sec {
        padding: 70px 0;
        overflow: hidden;
    }

    .favourite-stack-sec .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin: 0 auto !important;
    }

    /* Force one item per row */
    .favourite-stack-sec .experience-lists {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .favourite-stack-sec .experience-box {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 30px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    /* Icon + content */
    .favourite-stack-sec .experience-box > .left {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 16px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .favourite-stack-sec .experience-box img {
        width: 46px !important;
        height: 46px !important;
        padding: 9px !important;
        border-radius: 12px !important;
        object-fit: contain;
    }

    .favourite-stack-sec .experience-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .favourite-stack-sec .experience-content h5 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;

        font-size: 25px !important;
        line-height: 0.98 !important;
        letter-spacing: -0.04em !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .favourite-stack-sec .experience-content .designation {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;

        font-size: 10px !important;
        line-height: 1.4 !important;
        letter-spacing: 0.09em !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .favourite-stack-sec .experience-content p {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.6 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
}







/* =========================================
   PROCESS SECTION — FAVOURITE STACK STYLE
========================================= */

.favourite-process-sec {
    padding-top: 100px;
    padding-bottom: 100px;
    background: transparent;
}

/* Header spacing */

.favourite-process-sec .section-header-2 {
    margin-bottom: 65px;
}

/* Two-column process layout */

.favourite-process-sec .process-lists {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 80px !important;
    row-gap: 0 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

/* Individual process item */

.favourite-process-sec .process-box {
    position: relative;

    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 42px 0 !important;

    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Disable old card hover */

.favourite-process-sec .process-box:hover {
    transform: none !important;
    background: transparent !important;
}

/* Number */

.favourite-process-sec .process-box .number {
    position: absolute !important;
    top: 43px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;

    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Icon and content */

.favourite-process-sec .process-box-content {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 22px !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 48px 0 0 !important;

    background: transparent !important;
    border: none !important;
}

/* Icon */

.favourite-process-sec .process-box-content > img {
    display: block;

    width: 52px !important;
    height: 52px !important;
    min-width: 52px;

    padding: 11px !important;
    margin: 0 !important;

    object-fit: contain;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.04);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.favourite-process-sec .process-box:hover .process-box-content > img {
    transform: translateY(-3px);
    border-color: #0c26ce;
    background: rgba(12, 38, 206, 0.16);
}

/* Text column */

.favourite-process-sec .process-text {
    width: 100%;
    min-width: 0;
}

/* Heading */

.favourite-process-sec .process-text h4 {
    width: 100%;
    max-width: 520px;

    margin: 0 0 18px !important;

    color: #ffffff;
    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: clamp(26px, 2.2vw, 36px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Description */

.favourite-process-sec .process-text > p {
    width: 100%;
    max-width: 540px;

    margin: 0 0 24px !important;

    color: rgba(255, 255, 255, 0.68);
    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;

    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Key points */

.favourite-process-sec .process-text ul {
    display: flex;
    flex-direction: column;
    gap: 9px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.favourite-process-sec .process-text li {
    position: relative;

    margin: 0 !important;
    padding: 0 0 0 15px !important;

    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;

    list-style: none !important;
    white-space: normal !important;
}

.favourite-process-sec .process-text li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.66em;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: #0c26ce;

    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {

    .favourite-process-sec {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .favourite-process-sec .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .favourite-process-sec .section-header-2 {
        margin-bottom: 40px;
    }

    .favourite-process-sec .process-lists {
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
    }

    .favourite-process-sec .process-box {
        padding: 32px 0 !important;
    }

    .favourite-process-sec .process-box .number {
        top: 34px !important;
    }

    .favourite-process-sec .process-box-content {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 16px !important;

        padding-right: 36px !important;
    }

    .favourite-process-sec .process-box-content > img {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px;

        padding: 9px !important;
        border-radius: 12px;
    }

    .favourite-process-sec .process-text h4 {
        font-size: 25px;
        line-height: 1;
    }

    .favourite-process-sec .process-text > p {
        max-width: none;
        font-size: 14px;
        line-height: 1.6;
    }
}

/* =========================================
   PROCESS SECTION — STRONG LAYOUT RESET
========================================= */

#process-section .process-lists {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 70px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

#process-section .process-box {
    position: relative !important;

    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 42px 0 !important;

    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;

    background: transparent !important;
    overflow: visible !important;
}

/* Number */

#process-section .process-box > .number {
    position: absolute !important;
    top: 44px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
}

/* Main icon and text row */

#process-section .process-box-content {
    position: static !important;

    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: initial !important;
    gap: 22px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 48px 0 0 !important;

    background: transparent !important;
    transform: none !important;
}

/* Icon reset */

#process-section .process-box-content > img {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: block !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    margin: 0 !important;
    padding: 11px !important;

    object-fit: contain;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.04);
}

/* Text column reset */

#process-section .process-text {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Heading */

#process-section .process-text h4 {
    display: block !important;

    width: 100% !important;
    max-width: 500px !important;
    min-width: 0 !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    color: #ffffff;
    font-size: clamp(28px, 2.4vw, 40px) !important;
    line-height: 0.95 !important;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-transform: uppercase;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Paragraph */

#process-section .process-text > p {
    display: block !important;

    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.68);
    font-size: 14px !important;
    line-height: 1.6 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* List */

#process-section .process-text ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;

    width: 100% !important;
    max-width: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

#process-section .process-text li {
    position: relative !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 15px !important;

    color: rgba(255, 255, 255, 0.72);
    font-size: 12px !important;
    line-height: 1.45 !important;

    white-space: normal !important;
    word-break: normal !important;
}

#process-section .process-text li::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.65em;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: #0c26ce;

    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {

    #process-section .process-lists {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    #process-section .process-box {
        padding: 32px 0 !important;
    }

    #process-section .process-box > .number {
        top: 34px !important;
    }

    #process-section .process-box-content {
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 16px !important;
        padding-right: 36px !important;
    }

    #process-section .process-box-content > img {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        padding: 9px !important;
    }

    #process-section .process-text h4 {
        max-width: 100% !important;
        font-size: 25px !important;
        line-height: 1 !important;
    }

    #process-section .process-text > p,
    #process-section .process-text ul {
        max-width: 100% !important;
    }
}




/* =========================================
   HERO BANNER WORD ANIMATION
========================================= */

.hero-banner-img-inner {
    position: relative !important;
    width: 100%;
    overflow: hidden !important;
    isolation: isolate;
}

/* Banner image layer */

.hero-banner-img-inner .hero-banner-img {
    position: relative;
    z-index: 1;
}

.hero-banner-img-inner .hero-banner-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* Dark overlay over the collage */

.hero-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.12) 48%,
            rgba(0, 0, 0, 0.78) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 3, 35, 0.5) 0%,
            rgba(0, 0, 0, 0.05) 65%,
            rgba(0, 0, 0, 0.3) 100%
        );
}

/* Complete animated title */

.mbj-animated-title {
    position: absolute !important;

    left: clamp(24px, 4vw, 70px);
    right: clamp(24px, 4vw, 70px);
    bottom: clamp(28px, 4.5vw, 70px);

    z-index: 4;

    width: auto;
    pointer-events: none;
}

/* Small heading */

.mbj-small-title {
    margin-bottom: 14px;

    color: rgba(255, 255, 255, 0.74);

    font-family: var(--font_inter_tight), Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Main title structure */

.mbj-title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
}

/* White static text */

.mbj-static-text {
    display: block;

    margin: 0 0 4px;

    color: #ffffff;

    font-family:
        "Bricolage Grotesque",
        var(--font_inter_tight),
        Arial,
        sans-serif;

    font-size: clamp(45px, 7vw, 1205px);
    line-height: 0.78;
    font-weight: 800;

    letter-spacing: -0.07em;
    text-transform: uppercase;

    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* Clipping window for changing words */

.mbj-word-window {
    position: relative;

    width: 100%;
    height: clamp(72px, 10.5vw, 180px);

    overflow: hidden;
}

/* Animated blue words */

.mbj-word {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    width: 100%;

    color: #0c26ce;

    font-family:
        "Bricolage Grotesque",
        var(--font_inter_tight),
        Arial,
        sans-serif;

    font-size: clamp(60px, 8vw, 150px);
    line-height: 0.78;
    font-weight: 800;

    letter-spacing: -0.05em;
    text-transform: uppercase;
    white-space: nowrap;

    visibility: hidden;

    text-shadow: 0 8px 60px rgba(0, 0, 0, 1);
}

/* Individual animated letters */

.mbj-char {
    display: inline-block;

    transform-origin: 50% 100%;
    will-change: transform, opacity, filter;
}

@media screen and (max-width: 767px) {

    .mbj-animated-title {
        left: 18px;
        right: 18px;
        bottom: 24px;
    }

    .mbj-small-title {
        margin-bottom: 10px;
        font-size: 9px;
    }

    .mbj-static-text {
        font-size: clamp(40px, 15vw, 60px);
        line-height: 0.84;
    }

    .mbj-word-window {
        height: clamp(40px, 20vw, 70px);
    }

    .mbj-word {
        font-size: clamp(40px, 18vw, 60px);
        line-height: 0.82;
        letter-spacing: -0.055em;
    }
}


/* Compact homepage navigation area. Keep transforms available to GSAP. */
.hero-sec.hero-nav-only {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 20px 0 16px;
}

.hero-sec.hero-nav-only .container,
.hero-sec.hero-nav-only .hero-sec-top {
    min-height: 0;
}

.hero-sec.hero-nav-only .hero-sec-top {
    margin: 0;
}

.hero-sec.hero-nav-only .hero-sec-bottom {
    display: none;
}

#work-section,
#about-section,
#services-section,
#process-section,
#contact-section {
    scroll-margin-top: 110px;
}

@media (max-width: 900px) {
    #work-section,
    #about-section,
    #services-section,
    #process-section,
    #contact-section {
        scroll-margin-top: 130px;
    }
}




/* =========================================
   WORK IMAGE FOCUS — BLUR EVERYTHING ELSE
========================================= */

/* Smooth transitions */
#smooth-content > *,
#work-section .section-header,
#work-section .work-box {
    transition:
        filter 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
}


/* -----------------------------------------
   1. Blur every OTHER major page section
----------------------------------------- */

body:has(#work-section .work-box:hover)
#smooth-content > *:not(#work-section) {
    filter: blur(10px) brightness(0.55);
    opacity: 0.55;
}


/* -----------------------------------------
   2. Blur the heading inside Work section
----------------------------------------- */

body:has(#work-section .work-box:hover)
#work-section .section-header {
    filter: blur(10px) brightness(0.55);
    opacity: 0.45;
}


/* -----------------------------------------
   3. Blur all project images
----------------------------------------- */

body:has(#work-section .work-box:hover)
#work-section .work-box {
    filter: blur(10px) brightness(0.5);
    opacity: 0.45;
}


/* -----------------------------------------
   4. Keep ONLY hovered project sharp
----------------------------------------- */

body:has(#work-section .work-box:hover)
#work-section .work-box:hover {
    filter: none !important;
    opacity: 1 !important;

    position: relative;
    z-index: 20;

    transform: scale(1.025);
}


/* Make hovered image itself completely sharp */
body:has(#work-section .work-box:hover)
#work-section .work-box:hover .work-img,
body:has(#work-section .work-box:hover)
#work-section .work-box:hover img {
    filter: none !important;
    opacity: 1 !important;
}

body:has(#work-section .work-box:hover)
#work-section .work-box:hover .work-img {
    border: 1.45px solid #0c26ce;

    box-shadow:
        0 0 0 1px rgba(12, 38, 206, 0.18),
        0 0 28px rgba(12, 38, 206, 0.16);
}

.work-box .work-img {
    border-radius: 20px;
    overflow: hidden;
}







/* =========================================
   SERVICES FOCUS — BLUR EVERYTHING ELSE
========================================= */

/* Smooth transitions */
#services-section .service-card {
    transition:
        filter 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Blur every OTHER major section */
body:has(#services-section .service-card:hover)
#smooth-content > *:not(#services-section) {
    filter: blur(7px) brightness(0.55);
    opacity: 0.55;
}

/* Blur Services heading area */
body:has(#services-section .service-card:hover)
#services-section .section-header {
    filter: blur(7px) brightness(0.55);
    opacity: 0.45;
}

/* Blur all service cards */
body:has(#services-section .service-card:hover)
#services-section .service-card {
    filter: blur(7px) brightness(0.5);
    opacity: 0.42;
}

/* Keep hovered service card sharp */
body:has(#services-section .service-card:hover)
#services-section .service-card:hover {
    position: relative;
    z-index: 20;

    filter: none !important;
    opacity: 1 !important;

    transform: translateY(-6px) scale(1.015);

    border-color: #0c26ce !important;

    box-shadow:
        0 0 0 1px rgba(12, 38, 206, 0.15),
        0 0 30px rgba(12, 38, 206, 0.14);
}




/* =====================================================
   INDEX PAGE — SAFE GLOBAL VISUAL SCALE
   Does NOT interfere with GSAP / ScrollSmoother
===================================================== */

@media screen and (min-width: 992px) {

    /* Only index.html because its <main> has .home-page */
    .home-page {
        font-size: 90%;
    }

    /* Slightly narrower overall content */
    .home-page .container {
        width: calc(90% - 80px);
        max-width: 1450px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Reduce main section vertical spacing */
    .home-page section,
    .home-page .client-sec,
    .home-page .contact-sec,
    .home-page .cta-sec-2 {
        --section-scale: 0.90;
    }

    /* Main section headings */
    .home-page .section-header .title,
    .home-page .section-title2,
    .home-page .hero-title {
        transform-origin: left top;
    }

    /* Service cards */
    .home-page .service-card {
        padding: 22px;
        min-height: 430px;
    }

    .home-page .service-card h3 {
        font-size: 23px;
    }

    .home-page .service-card-content > p {
        font-size: 13px;
    }

    /* Favourite Stack */
    .home-page .favourite-stack-sec .experience-content h5 {
        font-size: clamp(23px, 2vw, 31px);
    }

    .home-page .favourite-stack-sec .experience-content p {
        font-size: 13px;
    }
	
	/* =========================================
   SERVICE CARD IMAGE
========================================= */

.service-card-image {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 10;

    margin-top: 18px;
    margin-bottom: 20px;

    overflow: hidden;

    border: 1px solid rgba(12, 38, 206, 0.8);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.04);
}

.service-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

/* Slight movement when card is hovered */
.service-card:hover .service-card-image img {
    transform: scale(1.05);
}

    /* Process */
    .home-page #process-section .process-text h4 {
        font-size: clamp(24px, 2vw, 33px) !important;
    }

    .home-page #process-section .process-text > p {
        font-size: 13px !important;
    }

    /* Testimonials */
    .home-page .testimonial-card {
        min-height: 290px;
        padding: 23px;
    }

    .home-page .testimonial-card blockquote {
        font-size: 15px;
    }

    /* Contact fields */
    .home-page .contact-form .input-group label {
        font-size: 19px;
    }

    .home-page .contact-form .input-group input,
    .home-page .contact-form .input-group select,
    .home-page .contact-form .input-group textarea {
        font-size: 16px;
        padding: 22px 18px;
    }
}

@media screen and (min-width: 992px) {

    .home-page .service-sec,
    .home-page .about-sec,
    .home-page .process-sec,
    .home-page .service-sec-2,
    .home-page .favourite-stack-sec,
    .home-page .testimonials-sec,
    .home-page .contact-sec {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

}




/* =========================================
   PROCESS — FORCE 3 COLUMN LAYOUT
========================================= */

#process-section .process-lists {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 70px 0 0 !important;
    padding: 0 !important;
}

#process-section .process-box {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
}

/* =========================================
   PROCESS — MOBILE FIX
========================================= */

@media screen and (max-width: 767px) {

    #process-section .process-lists {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 18px !important;

        width: 100% !important;
        margin-top: 40px !important;
    }

    #process-section .process-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 24px 20px 26px !important;

        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 18px;
    }

    #process-section .process-box-content {
        display: block !important;
        padding-top: 0 !important;
    }

    #process-section .process-box-content img {
        position: static !important;

        width: 52px !important;
        height: 52px !important;

        margin: 0 0 22px 0 !important;
    }

    #process-section .process-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #process-section .process-text h4 {
        width: 100% !important;

        font-size: 28px !important;
        line-height: 1.05 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        margin-bottom: 18px !important;
    }

    #process-section .process-text p {
        width: 100% !important;

        font-size: 15px !important;
        line-height: 1.55 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #process-section .process-text ul {
        width: 100% !important;
        padding: 0 !important;
        margin: 22px 0 0 !important;
    }

    #process-section .process-text ul li {
        width: 100% !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        white-space: normal !important;
        word-break: normal !important;
    }

    #process-section .number {
        margin-bottom: 20px !important;
    }
}	

@media screen and (min-width: 768px) and (max-width: 991px) {
    #process-section .process-lists {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}





/* =====================================================
   LIGHT MODE — TEXT FIX
   Header stays permanently dark/original
===================================================== */


/* =====================================================
   KEEP HEADER EXACTLY DARK
===================================================== */

html[data-theme="light"] .site-header {
    background: rgba(5,5,5,.88) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #ffffff !important;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


/* Header navigation always white */

html[data-theme="light"] .site-header nav a,
html[data-theme="light"] .site-header nav a span,
html[data-theme="light"] .site-header .wordmark,
html[data-theme="light"] .site-header .logo {
    color: #ffffff !important;
}


/* Keep logo unchanged */

html[data-theme="light"] .site-header .logo img,
html[data-theme="light"] .site-header .wordmark img {
    filter: none !important;
}


/* Start A Project button stays like original */

html[data-theme="light"] .site-header .header-cta {
    background: #ffffff !important;
    color: #080808 !important;
}

html[data-theme="light"] .site-header .header-cta span {
    color: #080808 !important;
}


/* Theme toggle remains dark-header compatible */

html[data-theme="light"] .site-header .theme-toggle-track {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.16) !important;
}

html[data-theme="light"] .site-header .theme-icon {
    color: #ffffff;
}



/* =====================================================
   LIGHT MODE — FORCE MAIN TEXT DARK
===================================================== */

/* Main headings */

html[data-theme="light"] .home-page h1,
html[data-theme="light"] .home-page h2,
html[data-theme="light"] .home-page h3,
html[data-theme="light"] .home-page h4,
html[data-theme="light"] .home-page h5,
html[data-theme="light"] .home-page h6,

html[data-theme="light"] .home-page .section-title,
html[data-theme="light"] .home-page .section-title2,

html[data-theme="light"] .home-page .section-header h1,
html[data-theme="light"] .home-page .section-header h2,
html[data-theme="light"] .home-page .section-header h3,

html[data-theme="light"] .home-page .section-header-2 h1,
html[data-theme="light"] .home-page .section-header-2 h2,
html[data-theme="light"] .home-page .section-header-2 h3 {
    color: #080808 !important;
}


/* Main paragraph text */

html[data-theme="light"] .home-page p {
    color: rgba(0,0,0,.72) !important;
}


/* Lists */

html[data-theme="light"] .home-page li {
    color: rgba(0,0,0,.72) !important;
}


/* Small labels / eyebrow text */

html[data-theme="light"] .home-page .eyebrow,
html[data-theme="light"] .home-page .section-label,
html[data-theme="light"] .home-page .testimonials-label,
html[data-theme="light"] .home-page .number {
    color: rgba(0,0,0,.52) !important;
}


/* =====================================================
   ABOUT
===================================================== */

html[data-theme="light"] #about-section,
html[data-theme="light"] #about-section h2,
html[data-theme="light"] #about-section h3,
html[data-theme="light"] #about-section h4,
html[data-theme="light"] #about-section strong {
    color: #080808 !important;
}

html[data-theme="light"] #about-section p {
    color: rgba(0,0,0,.70) !important;
}


/* =====================================================
   SERVICES
===================================================== */

html[data-theme="light"] #services-section .service-card h3,
html[data-theme="light"] #services-section .service-card h4 {
    color: #080808 !important;
}

html[data-theme="light"] #services-section .service-card p,
html[data-theme="light"] #services-section .service-card li {
    color: rgba(0,0,0,.68) !important;
}

html[data-theme="light"] #services-section .service-features-label {
    color: rgba(0,0,0,.48) !important;
}


/* =====================================================
   PROCESS
===================================================== */

html[data-theme="light"] #process-section h4,
html[data-theme="light"] #process-section .process-text h4 {
    color: #080808 !important;
}

html[data-theme="light"] #process-section p,
html[data-theme="light"] #process-section li {
    color: rgba(0,0,0,.67) !important;
}


/* =====================================================
   FAVOURITE STACK
===================================================== */

html[data-theme="light"] .favourite-stack-sec h5,
html[data-theme="light"] .favourite-stack-sec h4 {
    color: #080808 !important;
}

html[data-theme="light"] .favourite-stack-sec p {
    color: rgba(0,0,0,.62) !important;
}


/* =====================================================
   TESTIMONIALS
===================================================== */

html[data-theme="light"] .testimonials-sec blockquote {
    color: rgba(0,0,0,.78) !important;
}

html[data-theme="light"] .testimonials-sec cite {
    color: #080808 !important;
}

html[data-theme="light"] .testimonials-sec .testimonial-client span {
    color: rgba(0,0,0,.50) !important;
}

html[data-theme="light"] .testimonials-sec .testimonial-number {
    color: rgba(0,0,0,.42) !important;
}


/* =====================================================
   CONTACT
===================================================== */

html[data-theme="light"] #contact-section label,
html[data-theme="light"] #contact-section h2,
html[data-theme="light"] #contact-section h3 {
    color: #080808 !important;
}

html[data-theme="light"] #contact-section p {
    color: rgba(0,0,0,.68) !important;
}


/* Inputs */

html[data-theme="light"] #contact-section input,
html[data-theme="light"] #contact-section textarea,
html[data-theme="light"] #contact-section select {
    color: #080808 !important;

    background:
        rgba(255,255,255,.68) !important;

    border-color:
        rgba(0,0,0,.14) !important;
}


/* Placeholders */

html[data-theme="light"] #contact-section input::placeholder,
html[data-theme="light"] #contact-section textarea::placeholder {
    color: rgba(0,0,0,.42) !important;
}


/* =====================================================
   LINKS WITHIN CONTENT
===================================================== */

html[data-theme="light"] .home-page main a:not(.header-cta) {
    color: inherit;
}


/* =====================================================
   KEEP BLUE ACCENTS BLUE
===================================================== */

html[data-theme="light"] .testimonial-mark,
html[data-theme="light"] .theme-icon-sun,
html[data-theme="light"] .link-with-border,
html[data-theme="light"] .service-card li::before,
html[data-theme="light"] .process-box li::before {
    color: #0c26ce !important;
}


/* =========================================
   LIGHT MODE — SVG ICON FIX
========================================= */

html[data-theme="light"]
#process-section .process-box-content img {
    filter: brightness(0) saturate(100%) !important;
    opacity: 0.85;
}


/* DARK MODE — keep SVGs original */
html[data-theme="dark"]
#process-section .process-box-content img {
    filter: none !important;
    opacity: 1;
}


/* =====================================================
   LIGHT MODE — SERVICE ICON BOX
===================================================== */

/* Default: black box + white SVG */
html[data-theme="light"]
#services-section .service-card .service-icon {
    background: #080808 !important;
    border-color: #080808 !important;

    transition:
        background-color 0.35s ease,
        border-color 0.35s ease;
}

html[data-theme="light"]
#services-section .service-card .service-icon img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}


/* Hover: blue box + white SVG */
html[data-theme="light"]
#services-section .service-card:hover .service-icon {
    background: #0c26ce !important;
    border-color: #0c26ce !important;
}

html[data-theme="light"]
#services-section .service-card:hover .service-icon img {
    filter: brightness(0) invert(1) !important;
}



/* =====================================================
   LIGHT MODE — FOOTER TEXT FIX
===================================================== */

html[data-theme="light"] .cta-sec-2 ,
html[data-theme="light"] .cta-sec-2 a,
html[data-theme="light"] .cta-sec-2 span,
html[data-theme="light"] .cta-sec-2 p {
    color: #080808 !important;
}

html[data-theme="light"] .cta-sec-2 a {
    border-color: rgba(0,0,0,.18) !important;
}


html[data-theme="light"] .designation ,
html[data-theme="light"] .designation a,
html[data-theme="light"] .designation span,
html[data-theme="light"] .designation p {
    color: #080808 !important;
}

html[data-theme="light"] .designation a {
    border-color: rgba(0,0,0,.18) !important;
}


/* =====================================================
   THEME — WHITE CIRCLE
===================================================== */

/* Light mode = black circle */
html[data-theme="light"] .white-circle {
    background: #080808 !important;
    border-color: #080808 !important;
}

/* Dark mode = original white circle */
html[data-theme="dark"] .white-circle {
    background: #ffffff !important;
    border-color: #ffffff !important;
}





/* INLINE SVG VERSION */

html[data-theme="light"]
#services-section .service-card .service-icon .cta-sec-2 svg {
    color: #080808 !important;
    stroke: currentColor !important;
}

html[data-theme="light"]
#services-section .service-card .service-icon .cta-sec-2 svg * {
    stroke: currentColor !important;
}

html[data-theme="light"]
#services-section .service-card:hover .service-icon .cta-sec-2 svg {
    color: #ffffff !important;
}

html[data-theme="dark"]
#services-section .service-card .service-icon .cta-sec-2 svg {
    color: #ffffff !important;
}






/* =====================================================
   LIGHT MODE — SOCIAL LINK ARROWS BLACK
===================================================== */

html[data-theme="light"] .social-links-text img {
    filter: brightness(0) saturate(100%) !important;
    opacity: 1 !important;
}


/* DARK MODE — KEEP ORIGINAL WHITE SVG */
html[data-theme="dark"] .social-links-text img {
    filter: none !important;
    opacity: 1 !important;
}


/* =====================================================
   COMPACT HEADER LAYOUT
===================================================== */

.site-header {
    display: grid !important;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center !important;

    column-gap: clamp(20px, 2.5vw, 46px) !important;

    width: calc(100% - 28px) !important;

    margin: 6px 14px !important;

    padding: 11px 18px !important;

    min-height: 72px !important;

    box-sizing: border-box !important;
}


/* =====================================================
   LOGO
===================================================== */

.site-header .logo {
    flex: none !important;

    width: auto !important;
    min-width: 120px;
}

.site-header .logo img {
    display: block;

    width: 145px !important;
    height: auto !important;
}


/* =====================================================
   NAVIGATION
===================================================== */

.site-header nav {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-wrap: nowrap !important;

    gap: clamp(18px, 2vw, 38px) !important;

    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
}


.site-header nav a {
    flex: 0 0 auto !important;

    white-space: nowrap !important;

    margin: 0 !important;

    font-size: 13px !important;
}


/* =====================================================
   RIGHT SIDE — TOGGLE + CTA
===================================================== */

.header-actions {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    flex-wrap: nowrap !important;

    white-space: nowrap !important;
}


/* =====================================================
   COMPACT THEME TOGGLE
===================================================== */

.header-actions .theme-toggle {
    flex: 0 0 auto !important;

    margin: 0 !important;
}


.header-actions .theme-toggle-track {
    width: 56px !important;
    height: 30px !important;

    padding: 0 7px !important;
}


.header-actions .theme-toggle-thumb {
    width: 22px !important;
    height: 22px !important;

    top: 3px !important;
    left: 4px !important;
}


html[data-theme="dark"]
.header-actions .theme-toggle-thumb {
    transform: translateX(26px) !important;
}


html[data-theme="light"]
.header-actions .theme-toggle-thumb {
    transform: translateX(0) !important;
}


.header-actions .theme-icon {
    width: 12px !important;
    height: 12px !important;
}


/* =====================================================
   START A PROJECT
===================================================== */

.site-header .header-cta {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;

    padding: 14px 20px !important;

    margin: 0 !important;

    white-space: nowrap !important;

    border-radius: 15px !important;

    flex: 0 0 auto !important;
}


/* =====================================================
   MEDIUM DESKTOP
===================================================== */

@media screen and (max-width: 1250px) {

    .site-header {
        column-gap: 18px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .site-header .logo img {
        width: 125px !important;
    }


    .site-header nav {
        gap: 18px !important;
    }


    .site-header nav a {
        font-size: 12px !important;
    }


    .site-header .header-cta {
        padding: 13px 17px !important;

        font-size: 12px !important;
    }

}


/* =====================================================
   SMALLER DESKTOP / TABLET
===================================================== */

@media screen and (max-width: 1050px) {

    .site-header nav {
        gap: 13px !important;
    }


    .site-header nav a {
        font-size: 11px !important;
    }


    .site-header .logo img {
        width: 110px !important;
    }


    .header-actions {
        gap: 7px !important;
    }


    .site-header .header-cta {
        padding: 12px 14px !important;
    }

}



/* =====================================================
   TESTIMONIAL EDGE FADE — THEME AWARE
===================================================== */

/* DARK MODE */
html[data-theme="dark"] .testimonials-viewport::before {
    background:
        linear-gradient(
            to right,
            rgba(5,5,5,1) 0%,
            rgba(5,5,5,.92) 35%,
            rgba(5,5,5,0) 100%
        ) !important;
}

html[data-theme="dark"] .testimonials-viewport::after {
    background:
        linear-gradient(
            to left,
            rgba(5,5,5,1) 0%,
            rgba(5,5,5,.92) 35%,
            rgba(5,5,5,0) 100%
        ) !important;
}


/* LIGHT MODE */
html[data-theme="light"] .testimonials-viewport::before {
    background:
        linear-gradient(
            to right,
            rgba(241,241,239,1) 0%,
            rgba(241,241,239,.92) 35%,
            rgba(241,241,239,0) 100%
        ) !important;
}

html[data-theme="light"] .testimonials-viewport::after {
    background:
        linear-gradient(
            to left,
            rgba(241,241,239,1) 0%,
            rgba(241,241,239,.92) 35%,
            rgba(241,241,239,0) 100%
        ) !important;
}