/* =========================================
   DS OUTDOOR MEDIA TOP HEADER
========================================= */

:root {
    --ds-primary: #204b75;
    --ds-secondary: #486b93;
    --ds-white: #ffffff;
    --ds-light: #eef5fb;
    --ds-border: rgba(255, 255, 255, 0.22);
    --ds-hover: rgba(255, 255, 255, 0.12);

    --ds-heading-font: "Bebas Neue", sans-serif;
    --ds-body-font: "Inter", sans-serif;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: "Inter", sans-serif;
    background: #fff;
}

.ds-topbar {
    position: relative;
    z-index: 999;
    width: 100%;
    min-height: 44px;
    color: var(--ds-white);
    font-family: var(--ds-body-font);
    background:
        linear-gradient(110deg,
            var(--ds-primary) 0%,
            var(--ds-primary) 48%,
            var(--ds-secondary) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

/* Soft background detail */
.ds-topbar::before {
    content: "";
    position: absolute;
    top: -55px;
    right: 12%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.ds-topbar-container {
    position: relative;
    width: min(100% - 40px, 1320px);
    min-height: 44px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ds-topbar-left,
.ds-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ds-topbar-item,
.ds-topbar-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--ds-light);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}

a.ds-topbar-item:hover,
.ds-topbar-call:hover {
    color: var(--ds-white);
}

.ds-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-white);
    font-size: 12px;
}

.ds-topbar-divider {
    width: 1px;
    height: 16px;
    flex-shrink: 0;
    background: var(--ds-border);
}

.ds-topbar-call strong {
    color: var(--ds-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.ds-call-label {
    color: rgba(255, 255, 255, 0.75);
}

.ds-topbar-socials {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ds-social-link {
    width: 29px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-white);
    font-size: 12px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-social-link:hover {
    color: var(--ds-primary);
    background: var(--ds-white);
    border-color: var(--ds-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.15);
}

.ds-whatsapp-link:hover {
    color: #128c4a;
}

/* Hidden on desktop */
.ds-topbar-mobile {
    display: none;
}

/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .ds-topbar-container {
        width: min(100% - 28px, 1320px);
        gap: 15px;
    }

    .ds-working-hours {
        display: none;
    }

    .ds-topbar-left,
    .ds-topbar-right {
        gap: 10px;
    }
}

@media (max-width: 850px) {

    .ds-topbar-left .ds-topbar-divider,
    .ds-topbar-left .ds-topbar-item:nth-of-type(2) {
        display: none;
    }

    .ds-topbar-socials a:nth-child(2),
    .ds-topbar-socials a:nth-child(3),
    .ds-topbar-socials a:nth-child(4) {
        display: none;
    }
}

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

@media (max-width: 650px) {

    .ds-topbar {
        min-height: 38px;
    }

    .ds-topbar-container {
        width: 100%;
        min-height: 38px;
        padding: 0 16px;
        justify-content: center;
    }

    .ds-topbar-left,
    .ds-topbar-right {
        display: none;
    }

    .ds-topbar-mobile {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .ds-topbar-mobile a {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--ds-white);
        font-size: 13px;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        transition:
            transform 0.3s ease,
            background-color 0.3s ease,
            color 0.3s ease;
    }

    .ds-topbar-mobile a:hover,
    .ds-topbar-mobile a:focus-visible {
        color: var(--ds-primary);
        background: var(--ds-white);
        transform: translateY(-2px);
        outline: none;
    }
}

@media (max-width: 380px) {

    .ds-topbar-container {
        padding: 0 12px;
    }

    .ds-topbar-mobile {
        gap: 10px;
    }

    .ds-topbar-mobile a {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}


/* =========================================
   DS OUTDOOR MEDIA MAIN HEADER
========================================= */

:root {
    --ds-primary: #204b75;
    --ds-secondary: #486b93;
    --ds-dark: #0d2235;
    --ds-deep-dark: #071726;
    --ds-white: #ffffff;
    --ds-light: #f4f7fa;
    --ds-text: #506171;
    --ds-heading: #132b40;
    --ds-border: rgba(32, 75, 117, 0.12);

    --ds-header-height: 92px;

    --ds-shadow:
        0 18px 50px rgba(11, 35, 57, 0.12);

    --ds-transition:
        0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Body ke default 8px margin ko remove karega */
html,
body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Inter", sans-serif;
}

/* Main Header */

.ds-main-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(32, 75, 117, 0.08);
    transition:
        background var(--ds-transition),
        box-shadow var(--ds-transition),
        transform var(--ds-transition);
}

/* Sticky header enable karne ke liye */
.ds-main-header.ds-header-sticky {
    position: fixed;
    animation: dsHeaderSlideDown 0.45s ease forwards;
    box-shadow: 0 12px 35px rgba(12, 35, 54, 0.12);
}

@keyframes dsHeaderSlideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ds-header-container {
    width: min(100% - 40px, 1480px);
    min-height: var(--ds-header-height);
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

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

.ds-header-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    color: var(--ds-heading);
    text-decoration: none;
}

/* Image logo */

.ds-header-logo img {
    display: block;
    width: auto;
    max-width: 225px;
    height: 90px;
    object-fit: contain;
}

.ds-logo-icon {
    position: relative;
    width: 51px;
    height: 51px;

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

    border-radius: 15px 6px 15px 6px;
    overflow: hidden;

    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));

    color: var(--ds-white);
    font-family: "Bebas Neue", sans-serif;
    font-size: 27px;
    letter-spacing: 1.5px;

    box-shadow:
        0 10px 25px rgba(32, 75, 117, 0.26);

    transition:
        transform var(--ds-transition),
        border-radius var(--ds-transition);
}

.ds-logo-icon::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 15px;
    top: -10px;
    left: -60px;
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(-35deg);
    transition: left 0.65s ease;
}

.ds-header-logo:hover .ds-logo-icon {
    transform: translateY(-2px) rotate(-2deg);
    border-radius: 6px 15px 6px 15px;
}

.ds-header-logo:hover .ds-logo-icon::before {
    left: 70px;
}

.ds-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.ds-logo-text strong {
    font-family: "Bebas Neue", sans-serif;
    font-size: 25px;
    line-height: 0.9;
    letter-spacing: 1.3px;
    color: var(--ds-heading);
}

.ds-logo-text small {
    margin-top: 5px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--ds-secondary);
}

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

.ds-desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.ds-menu-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;

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

.ds-menu-item {
    position: relative;
}

.ds-menu-link {
    position: relative;
    min-height: var(--ds-header-height);
    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 0;
    outline: 0;
    background: transparent;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    color: var(--ds-heading);
    text-decoration: none;
    cursor: pointer;

    transition:
        color var(--ds-transition),
        background var(--ds-transition);
}

.ds-menu-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 23px;

    width: 0;
    height: 2px;

    border-radius: 20px;
    background:
        linear-gradient(90deg,
            var(--ds-primary),
            var(--ds-secondary));

    transform: translateX(-50%);
    transition: width var(--ds-transition);
}

.ds-menu-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 20px;

    width: 7px;
    height: 7px;

    border: 2px solid var(--ds-white);
    border-radius: 50%;
    background: var(--ds-primary);

    opacity: 0;
    transform: translate(-50%, 5px) scale(0);
    transition:
        opacity var(--ds-transition),
        transform var(--ds-transition);
}

.ds-menu-link:hover,
.ds-menu-link.active,
.ds-menu-item.ds-dropdown-open>.ds-menu-link {
    color: var(--ds-primary);
}

.ds-menu-link:hover::before,
.ds-menu-link.active::before,
.ds-menu-item.ds-dropdown-open>.ds-menu-link::before {
    width: calc(100% - 26px);
}

.ds-menu-link:hover::after,
.ds-menu-link.active::after,
.ds-menu-item.ds-dropdown-open>.ds-menu-link::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.ds-menu-link i {
    font-size: 9px;
    transition: transform var(--ds-transition);
}

.ds-menu-item:hover>.ds-menu-link i,
.ds-menu-item.ds-dropdown-open>.ds-menu-link i {
    transform: rotate(180deg);
}

/* =========================================
   DROPDOWN COMMON
========================================= */

.ds-dropdown-menu {
    position: absolute;
    top: calc(100% - 8px);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 18px;

    border: 1px solid var(--ds-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.99);

    box-shadow: var(--ds-shadow);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(18px);
    transform-origin: top center;

    transition:
        opacity var(--ds-transition),
        visibility var(--ds-transition),
        transform var(--ds-transition);
}

.ds-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 15px;
}

.ds-menu-item:hover>.ds-dropdown-menu,
.ds-menu-item.ds-dropdown-open>.ds-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Normal Dropdown */

.ds-dropdown-normal {
    left: 50%;
    width: 278px;
    transform: translate(-50%, 18px);
}

.ds-menu-item:hover>.ds-dropdown-normal,
.ds-menu-item.ds-dropdown-open>.ds-dropdown-normal {
    transform: translate(-50%, 0);
}

.ds-dropdown-label {
    display: block;
    margin-bottom: 10px;
    padding: 5px 10px 12px;

    border-bottom: 1px solid var(--ds-border);

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--ds-secondary);
}

.ds-dropdown-normal>a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 46px;
    padding: 10px 12px;

    border-radius: 11px;

    font-size: 13px;
    font-weight: 600;
    color: var(--ds-heading);
    text-decoration: none;

    transition:
        color var(--ds-transition),
        background var(--ds-transition),
        padding-left var(--ds-transition);
}

.ds-dropdown-normal>a>i:first-child {
    width: 20px;
    color: var(--ds-secondary);
    transition:
        color var(--ds-transition),
        transform var(--ds-transition);
}

.ds-dropdown-normal>a:hover {
    padding-left: 16px;
    color: var(--ds-primary);
    background: rgba(32, 75, 117, 0.07);
}

.ds-dropdown-normal>a:hover>i:first-child {
    color: var(--ds-primary);
    transform: scale(1.08);
}

.ds-dropdown-normal .ds-dropdown-view-link {
    justify-content: space-between;
    margin-top: 8px;
    color: var(--ds-white);
    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
}

.ds-dropdown-normal .ds-dropdown-view-link:hover {
    color: var(--ds-white);
    background:
        linear-gradient(135deg,
            var(--ds-secondary),
            var(--ds-primary));
}

.ds-dropdown-normal .ds-dropdown-view-link i {
    color: var(--ds-white);
}

/* =========================================
   MEGA DROPDOWN
========================================= */

.ds-dropdown-large {
    left: 50%;
    width: min(760px, calc(100vw - 40px));
    padding: 24px;

    transform: translate(-50%, 18px);
}

.ds-menu-item:hover>.ds-dropdown-large,
.ds-menu-item.ds-dropdown-open>.ds-dropdown-large {
    transform: translate(-50%, 0);
}

.ds-dropdown-heading {
    margin-bottom: 18px;
    padding: 3px 4px 18px;
    border-bottom: 1px solid var(--ds-border);
}

.ds-dropdown-heading span {
    display: block;
    margin-bottom: 5px;

    font-family: "Bebas Neue", sans-serif;
    font-size: 25px;
    letter-spacing: 1px;
    color: var(--ds-heading);
}

.ds-dropdown-heading p {
    max-width: 520px;
    margin: 0;

    font-size: 12px;
    line-height: 1.7;
    color: var(--ds-text);
}

.ds-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.ds-dropdown-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 76px;
    padding: 13px;

    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 14px;

    color: var(--ds-heading);
    text-decoration: none;

    transition:
        background var(--ds-transition),
        border-color var(--ds-transition),
        transform var(--ds-transition),
        box-shadow var(--ds-transition);
}

.ds-dropdown-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -110%;

    width: 65%;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.65),
            transparent);

    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.ds-dropdown-card:hover {
    background: var(--ds-light);
    border-color: rgba(32, 75, 117, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(32, 75, 117, 0.08);
}

.ds-dropdown-card:hover::after {
    left: 145%;
}

.ds-dropdown-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;

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

    border-radius: 12px;

    color: var(--ds-primary);
    background: rgba(32, 75, 117, 0.09);

    transition:
        color var(--ds-transition),
        background var(--ds-transition),
        transform var(--ds-transition);
}

.ds-dropdown-card:hover .ds-dropdown-icon {
    color: var(--ds-white);
    background: var(--ds-primary);
    transform: rotate(-4deg) scale(1.05);
}

.ds-dropdown-card>span:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ds-dropdown-card strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-heading);
}

.ds-dropdown-card small {
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--ds-text);
}

.ds-view-all-card {
    color: var(--ds-white);
    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
}

.ds-view-all-card strong,
.ds-view-all-card small {
    color: var(--ds-white);
}

.ds-view-all-card small {
    opacity: 0.78;
}

.ds-view-all-card .ds-dropdown-icon {
    color: var(--ds-primary);
    background: var(--ds-white);
}

.ds-view-all-card:hover {
    background:
        linear-gradient(135deg,
            var(--ds-secondary),
            var(--ds-primary));
}

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

.ds-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ds-campaign-button {
    position: relative;
    min-height: 48px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    overflow: hidden;
    border-radius: 8px 18px 8px 18px;

    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));

    box-shadow:
        0 10px 25px rgba(32, 75, 117, 0.23);

    color: var(--ds-white);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;

    transition:
        transform var(--ds-transition),
        border-radius var(--ds-transition),
        box-shadow var(--ds-transition);
}

.ds-campaign-button::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.28) 48%,
            transparent 70%);

    transform: translateX(-130%);
    transition: transform 0.75s ease;
}

.ds-campaign-button span,
.ds-campaign-button i {
    position: relative;
    z-index: 1;
}

.ds-campaign-button i {
    font-size: 11px;
    transition: transform var(--ds-transition);
}

.ds-campaign-button:hover {
    transform: translateY(-3px);
    border-radius: 18px 8px 18px 8px;
    box-shadow:
        0 15px 32px rgba(32, 75, 117, 0.31);
}

.ds-campaign-button:hover::before {
    transform: translateX(130%);
}

.ds-campaign-button:hover i {
    transform: translateX(4px);
}

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

.ds-mobile-toggle {
    position: relative;
    display: none;

    width: 48px;
    height: 48px;
    padding: 0;

    border: 1px solid rgba(32, 75, 117, 0.12);
    border-radius: 12px;
    background: var(--ds-light);

    cursor: pointer;
}

.ds-mobile-toggle span {
    position: absolute;
    left: 50%;

    width: 21px;
    height: 2px;

    border-radius: 10px;
    background: var(--ds-primary);

    transform: translateX(-50%);
    transition:
        top var(--ds-transition),
        transform var(--ds-transition),
        opacity var(--ds-transition);
}

.ds-mobile-toggle span:nth-child(1) {
    top: 16px;
}

.ds-mobile-toggle span:nth-child(2) {
    top: 23px;
}

.ds-mobile-toggle span:nth-child(3) {
    top: 30px;
}

.ds-mobile-toggle.ds-toggle-active span:nth-child(1) {
    top: 23px;
    transform: translateX(-50%) rotate(45deg);
}

.ds-mobile-toggle.ds-toggle-active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
}

.ds-mobile-toggle.ds-toggle-active span:nth-child(3) {
    top: 23px;
    transform: translateX(-50%) rotate(-45deg);
}

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

.ds-mobile-navigation {
    display: none;
}

.ds-mobile-menu-inner {
    padding: 10px 20px 25px;
}

.ds-mobile-link,
.ds-mobile-dropdown-button {
    width: 100%;
    min-height: 55px;

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

    padding: 0 4px;

    border: 0;
    border-bottom: 1px solid rgba(32, 75, 117, 0.1);
    background: transparent;

    color: var(--ds-heading);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ds-mobile-link.active {
    color: var(--ds-primary);
}

.ds-mobile-dropdown-button i {
    width: 30px;
    height: 30px;

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

    border-radius: 8px;
    background: rgba(32, 75, 117, 0.08);

    color: var(--ds-primary);
    font-size: 11px;

    transition: transform var(--ds-transition);
}

.ds-mobile-dropdown.ds-mobile-dropdown-open .ds-mobile-dropdown-button i {
    transform: rotate(45deg);
}

.ds-mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    background: var(--ds-light);

    transition:
        max-height 0.45s ease,
        opacity 0.3s ease,
        padding 0.3s ease;
}

.ds-mobile-dropdown.ds-mobile-dropdown-open .ds-mobile-dropdown-content {
    max-height: 500px;
    padding: 9px;
    opacity: 1;
}

.ds-mobile-dropdown-content a {
    min-height: 43px;
    padding: 10px 13px;

    display: flex;
    align-items: center;

    border-radius: 8px;

    color: var(--ds-text);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    transition:
        color var(--ds-transition),
        background var(--ds-transition),
        padding-left var(--ds-transition);
}

.ds-mobile-dropdown-content a:hover {
    padding-left: 17px;
    color: var(--ds-primary);
    background: var(--ds-white);
}

.ds-mobile-campaign-button {
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    padding: 0 20px;

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

    border: 0;
    border-radius: 12px;
    cursor: pointer;

    color: var(--ds-white);
    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 12px 25px rgba(32, 75, 117, 0.2);
}

.ds-mobile-contact {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding: 17px;

    border-radius: 13px;
    background: var(--ds-dark);
}

.ds-mobile-contact a {
    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    text-decoration: none;
}

.ds-mobile-contact i {
    width: 28px;
    height: 28px;

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

    border-radius: 7px;
    background: rgba(255, 255, 255, 0.09);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1280px) {

    .ds-header-container {
        width: min(100% - 28px, 1480px);
        gap: 18px;
    }

    .ds-menu-link {
        padding-inline: 9px;
        font-size: 13px;
    }

    .ds-campaign-button {
        padding-inline: 15px;
        font-size: 11px;
    }

    .ds-logo-text strong {
        font-size: 22px;
    }

}

@media (max-width: 1100px) {

    :root {
        --ds-header-height: 78px;
    }

    .ds-desktop-nav {
        display: none;
    }

    .ds-campaign-button {
        display: none;
    }

    .ds-mobile-toggle {
        display: inline-block;
    }

    .ds-mobile-navigation {
        display: block;

        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;

        border-top: 1px solid transparent;
        background: var(--ds-white);

        transition:
            max-height 0.55s ease,
            opacity 0.35s ease,
            visibility 0.35s ease,
            border-color 0.35s ease;
    }

    .ds-mobile-navigation.ds-mobile-nav-open {
        max-height: calc(100vh - var(--ds-header-height));
        overflow-y: auto;
        visibility: visible;
        opacity: 1;
        border-top-color: rgba(32, 75, 117, 0.1);
    }

}

@media (max-width: 575px) {
    .ds-header-logo img {
        max-width: 180px;
        height: 58px;
    }
}

@media (max-width: 575px) {

    :root {
        --ds-header-height: 70px;
    }

    .ds-header-container {
        width: calc(100% - 24px);
    }

    .ds-logo-icon {
        width: 44px;
        height: 44px;
        font-size: 23px;
        border-radius: 12px 5px 12px 5px;
    }

    .ds-logo-text strong {
        font-size: 20px;
    }

    .ds-logo-text small {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .ds-mobile-toggle {
        width: 44px;
        height: 44px;
    }

    .ds-mobile-toggle span:nth-child(1) {
        top: 14px;
    }

    .ds-mobile-toggle span:nth-child(2) {
        top: 21px;
    }

    .ds-mobile-toggle span:nth-child(3) {
        top: 28px;
    }

    .ds-mobile-toggle.ds-toggle-active span:nth-child(1),
    .ds-mobile-toggle.ds-toggle-active span:nth-child(3) {
        top: 21px;
    }

    .ds-mobile-menu-inner {
        padding-inline: 16px;
    }

}

@media (max-width: 380px) {

    .ds-logo-text {
        display: none;
    }

}

/* =====================================
   DS OUTDOOR MEDIA PRELOADER
===================================== */

:root {
    --ds-primary: #204b75;
    --ds-secondary: #486b93;
    --ds-dark: #071522;
    --ds-dark-soft: #0d2133;
    --ds-white: #ffffff;
    --ds-light: #dce8f3;
}

/* Page loading ke time scroll disable */
body.ds-page-loading {
    overflow: hidden;
}

/* Main Preloader */
.ds-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at top right,
            rgba(72, 107, 147, 0.35),
            transparent 35%),
        radial-gradient(circle at bottom left,
            rgba(32, 75, 117, 0.35),
            transparent 40%),
        linear-gradient(135deg,
            #06121e 0%,
            #0b1f31 50%,
            #071522 100%);

    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

/* Hide class */
.ds-preloader.ds-preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Decorative background shapes */
.ds-preloader-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
    opacity: 0.25;
}

.ds-shape-one {
    top: -180px;
    right: -140px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    animation: dsShapeRotate 14s linear infinite;
}

.ds-shape-two {
    bottom: -220px;
    left: -160px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(72, 107, 147, 0.35);
    animation: dsShapeRotateReverse 18s linear infinite;
}

/* Content */
.ds-preloader-content {
    position: relative;
    z-index: 2;
    width: min(90%, 500px);
    text-align: center;
}

/* Logo Wrapper */
.ds-loader-logo-wrap {
    position: relative;
    width: 125px;
    height: 125px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animated ring */
.ds-loader-logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--ds-secondary);
    border-right-color: var(--ds-primary);
    animation: dsLogoRingRotate 1.8s linear infinite;
}

.ds-loader-logo-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: inherit;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    animation: dsLogoRingRotateReverse 3.5s linear infinite;
}

/* Logo */
.ds-loader-logo {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    animation: dsLogoPulse 2.2s ease-in-out infinite;
}

.ds-logo-main {
    display: block;
    font-family: "Bebas Neue", sans-serif;
    font-size: 43px;
    line-height: 0.9;
    letter-spacing: 2px;
    color: var(--ds-white);
}

.ds-logo-small {
    display: block;
    margin-top: 7px;
    font-family: "Inter", sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #a9c4de;
}

/* Billboard */
.ds-loader-billboard {
    position: relative;
    width: min(100%, 410px);
    height: 155px;
    margin: 0 auto 20px;
}

.ds-billboard-screen {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 92px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            rgba(32, 75, 117, 0.95),
            rgba(72, 107, 147, 0.8));
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Billboard light shine */
.ds-billboard-screen::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -70%;
    width: 50%;
    height: 200%;
    transform: rotate(25deg);
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.16),
            transparent);
    animation: dsBillboardShine 2.8s ease-in-out infinite;
}

.ds-billboard-label {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 18px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--ds-white);
}

/* Loading bar */
.ds-loading-bar {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
}

.ds-loading-progress {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,
            #ffffff,
            #b7d5ef,
            #ffffff);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    transition: width 0.2s ease;
}

/* Billboard stand */
.ds-billboard-pole {
    position: absolute;
    top: 88px;
    left: 50%;
    width: 11px;
    height: 50px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
            #23394b,
            #7890a4,
            #1b2c3b);
    border-radius: 0 0 4px 4px;
}

.ds-billboard-base {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 85px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    filter: blur(1px);
}

/* Status */
.ds-loader-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 410px);
    margin: 0 auto 28px;
    font-family: "Inter", sans-serif;
}

.ds-loader-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.ds-loader-percentage {
    min-width: 48px;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-white);
}

/* Animated Road */
.ds-loader-road {
    position: relative;
    width: min(100%, 410px);
    height: 44px;
    margin: 0 auto;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg,
            #111c25,
            #080f15);
    transform: perspective(220px) rotateX(52deg);
    transform-origin: center top;
}

/* Road center line */
.ds-loader-road::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(90deg,
            transparent 0,
            transparent 16px,
            rgba(255, 255, 255, 0.75) 16px,
            rgba(255, 255, 255, 0.75) 44px);
    background-size: 90px 100%;
    animation: dsRoadMove 0.75s linear infinite;
}

.ds-road-line {
    position: absolute;
    top: 50%;
    width: 55px;
    height: 2px;
    background: rgba(255, 255, 255, 0.82);
    transform: translateY(-50%);
}

.ds-line-one {
    left: -80px;
    animation: dsRoadLineMove 1.4s linear infinite;
}

.ds-line-two {
    left: -80px;
    animation: dsRoadLineMove 1.4s 0.35s linear infinite;
}

.ds-line-three {
    left: -80px;
    animation: dsRoadLineMove 1.4s 0.7s linear infinite;
}

.ds-line-four {
    left: -80px;
    animation: dsRoadLineMove 1.4s 1.05s linear infinite;
}

/* Animations */
@keyframes dsLogoRingRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes dsLogoRingRotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes dsLogoPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.32),
            0 0 0 rgba(72, 107, 147, 0);
    }

    50% {
        transform: scale(1.04);
        box-shadow:
            0 22px 55px rgba(0, 0, 0, 0.38),
            0 0 32px rgba(72, 107, 147, 0.28);
    }
}

@keyframes dsBillboardShine {
    0% {
        left: -70%;
    }

    55%,
    100% {
        left: 130%;
    }
}

@keyframes dsRoadMove {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: 90px;
    }
}

@keyframes dsRoadLineMove {
    from {
        left: -80px;
    }

    to {
        left: calc(100% + 80px);
    }
}

@keyframes dsShapeRotate {
    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.08);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes dsShapeRotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* Responsive */
@media (max-width: 576px) {
    .ds-preloader-content {
        width: calc(100% - 40px);
    }

    .ds-loader-logo-wrap {
        width: 105px;
        height: 105px;
        margin-bottom: 24px;
    }

    .ds-loader-logo {
        width: 78px;
        height: 78px;
        border-radius: 20px;
    }

    .ds-logo-main {
        font-size: 36px;
    }

    .ds-logo-small {
        font-size: 6px;
        letter-spacing: 1px;
    }

    .ds-loader-billboard {
        height: 145px;
    }

    .ds-billboard-screen {
        min-height: 84px;
        padding: 20px 18px;
    }

    .ds-billboard-label {
        font-size: 18px;
        letter-spacing: 1.5px;
    }

    .ds-loader-text {
        font-size: 9px;
        letter-spacing: 1.4px;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {

    .ds-loader-logo-ring,
    .ds-loader-logo-ring::before,
    .ds-loader-logo,
    .ds-billboard-screen::before,
    .ds-loader-road::before,
    .ds-road-line,
    .ds-preloader-bg-shape {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.ds-loader-logo-image {
    padding: 14px;
    overflow: hidden;
}

.ds-loader-logo-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}






button,
input,
select,
textarea {
    font-family: inherit;
}

a {
    text-decoration: none;
}


/* =========================================
   HERO MAIN
========================================= */

.ds-hero {
    position: relative;
    width: 100%;
    background: var(--ds-dark);
}

.ds-hero-slider {
    position: relative;
    width: 100%;
    height: calc(100vh - 40px);
    min-height: 720px;
    max-height: 980px;
    overflow: hidden;
    background: var(--ds-dark);
    isolation: isolate;
}


/* =========================================
   HERO PROGRESS
========================================= */

.ds-hero-progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.14);
}

.ds-hero-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,
            var(--ds-secondary),
            #9ec8ef,
            var(--ds-white));
    box-shadow: 0 0 18px rgba(158, 200, 239, 0.75);
}

.ds-hero-progress span.animate {
    animation: dsProgress 7s linear forwards;
}

@keyframes dsProgress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


/* =========================================
   HERO SLIDES
========================================= */

.ds-hero-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 1.1s ease,
        visibility 1.1s ease;
}

.ds-hero-slide.active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ds-hero-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ds-hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08);
    transition: transform 8s ease;
    will-change: transform;
}

.ds-hero-slide.active .ds-hero-background img {
    transform: scale(1);
}


/* =========================================
   OVERLAY
========================================= */

.ds-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(5, 17, 29, 0.96) 0%,
            rgba(7, 27, 45, 0.89) 35%,
            rgba(8, 31, 51, 0.55) 65%,
            rgba(5, 18, 30, 0.28) 100%),
        linear-gradient(180deg,
            rgba(5, 18, 30, 0.28) 0%,
            rgba(5, 18, 30, 0.08) 52%,
            rgba(5, 18, 30, 0.88) 100%);
}

.ds-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.16;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to right,
            black,
            transparent 75%);
}


/* =========================================
   HERO CONTAINER
========================================= */

.ds-hero-container {
    position: relative;
    z-index: 5;
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
    padding-top: 50px;
}

.ds-hero-content {
    width: min(820px, 70%);
    color: var(--ds-white);
}


/* =========================================
   HERO LABEL
========================================= */

.ds-hero-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    overflow: hidden;
    color: #cce4fa;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ds-label-line {
    display: inline-block;
    width: 46px;
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg,
            var(--ds-secondary),
            var(--ds-white));
}

.ds-hero-slide.active .ds-hero-label {
    animation: dsFadeUp 0.75s 0.15s both;
}


/* =========================================
   HERO TITLE
========================================= */

.ds-hero-title {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--ds-heading-font);
    font-size: clamp(58px, 6.2vw, 104px);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ds-hero-title span,
.ds-hero-title strong {
    display: block;
    overflow: hidden;
}

.ds-hero-title span {
    color: var(--ds-white);
    font-weight: 400;
}

.ds-hero-title strong {
    margin-top: 12px;
    color: transparent;
    font-weight: 400;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.86);
    text-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.ds-hero-slide.active .ds-hero-title span {
    animation: dsTitleReveal 0.9s 0.28s both;
}

.ds-hero-slide.active .ds-hero-title strong {
    animation: dsTitleReveal 0.9s 0.42s both;
}


/* =========================================
   HERO DESCRIPTION
========================================= */

.ds-hero-description {
    max-width: 670px;
    margin: 30px 0 0;
    color: var(--ds-light-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
}

.ds-hero-slide.active .ds-hero-description {
    animation: dsFadeUp 0.85s 0.58s both;
}


/* =========================================
   HERO BUTTONS
========================================= */

.ds-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.ds-hero-slide.active .ds-hero-actions {
    animation: dsFadeUp 0.85s 0.72s both;
}

.ds-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 58px;
    padding: 0 25px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-btn span,
.ds-btn i {
    position: relative;
    z-index: 2;
}

.ds-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -110%;
    width: 105%;
    height: 100%;
    background: rgba(255, 255, 255, 0.17);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

.ds-btn:hover::before {
    left: 110%;
}

.ds-btn:hover {
    transform: translateY(-4px);
}

.ds-btn-primary {
    color: var(--ds-white);
    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 35px rgba(32, 75, 117, 0.4);
}

.ds-btn-primary:hover {
    color: var(--ds-white);
    box-shadow: 0 20px 45px rgba(32, 75, 117, 0.56);
}

.ds-btn-outline {
    color: var(--ds-white);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
}

.ds-btn-outline:hover {
    color: var(--ds-dark);
    background: var(--ds-white);
    border-color: var(--ds-white);
}


/* =========================================
   MINI LINKS
========================================= */

.ds-hero-mini-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 28px;
}

.ds-hero-mini-actions a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.ds-hero-mini-actions a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 28px;
    height: 1px;
    background: var(--ds-white);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s ease;
}

.ds-hero-mini-actions a:hover {
    color: var(--ds-white);
}

.ds-hero-mini-actions a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.ds-hero-slide.active .ds-hero-mini-actions {
    animation: dsFadeUp 0.85s 0.86s both;
}


/* =========================================
   SLIDE NUMBER
========================================= */

.ds-slide-number {
    position: absolute;
    right: 65px;
    bottom: 148px;
    z-index: 7;
    display: flex;
    align-items: flex-end;
    color: var(--ds-white);
}

.ds-slide-number span {
    font-family: var(--ds-heading-font);
    font-size: 64px;
    line-height: 1;
}

.ds-slide-number small {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 2px;
}


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

.ds-slider-navigation {
    position: absolute;
    right: 60px;
    top: 50%;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transform: translateY(-50%);
}

.ds-slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
    color: var(--ds-white);
    background: rgba(7, 24, 39, 0.34);
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    backdrop-filter: blur(12px);
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.ds-slider-arrow:hover {
    color: var(--ds-dark);
    background: var(--ds-white);
    border-color: var(--ds-white);
    transform: scale(1.08);
}

.ds-slider-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
}

.ds-slider-dots button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 44px;
    height: 25px;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.48);
    background: transparent;
    border: 0;
    font-size: 11px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.ds-slider-dots button::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    width: 0;
    height: 1px;
    background: var(--ds-white);
    transform: translateY(-50%);
    transition: width 0.35s ease;
}

.ds-slider-dots button.active {
    color: var(--ds-white);
}

.ds-slider-dots button.active::before {
    width: 24px;
}


/* =========================================
   PLAY BUTTON
========================================= */

.ds-slider-play {
    position: absolute;
    right: 60px;
    bottom: 62px;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    cursor: pointer;
    color: var(--ds-white);
    background: rgba(7, 24, 39, 0.35);
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    backdrop-filter: blur(12px);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.ds-slider-play:hover {
    color: var(--ds-dark);
    background: var(--ds-white);
    transform: scale(1.08);
}


/* =========================================
   SCROLL INDICATOR
========================================= */

.ds-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 34px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.62);
    transform: translateX(-50%);
}

.ds-scroll-indicator small {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.ds-scroll-mouse {
    position: relative;
    width: 22px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
}

.ds-scroll-mouse span {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 3px;
    height: 7px;
    background: var(--ds-white);
    border-radius: 5px;
    transform: translateX(-50%);
    animation: dsMouseScroll 1.8s infinite;
}


/* =========================================
   HERO ANIMATIONS
========================================= */

@keyframes dsFadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dsTitleReveal {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dsMouseScroll {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}


/* =========================================
   STATS STRIP
========================================= */

.ds-hero-stats {
    position: relative;
    z-index: 25;
    width: 100%;
    background:
        linear-gradient(90deg,
            var(--ds-dark),
            var(--ds-navy),
            var(--ds-dark));
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 20px 60px rgba(4, 17, 28, 0.18);
}

.ds-stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
}

.ds-stat-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 125px;
    padding: 25px 20px;
}

.ds-stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28%;
    right: 0;
    width: 1px;
    height: 44%;
    background: rgba(255, 255, 255, 0.13);
}

.ds-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    color: #b8daf8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    font-size: 19px;
    transition:
        color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}

.ds-stat-item:hover .ds-stat-icon {
    color: var(--ds-primary);
    background: var(--ds-white);
    transform: translateY(-5px) rotate(-5deg);
}

.ds-stat-content {
    display: flex;
    flex-direction: column;
}

.ds-stat-content strong {
    color: var(--ds-white);
    font-family: var(--ds-heading-font);
    font-size: 33px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
}

.ds-stat-content>span {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* =========================================
   CAMPAIGN SEARCH SECTION
========================================= */

.ds-campaign-search {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            #f7fafc 0%,
            #edf4f9 50%,
            #f8fafc 100%);
}

.ds-search-container {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 0.72fr 1.65fr;
    align-items: center;
    gap: 65px;
    width: min(1320px, calc(100% - 80px));
    margin: 0 auto;
}

.ds-search-heading {
    position: relative;
}

.ds-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 19px;
    color: var(--ds-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ds-section-tag i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: var(--ds-white);
    background: var(--ds-primary);
    border-radius: 50%;
    font-size: 11px;
}

.ds-search-heading h2 {
    color: var(--ds-dark);
    font-family: var(--ds-heading-font);
    font-size: clamp(45px, 4.4vw, 66px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ds-search-heading h2 strong {
    display: block;
    color: var(--ds-primary);
    font-weight: 400;
}

.ds-search-heading p {
    max-width: 460px;
    margin-top: 20px;
    color: #5c6b78;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   SEARCH FORM
========================================= */

.ds-search-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 34px;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(32, 75, 117, 0.11);
    border-radius: 14px;
    box-shadow: var(--ds-shadow);
    backdrop-filter: blur(15px);
}

.ds-form-group {
    min-width: 0;
}

.ds-form-group label {
    display: block;
    margin: 0 0 9px 3px;
    color: #263b4d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.ds-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ds-select-wrapper>i:first-child {
    position: absolute;
    left: 17px;
    z-index: 2;
    color: var(--ds-primary);
    font-size: 14px;
    pointer-events: none;
}

.ds-select-wrapper select {
    width: 100%;
    height: 58px;
    padding: 0 43px 0 46px;
    cursor: pointer;
    appearance: none;
    color: #405364;
    background: #f7fafc;
    border: 1px solid #dce6ed;
    border-radius: 6px;
    outline: none;
    font-size: 12px;
    font-weight: 600;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-select-wrapper select:hover {
    background: var(--ds-white);
    border-color: rgba(32, 75, 117, 0.35);
}

.ds-select-wrapper select:focus {
    background: var(--ds-white);
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 4px rgba(32, 75, 117, 0.1);
}

.ds-select-arrow {
    position: absolute;
    right: 17px;
    color: #81909d;
    font-size: 10px;
    pointer-events: none;
}

.ds-form-submit {
    grid-column: 1 / -1;
}

.ds-search-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 66px;
    padding: 10px 13px 10px 23px;
    overflow: hidden;
    cursor: pointer;
    color: var(--ds-white);
    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    border: 0;
    border-radius: 6px;
    box-shadow: 0 15px 35px rgba(32, 75, 117, 0.24);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-search-submit span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
    font-weight: 800;
}

.ds-search-submit span small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ds-search-submit>i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    color: var(--ds-primary);
    background: var(--ds-white);
    border-radius: 5px;
    transition: transform 0.35s ease;
}

.ds-search-submit:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(32, 75, 117, 0.34);
}

.ds-search-submit:hover>i {
    transform: translateX(4px);
}


/* =========================================
   SEARCH BACKGROUND SHAPES
========================================= */

.ds-search-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

.ds-search-shape-one {
    top: -190px;
    right: -170px;
    width: 440px;
    height: 440px;
    background: rgba(72, 107, 147, 0.08);
}

.ds-search-shape-two {
    bottom: -200px;
    left: -170px;
    width: 390px;
    height: 390px;
    border: 80px solid rgba(32, 75, 117, 0.04);
}


/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .ds-hero-slider {
        min-height: 690px;
    }

    .ds-hero-container {
        width: min(100% - 100px, 1100px);
    }

    .ds-hero-content {
        width: 78%;
    }

    .ds-hero-title {
        font-size: clamp(55px, 7vw, 82px);
    }

    .ds-slider-navigation {
        right: 28px;
    }

    .ds-slider-play {
        right: 28px;
    }

    .ds-slide-number {
        right: 28px;
        bottom: 125px;
    }

    .ds-stats-container {
        width: min(100% - 40px, 1100px);
    }

    .ds-search-container {
        grid-template-columns: 1fr;
        gap: 40px;
        width: min(100% - 50px, 900px);
    }

    .ds-search-heading {
        max-width: 700px;
    }

    .ds-search-heading p {
        max-width: 650px;
    }

}


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

@media (max-width: 767px) {

    .ds-hero-slider {
        height: 780px;
        min-height: 780px;
        max-height: none;
    }

    .ds-hero-container {
        width: calc(100% - 38px);
        padding-top: 20px;
    }

    .ds-hero-content {
        width: 100%;
        padding-right: 0;
    }

    .ds-hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(5, 17, 29, 0.94),
                rgba(5, 21, 35, 0.72)),
            linear-gradient(180deg,
                rgba(4, 15, 25, 0.26),
                rgba(4, 15, 25, 0.92));
    }

    .ds-hero-pattern {
        background-size: 45px 45px;
    }

    .ds-hero-label {
        gap: 10px;
        margin-bottom: 19px;
        font-size: 9px;
        letter-spacing: 2px;
    }

    .ds-label-line {
        width: 30px;
    }

    .ds-hero-title {
        font-size: clamp(49px, 14vw, 68px);
        line-height: 0.96;
    }

    .ds-hero-title strong {
        margin-top: 8px;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);
    }

    .ds-hero-description {
        max-width: 95%;
        margin-top: 24px;
        font-size: 14px;
        line-height: 1.75;
    }

    .ds-hero-actions {
        align-items: stretch;
        flex-direction: column;
        margin-top: 30px;
    }

    .ds-btn {
        width: 100%;
        min-height: 55px;
        justify-content: space-between;
        padding: 0 20px;
    }

    .ds-hero-mini-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        margin-top: 24px;
    }

    .ds-slider-navigation {
        top: auto;
        right: auto;
        bottom: 83px;
        left: 19px;
        flex-direction: row;
        transform: none;
    }

    .ds-slider-dots {
        flex-direction: row;
        gap: 6px;
    }

    .ds-slider-dots button {
        justify-content: center;
        width: 32px;
    }

    .ds-slider-dots button::before {
        top: auto;
        right: auto;
        bottom: 0;
        width: 0;
    }

    .ds-slider-dots button.active::before {
        width: 19px;
    }

    .ds-slider-arrow {
        width: 41px;
        height: 41px;
    }

    .ds-slide-number {
        right: 19px;
        bottom: 83px;
    }

    .ds-slide-number span {
        font-size: 43px;
    }

    .ds-slider-play {
        right: 19px;
        bottom: 143px;
        width: 41px;
        height: 41px;
    }

    .ds-scroll-indicator {
        display: none;
    }

    .ds-stats-container {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .ds-stat-item {
        justify-content: flex-start;
        min-height: 108px;
        padding: 20px;
    }

    .ds-stat-item::after {
        display: none;
    }

    .ds-stat-item:nth-child(1),
    .ds-stat-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ds-stat-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ds-stat-icon {
        width: 43px;
        height: 43px;
        font-size: 15px;
    }

    .ds-stat-content strong {
        font-size: 27px;
    }

    .ds-stat-content>span {
        font-size: 8px;
        line-height: 1.5;
    }

    .ds-campaign-search {
        padding: 75px 0;
    }

    .ds-search-container {
        width: calc(100% - 30px);
        gap: 30px;
    }

    .ds-search-heading {
        text-align: center;
    }

    .ds-section-tag {
        justify-content: center;
    }

    .ds-search-heading h2 {
        font-size: clamp(42px, 13vw, 58px);
    }

    .ds-search-heading p {
        font-size: 13px;
    }

    .ds-search-form {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px 17px;
        border-radius: 10px;
    }

    .ds-form-submit {
        grid-column: auto;
    }

}


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

@media (max-width: 480px) {

    .ds-hero-slider {
        height: 750px;
        min-height: 750px;
    }

    .ds-hero-container {
        width: calc(100% - 30px);
    }

    .ds-hero-title {
        font-size: clamp(43px, 13vw, 56px);
    }

    .ds-hero-description {
        font-size: 13px;
    }

    .ds-hero-mini-actions {
        display: none;
    }

    .ds-stat-item {
        gap: 10px;
        padding: 17px 12px;
    }

    .ds-stat-icon {
        width: 39px;
        height: 39px;
    }

    .ds-stat-content strong {
        font-size: 24px;
    }

}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* =====================================
   CONTACT US NAVIGATION BUTTON
===================================== */

.ds-nav-contact {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 7px 8px 7px 20px;
    border: 1px solid rgba(32, 75, 117, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.95);
    color: #204b75;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 8px 24px rgba(32, 75, 117, 0.12);
    transition:
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.ds-nav-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, #204b75, #486b93);
    transform: translateX(-102%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ds-nav-contact-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #204b75, #486b93);
    color: #ffffff;
    font-size: 12px;
    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.ds-nav-contact:hover,
.ds-nav-contact.active {
    color: #ffffff;
    border-color: #204b75;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(32, 75, 117, 0.24);
}

.ds-nav-contact:hover::before,
.ds-nav-contact.active::before {
    transform: translateX(0);
}

.ds-nav-contact:hover .ds-nav-contact-icon,
.ds-nav-contact.active .ds-nav-contact-icon {
    background: #ffffff;
    color: #204b75;
    transform: rotate(8deg);
}

.ds-nav-contact:focus-visible {
    outline: 3px solid rgba(32, 75, 117, 0.25);
    outline-offset: 4px;
}

/* Mobile navigation */

@media (max-width: 991px) {
    .ds-nav-contact {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
        padding: 8px 8px 8px 18px;
    }
}


/* =====================================
   DS OUTDOOR MEDIA CONTACT PAGE
===================================== */



.ds-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

/* Section label */

.ds-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ds-section-label span {
    width: 35px;
    height: 2px;
    background: var(--ds-primary);
}

.ds-section-label-light {
    color: rgba(255, 255, 255, 0.7);
}

.ds-section-label-light span {
    background: rgba(255, 255, 255, 0.6);
}

/* =====================================
   HERO
===================================== */

.ds-contact-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg,
            rgba(7, 27, 45, 0.97) 0%,
            rgba(16, 43, 69, 0.92) 55%,
            rgba(32, 75, 117, 0.78) 100%),
        url("../images/contact-banner.jpg") center / cover no-repeat;
}

.ds-contact-hero::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -100px;
    z-index: -1;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
}

.ds-contact-hero::after {
    content: "";
    position: absolute;
    right: 100px;
    bottom: -280px;
    z-index: -1;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.ds-contact-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.25) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.25) 1px,
            transparent 1px);
    background-size: 65px 65px;
    mask-image: linear-gradient(to right, black, transparent);
}

.ds-contact-hero-content {
    max-width: 760px;
    padding-block: 100px;
}

.ds-contact-hero-content .ds-section-label {
    color: rgba(255, 255, 255, 0.72);
}

.ds-contact-hero-content .ds-section-label span {
    background: rgba(255, 255, 255, 0.65);
}

.ds-contact-hero h1 {
    margin: 0;
    max-width: 750px;
    color: var(--ds-white);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(54px, 7vw, 88px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.5px;
}

.ds-contact-hero h1 strong {
    display: block;
    color: #9abbd8;
    font-weight: 400;
}

.ds-contact-hero p {
    max-width: 680px;
    margin: 25px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.8;
}

.ds-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    font-size: 13px;
    font-weight: 600;
}

.ds-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.3s ease;
}

.ds-breadcrumb a:hover {
    color: var(--ds-white);
}

.ds-breadcrumb i {
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
}

.ds-breadcrumb span {
    color: var(--ds-white);
}

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

.ds-contact-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at 10% 15%,
            rgba(72, 107, 147, 0.08),
            transparent 25%),
        var(--ds-background);
}

.ds-contact-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(500px, 1.22fr);
    overflow: hidden;
    border-radius: 24px;
    background: var(--ds-white);
    box-shadow: var(--ds-shadow);
}

/* Contact information */

.ds-contact-information {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 55px 45px;
    overflow: hidden;
    color: var(--ds-white);
    background:
        linear-gradient(150deg,
            rgba(8, 28, 46, 0.98),
            rgba(32, 75, 117, 0.97));
}

.ds-contact-information::before {
    content: "";
    position: absolute;
    right: -170px;
    bottom: -180px;
    width: 420px;
    height: 420px;
    border: 70px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.ds-contact-information::after {
    content: "";
    position: absolute;
    top: 45px;
    right: 35px;
    width: 90px;
    height: 90px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
}

.ds-info-heading,
.ds-contact-details,
.ds-contact-social {
    position: relative;
    z-index: 1;
}

.ds-info-heading h2 {
    margin: 0;
    color: var(--ds-white);
    font-family: "Bebas Neue", sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.5px;
}

.ds-info-heading p {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.8;
}

.ds-contact-details {
    display: grid;
    gap: 12px;
    margin-top: 42px;
}

.ds-contact-detail-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--ds-white);
    text-decoration: none;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

a.ds-contact-detail-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.ds-detail-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--ds-white);
}

.ds-detail-content {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.ds-detail-content small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.ds-detail-content strong {
    overflow: hidden;
    color: var(--ds-white);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-overflow: ellipsis;
}

.ds-detail-arrow {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    transition: transform 0.3s ease;
}

a.ds-contact-detail-card:hover .ds-detail-arrow {
    transform: translateX(4px);
}

.ds-contact-social {
    margin-top: auto;
    padding-top: 40px;
}

.ds-contact-social>span {
    display: block;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.ds-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ds-social-links a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: var(--ds-white);
    text-decoration: none;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.ds-social-links a:hover {
    background: var(--ds-white);
    color: var(--ds-primary);
    transform: translateY(-3px);
}

/* Form card */

.ds-contact-form-card {
    padding: 55px 50px;
    background: var(--ds-white);
}

.ds-form-heading {
    display: flex;
    gap: 20px;
    margin-bottom: 38px;
}

.ds-form-number {
    color: rgba(32, 75, 117, 0.18);
    font-family: "Bebas Neue", sans-serif;
    font-size: 58px;
    line-height: 0.9;
}

.ds-form-heading>div>span {
    display: block;
    margin-bottom: 8px;
    color: var(--ds-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ds-form-heading h2 {
    margin: 0;
    color: var(--ds-heading);
    font-family: "Bebas Neue", sans-serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.05;
}

.ds-form-heading p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.7;
}

/* Form */

.ds-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
}

.ds-form-group {
    position: relative;
    min-width: 0;
}

.ds-form-group-full {
    grid-column: 1 / -1;
}

.ds-form-group label {
    display: block;
    margin-bottom: 9px;
    color: var(--ds-heading);
    font-size: 12px;
    font-weight: 700;
}

.ds-form-group label span {
    color: #d9534f;
}

.ds-input-wrapper {
    position: relative;
}

.ds-input-wrapper>i {
    position: absolute;
    top: 50%;
    left: 17px;
    z-index: 1;
    color: #8ea1b2;
    font-size: 13px;
    transform: translateY(-50%);
    pointer-events: none;
}

.ds-input-wrapper input,
.ds-input-wrapper select,
.ds-input-wrapper textarea {
    width: 100%;
    min-height: 54px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    outline: none;
    background: #fbfcfd;
    color: var(--ds-heading);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-input-wrapper input,
.ds-input-wrapper select {
    padding: 0 43px 0 45px;
}

.ds-input-wrapper textarea {
    min-height: 145px;
    padding: 17px 18px 17px 45px;
    resize: vertical;
    line-height: 1.7;
}

.ds-input-wrapper input::placeholder,
.ds-input-wrapper textarea::placeholder {
    color: #a4b1bd;
}

.ds-input-wrapper input:focus,
.ds-input-wrapper select:focus,
.ds-input-wrapper textarea:focus {
    border-color: var(--ds-secondary);
    background: var(--ds-white);
    box-shadow: 0 0 0 4px rgba(72, 107, 147, 0.1);
}

.ds-select-wrapper::after {
    content: "\f078";
    position: absolute;
    top: 50%;
    right: 17px;
    color: #8ea1b2;
    font-family: "Font Awesome 6 Free";
    font-size: 10px;
    font-weight: 900;
    transform: translateY(-50%);
    pointer-events: none;
}

.ds-select-wrapper select {
    appearance: none;
    cursor: pointer;
}

.ds-textarea-wrapper>i {
    top: 20px;
    transform: none;
}

.ds-character-count {
    display: block;
    margin-top: 7px;
    color: #96a3af;
    font-size: 10px;
    text-align: right;
}

.ds-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 25px;
    color: var(--ds-text);
    font-size: 11px;
    line-height: 1.65;
    cursor: pointer;
}

.ds-consent input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ds-custom-checkbox {
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1px solid var(--ds-border);
    border-radius: 5px;
    background: var(--ds-white);
    color: transparent;
    font-size: 9px;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.ds-consent input:checked+.ds-custom-checkbox {
    border-color: var(--ds-primary);
    background: var(--ds-primary);
    color: var(--ds-white);
}

.ds-submit-button {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 28px;
    padding: 7px 8px 7px 24px;
    border: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--ds-primary), var(--ds-secondary));
    color: var(--ds-white);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(32, 75, 117, 0.22);
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}

.ds-submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 35px rgba(32, 75, 117, 0.3);
}

.ds-submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.ds-submit-icon {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    transition: transform 0.3s ease;
}

.ds-submit-button:hover .ds-submit-icon {
    transform: translateX(3px);
}

.ds-submit-button.is-loading .ds-submit-icon i {
    animation: dsSpin 0.8s linear infinite;
}

.ds-submit-button.is-loading .ds-submit-icon i::before {
    content: "\f110";
}

@keyframes dsSpin {
    to {
        transform: rotate(360deg);
    }
}

.ds-form-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    color: #8a9aa8;
    font-size: 10px;
    text-align: center;
}

.ds-form-privacy i {
    color: var(--ds-primary);
}

/* Hidden anti-spam field */

.ds-hidden-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Form messages */

.ds-form-message {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding: 18px 20px;
    border-radius: 12px;
    font-size: 13px;
}

.ds-form-message>i {
    margin-top: 2px;
    font-size: 20px;
}

.ds-form-message>div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ds-form-success {
    border: 1px solid rgba(22, 134, 92, 0.2);
    background: rgba(22, 134, 92, 0.08);
    color: var(--ds-success);
}

.ds-form-error {
    border: 1px solid rgba(195, 59, 59, 0.2);
    background: rgba(195, 59, 59, 0.08);
    color: var(--ds-error);
}

/* =====================================
   MAP
===================================== */

.ds-map-section {
    padding: 0 0 110px;
    background: var(--ds-background);
}

.ds-map-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.ds-map-heading h2 {
    margin: 0;
    color: var(--ds-heading);
    font-family: "Bebas Neue", sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
}

.ds-map-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid var(--ds-border);
    border-radius: 50px;
    background: var(--ds-white);
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.ds-map-button:hover {
    border-color: var(--ds-primary);
    transform: translateY(-2px);
}

.ds-map-frame {
    overflow: hidden;
    padding: 8px;
    border: 1px solid var(--ds-border);
    border-radius: 22px;
    background: var(--ds-white);
    box-shadow: 0 18px 50px rgba(16, 43, 69, 0.1);
}

.ds-map-frame iframe {
    display: block;
    border-radius: 15px;
    filter: saturate(0.85) contrast(1.03);
}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 1050px) {
    .ds-contact-layout {
        grid-template-columns: 1fr;
    }

    .ds-contact-information {
        min-height: auto;
    }

    .ds-contact-social {
        margin-top: 35px;
    }
}

@media (max-width: 767px) {
    .ds-container {
        width: min(100% - 28px, 1180px);
    }

    .ds-contact-hero {
        min-height: 430px;
    }

    .ds-contact-hero-content {
        padding-block: 80px;
    }

    .ds-contact-hero h1 {
        font-size: 52px;
    }

    .ds-contact-hero p {
        font-size: 14px;
    }

    .ds-contact-section {
        padding: 70px 0;
    }

    .ds-contact-layout {
        border-radius: 18px;
    }

    .ds-contact-information,
    .ds-contact-form-card {
        padding: 38px 25px;
    }

    .ds-info-heading h2 {
        font-size: 40px;
    }

    .ds-form-heading {
        gap: 12px;
    }

    .ds-form-number {
        font-size: 45px;
    }

    .ds-form-heading h2 {
        font-size: 36px;
    }

    .ds-form-grid {
        grid-template-columns: 1fr;
    }

    .ds-form-group-full {
        grid-column: auto;
    }

    .ds-map-section {
        padding-bottom: 70px;
    }

    .ds-map-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ds-map-heading h2 {
        font-size: 40px;
    }

    .ds-map-frame iframe {
        height: 360px;
    }
}

@media (max-width: 480px) {
    .ds-contact-hero h1 {
        font-size: 44px;
    }

    .ds-contact-information,
    .ds-contact-form-card {
        padding: 32px 18px;
    }

    .ds-detail-content strong {
        font-size: 12px;
    }

    .ds-form-heading h2 {
        font-size: 32px;
    }

    .ds-submit-button {
        padding-left: 19px;
        font-size: 12px;
    }
}


/* =================================
   ABOUT DS OUTDOOR MEDIA
================================= */



.ds-about-section {
    position: relative;
    padding: 120px 20px;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f6f9fc 54%,
            #edf4f9 100%);
    isolation: isolate;
}

.ds-about-container {
    position: relative;
    z-index: 2;
    width: min(100%, 1320px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 90px;
}

/* Background decorations */

.ds-about-shape {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.ds-about-shape-one {
    width: 450px;
    height: 450px;
    top: -190px;
    right: -150px;
    background: rgba(72, 107, 147, 0.09);
}

.ds-about-shape-two {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -120px;
    border: 55px solid rgba(32, 75, 117, 0.05);
}

/* =================================
   LEFT IMAGE
================================= */

.ds-about-visual {
    position: relative;
}

.ds-about-image-card {
    position: relative;
    max-width: 680px;
    padding: 18px 18px 0 0;
}

.ds-about-image-card::before {
    content: "";
    position: absolute;
    inset: 54px -18px -24px 58px;
    z-index: -1;
    border: 1px solid rgba(32, 75, 117, 0.15);
    border-radius: 6px 42px 6px 42px;
}

.ds-about-image-wrapper {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    border-radius: 6px 46px 6px 46px;
    background: var(--ds-primary);
    box-shadow: var(--ds-shadow);
}

.ds-about-image {
    display: block;
    width: 100%;
    height: 590px;
    object-fit: cover;
    object-position: center;
    transition:
        transform 1.1s cubic-bezier(0.2, 0.75, 0.25, 1),
        filter 0.6s ease;
}

.ds-about-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(7, 25, 41, 0.04) 30%,
            rgba(7, 25, 41, 0.82) 100%),
        linear-gradient(90deg,
            rgba(32, 75, 117, 0.1),
            transparent 60%);
    transition: background 0.5s ease;
}

.ds-about-image-card:hover .ds-about-image {
    transform: scale(1.055);
    filter: saturate(1.06);
}

.ds-about-image-card:hover .ds-about-image-overlay {
    background:
        linear-gradient(180deg,
            rgba(7, 25, 41, 0.01) 25%,
            rgba(7, 25, 41, 0.75) 100%);
}

/* Image bottom text */

.ds-about-image-info {
    position: absolute;
    left: 38px;
    right: 38px;
    bottom: 34px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.ds-about-image-info span {
    color: rgba(255, 255, 255, 0.72);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.8px;
    line-height: 1.5;
    text-transform: uppercase;
}

.ds-about-image-info strong {
    max-width: 230px;
    color: var(--ds-white);
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 1.3px;
    line-height: 1.05;
    text-align: right;
}

/* Floating badge */

.ds-about-badge {
    position: absolute;
    top: 54px;
    right: -34px;
    z-index: 4;
    min-width: 245px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px 22px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px 20px 4px 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(11, 35, 54, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: dsBadgeFloat 4s ease-in-out infinite;
}

.ds-about-badge-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ds-white);
    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 10px 22px rgba(32, 75, 117, 0.25);
}

.ds-about-badge-icon svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.ds-about-badge-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ds-about-badge-content span {
    color: var(--ds-secondary);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ds-about-badge-content strong {
    color: var(--ds-heading);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.ds-about-image-line {
    position: absolute;
    left: -24px;
    bottom: 68px;
    z-index: 3;
    width: 7px;
    height: 110px;
    border-radius: 20px;
    background:
        linear-gradient(to bottom,
            var(--ds-primary),
            var(--ds-secondary));
}

@keyframes dsBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* =================================
   RIGHT CONTENT
================================= */

.ds-about-content {
    position: relative;
}

.ds-about-label {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 19px;
    color: var(--ds-primary);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.4px;
    line-height: 1.4;
    text-transform: uppercase;
}

.ds-about-label-line {
    width: 43px;
    height: 2px;
    position: relative;
    overflow: hidden;
    background: rgba(32, 75, 117, 0.22);
}

.ds-about-label-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--ds-primary);
    animation: dsLabelLine 2.8s ease-in-out infinite;
}

@keyframes dsLabelLine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 100%;
    }
}

.ds-about-heading {
    max-width: 650px;
    margin: 0 0 27px;
    color: var(--ds-heading);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 0.99;
}

.ds-about-heading span {
    display: block;
    color: var(--ds-primary);
}

.ds-about-description {
    max-width: 640px;
    margin-bottom: 33px;
}

.ds-about-description p {
    margin: 0;
    color: var(--ds-text);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
}

.ds-about-description p+p {
    margin-top: 15px;
}

/* Points */

.ds-about-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 18px;
    margin-bottom: 39px;
}

.ds-about-point {
    position: relative;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: 4px 16px 4px 16px;
    background: rgba(255, 255, 255, 0.72);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.ds-about-point::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background:
        linear-gradient(135deg,
            rgba(32, 75, 117, 0.06),
            rgba(72, 107, 147, 0.03));
    transition: opacity 0.35s ease;
}

.ds-about-point:hover {
    transform: translateY(-5px);
    border-color: rgba(32, 75, 117, 0.3);
    background: var(--ds-white);
    box-shadow: 0 15px 35px rgba(32, 75, 117, 0.1);
}

.ds-about-point:hover::before {
    opacity: 1;
}

.ds-about-point-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ds-white);
    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 7px 16px rgba(32, 75, 117, 0.2);
    transition: transform 0.35s ease;
}

.ds-about-point:hover .ds-about-point-icon {
    transform: rotate(-8deg) scale(1.08);
}

.ds-about-point-icon svg {
    width: 17px;
    height: 17px;
}

.ds-about-point>span:last-child {
    position: relative;
    z-index: 1;
    color: var(--ds-heading);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

/* Button */

.ds-about-action {
    display: flex;
    align-items: center;
}

.ds-about-button {
    position: relative;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 7px 8px 7px 27px;
    overflow: hidden;
    border-radius: 3px 19px 3px 19px;
    color: var(--ds-white);
    background: var(--ds-primary);
    box-shadow: 0 14px 30px rgba(32, 75, 117, 0.22);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    isolation: isolate;
}

.ds-about-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateX(-102%);
    background:
        linear-gradient(135deg,
            var(--ds-secondary),
            var(--ds-dark));
    transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.ds-about-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(32, 75, 117, 0.3);
}

.ds-about-button:hover::before {
    transform: translateX(0);
}

.ds-about-button-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 3px 14px 3px 14px;
    color: var(--ds-primary);
    background: var(--ds-white);
    transition:
        transform 0.35s ease,
        color 0.35s ease;
}

.ds-about-button-icon svg {
    width: 20px;
    height: 20px;
}

.ds-about-button:hover .ds-about-button-icon {
    transform: translateX(3px);
    color: var(--ds-secondary);
}

/* =================================
   RESPONSIVE
================================= */

@media (max-width: 1100px) {
    .ds-about-section {
        padding: 100px 20px;
    }

    .ds-about-container {
        gap: 55px;
    }

    .ds-about-image-wrapper,
    .ds-about-image {
        min-height: 520px;
        height: 520px;
    }

    .ds-about-badge {
        right: -15px;
    }

    .ds-about-points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .ds-about-container {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .ds-about-visual {
        max-width: 720px;
        margin: 0 auto;
    }

    .ds-about-image-card {
        max-width: 100%;
    }

    .ds-about-content {
        max-width: 720px;
        margin: 0 auto;
    }

    .ds-about-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ds-about-section {
        padding: 75px 16px;
    }

    .ds-about-container {
        gap: 58px;
    }

    .ds-about-image-card {
        padding: 8px 8px 0 0;
    }

    .ds-about-image-card::before {
        inset: 38px -8px -15px 30px;
        border-radius: 4px 25px 4px 25px;
    }

    .ds-about-image-wrapper {
        min-height: 430px;
        border-radius: 4px 28px 4px 28px;
    }

    .ds-about-image {
        height: 430px;
    }

    .ds-about-badge {
        top: 24px;
        right: -5px;
        min-width: auto;
        padding: 12px 15px;
        border-radius: 4px 15px 4px 15px;
    }

    .ds-about-badge-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
    }

    .ds-about-badge-content strong {
        font-size: 12px;
    }

    .ds-about-image-info {
        left: 22px;
        right: 22px;
        bottom: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ds-about-image-info strong {
        font-size: 24px;
        text-align: left;
    }

    .ds-about-image-line {
        left: -11px;
        bottom: 45px;
        width: 5px;
        height: 80px;
    }

    .ds-about-heading {
        margin-bottom: 22px;
        font-size: clamp(45px, 15vw, 61px);
    }

    .ds-about-description p {
        font-size: 15px;
        line-height: 1.75;
    }

    .ds-about-points {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ds-about-button {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 420px) {
    .ds-about-badge {
        left: 15px;
        right: 15px;
        justify-content: center;
    }

    .ds-about-image-wrapper,
    .ds-about-image {
        min-height: 390px;
        height: 390px;
    }

    .ds-about-label {
        font-size: 10px;
        letter-spacing: 1.8px;
    }
}

/* Accessibility */

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

    .ds-about-badge,
    .ds-about-label-line::after {
        animation: none;
    }

    .ds-about-image,
    .ds-about-point,
    .ds-about-button,
    .ds-about-button::before,
    .ds-about-point-icon {
        transition: none;
    }
}

/* =========================================
   DS STATISTICS SECTION
========================================= */

.ds-number-section,
.ds-number-section *,
.ds-number-section *::before,
.ds-number-section *::after {
    box-sizing: border-box;
}

.ds-number-section {
    --ds-primary: #204b75;
    --ds-secondary: #486b93;
    --ds-light-blue: #9bb7d5;
    --ds-dark: #071827;
    --ds-dark-two: #102b42;
    --ds-white: #ffffff;
    --ds-text: #b6c5d2;

    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 110px 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 10%,
            rgba(72, 107, 147, 0.23),
            transparent 38%),
        linear-gradient(135deg,
            var(--ds-dark) 0%,
            var(--ds-dark-two) 55%,
            #0b2133 100%);
    isolation: isolate;
}

/* Background Grid */

.ds-number-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px);
    background-size: 55px 55px;
}

/* Decorative Circles */

.ds-number-decoration {
    position: absolute;
    z-index: -2;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.ds-number-decoration-left {
    top: -80px;
    left: -120px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(155, 183, 213, 0.12);
}

.ds-number-decoration-right {
    right: -120px;
    bottom: -150px;
    width: 380px;
    height: 380px;
    background: rgba(32, 75, 117, 0.15);
    filter: blur(3px);
}

/* Main Container */

.ds-number-container {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 1320px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
}

/* Heading */

.ds-number-heading {
    display: block;
    width: 100%;
    max-width: 780px;
    margin: 0 auto 58px;
    text-align: center;
}

.ds-number-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--ds-light-blue);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ds-number-label span {
    display: block;
    width: 34px;
    height: 1px;
    flex: 0 0 34px;
    background: rgba(155, 183, 213, 0.5);
}

.ds-number-heading h2 {
    display: block;
    width: 100%;
    margin: 0;
    color: var(--ds-white);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.ds-number-heading h2 strong {
    display: block;
    color: #91afd0;
    font: inherit;
}

.ds-number-heading p {
    display: block;
    width: 100%;
    max-width: 670px;
    margin: 24px auto 0;
    color: var(--ds-text);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    text-align: center;
}

/* Statistics Grid */

.ds-number-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    gap: 22px;
}

/* Statistics Card */

.ds-number-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 370px;
    margin: 0 !important;
    padding: 30px 26px 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px 8px 28px 8px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.035));
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}

.ds-number-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 80%;
    height: 100%;
    opacity: 0;
    transform: skewX(-20deg);
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition:
        left 0.75s ease,
        opacity 0.75s ease;
}

.ds-number-card::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -70px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(72, 107, 147, 0.16);
    transition: transform 0.4s ease;
}

.ds-number-card:hover {
    transform: translateY(-10px);
    border-color: rgba(145, 175, 208, 0.52);
    background:
        linear-gradient(145deg,
            rgba(32, 75, 117, 0.42),
            rgba(255, 255, 255, 0.04));
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.3);
}

.ds-number-card:hover::before {
    left: 140%;
    opacity: 1;
}

.ds-number-card:hover::after {
    transform: scale(1.25);
}

/* Card Top */

.ds-number-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
}

.ds-number-counter {
    display: inline-block;
    min-width: 0;
    color: var(--ds-white);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(58px, 5vw, 76px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ds-number-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(155, 183, 213, 0.25);
    border-radius: 50%;
    color: var(--ds-light-blue);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

/* Icon */

.ds-number-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    margin: 38px 0 24px;
    border: 1px solid rgba(155, 183, 213, 0.28);
    border-radius: 18px 5px 18px 5px;
    color: #a9c2dd;
    font-size: 22px;
    background: rgba(32, 75, 117, 0.27);
    transition:
        transform 0.4s ease,
        color 0.4s ease,
        background 0.4s ease;
}

.ds-number-card:hover .ds-number-icon {
    color: var(--ds-white);
    background: var(--ds-primary);
    transform: rotate(-5deg) scale(1.07);
}

/* Card Content */

.ds-number-card h3 {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin: 0 0 12px;
    color: var(--ds-white);
    font-family: "Inter", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: normal;
}

.ds-number-card p {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin: 0;
    color: var(--ds-text);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Bottom Animated Line */

.ds-number-card>p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -32px;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--ds-primary),
            var(--ds-light-blue));
    transition: width 0.45s ease;
}

.ds-number-card:hover>p::after {
    width: 100%;
}

/* =========================================
   TABLET RESPONSIVE
========================================= */

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

    .ds-number-section {
        padding: 90px 20px;
    }

    .ds-number-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ds-number-card {
        min-height: 340px;
    }
}

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

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

    .ds-number-section {
        padding: 75px 16px;
    }

    .ds-number-heading {
        margin-bottom: 40px;
    }

    .ds-number-heading h2 {
        font-size: clamp(42px, 13vw, 54px);
        line-height: 1;
    }

    .ds-number-heading p {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.7;
    }

    .ds-number-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .ds-number-card {
        min-height: auto;
        padding: 26px 23px 32px;
    }

    .ds-number-icon {
        margin-top: 30px;
    }

    .ds-number-counter {
        font-size: 64px;
    }
}

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

    .ds-number-section {
        padding: 65px 14px;
    }

    .ds-number-label {
        gap: 9px;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .ds-number-label span {
        width: 20px;
        flex-basis: 20px;
    }

    .ds-number-card h3 {
        font-size: 18px;
    }

    .ds-number-card p {
        font-size: 13px;
    }
}

/* Accessibility */

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

    .ds-number-card,
    .ds-number-card::before,
    .ds-number-card::after,
    .ds-number-icon,
    .ds-number-card>p::after {
        transition: none;
    }
}


/* =========================================
   MEDIA SOLUTIONS CAROUSEL - LIGHT THEME
========================================= */

.ds-media-solutions {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background:
        radial-gradient(circle at 92% 8%,
            rgba(72, 107, 147, 0.12),
            transparent 32%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f5f8fb 100%);
    isolation: isolate;
}

/* Decorative circles */

.ds-media-solutions::before {
    content: "";
    position: absolute;
    top: -190px;
    right: -130px;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(32, 75, 117, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.ds-media-solutions::after {
    content: "";
    position: absolute;
    left: -160px;
    bottom: -240px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(72, 107, 147, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.ds-media-container {
    position: relative;
    z-index: 2;
    width: min(100% - 40px, 1380px);
    margin-inline: auto;
}

/* =========================================
   SECTION HEADING
========================================= */

.ds-media-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    align-items: end;
    gap: 70px;
    margin-bottom: 52px;
}

.ds-section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #204b75;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.ds-section-label>span {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 2px;
    background: #204b75;
}

.ds-section-label>span::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #486b93;
    transform: translateY(-50%);
    box-shadow: 0 0 0 5px rgba(72, 107, 147, 0.12);
}

/* Main heading */

.ds-media-heading h2 {
    max-width: 820px;
    margin: 0;
    color: #172a3a;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(46px, 5.5vw, 82px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.5px;
}

.ds-media-heading h2 strong {
    display: block;
    color: #204b75;
    font-weight: 400;
    -webkit-text-stroke: 0;
}

.ds-media-heading-right {
    padding-bottom: 7px;
}

.ds-media-heading-right p {
    max-width: 510px;
    margin: 0 0 28px;
    color: #64717b;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
}

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

.ds-slider-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ds-slider-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    overflow: hidden;
    color: #204b75;
    font-size: 15px;
    border: 1px solid rgba(32, 75, 117, 0.2);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(32, 75, 117, 0.1);
    cursor: pointer;
    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-slider-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #204b75;
    transform: scale(0);
    transition: transform 0.35s ease;
}

.ds-slider-arrow i {
    position: relative;
    z-index: 2;
}

.ds-slider-arrow:hover {
    color: #ffffff;
    border-color: #204b75;
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(32, 75, 117, 0.22);
}

.ds-slider-arrow:hover::before {
    transform: scale(1);
}

.ds-slider-arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================
   SWIPER SLIDER
========================================= */

.media-slider {
    position: relative;
    overflow: hidden;
}

/* Content */
.slider-content {
    width: calc(100% - 170px);
    /* arrows ke liye space */
    padding-right: 40px;
    position: relative;
    z-index: 2;
}

/* Navigation */
.slider-navigation {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 10;
}

/* Buttons */

.slider-navigation button {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: none;
    background: #fff;
    cursor: pointer;

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

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .12);

    transition: .35s;
}

.slider-navigation button:hover {
    transform: translateX(-6px);
}

.slider-navigation i {
    font-size: 22px;
    color: #204b75;
}

@media(max-width:991px) {

    .media-slider {
        padding-bottom: 120px;
    }

    /* Content full width */

    .slider-content {
        width: 100%;
        padding-right: 0;
    }

    /* Buttons bottom me aa jayenge */

    .slider-navigation {

        position: absolute;

        left: 50%;
        right: auto;

        top: auto;
        bottom: 25px;

        transform: translateX(-50%);

        flex-direction: row;

        gap: 18px;
    }

    .slider-navigation button {

        width: 58px;
        height: 58px;
    }

    .slider-navigation i {
        font-size: 18px;
    }

}

@media(max-width:576px) {

    .slider-content h2 {

        font-size: 32px;
        line-height: 1.25;
    }

    .slider-content p {

        font-size: 15px;
        line-height: 1.8;
    }

    .slider-navigation {

        bottom: 18px;
    }

    .slider-navigation button {

        width: 52px;
        height: 52px;
    }

}

.ds-media-slider .swiper-slide {
    height: auto;
}

/* =========================================
   MEDIA CARDS
========================================= */

.ds-media-card,
.ds-media-card>a,
.ds-media-image {
    height: 100%;
}

.ds-media-card {
    position: relative;
    min-height: 520px;
}

.ds-media-card>a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ds-media-image {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(32, 75, 117, 0.12);
    border-radius: 8px;
    background: #eaf0f5;
    box-shadow: 0 20px 45px rgba(23, 42, 58, 0.14);
    isolation: isolate;
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.ds-media-image::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.38);
    pointer-events: none;
    transition:
        inset 0.45s ease,
        border-color 0.45s ease;
}

.ds-media-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    z-index: 4;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transform: skewX(-18deg);
    transition: left 0.75s ease;
}

.ds-media-image img {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition:
        transform 0.9s cubic-bezier(0.2, 0.65, 0.25, 1),
        filter 0.6s ease;
}

/* Dark overlay only on image */

.ds-media-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
            rgba(5, 15, 24, 0.05) 0%,
            rgba(5, 15, 24, 0.18) 35%,
            rgba(5, 15, 24, 0.92) 100%);
    transition: background 0.5s ease;
}

/* Category */

.ds-media-category {
    position: absolute;
    top: 34px;
    left: 34px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(23, 42, 58, 0.5);
    backdrop-filter: blur(10px);
}

/* Number */

.ds-media-number {
    position: absolute;
    top: 22px;
    right: 28px;
    z-index: 6;
    color: rgba(255, 255, 255, 0.2);
    font-family: "Bebas Neue", sans-serif;
    font-size: 74px;
    font-weight: 400;
    line-height: 1;
    transition:
        color 0.4s ease,
        transform 0.4s ease;
}

/* Card content */

.ds-media-content {
    position: absolute;
    right: 34px;
    bottom: 34px;
    left: 34px;
    z-index: 6;
    transform: translateY(20px);
    transition: transform 0.5s cubic-bezier(0.2, 0.65, 0.25, 1);
}

.ds-media-content h3 {
    margin: 0 0 14px;
    color: #ffffff;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(31px, 2.8vw, 44px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.5px;
}

.ds-media-content p {
    max-width: 410px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.78);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.75;
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

/* View details */

.ds-media-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.ds-media-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #204b75;
    border-radius: 50%;
    background: #ffffff;
    transition:
        color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}

.ds-media-link-icon i {
    transition: transform 0.35s ease;
}

/* =========================================
   CARD HOVER
========================================= */

.ds-media-card:hover .ds-media-image {
    transform: translateY(-8px);
    border-color: rgba(32, 75, 117, 0.25);
    box-shadow: 0 28px 60px rgba(23, 42, 58, 0.2);
}

.ds-media-card:hover .ds-media-image img {
    transform: scale(1.1);
    filter: saturate(1.08);
}

.ds-media-card:hover .ds-media-image::before {
    inset: 20px;
    border-color: rgba(255, 255, 255, 0.55);
}

.ds-media-card:hover .ds-media-image::after {
    left: 150%;
}

.ds-media-card:hover .ds-media-overlay {
    background: linear-gradient(180deg,
            rgba(5, 15, 24, 0.08) 0%,
            rgba(5, 15, 24, 0.28) 30%,
            rgba(5, 15, 24, 0.96) 100%);
}

.ds-media-card:hover .ds-media-number {
    color: rgba(255, 255, 255, 0.35);
    transform: translateY(-5px);
}

.ds-media-card:hover .ds-media-content {
    transform: translateY(0);
}

.ds-media-card:hover .ds-media-content p {
    opacity: 1;
    transform: translateY(0);
}

.ds-media-card:hover .ds-media-link-icon {
    color: #ffffff;
    background: #204b75;
    transform: rotate(-8deg);
}

.ds-media-card:hover .ds-media-link-icon i {
    transform: translateX(3px);
}

/* =========================================
   SLIDER BOTTOM
========================================= */

.ds-media-slider-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 42px;
}

/* Pagination */

.ds-media-pagination {
    position: static !important;
    display: flex;
    align-items: center;
    width: min(100%, 640px) !important;
    height: 3px !important;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(32, 75, 117, 0.14);
}

.ds-media-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: linear-gradient(90deg,
            #204b75,
            #486b93);
}

/* View all link */

.ds-view-all-services {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    color: #204b75;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.ds-view-all-services i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.ds-view-all-services:hover {
    color: #486b93;
    transform: translateX(3px);
}

.ds-view-all-services:hover i {
    transform: translate(3px, -3px);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {
    .ds-media-heading {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ds-media-heading-right {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 30px;
    }

    .ds-media-heading-right p {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .ds-media-solutions {
        padding: 78px 0;
    }

    .ds-media-container {
        width: min(100% - 30px, 1380px);
    }

    .ds-media-heading {
        margin-bottom: 35px;
    }

    .ds-media-heading h2 {
        font-size: clamp(42px, 13vw, 60px);
    }

    .ds-media-heading-right {
        display: block;
    }

    .ds-media-heading-right p {
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 1.75;
    }

    .ds-slider-arrow {
        width: 46px;
        height: 46px;
    }

    .ds-media-card,
    .ds-media-image {
        min-height: 470px;
    }

    .ds-media-category {
        top: 28px;
        left: 28px;
    }

    .ds-media-number {
        top: 25px;
        right: 25px;
        font-size: 60px;
    }

    .ds-media-content {
        right: 28px;
        bottom: 30px;
        left: 28px;
        transform: translateY(0);
    }

    .ds-media-content h3 {
        font-size: 36px;
    }

    .ds-media-content p {
        font-size: 13px;
        opacity: 1;
        transform: none;
    }

    .ds-media-slider-bottom {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 32px;
    }

    .ds-media-pagination {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .ds-media-solutions {
        padding: 65px 0;
    }

    .ds-section-label {
        font-size: 10px;
        letter-spacing: 2.3px;
    }

    .ds-media-card,
    .ds-media-image {
        min-height: 440px;
    }

    .ds-media-image::before {
        inset: 10px;
    }

    .ds-media-card:hover .ds-media-image::before {
        inset: 14px;
    }

    .ds-media-category {
        top: 24px;
        left: 22px;
        padding: 0 10px;
        font-size: 9px;
    }

    .ds-media-number {
        top: 22px;
        right: 20px;
        font-size: 50px;
    }

    .ds-media-content {
        right: 22px;
        bottom: 25px;
        left: 22px;
    }

    .ds-media-content h3 {
        font-size: 32px;
    }

    .ds-media-content p {
        margin-bottom: 18px;
        font-size: 12px;
        line-height: 1.7;
    }

    .ds-media-link {
        font-size: 10px;
    }

    .ds-media-link-icon {
        width: 35px;
        height: 35px;
    }
}

/* ========================================
   FEATURED MEDIA INVENTORY
======================================== */


.ds-inventory-section,
.ds-inventory-section * {
    box-sizing: border-box;
}

.ds-inventory-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
        linear-gradient(180deg,
            #f7f9fb 0%,
            #ffffff 46%,
            #f4f7fa 100%);
    font-family: var(--ds-body-font);
}

.ds-container {
    position: relative;
    z-index: 3;
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
}

/* Background Decorations */

.ds-inventory-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.36;
    background-image:
        linear-gradient(rgba(32, 75, 117, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 75, 117, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.ds-inventory-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    opacity: 0.14;
}

.ds-inventory-glow-one {
    top: -180px;
    right: -100px;
    background: var(--ds-primary);
}

.ds-inventory-glow-two {
    bottom: -210px;
    left: -150px;
    background: var(--ds-secondary);
}

/* Header */

.ds-inventory-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 48px;
}

.ds-inventory-title-area {
    max-width: 810px;
}

.ds-section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.ds-label-line {
    width: 38px;
    height: 2px;
    background: var(--ds-primary);
}

.ds-inventory-title-area h2 {
    margin: 0;
    color: var(--ds-dark);
    font-family: var(--ds-heading-font);
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ds-inventory-title-area h2 span {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ds-primary);
}

.ds-inventory-title-area p {
    max-width: 720px;
    margin: 25px 0 0;
    color: var(--ds-text);
    font-size: 16px;
    line-height: 1.8;
}

.ds-view-inventory-btn,
.ds-custom-plan-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 54px;
    padding: 0 24px;
    border: 1px solid rgba(32, 75, 117, 0.25);
    border-radius: 100px;
    color: var(--ds-primary);
    background: var(--ds-white);
    box-shadow: 0 12px 30px rgba(7, 21, 35, 0.07);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}

.ds-view-inventory-btn svg,
.ds-custom-plan-btn svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s ease;
}

.ds-view-inventory-btn:hover {
    color: var(--ds-white);
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    transform: translateY(-3px);
}

.ds-view-inventory-btn:hover svg,
.ds-custom-plan-btn:hover svg {
    transform: translateX(5px);
}

/* Filters */

.ds-inventory-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 40px;
    padding: 7px;
    border: 1px solid var(--ds-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 15px 50px rgba(7, 21, 35, 0.06);
    scrollbar-width: none;
}

.ds-inventory-filter::-webkit-scrollbar {
    display: none;
}

.ds-filter-btn {
    position: relative;
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    color: #667584;
    background: transparent;
    font-family: var(--ds-body-font);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-filter-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-left: 8px;
    border-radius: 50%;
    color: var(--ds-primary);
    background: rgba(255, 255, 255, 0.94);
    font-size: 10px;
}

.ds-filter-btn:hover {
    color: var(--ds-primary);
    background: rgba(32, 75, 117, 0.08);
}

.ds-filter-btn.active {
    color: var(--ds-white);
    background: var(--ds-primary);
    box-shadow: 0 9px 20px rgba(32, 75, 117, 0.22);
}

/* Inventory Grid */

.ds-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.ds-inventory-card {
    overflow: hidden;
    border: 1px solid rgba(32, 75, 117, 0.12);
    border-radius: 24px;
    background: var(--ds-white);
    box-shadow: 0 20px 55px rgba(7, 21, 35, 0.08);
    transition:
        transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.ds-inventory-card:hover {
    border-color: rgba(32, 75, 117, 0.32);
    box-shadow: 0 30px 75px rgba(7, 21, 35, 0.14);
    transform: translateY(-10px);
}

.ds-inventory-card.ds-card-hidden {
    display: none;
}

.ds-inventory-card.ds-card-visible {
    animation: dsInventoryShow 0.6s ease forwards;
}

@keyframes dsInventoryShow {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Inventory Image */

.ds-inventory-image {
    position: relative;
    overflow: hidden;
    height: 285px;
    background: var(--ds-dark-soft);
}

.ds-inventory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ds-inventory-card:hover .ds-inventory-image img {
    transform: scale(1.08);
}

.ds-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(7, 21, 35, 0.18) 0%,
            rgba(7, 21, 35, 0.1) 38%,
            rgba(7, 21, 35, 0.92) 100%);
}

.ds-card-topbar {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: var(--ds-white);
    /* background: rgba(7, 21, 35, 0.45); */
    backdrop-filter: blur(8px);
    font-family: var(--ds-heading-font);
    font-size: 20px;
    letter-spacing: 1px;
}

.ds-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(7, 21, 35, 0.12);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.ds-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: dsStatusPulse 1.8s infinite;
}

.ds-status.available {
    color: var(--ds-green);
}

.ds-status.available .ds-status-dot {
    background: var(--ds-green);
}

.ds-status.limited {
    color: var(--ds-orange);
}

.ds-status.limited .ds-status-dot {
    background: var(--ds-orange);
}

.ds-status.booked {
    color: var(--ds-red);
}

.ds-status.booked .ds-status-dot {
    background: var(--ds-red);
}

@keyframes dsStatusPulse {
    0% {
        box-shadow: 0 0 0 0 currentColor;
    }

    70% {
        box-shadow: 0 0 0 7px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.ds-image-bottom {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-image-bottom>span {
    color: var(--ds-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ds-image-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ds-dark);
    background: var(--ds-white);
    text-decoration: none;
    transform: rotate(0deg);
    transition:
        color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}

.ds-image-arrow svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-inventory-card:hover .ds-image-arrow {
    color: var(--ds-white);
    background: var(--ds-primary);
    transform: rotate(45deg);
}

/* Card Content */

.ds-inventory-content {
    padding: 27px;
}

.ds-location-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: var(--ds-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ds-location-label svg {
    width: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-inventory-content h3 {
    margin: 0 0 24px;
    color: var(--ds-dark);
    font-family: var(--ds-heading-font);
    font-size: 33px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ds-inventory-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 22px;
    border: 1px solid var(--ds-border);
    border-radius: 15px;
    background: var(--ds-light);
}

.ds-spec-item {
    min-width: 0;
    padding: 15px;
}

.ds-spec-item:nth-child(odd) {
    border-right: 1px solid var(--ds-border);
}

.ds-spec-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ds-border);
}

.ds-spec-item span,
.ds-visibility-bar span {
    display: block;
    margin-bottom: 6px;
    color: #8794a0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.ds-spec-item strong {
    display: block;
    overflow: hidden;
    color: var(--ds-dark);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-visibility-bar {
    margin-bottom: 22px;
}

.ds-visibility-bar>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ds-visibility-bar span {
    margin: 0;
}

.ds-visibility-bar strong {
    color: var(--ds-primary);
    font-size: 11px;
    font-weight: 700;
}

.ds-visibility-meter {
    overflow: hidden;
    height: 5px;
    border-radius: 100px;
    background: #e4ebf1;
}

.ds-visibility-meter span {
    display: block;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
            var(--ds-secondary),
            var(--ds-primary));
    transform-origin: left;
    transition: width 0.8s ease;
}

/* Enquiry Button */

.ds-enquiry-btn {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 19px;
    border-radius: 13px;
    color: var(--ds-white);
    background: var(--ds-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    text-transform: uppercase;
    isolation: isolate;
}

.ds-enquiry-btn::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background: var(--ds-primary);
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ds-enquiry-btn svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s ease;
}

.ds-enquiry-btn:hover::before {
    transform: translateX(0);
}

.ds-enquiry-btn:hover svg {
    transform: translateX(5px);
}

/* Empty Message */

.ds-inventory-empty {
    display: none;
    padding: 70px 20px;
    border: 1px dashed rgba(32, 75, 117, 0.3);
    border-radius: 22px;
    text-align: center;
    background: var(--ds-white);
}

.ds-inventory-empty.show {
    display: block;
    animation: dsInventoryShow 0.5s ease;
}

.ds-inventory-empty>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 50%;
    color: var(--ds-primary);
    background: rgba(32, 75, 117, 0.1);
    font-size: 24px;
    font-weight: 700;
}

.ds-inventory-empty h3 {
    margin: 0 0 8px;
    color: var(--ds-dark);
    font-family: var(--ds-heading-font);
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
}

.ds-inventory-empty p {
    margin: 0;
    color: var(--ds-text);
}

/* Bottom CTA */

.ds-inventory-bottom {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 50px;
    padding: 38px 42px;
    border-radius: 24px;
    color: var(--ds-white);
    background:
        linear-gradient(120deg,
            rgba(7, 21, 35, 0.98),
            rgba(32, 75, 117, 0.95));
    box-shadow: 0 25px 60px rgba(7, 21, 35, 0.16);
}

.ds-inventory-bottom::before {
    position: absolute;
    top: -85px;
    right: 12%;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.ds-inventory-bottom::after {
    position: absolute;
    right: -90px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border: 45px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    content: "";
}

.ds-inventory-bottom>div,
.ds-custom-plan-btn {
    position: relative;
    z-index: 2;
}

.ds-inventory-bottom>div span {
    display: block;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ds-inventory-bottom h3 {
    max-width: 680px;
    margin: 0;
    font-family: var(--ds-heading-font);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ds-custom-plan-btn {
    color: var(--ds-dark);
    background: var(--ds-white);
}

.ds-custom-plan-btn:hover {
    color: var(--ds-white);
    background: var(--ds-dark);
    border-color: var(--ds-dark);
    transform: translateY(-3px);
}

/* Responsive */

@media (max-width: 1100px) {
    .ds-inventory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-inventory-header {
        align-items: flex-start;
    }
}

@media (max-width: 820px) {
    .ds-inventory-section {
        padding: 80px 0;
    }

    .ds-inventory-header {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 35px;
    }

    .ds-inventory-title-area h2 {
        font-size: clamp(44px, 11vw, 62px);
    }

    .ds-view-inventory-btn {
        min-height: 50px;
    }

    .ds-inventory-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding: 32px;
    }
}

@media (max-width: 650px) {
    .ds-container {
        width: min(100% - 28px, 1320px);
    }

    .ds-inventory-section {
        padding: 65px 0;
    }

    .ds-inventory-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ds-inventory-title-area h2 {
        line-height: 1;
    }

    .ds-inventory-title-area p {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.7;
    }

    .ds-inventory-filter {
        margin-right: -14px;
        margin-left: -14px;
        padding: 7px 14px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .ds-filter-btn {
        min-height: 44px;
        padding: 0 17px;
    }

    .ds-inventory-image {
        height: 250px;
    }

    .ds-inventory-content {
        padding: 22px;
    }

    .ds-inventory-content h3 {
        font-size: 30px;
    }

    .ds-inventory-bottom {
        margin-top: 35px;
        padding: 27px 23px;
        border-radius: 20px;
    }

    .ds-custom-plan-btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .ds-inventory-image {
        height: 225px;
    }

    .ds-card-topbar {
        top: 14px;
        right: 14px;
        left: 14px;
    }

    .ds-image-bottom {
        right: 14px;
        bottom: 14px;
        left: 14px;
    }

    .ds-card-number {
        width: 41px;
        height: 41px;
    }

    .ds-inventory-content {
        padding: 19px;
    }

    .ds-spec-item {
        padding: 13px 11px;
    }

    .ds-spec-item strong {
        font-size: 11px;
    }
}

/* Accessibility */

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

    .ds-inventory-card,
    .ds-inventory-image img,
    .ds-image-arrow,
    .ds-enquiry-btn::before,
    .ds-status-dot {
        animation: none;
        transition: none;
    }
}

/* ==========================================
   STRATEGIC MEDIA LOCATIONS
========================================== */
.ds-locations-section {
    --ds-primary: #204b75;
    --ds-secondary: #486b93;
    --ds-dark: #0a1d2e;
    --ds-dark-light: #102b43;
    --ds-red: #ef3340;
    --ds-white: #ffffff;
    --ds-text: #6f7f8e;
    --ds-border: rgba(32, 75, 117, 0.14);

    position: relative;
    overflow: hidden;
    padding: 80px 20px;
    background:
        radial-gradient(circle at 10% 20%,
            rgba(72, 107, 147, 0.12),
            transparent 30%),
        linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
    font-family: "Inter", sans-serif;
}

.ds-locations-section::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -120px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(32, 75, 117, 0.08);
    border-radius: 50%;
}

.ds-locations-section::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -180px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(32, 75, 117, 0.08);
    border-radius: 50%;
}

.ds-locations-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* ==========================================
   SECTION HEADER
========================================== */
.ds-locations-header {
    margin-bottom: 35px;
}

.ds-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.ds-label-dot {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    background: var(--ds-red);
    border-radius: 50%;
}

.ds-label-dot::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(239, 51, 64, 0.35);
    border-radius: 50%;
    animation: dsLabelPulse 1.8s infinite;
}

@keyframes dsLabelPulse {
    0% {
        transform: scale(0.7);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.ds-locations-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
}

.ds-heading-content {
    max-width: 760px;
}

.ds-heading-content h2 {
    margin: 0;
    color: var(--ds-dark);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.5px;
}

.ds-heading-content h2 span {
    color: var(--ds-primary);
}

.ds-heading-content p {
    max-width: 650px;
    margin: 16px 0 0;
    color: var(--ds-text);
    font-size: 15px;
    line-height: 1.8;
}

.ds-view-locations-btn,
.ds-mobile-location-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 52px;
    padding: 0 25px;
    border: 1px solid var(--ds-primary);
    border-radius: 100px;
    color: var(--ds-primary);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.ds-view-locations-btn svg,
.ds-mobile-location-btn svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s ease;
}

.ds-view-locations-btn:hover,
.ds-mobile-location-btn:hover {
    color: var(--ds-white);
    background: var(--ds-primary);
    box-shadow: 0 15px 35px rgba(32, 75, 117, 0.2);
    transform: translateY(-3px);
}

.ds-view-locations-btn:hover svg,
.ds-mobile-location-btn:hover svg {
    transform: translateX(5px);
}


/* ==========================================
   MAIN LOCATION WRAPPER
========================================== */
.ds-location-map-wrapper {
    overflow: hidden;
    border: 1px solid rgba(32, 75, 117, 0.1);
    border-radius: 26px;
    background: var(--ds-white);
    box-shadow: 0 25px 70px rgba(18, 52, 79, 0.11);
}


/* ==========================================
   MAP AREA
========================================== */
.ds-location-map {
    position: relative;
    min-height: 500px;

    background-image: url("../images/map1.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    background-color: #fff;
}

.ds-location-map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 70% 50%,
            rgba(72, 107, 147, 0.25),
            transparent 38%),
        linear-gradient(90deg,
            rgba(10, 29, 46, 0.88),
            rgba(10, 29, 46, 0.22));
    pointer-events: none;
}

/* .ds-map-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.08;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 45px 45px;
} */
.ds-location-map::before {
    display: none;
}

.ds-map-grid {
    display: none;
}

.ds-map-routes {
    display: none;
}

/* .ds-map-image {
    position: absolute;
    top: 50%;
    right: 2%;
    z-index: 0;
    width: min(680px, 58%);
    max-height: 95%;
    object-fit: contain;
    opacity: 0.22;
    filter: grayscale(1) brightness(1.7);
    transform: translateY(-50%);
} */

.ds-map-routes {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ds-route-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 2;
    stroke-dasharray: 9 12;
    animation: dsRoadMovement 20s linear infinite;
}

.ds-route-line-secondary {
    stroke: rgba(239, 51, 64, 0.18);
    animation-duration: 27s;
}

@keyframes dsRoadMovement {
    to {
        stroke-dashoffset: -200;
    }
}


/* ==========================================
   MAP PINS
========================================== */
.ds-map-pin {
    position: absolute;
    z-index: 5;
    display: block;
    width: 36px;
    height: 44px;
    color: var(--ds-red);
    text-decoration: none;
    transform: translate(-50%, -100%);
}

/* Homepage network map: show the complete 19-location set. */
.ds-location-map .ds-map-pin:not(.ds-network-pin) {
    display: none;
}

.ds-network-pin {
    transform: translate(-50%, -50%);
}

.ds-all-location-sites-wrap {
    display: flex;
    justify-content: center;
    padding-top: 28px;
}

.ds-location-list[hidden],
.ds-mobile-location-btn {
    display: none !important;
}

.ds-all-location-sites-btn {
    display: inline-flex;
}

.ds-pin-icon {
    position: relative;
    z-index: 3;
    display: block;
    width: 36px;
    height: 44px;
    filter: drop-shadow(0 8px 10px rgba(239, 51, 64, 0.35));
    animation: dsPinFloat 2.5s ease-in-out infinite;
}

.ds-pin-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--ds-red);
    stroke: #ffffff;
    stroke-width: 1.2;
}

.ds-pin-icon circle {
    fill: #ffffff;
    stroke: none;
}

.ds-pin-pulse {
    position: absolute;
    left: 50%;
    bottom: -2px;
    z-index: 1;
    width: 17px;
    height: 8px;
    border: 2px solid rgba(239, 51, 64, 0.75);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: dsPinPulse 1.8s ease-out infinite;
}

@keyframes dsPinPulse {
    0% {
        width: 10px;
        height: 5px;
        opacity: 1;
    }

    100% {
        width: 45px;
        height: 19px;
        opacity: 0;
    }
}

@keyframes dsPinFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}


/* Pin Positions */
.pin-kmp {
    top: 55%;
    left: 47%;
}

.pin-gurugram {
    top: 52%;
    left: 59%;
}

.pin-faridabad {
    top: 68%;
    left: 67%;
}

.pin-kundli {
    top: 28%;
    left: 62%;
}

.pin-manesar {
    top: 62%;
    left: 51%;
}

.pin-sohna {
    top: 78%;
    left: 57%;
}

.pin-rohtak {
    top: 40%;
    left: 36%;
}

.pin-nh48 {
    top: 72%;
    left: 42%;
}


/* Map Pin Tooltip */
.ds-pin-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    z-index: 10;
    width: max-content;
    min-width: 175px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: var(--ds-white);
    background: rgba(5, 19, 31, 0.95);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.ds-pin-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 6px;
    border-style: solid;
    border-color: rgba(5, 19, 31, 0.95) transparent transparent;
    transform: translateX(-50%);
}

.ds-pin-label strong,
.ds-pin-label small {
    display: block;
}

.ds-pin-label strong {
    margin-bottom: 4px;
    color: var(--ds-white);
    font-size: 13px;
}

.ds-pin-label small {
    color: rgba(255, 255, 255, 0.64);
    font-size: 10px;
}

.ds-map-pin:hover {
    z-index: 20;
}

.ds-map-pin:hover .ds-pin-label {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ds-map-pin:hover .ds-pin-icon {
    animation-play-state: paused;
    transform: translateY(-7px) scale(1.12);
}


/* ==========================================
   MAP INFORMATION BOX
========================================== */
.ds-map-info-box {
    position: absolute;
    bottom: 28px;
    left: 30px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 17px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(12px);
}

.ds-map-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--ds-white);
    background: var(--ds-red);
}

.ds-map-info-icon svg {
    width: 20px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0.8;
}

.ds-map-info-icon circle {
    fill: var(--ds-white);
    stroke: none;
}

.ds-map-info-box strong,
.ds-map-info-box small {
    display: block;
}

.ds-map-info-box strong {
    margin-bottom: 3px;
    color: black;
    font-size: 13px;
}

.ds-map-info-box small {
    color: black;
    font-size: 10px;
}


/* ==========================================
   LOCATION LIST
========================================== */
.ds-location-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--ds-white);
}

.ds-location-list a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 15px 18px;
    border-right: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-dark);
    text-decoration: none;
    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}

.ds-location-list a:nth-child(4n) {
    border-right: none;
}

.ds-location-list a:nth-last-child(-n + 4) {
    border-bottom: none;
}

.ds-location-list a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--ds-red);
    transition: width 0.35s ease;
}

.ds-location-list a>span {
    color: var(--ds-secondary);
    font-family: "Bebas Neue", sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
}

.ds-location-list a strong {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
}

.ds-location-list a svg {
    width: 17px;
    fill: none;
    stroke: var(--ds-primary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: translateX(-5px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.ds-location-list a:hover {
    color: var(--ds-primary);
    background: #f5f9fc;
}

.ds-location-list a:hover::before {
    width: 100%;
}

.ds-location-list a:hover svg {
    opacity: 1;
    transform: translateX(0);
}

.ds-mobile-location-btn {
    display: none;
}


/* ==========================================
   TABLET RESPONSIVE
========================================== */
@media (max-width: 991px) {

    .ds-locations-section {
        padding: 65px 18px;
    }

    .ds-locations-heading-row {
        align-items: flex-start;
    }

    .ds-location-map {
        min-height: 400px;
    }

    .ds-map-image {
        right: -8%;
        width: 75%;
    }

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

    .ds-location-list a:nth-child(4n) {
        border-right: 1px solid var(--ds-border);
    }

    .ds-location-list a:nth-child(2n) {
        border-right: none;
    }

    .ds-location-list a:nth-last-child(-n + 4) {
        border-bottom: 1px solid var(--ds-border);
    }

    .ds-location-list a:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .pin-kmp {
        left: 43%;
    }

    .pin-gurugram {
        left: 60%;
    }

    .pin-faridabad {
        left: 73%;
    }

    .pin-kundli {
        left: 66%;
    }

    .pin-rohtak {
        left: 28%;
    }
}


/* ==========================================
   MOBILE RESPONSIVE
========================================== */
@media (max-width: 767px) {

    .ds-locations-section {
        padding: 55px 14px;
    }

    .ds-locations-header {
        margin-bottom: 26px;
    }

    .ds-locations-heading-row {
        display: block;
    }

    .ds-heading-content h2 {
        font-size: 43px;
        line-height: 1;
    }

    .ds-heading-content p {
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.7;
    }

    .ds-view-locations-btn {
        display: none;
    }

    .ds-location-map-wrapper {
        border-radius: 20px;
    }

    .ds-location-map {
        min-height: 340px;
    }

    .ds-map-image {
        top: 50%;
        right: -25%;
        width: 110%;
        opacity: 0.18;
    }

    .ds-map-info-box {
        bottom: 18px;
        left: 16px;
        padding: 10px 12px;
    }

    .ds-map-info-icon {
        width: 34px;
        height: 34px;
    }

    .ds-map-info-box strong {
        font-size: 11px;
    }

    .ds-map-info-box small {
        font-size: 9px;
    }

    .ds-map-pin {
        width: 29px;
        height: 37px;
    }

    .ds-pin-icon {
        width: 29px;
        height: 37px;
    }

    .ds-pin-label {
        display: none;
    }

    .pin-kmp {
        top: 53%;
        left: 40%;
    }

    .pin-gurugram {
        top: 50%;
        left: 59%;
    }

    .pin-faridabad {
        top: 67%;
        left: 75%;
    }

    .pin-kundli {
        top: 28%;
        left: 64%;
    }

    .pin-manesar {
        top: 63%;
        left: 50%;
    }

    .pin-sohna {
        top: 78%;
        left: 62%;
    }

    .pin-rohtak {
        top: 40%;
        left: 24%;
    }

    .pin-nh48 {
        top: 73%;
        left: 35%;
    }

    .ds-location-list {
        display: flex;
        overflow-x: auto;
        padding: 12px;
        gap: 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .ds-location-list::-webkit-scrollbar {
        display: none;
    }

    .ds-location-list a {
        flex: 0 0 185px;
        min-height: 62px;
        border: 1px solid var(--ds-border) !important;
        border-radius: 13px;
        scroll-snap-align: start;
    }

    .ds-location-list a svg {
        opacity: 1;
        transform: translateX(0);
    }

    .ds-mobile-location-btn {
        display: flex;
        width: calc(100% - 24px);
        margin: 0 12px 14px;
        color: var(--ds-white);
        background: var(--ds-primary);
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */
@media (max-width: 480px) {

    .ds-heading-content h2 {
        font-size: 37px;
    }

    .ds-location-map {
        min-height: 310px;
    }

    .ds-map-info-box {
        max-width: 190px;
    }

    .ds-map-pin {
        transform: translate(-50%, -90%);
    }

    .pin-faridabad {
        left: 80%;
    }

    .pin-rohtak {
        left: 19%;
    }
}


/* ==========================================
   ACCESSIBILITY
========================================== */
@media (prefers-reduced-motion: reduce) {

    .ds-pin-icon,
    .ds-pin-pulse,
    .ds-route-line,
    .ds-label-dot::before {
        animation: none;
    }

    .ds-map-pin,
    .ds-location-list a,
    .ds-view-locations-btn {
        transition: none;
    }
}

.ds-map-pin.is-active .ds-pin-icon {
    transform: translateY(-6px) scale(1.15);
}

.ds-map-pin.is-active .ds-pin-pulse {
    border-color: rgba(255, 255, 255, 0.9);
}


/*sliderss*/

.ds-slider-navigation,
.ds-slider-prev,
.ds-slider-next {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

.ds-slider-navigation {
    position: static !important;
    transform: none !important;
}


/* ========================================
   WHY CHOOSE DS OUTDOOR MEDIA
======================================== */

.ds-why-choose-section {
    --ds-primary: #204b75;
    --ds-secondary: #486b93;
    --ds-dark: #12283d;
    --ds-text: #66788a;
    --ds-light-bg: #f7fafe;
    --ds-white: #ffffff;
    --ds-border: rgba(32, 75, 117, 0.12);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 20px;
    background:
        radial-gradient(circle at 10% 20%,
            rgba(72, 107, 147, 0.09),
            transparent 30%),
        radial-gradient(circle at 90% 80%,
            rgba(32, 75, 117, 0.08),
            transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
}

/* Particle background */
.ds-why-particles {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Background blur shapes */
.ds-why-blur {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: 0.4;
}

.ds-why-blur-one {
    top: -120px;
    left: -100px;
    width: 340px;
    height: 340px;
    background: rgba(72, 107, 147, 0.18);
    animation: dsBlurMoveOne 10s ease-in-out infinite alternate;
}

.ds-why-blur-two {
    right: -100px;
    bottom: -140px;
    width: 380px;
    height: 380px;
    background: rgba(32, 75, 117, 0.13);
    animation: dsBlurMoveTwo 12s ease-in-out infinite alternate;
}

@keyframes dsBlurMoveOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(70px, 50px) scale(1.12);
    }
}

@keyframes dsBlurMoveTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-80px, -50px) scale(1.14);
    }
}

/* Container */
.ds-why-container {
    position: relative;
    z-index: 2;
    width: min(1240px, 100%);
    margin: 0 auto;
}

/* Section heading */
.ds-why-heading {
    max-width: 840px;
    margin: 0 auto 60px;
    text-align: center;
}

.ds-section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--ds-primary);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.ds-label-line {
    display: inline-block;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            var(--ds-secondary));
}

.ds-section-label .ds-label-line:last-child {
    background: linear-gradient(90deg,
            var(--ds-secondary),
            transparent);
}

.ds-why-heading h2 {
    margin: 0;
    color: var(--ds-dark);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 1px;
}

.ds-why-heading h2 span {
    display: inline-block;
    position: relative;
    color: var(--ds-primary);
}

.ds-why-heading h2 span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    z-index: -1;
    height: 10px;
    border-radius: 50px;
    background: rgba(72, 107, 147, 0.16);
}

.ds-why-heading p {
    max-width: 720px;
    margin: 22px auto 0;
    color: var(--ds-text);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

/* Features grid */
.ds-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Feature card */
.ds-why-card {
    position: relative;
    display: flex;
    min-height: 310px;
    flex-direction: column;
    overflow: hidden;
    padding: 32px;
    border: 1px solid var(--ds-border);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 50px rgba(20, 57, 89, 0.08);
    backdrop-filter: blur(12px);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.ds-why-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg,
            rgba(32, 75, 117, 0.13),
            rgba(72, 107, 147, 0.03));
    transition:
        width 0.5s ease,
        height 0.5s ease,
        top 0.5s ease,
        right 0.5s ease;
}

.ds-why-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--ds-primary),
            var(--ds-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}

.ds-why-card:hover {
    transform: translateY(-12px);
    border-color: rgba(32, 75, 117, 0.28);
    box-shadow: 0 30px 70px rgba(20, 57, 89, 0.16);
}

.ds-why-card:hover::before {
    top: -95px;
    right: -85px;
    width: 230px;
    height: 230px;
}

.ds-why-card:hover::after {
    transform: scaleX(1);
}

/* Card number */
.ds-card-number {
    position: absolute;
    top: 26px;
    right: 28px;
    color: rgba(32, 75, 117, 0.11);
    font-family: "Bebas Neue", sans-serif;
    font-size: 56px;
    line-height: 1;
    transition:
        color 0.4s ease,
        transform 0.4s ease;
}

.ds-why-card:hover .ds-card-number {
    color: rgba(32, 75, 117, 0.19);
    transform: translateY(-4px);
}

/* Icon */
.ds-icon-box {
    position: relative;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    margin-bottom: 28px;
    border: 1px solid rgba(32, 75, 117, 0.11);
    border-radius: 18px;
    color: var(--ds-primary);
    background: linear-gradient(145deg,
            rgba(32, 75, 117, 0.11),
            rgba(255, 255, 255, 0.95));
    box-shadow: 0 12px 28px rgba(32, 75, 117, 0.1);
    font-size: 26px;
    transition:
        transform 0.45s ease,
        color 0.45s ease,
        background 0.45s ease,
        box-shadow 0.45s ease;
}

.ds-icon-box::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px dashed rgba(32, 75, 117, 0.16);
    border-radius: 23px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ds-why-card:hover .ds-icon-box {
    color: var(--ds-white);
    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 16px 32px rgba(32, 75, 117, 0.25);
    transform: rotate(-6deg) scale(1.06);
}

.ds-why-card:hover .ds-icon-box::after {
    opacity: 1;
    animation: dsIconRotate 8s linear infinite;
}

@keyframes dsIconRotate {
    to {
        transform: rotate(360deg);
    }
}

/* Card content */
.ds-card-content {
    position: relative;
    z-index: 2;
}

.ds-card-content h3 {
    margin: 0 0 14px;
    color: var(--ds-dark);
    font-family: "Inter", sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.ds-card-content p {
    margin: 0;
    color: var(--ds-text);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

/* Card bottom */
.ds-card-line {
    width: 100%;
    height: 1px;
    margin-top: auto;
    margin-bottom: 20px;
    background: linear-gradient(90deg,
            var(--ds-border),
            transparent);
}

.ds-card-arrow {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    align-self: flex-end;
    border: 1px solid rgba(32, 75, 117, 0.15);
    border-radius: 50%;
    color: var(--ds-primary);
    background: #f5f9fc;
    font-size: 13px;
    transition:
        transform 0.4s ease,
        color 0.4s ease,
        background 0.4s ease;
}

.ds-why-card:hover .ds-card-arrow {
    color: var(--ds-white);
    background: var(--ds-primary);
    transform: rotate(45deg);
}

/* Bottom call-to-action */
.ds-why-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 32px;
    padding: 28px 32px;
    border: 1px solid rgba(32, 75, 117, 0.13);
    border-radius: 24px;
    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, 0.93),
            rgba(238, 245, 251, 0.9));
    box-shadow: 0 20px 60px rgba(20, 57, 89, 0.08);
    backdrop-filter: blur(12px);
}

.ds-bottom-text {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ds-bottom-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border-radius: 17px;
    color: var(--ds-white);
    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 14px 30px rgba(32, 75, 117, 0.22);
    font-size: 22px;
}

.ds-bottom-text span {
    display: block;
    margin-bottom: 5px;
    color: var(--ds-secondary);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.ds-bottom-text h3 {
    margin: 0;
    color: var(--ds-dark);
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 700;
}

/* CTA button */
.ds-why-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    overflow: hidden;
    padding: 0 25px;
    border-radius: 12px;
    color: var(--ds-white);
    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 14px 30px rgba(32, 75, 117, 0.22);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-why-button i {
    transition: transform 0.35s ease;
}

.ds-why-button:hover {
    color: var(--ds-white);
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(32, 75, 117, 0.3);
}

.ds-why-button:hover i {
    transform: translateX(5px);
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

@media (max-width: 1024px) {
    .ds-why-choose-section {
        padding: 90px 20px;
    }

    .ds-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-why-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .ds-why-choose-section {
        padding: 75px 15px;
    }

    .ds-why-heading {
        margin-bottom: 42px;
    }

    .ds-section-label {
        gap: 8px;
        font-size: 11px;
        letter-spacing: 2px;
    }

    .ds-label-line {
        width: 24px;
    }

    .ds-why-heading h2 {
        font-size: 42px;
    }

    .ds-why-heading p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    .ds-why-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ds-why-card {
        min-height: 285px;
        padding: 26px;
        border-radius: 20px;
    }

    .ds-icon-box {
        width: 60px;
        height: 60px;
        margin-bottom: 24px;
        border-radius: 16px;
        font-size: 23px;
    }

    .ds-card-content h3 {
        font-size: 19px;
    }

    .ds-why-bottom {
        margin-top: 22px;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .ds-bottom-text {
        align-items: flex-start;
    }

    .ds-bottom-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 14px;
        font-size: 19px;
    }

    .ds-bottom-text h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    .ds-why-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .ds-why-heading h2 {
        font-size: 37px;
    }

    .ds-section-label .ds-label-line {
        display: none;
    }

    .ds-why-card {
        padding: 24px 22px;
    }

    .ds-card-number {
        top: 24px;
        right: 22px;
        font-size: 48px;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {

    .ds-why-card,
    .ds-icon-box,
    .ds-card-arrow,
    .ds-why-button,
    .ds-why-blur {
        animation: none !important;
        transition: none !important;
    }
}

/* ===================================
   DS OUTDOOR MEDIA - ENQUIRY SECTION
=================================== */



/* Global container */
.ds-container {
    width: min(1240px, calc(100% - 40px));
    margin-inline: auto;
}

/* Main section */
.ds-enquiry-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 20%,
            rgba(72, 107, 147, 0.11),
            transparent 24%),
        radial-gradient(circle at 92% 85%,
            rgba(32, 75, 117, 0.1),
            transparent 28%),
        linear-gradient(135deg, #f8fbfd 0%, #edf5fa 100%);
    font-family: var(--ds-body-font);
}

/* Soft grid background */
.ds-enquiry-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.32;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(32, 75, 117, 0.05) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(32, 75, 117, 0.05) 1px,
            transparent 1px);

    background-size: 45px 45px;
}

/* Decorative circles */
.ds-enquiry-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.ds-shape-one {
    top: 60px;
    left: -90px;
    width: 240px;
    height: 240px;
    border: 45px solid rgba(32, 75, 117, 0.05);
}

.ds-shape-two {
    right: -130px;
    bottom: -130px;
    width: 360px;
    height: 360px;
    border: 70px solid rgba(72, 107, 147, 0.06);
}

/* Two-column layout */
.ds-enquiry-wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.84fr 1.16fr;
    gap: 65px;
    align-items: center;
}

/* ===================================
   LEFT INFORMATION
=================================== */

.ds-enquiry-info {
    position: relative;
}

.ds-section-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ds-section-label span {
    width: 35px;
    height: 2px;
    border-radius: 10px;
    background: var(--ds-primary);
}

.ds-enquiry-info h2 {
    max-width: 570px;
    margin: 0 0 22px;
    color: var(--ds-heading);
    font-family: var(--ds-heading-font);
    font-size: clamp(44px, 5vw, 70px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.5px;
}

.ds-enquiry-info h2 strong {
    display: block;
    color: var(--ds-primary);
    font-weight: 400;
}

.ds-enquiry-description {
    max-width: 590px;
    margin: 0;
    color: var(--ds-text);
    font-size: 16px;
    line-height: 1.8;
}

/* Benefit list */
.ds-enquiry-benefits {
    display: grid;
    gap: 17px;
    margin-top: 34px;
}

.ds-benefit-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-benefit-item:hover {
    transform: translateX(7px);
    border-color: rgba(32, 75, 117, 0.1);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 35px rgba(32, 75, 117, 0.08);
}

.ds-benefit-icon {
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(32, 75, 117, 0.12);
    border-radius: 14px;
    color: var(--ds-primary);
    background: var(--ds-white);
    box-shadow: 0 10px 25px rgba(32, 75, 117, 0.09);
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.ds-benefit-item:hover .ds-benefit-icon {
    color: var(--ds-white);
    background: var(--ds-primary);
    transform: rotate(-5deg);
}

.ds-benefit-icon i {
    font-size: 18px;
}

.ds-benefit-item h3 {
    margin: 1px 0 6px;
    color: var(--ds-heading);
    font-size: 15px;
    font-weight: 750;
}

.ds-benefit-item p {
    margin: 0;
    color: var(--ds-text);
    font-size: 13px;
    line-height: 1.65;
}

/* Direct contact area */
.ds-direct-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid rgba(32, 75, 117, 0.13);
}

.ds-direct-contact>span {
    flex-basis: 100%;
    color: var(--ds-light-text);
    font-size: 12px;
    font-weight: 600;
}

.ds-direct-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-heading);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ds-direct-contact a:hover {
    color: var(--ds-primary);
}

.ds-direct-contact a i {
    color: var(--ds-primary);
}

/* ===================================
   FORM CARD
=================================== */

.ds-enquiry-form-card {
    position: relative;
    padding: 12px;
    border: 1px solid rgba(32, 75, 117, 0.1);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: var(--ds-shadow);
    backdrop-filter: blur(14px);
}

.ds-enquiry-form-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.9),
            rgba(237, 245, 251, 0.7));
}

/* Form heading */
.ds-form-header {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    padding: 26px 28px 22px;
}

.ds-form-header span {
    display: block;
    margin-bottom: 6px;
    color: var(--ds-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ds-form-header h3 {
    margin: 0;
    color: var(--ds-heading);
    font-size: 25px;
    line-height: 1.3;
}

.ds-form-header-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: var(--ds-white);
    background:
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 14px 30px rgba(32, 75, 117, 0.25);
}

.ds-form-header-icon i {
    font-size: 18px;
    transform: rotate(-10deg);
}

/* Form body */
.ds-enquiry-form {
    padding: 30px;
    border-radius: 23px;
    background: var(--ds-white);
}

.ds-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px;
}

/* Form controls */
.ds-form-group {
    position: relative;
}

.ds-form-group-full {
    grid-column: 1 / -1;
}

.ds-form-group input,
.ds-form-group select,
.ds-form-group textarea {
    width: 100%;
    border: 1px solid var(--ds-border);
    border-radius: 13px;
    outline: none;
    color: var(--ds-heading);
    background: #fbfdff;
    font-family: var(--ds-body-font);
    font-size: 14px;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-form-group input,
.ds-form-group select {
    height: 58px;
    padding: 19px 45px 8px 45px;
}

.ds-form-group textarea {
    min-height: 125px;
    padding: 25px 18px 14px 45px;
    resize: vertical;
}

/* Remove default select style */
.ds-form-group select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Input focus */
.ds-form-group input:focus,
.ds-form-group select:focus,
.ds-form-group textarea:focus {
    border-color: var(--ds-secondary);
    background: var(--ds-white);
    box-shadow:
        0 0 0 4px rgba(72, 107, 147, 0.09),
        0 10px 24px rgba(32, 75, 117, 0.06);
}

/* Floating label */
.ds-form-group label {
    position: absolute;
    top: 50%;
    left: 45px;
    z-index: 2;
    color: var(--ds-light-text);
    font-size: 13px;
    pointer-events: none;
    transform: translateY(-50%);
    transition:
        top 0.25s ease,
        font-size 0.25s ease,
        color 0.25s ease;
}

.ds-textarea-group label {
    top: 22px;
    transform: none;
}

/* Floating states */
.ds-form-group input:focus+label,
.ds-form-group input:not(:placeholder-shown)+label,
.ds-form-group textarea:focus+label,
.ds-form-group textarea:not(:placeholder-shown)+label,
.ds-form-group select:focus+label,
.ds-form-group select:valid+label {
    top: 9px;
    color: var(--ds-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    transform: none;
}

.ds-textarea-group textarea:focus+label,
.ds-textarea-group textarea:not(:placeholder-shown)+label {
    top: 8px;
}

/* Left icon */
.ds-input-icon {
    position: absolute;
    top: 50%;
    left: 17px;
    color: #9aabb9;
    transform: translateY(-50%);
    pointer-events: none;
    transition: color 0.3s ease;
}

.ds-textarea-group .ds-input-icon {
    top: 23px;
    transform: none;
}

.ds-form-group:focus-within .ds-input-icon {
    color: var(--ds-primary);
}

/* Select arrow */
.ds-select-arrow {
    position: absolute;
    top: 50%;
    right: 17px;
    color: #9aabb9;
    font-size: 10px;
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.ds-select-group:focus-within .ds-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Error validation */
.ds-error-message,
.ds-consent-error {
    display: none;
    margin-top: 6px;
    color: var(--ds-error);
    font-size: 10px;
    font-weight: 600;
}

.ds-form-group.ds-invalid input,
.ds-form-group.ds-invalid select,
.ds-form-group.ds-invalid textarea {
    border-color: var(--ds-error);
    box-shadow: 0 0 0 3px rgba(216, 74, 74, 0.08);
}

.ds-form-group.ds-invalid .ds-error-message {
    display: block;
}

/* Consent checkbox */
.ds-consent-box {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-top: 22px;
    color: var(--ds-text);
    font-size: 11px;
    line-height: 1.6;
    cursor: pointer;
}

.ds-consent-box input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ds-custom-checkbox {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    border: 1px solid var(--ds-border);
    border-radius: 6px;
    color: transparent;
    background: #f8fbfd;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.ds-custom-checkbox i {
    font-size: 9px;
}

.ds-consent-box input:checked+.ds-custom-checkbox {
    border-color: var(--ds-primary);
    color: var(--ds-white);
    background: var(--ds-primary);
    transform: scale(1.05);
}

.ds-consent-error.ds-show {
    display: block;
}

/* Submit button */
.ds-submit-button {
    width: 100%;
    min-height: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 8px 8px 8px 23px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    color: var(--ds-white);
    background:
        linear-gradient(110deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 15px 35px rgba(32, 75, 117, 0.22);
    font-family: var(--ds-body-font);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(32, 75, 117, 0.3);
}

.ds-button-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--ds-primary);
    background: var(--ds-white);
}

.ds-button-icon i {
    transition: transform 0.3s ease;
}

.ds-submit-button:hover .ds-button-icon i {
    transform: translateX(4px);
}

/* Privacy note */
.ds-form-note {
    display: flex;
    justify-content: center;
    gap: 7px;
    align-items: center;
    margin: 15px 0 0;
    color: var(--ds-light-text);
    font-size: 9px;
    text-align: center;
}

.ds-form-note i {
    color: var(--ds-secondary);
}

/* Success message */
.ds-form-success {
    display: none;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(34, 139, 91, 0.2);
    border-radius: 12px;
    background: rgba(34, 139, 91, 0.07);
}

.ds-form-success.ds-show {
    display: flex;
    animation: dsSuccessAppear 0.45s ease both;
}

.ds-form-success>span {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ds-white);
    background: var(--ds-success);
}

.ds-form-success strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ds-success);
    font-size: 12px;
}

.ds-form-success p {
    margin: 0;
    color: var(--ds-text);
    font-size: 10px;
}

@keyframes dsSuccessAppear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   RESPONSIVE DESIGN
=================================== */

@media (max-width: 1050px) {
    .ds-enquiry-wrapper {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .ds-enquiry-info {
        max-width: 760px;
        margin-inline: auto;
        text-align: center;
    }

    .ds-enquiry-info h2,
    .ds-enquiry-description {
        margin-inline: auto;
    }

    .ds-section-label {
        justify-content: center;
    }

    .ds-benefit-item {
        text-align: left;
    }

    .ds-direct-contact {
        justify-content: center;
    }

    .ds-enquiry-form-card {
        width: min(100%, 820px);
        margin-inline: auto;
    }
}

@media (max-width: 700px) {
    .ds-enquiry-section {
        padding: 75px 0;
    }

    .ds-container {
        width: min(100% - 24px, 1240px);
    }

    .ds-enquiry-wrapper {
        gap: 40px;
    }

    .ds-enquiry-info h2 {
        font-size: 44px;
    }

    .ds-enquiry-description {
        font-size: 14px;
    }

    .ds-enquiry-form-card {
        padding: 7px;
        border-radius: 22px;
    }

    .ds-form-header {
        padding: 21px 17px 17px;
    }

    .ds-form-header h3 {
        font-size: 20px;
    }

    .ds-form-header-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .ds-enquiry-form {
        padding: 21px 16px;
        border-radius: 18px;
    }

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

    .ds-form-group-full {
        grid-column: auto;
    }

    .ds-direct-contact {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .ds-enquiry-info h2 {
        font-size: 38px;
    }

    .ds-benefit-item {
        padding: 12px 7px;
    }

    .ds-benefit-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .ds-form-header-icon {
        display: none;
    }

    .ds-form-header h3 {
        font-size: 18px;
    }

    .ds-submit-button {
        padding-left: 17px;
        font-size: 11px;
    }
}



/* ==========================================
   FOOTER ROOT VARIABLES
========================================== */



.ds-container {
    width: min(100% - 40px, 1480px);
    margin-inline: auto;
}

/* ==========================================
   MAIN FOOTER
========================================== */

.ds-footer {
    position: relative;
    overflow: hidden;
    background: var(--ds-background);
    color: var(--ds-text);
    border-top: 1px solid rgba(32, 75, 117, 0.08);
    isolation: isolate;
}

.ds-footer-main {
    position: relative;
    z-index: 5;
    padding: 95px 0 265px;
    background:
        radial-gradient(circle at 15% 15%,
            rgba(72, 107, 147, 0.08),
            transparent 28%),
        radial-gradient(circle at 85% 12%,
            rgba(32, 75, 117, 0.07),
            transparent 30%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fbfd 65%,
            rgba(240, 247, 251, 0.96) 100%);
}

/* ==========================================
   FOOTER GRID
========================================== */

.ds-footer-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.8fr 1.05fr 0.85fr 1.4fr;
    gap: 55px;
    align-items: start;
}

.ds-footer-column {
    position: relative;
    min-width: 0;
}

.ds-footer-logo {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    margin-bottom: 22px;
}

.ds-footer-logo img {
    display: block;
    width: 100%;
    max-height: 78px;
    object-fit: contain;
    object-position: left center;
}

.ds-footer-description {
    max-width: 390px;
    margin: 0 0 27px;
    color: var(--ds-text);
    font-size: 14px;
    line-height: 1.9;
}

/* ==========================================
   FOOTER TITLES
========================================== */

.ds-footer-title {
    position: relative;
    margin: 0 0 29px;
    padding-bottom: 15px;
    color: var(--ds-heading);
    font-family: "Bebas Neue", sans-serif;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 1.2px;
}

.ds-footer-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 20px;
    background: linear-gradient(90deg,
            var(--ds-primary),
            var(--ds-secondary));
}

.ds-footer-title::after {
    content: "";
    position: absolute;
    left: 48px;
    bottom: 0;
    width: 8px;
    height: 3px;
    border-radius: 20px;
    background: var(--ds-secondary);
}

/* ==========================================
   SOCIAL MEDIA
========================================== */

.ds-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.ds-footer-socials a {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    background: var(--ds-white);
    box-shadow: 0 10px 25px rgba(32, 75, 117, 0.1);
    color: var(--ds-primary);
    font-size: 16px;
    text-decoration: none;
    transition:
        transform 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-footer-socials a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    transform: scale(0);
    transition: transform 0.35s ease;
}

.ds-footer-socials a i {
    position: relative;
    z-index: 2;
}

.ds-footer-socials a:hover {
    color: var(--ds-white);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(32, 75, 117, 0.25);
    transform: translateY(-5px);
}

.ds-footer-socials a:hover::before {
    transform: scale(1);
}

/* ==========================================
   FOOTER LINKS
========================================== */

.ds-footer-links,
.ds-contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-footer-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ds-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ds-text);
    font-size: 14px;
    line-height: 1.55;
    text-decoration: none;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.ds-footer-links a i {
    flex: 0 0 auto;
    color: var(--ds-secondary);
    font-size: 10px;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.ds-footer-links a:hover {
    color: var(--ds-primary);
    transform: translateX(5px);
}

.ds-footer-links a:hover i {
    color: var(--ds-primary);
    transform: translateX(2px);
}

.ds-footer-links .fa-location-dot {
    font-size: 12px;
}

.ds-footer-links .footer-view-all {
    width: max-content;
    margin-top: 4px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(32, 75, 117, 0.3);
    color: var(--ds-primary);
    font-weight: 700;
}

.ds-footer-links .footer-view-all .fa-arrow-right-long {
    font-size: 12px;
}

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

.ds-contact-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.ds-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.contact-icon {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(32, 75, 117, 0.12);
    border-radius: 12px;
    background: rgba(32, 75, 117, 0.06);
    color: var(--ds-primary);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.ds-contact-list li:hover .contact-icon {
    background: var(--ds-primary);
    color: var(--ds-white);
    transform: translateY(-3px) rotate(-4deg);
}

.ds-contact-list strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ds-heading);
    font-size: 12px;
    font-weight: 700;
}

.ds-contact-list p,
.ds-contact-list a {
    margin: 0;
    color: var(--ds-text);
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.3s ease;
}

.ds-contact-list a:hover {
    color: var(--ds-primary);
}

.ds-map-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ds-map-link i {
    font-size: 10px;
}

/* ==========================================
   NEWSLETTER SECTION
========================================== */

.ds-footer-newsletter {
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: 1fr minmax(450px, 0.9fr);
    gap: 35px;
    align-items: center;
    margin-top: 70px;
    padding: 26px 30px;
    overflow: hidden;
    border: 1px solid rgba(32, 75, 117, 0.13);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--ds-shadow);
    backdrop-filter: blur(15px);
}

.ds-footer-newsletter::before {
    content: "";
    position: absolute;
    top: -110px;
    left: -75px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(72, 107, 147, 0.08);
}

.ds-footer-newsletter::after {
    content: "";
    position: absolute;
    right: 22%;
    bottom: -120px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(32, 75, 117, 0.06);
}

.newsletter-content,
.newsletter-form {
    position: relative;
    z-index: 2;
}

.newsletter-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

.newsletter-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 14px 30px rgba(32, 75, 117, 0.25);
    color: var(--ds-white);
    font-size: 21px;
    transform: rotate(-5deg);
}

.newsletter-label {
    display: block;
    margin-bottom: 4px;
    color: var(--ds-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.newsletter-content h3 {
    margin: 0;
    color: var(--ds-heading);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(23px, 2vw, 31px);
    font-weight: 400;
    letter-spacing: 0.7px;
    line-height: 1.15;
}

.newsletter-form {
    display: flex;
    gap: 10px;
}

.newsletter-input-wrap {
    position: relative;
    flex: 1;
}

.newsletter-input-wrap>i {
    position: absolute;
    top: 50%;
    left: 18px;
    z-index: 2;
    color: var(--ds-secondary);
    font-size: 15px;
    transform: translateY(-50%);
}

.newsletter-input-wrap input {
    width: 100%;
    height: 55px;
    outline: none;
    border: 1px solid var(--ds-border);
    border-radius: 13px;
    background: var(--ds-white);
    padding: 0 18px 0 48px;
    color: var(--ds-heading);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.newsletter-input-wrap input::placeholder {
    color: #9ba9b6;
}

.newsletter-input-wrap input:focus {
    border-color: var(--ds-secondary);
    box-shadow: 0 0 0 4px rgba(72, 107, 147, 0.1);
}

.newsletter-form button {
    display: inline-flex;
    height: 55px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    cursor: pointer;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    padding: 0 26px;
    box-shadow: 0 13px 25px rgba(32, 75, 117, 0.22);
    color: var(--ds-white);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.newsletter-form button i {
    transition: transform 0.3s ease;
}

.newsletter-form button:hover {
    box-shadow: 0 17px 30px rgba(32, 75, 117, 0.3);
    transform: translateY(-3px);
}

.newsletter-form button:hover i {
    transform: translateX(4px);
}

/* ==========================================
   FOOTER LANDSCAPE
========================================== */

.ds-footer-landscape {
    position: absolute;
    right: 0;
    bottom: 72px;
    left: 0;
    z-index: 1;
    height: 245px;
    overflow: hidden;
    pointer-events: none;
}

.ds-footer-landscape::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 63px;
    left: 0;
    height: 94px;
    background:
        linear-gradient(180deg,
            rgba(213, 231, 221, 0.65),
            rgba(191, 218, 205, 0.85));
}

.ds-footer-sun {
    position: absolute;
    right: 12%;
    bottom: 117px;
    width: 87px;
    height: 87px;
    border-radius: 50%;
    background: rgba(255, 207, 89, 0.27);
    box-shadow:
        0 0 0 18px rgba(255, 207, 89, 0.08),
        0 0 65px rgba(255, 207, 89, 0.25);
}

/* ==========================================
   CITY BUILDINGS
========================================== */

.ds-footer-city {
    position: absolute;
    bottom: 88px;
    left: 3%;
    width: 320px;
    height: 135px;
    opacity: 0.43;
}

.city-building {
    position: absolute;
    bottom: 0;
    display: block;
    border-radius: 5px 5px 0 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 8px,
            rgba(255, 255, 255, 0.6) 8px 11px),
        repeating-linear-gradient(180deg,
            transparent 0 12px,
            rgba(255, 255, 255, 0.5) 12px 15px),
        #9cd2e7;
}

.building-1 {
    left: 0;
    width: 42px;
    height: 87px;
}

.building-2 {
    left: 47px;
    width: 38px;
    height: 120px;
}

.building-3 {
    left: 91px;
    width: 52px;
    height: 75px;
}

.building-4 {
    left: 149px;
    width: 37px;
    height: 105px;
}

.building-5 {
    left: 192px;
    width: 54px;
    height: 91px;
}

.building-6 {
    left: 252px;
    width: 32px;
    height: 127px;
}

.building-7 {
    left: 289px;
    width: 45px;
    height: 69px;
}

/* ==========================================
   MOUNTAINS
========================================== */

.ds-footer-mountains {
    position: absolute;
    right: 0;
    bottom: 90px;
    width: 500px;
    height: 150px;
    opacity: 0.65;
}

.mountain {
    position: absolute;
    bottom: -10px;
    display: block;
    background: linear-gradient(140deg,
            #c9ddbe,
            #dce8d6);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.mountain-1 {
    right: 245px;
    width: 180px;
    height: 126px;
}

.mountain-2 {
    right: 90px;
    width: 220px;
    height: 165px;
}

.mountain-3 {
    right: -45px;
    width: 200px;
    height: 123px;
}

/* ==========================================
   BILLBOARDS
========================================== */

.footer-billboard {
    position: absolute;
    bottom: 84px;
    width: 195px;
    height: 125px;
}

.footer-billboard-left {
    left: 29%;
}

.footer-billboard-right {
    right: 25%;
    transform: scale(0.83);
    transform-origin: bottom;
}

.billboard-screen {
    position: relative;
    z-index: 3;
    display: flex;
    width: 100%;
    height: 82px;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    border: 4px solid rgba(32, 75, 117, 0.82);
    border-radius: 5px;
    background:
        linear-gradient(110deg,
            rgba(255, 255, 255, 0.94),
            rgba(226, 239, 248, 0.97));
    box-shadow: 0 13px 25px rgba(32, 75, 117, 0.16);
    padding: 13px 15px;
    color: var(--ds-primary);
}

.billboard-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.95),
            transparent);
    transform: skewX(-25deg);
    animation: billboardShine 5s linear infinite;
}

.billboard-screen span,
.billboard-screen strong,
.billboard-screen small {
    position: relative;
    z-index: 2;
}

.billboard-screen span {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.billboard-screen strong {
    margin: 3px 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.6px;
    line-height: 1;
}

.billboard-screen small {
    color: var(--ds-secondary);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1px;
}

.billboard-pole {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 7px;
    height: 49px;
    border-radius: 0 0 3px 3px;
    background: #7790a4;
}

.billboard-pole::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 25px;
    height: 5px;
    border-radius: 5px;
    background: #71889c;
    transform: translateX(-50%);
}

.billboard-pole-left {
    left: 38px;
}

.billboard-pole-right {
    right: 38px;
}

@keyframes billboardShine {
    0% {
        left: -75%;
    }

    30%,
    100% {
        left: 130%;
    }
}

/* ==========================================
   TREES
========================================== */

.footer-tree {
    position: absolute;
    bottom: 74px;
    width: 7px;
    height: 39px;
    border-radius: 3px;
    background: #a9bfae;
}

.footer-tree::before,
.footer-tree::after {
    content: "";
    position: absolute;
    left: 50%;
    border-radius: 50%;
    background: rgba(150, 198, 157, 0.86);
    transform: translateX(-50%);
}

.footer-tree::before {
    top: -17px;
    width: 27px;
    height: 27px;
}

.footer-tree::after {
    top: -5px;
    width: 34px;
    height: 25px;
}

.tree-1 {
    left: 18%;
}

.tree-2 {
    left: 48%;
}

.tree-3 {
    left: 64%;
}

.tree-4 {
    right: 10%;
}

.tree-5 {
    right: 37%;
}

/* ==========================================
   STREET LIGHTS
========================================== */

.street-light {
    position: absolute;
    bottom: 77px;
    width: 4px;
    height: 79px;
    border-radius: 4px;
    background: #8296a5;
}

.street-light::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 4px;
    border-radius: 5px;
    background: #8296a5;
}

.street-light>span {
    position: absolute;
    top: -2px;
    left: 18px;
    width: 10px;
    height: 7px;
    border-radius: 7px 7px 3px 3px;
    background: #ffd26c;
    box-shadow: 0 0 18px rgba(255, 210, 108, 0.8);
    animation: streetLightGlow 2.2s ease-in-out infinite;
}

.street-light-1 {
    left: 23%;
}

.street-light-2 {
    left: 57%;
}

.street-light-3 {
    right: 18%;
}

@keyframes streetLightGlow {

    0%,
    100% {
        opacity: 0.5;
        box-shadow: 0 0 8px rgba(255, 210, 108, 0.35);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 23px rgba(255, 210, 108, 0.9);
    }
}

/* ==========================================
   HIGHWAY
========================================== */

.footer-highway {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    overflow: hidden;
    background: linear-gradient(180deg,
            #688397 0%,
            #4d687b 100%);
    border-top: 6px solid #d5e1e7;
}

.footer-highway::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12px;
    background: #3d5668;
}

.highway-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;

    background: repeating-linear-gradient(90deg,
            #f7df84 0 55px,
            transparent 55px 110px);

    animation: none;
}


.highway-line-one {
    top: 28px;
}

.highway-line-two {
    top: 62px;
}

@keyframes roadLineMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-105px);
    }
}

/* ==========================================
   MOVING VEHICLES
========================================== */

.footer-vehicle {
    position: absolute;
    z-index: 4;
}

/* Car */

.footer-car {
    bottom: 30px;
    left: -130px;
    width: 105px;
    height: 40px;
    animation: carMove 17s linear infinite;
}

.vehicle-body {
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 95px;
    height: 24px;
    border-radius: 18px 24px 7px 7px;
    background: var(--ds-primary);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.vehicle-body::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 24px;
    width: 48px;
    height: 19px;
    border-radius: 14px 16px 0 0;
    background: var(--ds-primary);
    transform: skewX(-11deg);
}

.vehicle-window {
    position: absolute;
    top: -10px;
    left: 32px;
    z-index: 2;
    width: 32px;
    height: 13px;
    border-radius: 9px 10px 2px 2px;
    background: #c9e5f2;
    transform: skewX(-10deg);
}

.vehicle-light {
    position: absolute;
    right: -2px;
    bottom: 9px;
    width: 6px;
    height: 7px;
    border-radius: 0 5px 5px 0;
    background: #ffe387;
    box-shadow: 8px 0 18px rgba(255, 227, 135, 0.9);
}

.vehicle-wheel {
    position: absolute;
    z-index: 5;
    display: block;
    width: 18px;
    height: 18px;
    border: 4px solid #263746;
    border-radius: 50%;
    background: #b9c8d1;
    animation: wheelRotate 0.65s linear infinite;
}

.footer-car .wheel-left {
    bottom: 0;
    left: 19px;
}

.footer-car .wheel-right {
    right: 10px;
    bottom: 0;
}

/* Truck */

.footer-truck {
    right: -220px;
    bottom: 11px;
    width: 180px;
    height: 53px;
    animation: truckMove 24s linear 5s infinite;
}

.truck-container {
    position: absolute;
    bottom: 14px;
    left: 0;
    display: flex;
    width: 121px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 5px 3px 3px 3px;
    background: #f2f6f8;
    box-shadow: inset 0 0 0 3px var(--ds-secondary);
    color: var(--ds-primary);
}

.truck-container span {
    font-family: "Bebas Neue", sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
}

.truck-cabin {
    position: absolute;
    right: 0;
    bottom: 14px;
    width: 57px;
    height: 39px;
    border-radius: 5px 13px 4px 4px;
    background: var(--ds-secondary);
}

.truck-cabin::before {
    content: "";
    position: absolute;
    top: 20px;
    right: -4px;
    width: 7px;
    height: 8px;
    border-radius: 2px;
    background: #ffd778;
}

.truck-window {
    position: absolute;
    top: 5px;
    left: 7px;
    width: 32px;
    height: 15px;
    border-radius: 3px 9px 2px 2px;
    background: #cde6f0;
}

.truck-wheel-one {
    bottom: 3px;
    left: 22px;
}

.truck-wheel-two {
    right: 43px;
    bottom: 3px;
}

.truck-wheel-three {
    right: 10px;
    bottom: 3px;
}

@keyframes carMove {
    0% {
        left: -140px;
    }

    100% {
        left: calc(100% + 150px);
    }
}

@keyframes truckMove {
    0% {
        right: -220px;
    }

    100% {
        right: calc(100% + 230px);
    }
}

@keyframes wheelRotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   BOTTOM FOOTER
========================================== */

.ds-footer-bottom {
    position: relative;
    z-index: 9;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    background: var(--ds-dark);
}

.ds-footer-bottom-inner {
    display: flex;
    min-height: 73px;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.ds-footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.6;
}

.ds-footer-bottom p strong {
    color: var(--ds-white);
    font-weight: 700;
}

.ds-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.ds-footer-legal a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ds-footer-legal a:hover {
    color: var(--ds-white);
}

.ds-footer-legal span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

/* ==========================================
   CALLBACK BUTTON
========================================== */

.ds-callback-button {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(180deg,
            var(--ds-primary),
            var(--ds-secondary));
    padding: 17px 11px;
    box-shadow: 0 15px 35px rgba(32, 75, 117, 0.28);
    color: var(--ds-white);
    text-decoration: none;
    writing-mode: vertical-rl;
    transform: translateY(-50%);
    transition:
        padding 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-callback-button i {
    transform: rotate(90deg);
}

.ds-callback-button span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.ds-callback-button:hover {
    padding-right: 16px;
    box-shadow: 0 18px 40px rgba(32, 75, 117, 0.38);
}

/* ==========================================
   WHATSAPP BUTTON
========================================== */

.ds-whatsapp-button {
    position: fixed;
    right: 25px;
    bottom: 50px;
    z-index: 1000;
    display: inline-flex;
    width: 57px;
    height: 57px;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ds-white);
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.35);
    color: var(--ds-white);
    font-size: 27px;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-whatsapp-button>i {
    position: relative;
    z-index: 3;
}

.whatsapp-pulse {
    position: absolute;
    inset: -1px;
    z-index: 1;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.45);
    animation: whatsappPulse 2s ease-out infinite;
}

.whatsapp-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 13px);
    width: max-content;
    pointer-events: none;
    border-radius: 7px;
    background: var(--ds-dark);
    padding: 8px 11px;
    color: var(--ds-white);
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transform: translate(8px, -50%);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.whatsapp-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    border: 5px solid transparent;
    border-left-color: var(--ds-dark);
    transform: translateY(-50%);
}

.ds-whatsapp-button:hover {
    box-shadow: 0 16px 38px rgba(37, 211, 102, 0.5);
    transform: translateY(-5px) scale(1.04);
}

.ds-whatsapp-button:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translate(0, -50%);
}

@keyframes whatsappPulse {
    0% {
        opacity: 0.75;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.65);
    }
}

/* ==========================================
   LARGE TABLET RESPONSIVE
========================================== */

@media (max-width: 1250px) {
    .ds-footer-grid {
        grid-template-columns: 1.3fr repeat(3, 1fr);
        gap: 45px 35px;
    }

    .ds-footer-contact {
        grid-column: span 2;
    }

    .ds-footer-newsletter {
        grid-template-columns: 1fr 1fr;
    }

    .footer-billboard-right {
        right: 15%;
    }
}

/* ==========================================
   TABLET RESPONSIVE
========================================== */

@media (max-width: 991px) {
    .ds-footer-main {
        padding-top: 75px;
    }

    .ds-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px 40px;
    }

    .ds-footer-about,
    .ds-footer-contact {
        grid-column: auto;
    }

    .ds-footer-newsletter {
        grid-template-columns: 1fr;
        margin-top: 55px;
    }

    .newsletter-form {
        max-width: 100%;
    }

    .ds-footer-city {
        left: -35px;
        transform: scale(0.85);
        transform-origin: bottom left;
    }

    .footer-billboard-left {
        left: 34%;
    }

    .footer-billboard-right {
        display: none;
    }

    .ds-footer-mountains {
        right: -80px;
    }
}

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

@media (max-width: 767px) {
    .ds-container {
        width: min(100% - 30px, 1480px);
    }

    .ds-footer-main {
        padding: 65px 0 220px;
    }

    .ds-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ds-footer-description {
        max-width: 100%;
    }

    .ds-footer-column:not(.ds-footer-about) {
        padding-top: 4px;
        border-top: 1px solid rgba(32, 75, 117, 0.09);
    }

    .ds-footer-title {
        margin-top: 25px;
        margin-bottom: 23px;
    }

    .ds-footer-newsletter {
        padding: 23px 18px;
        border-radius: 18px;
    }

    .newsletter-content {
        align-items: flex-start;
    }

    .newsletter-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 15px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form button {
        width: 100%;
    }

    .ds-footer-landscape {
        bottom: 111px;
        height: 185px;
    }

    .ds-footer-city {
        bottom: 73px;
        left: -88px;
        opacity: 0.32;
        transform: scale(0.65);
    }

    .ds-footer-mountains {
        right: -150px;
        bottom: 68px;
        opacity: 0.48;
        transform: scale(0.8);
        transform-origin: bottom right;
    }

    .footer-billboard-left {
        bottom: 69px;
        left: 35%;
        transform: scale(0.7);
        transform-origin: bottom;
    }

    .footer-tree {
        bottom: 57px;
        transform: scale(0.8);
        transform-origin: bottom;
    }

    .street-light {
        bottom: 61px;
        transform: scale(0.75);
        transform-origin: bottom;
    }

    .footer-highway {
        height: 62px;
    }

    .highway-line-one {
        top: 17px;
    }

    .highway-line-two {
        top: 42px;
    }

    .footer-car {
        bottom: 20px;
        transform: scale(0.8);
        transform-origin: bottom;
    }

    .footer-truck {
        bottom: 1px;
        transform: scale(0.75);
        transform-origin: bottom;
    }

    .ds-footer-bottom-inner {
        min-height: 112px;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding: 18px 0;
        text-align: center;
    }

    .ds-footer-legal {
        justify-content: center;
    }

    .ds-callback-button {
        top: auto;
        right: 83px;
        bottom: 27px;
        width: 49px;
        height: 49px;
        justify-content: center;
        border: 3px solid var(--ds-white);
        border-radius: 50%;
        padding: 0;
        writing-mode: initial;
        transform: none;
    }

    .ds-callback-button i {
        transform: none;
    }

    .ds-callback-button span {
        display: none;
    }

    .ds-callback-button:hover {
        padding: 0;
        transform: translateY(-4px);
    }

    .ds-whatsapp-button {
        right: 20px;
        bottom: 24px;
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
}

/* ==========================================
   EXTRA SMALL MOBILE
========================================== */

@media (max-width: 480px) {
    .ds-footer-logo {
        max-width: 190px;
    }

    .ds-footer-description {
        font-size: 13px;
    }

    .newsletter-content h3 {
        font-size: 23px;
    }

    .newsletter-icon {
        display: none;
    }

    .footer-billboard-left {
        left: 23%;
    }

    .ds-footer-city {
        left: -120px;
    }

    .street-light-2 {
        display: none;
    }

    .ds-footer-legal {
        gap: 8px;
    }

    .ds-footer-legal a,
    .ds-footer-bottom p {
        font-size: 10px;
    }
}

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

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

    .footer-car,
    .footer-truck,
    .vehicle-wheel,
    .highway-line,
    .billboard-screen::before,
    .street-light>span,
    .whatsapp-pulse {
        animation: none !important;
    }

    .footer-car {
        left: 12%;
    }

    .footer-truck {
        right: 10%;
    }
}

/* =====================================================
   UPDATED VISIBLE FOOTER LANDSCAPE
===================================================== */

.ds-footer {
    position: relative;
    overflow: hidden;
    background: #f7fafc;
    isolation: isolate;
}

/* Main footer content ko landscape ke upar rakhein */
.ds-footer-main {
    position: relative;
    z-index: 4;
    padding: 95px 0 330px;

    background:
        radial-gradient(circle at 12% 10%,
            rgba(72, 107, 147, 0.08),
            transparent 27%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fbfd 65%,
            rgba(242, 248, 252, 0.55) 100%);
}

/* Landscape ko newsletter/content ke piche lekin clearly visible rakhein */
.ds-footer-landscape {
    position: absolute;
    right: 0;
    bottom: 72px;
    left: 0;
    z-index: 2;

    height: 285px;
    overflow: hidden;
    pointer-events: none;

    opacity: 1;
    visibility: visible;
}

/* Ground background */
.ds-footer-landscape::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 78px;
    left: 0;

    height: 115px;

    background:
        linear-gradient(180deg,
            rgba(220, 239, 228, 0.92),
            rgba(190, 221, 207, 0.98));

    opacity: 1;
}

/* Soft sky layer */
.ds-footer-landscape::after {
    content: "";
    position: absolute;
    inset: 0 0 78px;

    background:
        linear-gradient(180deg,
            rgba(245, 250, 253, 0.1),
            rgba(218, 236, 246, 0.28));

    z-index: -1;
}

/* =====================================================
   CITY VISIBILITY
===================================================== */

.ds-footer-city {
    position: absolute;
    bottom: 103px;
    left: 2%;

    width: 350px;
    height: 150px;

    opacity: 0.85;
    z-index: 2;
}

.city-building {
    position: absolute;
    bottom: 0;
    display: block;

    border-radius: 5px 5px 0 0;

    background:
        repeating-linear-gradient(90deg,
            transparent 0 8px,
            rgba(255, 255, 255, 0.78) 8px 11px),
        repeating-linear-gradient(180deg,
            transparent 0 12px,
            rgba(255, 255, 255, 0.7) 12px 15px),
        #8ec9df;

    box-shadow:
        inset 0 0 0 1px rgba(32, 75, 117, 0.08),
        0 8px 20px rgba(32, 75, 117, 0.06);
}

/* =====================================================
   MOUNTAIN VISIBILITY
===================================================== */

.ds-footer-mountains {
    position: absolute;
    right: -20px;
    bottom: 103px;

    width: 540px;
    height: 170px;

    opacity: 0.9;
    z-index: 1;
}

.mountain {
    position: absolute;
    bottom: -10px;
    display: block;

    background:
        linear-gradient(140deg,
            #bad5ae,
            #d4e5cc);

    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

    filter: drop-shadow(0 8px 15px rgba(72, 107, 147, 0.08));
}

/* =====================================================
   BILLBOARD VISIBILITY
===================================================== */

.footer-billboard {
    position: absolute;
    bottom: 96px;

    width: 210px;
    height: 145px;

    z-index: 5;
    opacity: 1;
}

.footer-billboard-left {
    left: 28%;
}

.footer-billboard-right {
    right: 24%;
    transform: scale(0.9);
    transform-origin: bottom;
}

.billboard-screen {
    position: relative;
    z-index: 3;

    display: flex;
    width: 100%;
    height: 90px;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    border: 4px solid #204b75;
    border-radius: 6px;

    background:
        linear-gradient(120deg,
            #ffffff,
            #e6f0f7);

    box-shadow:
        0 14px 25px rgba(32, 75, 117, 0.2),
        inset 0 0 0 2px rgba(255, 255, 255, 0.75);

    padding: 13px 15px;
    color: #204b75;
}

.billboard-screen span {
    color: #486b93;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.billboard-screen strong {
    margin: 4px 0;

    color: #204b75;
    font-family: "Bebas Neue", sans-serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0.7px;
    line-height: 1;
}

.billboard-screen small {
    color: #486b93;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Billboard shine */
.billboard-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.95),
            transparent);

    transform: skewX(-25deg);
    animation: dsBillboardShine 4.5s linear infinite;
}

@keyframes dsBillboardShine {
    0% {
        left: -80%;
    }

    35%,
    100% {
        left: 135%;
    }
}

.billboard-pole {
    position: absolute;
    bottom: 0;
    z-index: 1;

    width: 8px;
    height: 58px;

    border-radius: 0 0 3px 3px;
    background: #718ca0;

    box-shadow:
        inset 2px 0 rgba(255, 255, 255, 0.25);
}

.billboard-pole-left {
    left: 42px;
}

.billboard-pole-right {
    right: 42px;
}

.billboard-pole::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;

    width: 30px;
    height: 6px;

    border-radius: 6px;
    background: #607c90;

    transform: translateX(-50%);
}

/* =====================================================
   TREES AND STREET LIGHTS
===================================================== */

.footer-tree {
    position: absolute;
    bottom: 90px;

    width: 7px;
    height: 42px;

    border-radius: 3px;
    background: #8fac9a;

    z-index: 3;
    opacity: 1;
}

.footer-tree::before,
.footer-tree::after {
    content: "";
    position: absolute;
    left: 50%;

    border-radius: 50%;
    background: #8bc59a;

    transform: translateX(-50%);
}

.footer-tree::before {
    top: -18px;
    width: 30px;
    height: 30px;
}

.footer-tree::after {
    top: -6px;
    width: 38px;
    height: 28px;
}

.street-light {
    position: absolute;
    bottom: 91px;

    width: 5px;
    height: 87px;

    border-radius: 4px;
    background: #637d90;

    z-index: 4;
}

.street-light::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 27px;
    height: 5px;

    border-radius: 5px;
    background: #637d90;
}

.street-light>span {
    position: absolute;
    top: -2px;
    left: 20px;

    width: 11px;
    height: 8px;

    border-radius: 8px 8px 3px 3px;
    background: #ffd46f;

    box-shadow:
        0 0 10px rgba(255, 212, 111, 0.65),
        0 0 25px rgba(255, 212, 111, 0.45);

    animation: dsStreetGlow 2s ease-in-out infinite;
}

@keyframes dsStreetGlow {

    0%,
    100% {
        opacity: 0.65;
        box-shadow: 0 0 10px rgba(255, 212, 111, 0.5);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 15px rgba(255, 212, 111, 0.9),
            0 0 32px rgba(255, 212, 111, 0.7);
    }
}

/* =====================================================
   HIGHWAY
===================================================== */

.footer-highway {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 88px;
    overflow: hidden;

    border-top: 6px solid #d0dce4;

    background:
        linear-gradient(180deg,
            #708b9e 0%,
            #536f82 100%);

    z-index: 10;

    box-shadow:
        inset 0 7px 12px rgba(255, 255, 255, 0.08);
}

.footer-highway::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 13px;

    background: #405d70;
}

.highway-line {
    position: absolute;
    left: 0;

    width: 220%;
    height: 4px;

    background:
        repeating-linear-gradient(90deg,
            #f7df84 0 58px,
            transparent 58px 112px);

    animation: dsRoadLineMove 2.8s linear infinite;
}

.highway-line-one {
    top: 27px;
}

.highway-line-two {
    top: 61px;
}

@keyframes dsRoadLineMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(0);
    }
}

/* =====================================================
   CAR — LEFT TO RIGHT
===================================================== */

.footer-car {
    position: absolute;
    bottom: 33px;
    left: -150px;

    width: 110px;
    height: 43px;

    z-index: 20;

    animation: dsCarMove 15s linear infinite;
}

@keyframes dsCarMove {
    from {
        left: -150px;
    }

    to {
        left: calc(100% + 170px);
    }
}

/* =====================================================
   TRUCK — LEFT TO RIGHT, SAME DIRECTION AS CAR
===================================================== */

.footer-truck {
    position: absolute;
    right: auto;
    bottom: 11px;
    left: -240px;

    width: 190px;
    height: 58px;

    z-index: 18;

    animation: dsTruckMove 22s linear 3s infinite;
}

/* Truck ke existing structure ko horizontal flip karein,
   taaki cabin/front right side mein rahe */
.footer-truck .truck-container,
.footer-truck .truck-cabin,
.footer-truck .vehicle-wheel {
    transform: none;
}

@keyframes dsTruckMove {
    from {
        left: -240px;
    }

    to {
        left: calc(100% + 250px);
    }
}

/* Truck body */
.truck-container {
    position: absolute;
    bottom: 15px;
    left: 0;

    display: flex;
    width: 128px;
    height: 41px;
    align-items: center;
    justify-content: center;

    border-radius: 5px 3px 3px 3px;

    background: #f5f8fa;
    box-shadow:
        inset 0 0 0 3px #486b93,
        0 5px 9px rgba(23, 55, 83, 0.16);

    color: #204b75;
}

.truck-container span {
    font-family: "Bebas Neue", sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
}

.truck-cabin {
    position: absolute;
    right: 0;
    bottom: 15px;

    width: 61px;
    height: 42px;

    border-radius: 5px 15px 4px 4px;

    background:
        linear-gradient(135deg,
            #486b93,
            #204b75);

    box-shadow:
        0 5px 9px rgba(23, 55, 83, 0.18);
}

.truck-cabin::before {
    content: "";
    position: absolute;
    top: 21px;
    right: -4px;

    width: 8px;
    height: 8px;

    border-radius: 2px;
    background: #ffd778;

    box-shadow: 9px 0 17px rgba(255, 215, 120, 0.9);
}

.truck-window {
    position: absolute;
    top: 6px;
    left: 8px;

    width: 34px;
    height: 16px;

    border-radius: 3px 10px 2px 2px;
    background: #cde7f2;

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* =====================================================
   VEHICLE WHEELS
===================================================== */

.vehicle-wheel {
    position: absolute;
    z-index: 25;

    display: block;
    width: 19px;
    height: 19px;

    border: 4px solid #273a48;
    border-radius: 50%;

    background:
        radial-gradient(circle,
            #eef4f7 0 30%,
            #9eb0bc 31% 100%);

    animation: dsWheelRotate 0.62s linear infinite;
}

@keyframes dsWheelRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991px) {
    .ds-footer-main {
        padding-bottom: 300px;
    }

    .ds-footer-landscape {
        height: 260px;
    }

    .footer-billboard-left {
        left: 32%;
    }

    .footer-billboard-right {
        right: 8%;
    }

    .ds-footer-city {
        left: -45px;
        opacity: 0.75;
        transform: scale(0.85);
        transform-origin: bottom left;
    }
}

@media (max-width: 767px) {
    .ds-footer-main {
        padding-bottom: 245px;
    }

    .ds-footer-landscape {
        bottom: 110px;
        height: 205px;
    }

    .ds-footer-landscape::before {
        bottom: 60px;
        height: 80px;
    }

    .footer-highway {
        height: 65px;
    }

    .ds-footer-city {
        bottom: 62px;
        left: -100px;
        opacity: 0.65;
        transform: scale(0.63);
    }

    .ds-footer-mountains {
        bottom: 62px;
        right: -170px;
        opacity: 0.7;
        transform: scale(0.78);
        transform-origin: bottom right;
    }

    .footer-billboard {
        bottom: 59px;
    }

    .footer-billboard-left {
        left: 24%;
        transform: scale(0.68);
        transform-origin: bottom;
    }

    .footer-billboard-right {
        display: none;
    }

    .footer-tree {
        bottom: 54px;
        transform: scale(0.75);
        transform-origin: bottom;
    }

    .street-light {
        bottom: 58px;
        transform: scale(0.72);
        transform-origin: bottom;
    }

    .highway-line-one {
        top: 19px;
    }

    .highway-line-two {
        top: 45px;
    }

    .footer-car {
        bottom: 20px;
        transform: scale(0.78);
        transform-origin: bottom left;
    }

    .footer-truck {
        bottom: 1px;
        transform: scale(0.72);
        transform-origin: bottom left;
    }
}

/* Reduced motion users */
@media (prefers-reduced-motion: reduce) {

    .footer-car,
    .footer-truck,
    .vehicle-wheel,
    .highway-line,
    .billboard-screen::before,
    .street-light>span {
        animation: none !important;
    }

    .footer-car {
        left: 10%;
    }

    .footer-truck {
        left: 55%;
    }
}

.ds-footer-main {
    padding-bottom: 330px;
    background: linear-gradient(180deg,
            #ffffff 0%,
            #f8fbfd 65%,
            rgba(242, 248, 252, 0.55) 100%);
}

.footer-truck {
    right: auto;
    left: -240px;
    animation: dsTruckMove 22s linear 3s infinite;
}

@keyframes dsTruckMove {
    from {
        left: -240px;
    }

    to {
        left: calc(100% + 250px);
    }
}

/* =========================================
   DS OUTDOOR MEDIA CAMPAIGN MODAL
========================================= */



/* Header Trigger Button */

.ds-campaign-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid var(--ds-primary);
    border-radius: 8px;
    background: var(--ds-primary);
    color: var(--ds-white);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-campaign-trigger::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(135deg,
            var(--ds-secondary),
            var(--ds-primary));
    transform: translateX(-105%);
    transition: transform 0.45s ease;
}

.ds-campaign-trigger:hover::before {
    transform: translateX(0);
}

.ds-campaign-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(32, 75, 117, 0.26);
}

.ds-campaign-trigger span {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.ds-campaign-trigger:hover span {
    transform: translate(2px, -2px);
}

/* Modal Main Wrapper */

.ds-campaign-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.ds-campaign-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.ds-campaign-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 27, 44, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Modal Dialog */

.ds-campaign-dialog {
    position: relative;
    z-index: 2;
    width: min(100%, 680px);
    max-height: calc(100vh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 22px;
    background: var(--ds-white);
    box-shadow: var(--ds-shadow);
    transform: translateY(35px) scale(0.96);
    opacity: 0;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.ds-campaign-modal.is-open .ds-campaign-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Custom Scrollbar */

.ds-campaign-dialog::-webkit-scrollbar {
    width: 5px;
}

.ds-campaign-dialog::-webkit-scrollbar-track {
    background: transparent;
}

.ds-campaign-dialog::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: rgba(32, 75, 117, 0.35);
}

/* Close Button */

.ds-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.ds-modal-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(90deg);
}

.ds-modal-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 2px;
    border-radius: 10px;
    background: var(--ds-white);
}

.ds-modal-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ds-modal-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Modal Top */

.ds-modal-top {
    position: relative;
    padding: 42px 70px 36px 42px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 18%,
            rgba(255, 255, 255, 0.18),
            transparent 26%),
        linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    color: var(--ds-white);
}

.ds-modal-top::before {
    position: absolute;
    right: -55px;
    bottom: -75px;
    width: 190px;
    height: 190px;
    border: 28px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    content: "";
}

.ds-modal-label {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.78);
}

.ds-modal-top h2 {
    position: relative;
    max-width: 500px;
    margin: 0 0 10px;
    color: var(--ds-white);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.7px;
}

.ds-modal-top p {
    position: relative;
    max-width: 480px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

/* Modal Content */

.ds-modal-content {
    padding: 34px 42px 38px;
    background: var(--ds-white);
}

/*update-form*/


/* =========================================
   CAMPAIGN MODAL FORM — FIXED UI
========================================= */

.ds-campaign-form,
.ds-campaign-form * {
    box-sizing: border-box;
}

.ds-campaign-form {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
}

.ds-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
}

/* Field wrapper */

.ds-campaign-form .ds-field {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Label reset */

.ds-campaign-form .ds-field>label {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;

    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 9px !important;
    padding: 0 !important;

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

    color: #17324d !important;
    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-align: left !important;

    pointer-events: auto !important;
}

.ds-campaign-form .ds-field>label span {
    color: #dc3545;
}

/* Input wrappers */

.ds-input-wrap,
.ds-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    margin: 0;
    overflow: hidden;

    border: 1px solid #ccd9e6;
    border-radius: 12px;
    background: #f4f8fc;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

/* Inputs reset */

.ds-campaign-form input,
.ds-campaign-form select,
.ds-campaign-form textarea {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;
    float: none !important;

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

    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    transform: none !important;
    box-shadow: none !important;

    color: #17324d !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

/* Normal input */

.ds-campaign-form input {
    height: 52px !important;
    padding: 0 16px !important;
    background: transparent !important;
    line-height: 52px !important;
}

/* Placeholder */

.ds-campaign-form input::placeholder,
.ds-campaign-form textarea::placeholder {
    color: #8a9cae !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Phone field */

.ds-phone-wrap {
    padding-left: 0;
}

.ds-phone-code {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    height: 26px;
    margin-left: 15px;
    padding-right: 12px;

    border-right: 1px solid #c8d5e1;

    color: #6f8295;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.ds-phone-wrap input {
    padding-left: 12px !important;
}

/* Select */

.ds-select-wrap select {
    height: 52px !important;
    padding: 0 46px 0 16px !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background: transparent !important;
    cursor: pointer;
    line-height: normal !important;
}

.ds-select-wrap select:invalid,
.ds-select-wrap select option[value=""] {
    color: #8a9cae !important;
}

.ds-select-wrap select option {
    color: #17324d;
    background: #ffffff;
}

/* Custom select arrow */

.ds-select-arrow {
    position: absolute;
    top: 50%;
    right: 17px;

    width: 8px;
    height: 8px;

    border-right: 2px solid #62788c;
    border-bottom: 2px solid #62788c;

    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
}

/* Focus */

.ds-input-wrap:focus-within,
.ds-select-wrap:focus-within {
    border-color: #204b75;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(32, 75, 117, 0.1);
}

/* Full width textarea field */

.ds-field-full {
    margin-top: 22px !important;
}

/* Textarea */

.ds-campaign-form textarea {
    min-height: 125px !important;
    max-height: 220px !important;
    padding: 15px 16px !important;

    border: 1px solid #ccd9e6 !important;
    border-radius: 12px !important;

    background: #f4f8fc !important;

    line-height: 1.6 !important;
    resize: vertical !important;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.ds-campaign-form textarea:focus {
    border-color: #204b75 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(32, 75, 117, 0.1) !important;
}

/* Error message */

.ds-campaign-form .ds-error-message {
    position: static !important;
    display: none;
    margin: 7px 0 0;
    padding: 0;

    color: #d33b3b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.ds-campaign-form .ds-field.has-error .ds-error-message {
    display: block;
}

.ds-campaign-form .ds-field.has-error .ds-input-wrap {
    border-color: #d33b3b;
    background: #fff9f9;
    box-shadow: 0 0 0 4px rgba(211, 59, 59, 0.08);
}

/* Submit button */

.ds-campaign-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    width: 100%;
    min-height: 54px;
    margin: 24px 0 0;
    padding: 14px 22px;

    border: 0;
    border-radius: 11px;

    overflow: hidden;
    background: linear-gradient(135deg, #204b75, #486b93);
    color: #ffffff;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-campaign-submit::before {
    position: absolute;
    inset: 0;
    content: "";

    background: linear-gradient(135deg, #486b93, #204b75);
    opacity: 0;

    transition: opacity 0.3s ease;
}

.ds-campaign-submit:hover::before {
    opacity: 1;
}

.ds-campaign-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(32, 75, 117, 0.24);
}

.ds-submit-text,
.ds-submit-arrow,
.ds-submit-loader {
    position: relative;
    z-index: 2;
}

.ds-submit-arrow {
    font-size: 19px;
    transition: transform 0.3s ease;
}

.ds-campaign-submit:hover .ds-submit-arrow {
    transform: translateX(4px);
}

.ds-submit-loader {
    display: none;
    width: 18px;
    height: 18px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: dsFormLoader 0.8s linear infinite;
}

.ds-campaign-submit.is-loading .ds-submit-text,
.ds-campaign-submit.is-loading .ds-submit-arrow {
    display: none;
}

.ds-campaign-submit.is-loading .ds-submit-loader {
    display: block;
}

@keyframes dsFormLoader {
    to {
        transform: rotate(360deg);
    }
}

.ds-form-note {
    margin: 12px 0 0;
    color: #8191a0;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

/* =========================================
   TABLET AND MOBILE
========================================= */

@media (max-width: 767px) {
    .ds-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ds-field-full {
        margin-top: 18px !important;
    }

    .ds-input-wrap,
    .ds-select-wrap {
        height: 52px;
        border-radius: 10px;
    }

    .ds-campaign-form input,
    .ds-select-wrap select {
        height: 50px !important;
    }

    .ds-campaign-form input {
        line-height: 50px !important;
    }

    .ds-campaign-form textarea {
        min-height: 110px !important;
    }
}

@media (max-width: 420px) {
    .ds-campaign-form .ds-field>label {
        margin-bottom: 7px !important;
        font-size: 12px !important;
    }

    .ds-campaign-form input,
    .ds-campaign-form select,
    .ds-campaign-form textarea,
    .ds-campaign-form input::placeholder,
    .ds-campaign-form textarea::placeholder {
        font-size: 13px !important;
    }

    .ds-phone-code {
        margin-left: 13px;
        padding-right: 10px;
        font-size: 13px;
    }

    .ds-campaign-submit {
        min-height: 51px;
        margin-top: 20px;
    }
}

/* Form */

.ds-campaign-form {
    display: block;
}

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

.ds-form-group {
    position: relative;
}

.ds-form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--ds-dark);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.ds-form-group label span {
    color: var(--ds-danger);
}

.ds-form-group input,
.ds-form-group select,
.ds-form-group textarea {
    width: 100%;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    outline: none;
    background: var(--ds-light);
    color: var(--ds-dark);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.ds-form-group input,
.ds-form-group select {
    height: 50px;
    padding: 0 15px;
}

.ds-form-group textarea {
    min-height: 96px;
    padding: 14px 15px;
    resize: vertical;
}

.ds-form-group input::placeholder,
.ds-form-group textarea::placeholder {
    color: #8b9aaa;
}

.ds-form-group select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #637789 50%),
        linear-gradient(135deg, #637789 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 22px,
        calc(100% - 14px) 22px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.ds-form-group input:focus,
.ds-form-group select:focus,
.ds-form-group textarea:focus {
    border-color: var(--ds-primary);
    background: var(--ds-white);
    box-shadow: 0 0 0 4px rgba(32, 75, 117, 0.09);
}

.ds-message-group {
    margin-top: 20px;
}

/* Error State */

.ds-error-message {
    display: none;
    margin-top: 6px;
    color: var(--ds-danger);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    line-height: 1.4;
}

.ds-form-group.has-error input {
    border-color: var(--ds-danger);
    background: #fffafa;
}

.ds-form-group.has-error .ds-error-message {
    display: block;
}

/* Submit Button */

.ds-campaign-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin-top: 24px;
    padding: 13px 20px;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ds-primary);
    color: var(--ds-white);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.ds-campaign-submit::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(135deg,
            var(--ds-secondary),
            var(--ds-primary));
    transform: translateX(-101%);
    transition: transform 0.45s ease;
}

.ds-campaign-submit:hover::before {
    transform: translateX(0);
}

.ds-campaign-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(32, 75, 117, 0.24);
}

.ds-submit-text,
.ds-submit-arrow,
.ds-submit-loader {
    position: relative;
    z-index: 1;
}

.ds-submit-arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.ds-campaign-submit:hover .ds-submit-arrow {
    transform: translateX(4px);
}

.ds-submit-loader {
    display: none;
    width: 19px;
    height: 19px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--ds-white);
    border-radius: 50%;
    animation: dsLoaderSpin 0.8s linear infinite;
}

.ds-campaign-submit.is-loading {
    cursor: not-allowed;
    pointer-events: none;
}

.ds-campaign-submit.is-loading .ds-submit-text,
.ds-campaign-submit.is-loading .ds-submit-arrow {
    display: none;
}

.ds-campaign-submit.is-loading .ds-submit-loader {
    display: block;
}

@keyframes dsLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

.ds-form-note {
    margin: 13px 0 0;
    color: #8493a1;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

/* Success State */

.ds-success-state {
    display: none;
    padding: 22px 10px 14px;
    text-align: center;
    animation: dsSuccessAppear 0.5s ease forwards;
}

.ds-success-state.is-visible {
    display: block;
}

@keyframes dsSuccessAppear {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ds-success-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
}

.ds-success-icon svg {
    width: 100%;
    height: 100%;
}

.ds-success-icon circle {
    stroke: var(--ds-success);
    stroke-width: 2;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: dsCircleDraw 0.7s ease forwards;
}

.ds-success-icon path {
    stroke: var(--ds-success);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: dsCheckDraw 0.45s 0.55s ease forwards;
}

@keyframes dsCircleDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dsCheckDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.ds-success-label {
    display: block;
    margin-bottom: 8px;
    color: var(--ds-success);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.ds-success-state h3 {
    margin: 0 0 10px;
    color: var(--ds-dark);
    font-family: "Bebas Neue", sans-serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.6px;
}

.ds-success-state p {
    max-width: 430px;
    margin: 0 auto;
    color: var(--ds-text);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

.ds-success-close {
    min-width: 130px;
    min-height: 46px;
    margin-top: 24px;
    padding: 10px 24px;
    border: none;
    border-radius: 9px;
    background: var(--ds-primary);
    color: var(--ds-white);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.ds-success-close:hover {
    background: var(--ds-secondary);
    transform: translateY(-2px);
}

/* Stop Body Scroll */

body.ds-modal-open {
    overflow: hidden;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 767px) {
    .ds-campaign-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .ds-campaign-dialog {
        width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 20px 20px 14px 14px;
        transform: translateY(100%);
    }

    .ds-campaign-modal.is-open .ds-campaign-dialog {
        transform: translateY(0);
    }

    .ds-modal-top {
        padding: 34px 58px 28px 24px;
    }

    .ds-modal-top h2 {
        font-size: 35px;
    }

    .ds-modal-top p {
        font-size: 13px;
    }

    .ds-modal-close {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }

    .ds-modal-content {
        padding: 26px 22px 30px;
    }

    .ds-form-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .ds-message-group {
        margin-top: 17px;
    }

    .ds-campaign-submit {
        margin-top: 20px;
    }
}

@media (max-width: 420px) {
    .ds-campaign-modal {
        padding: 0;
    }

    .ds-campaign-dialog {
        max-height: 100vh;
        border-radius: 0;
    }

    .ds-modal-top {
        padding: 30px 54px 25px 20px;
    }

    .ds-modal-top h2 {
        font-size: 32px;
    }

    .ds-modal-content {
        padding: 24px 18px 28px;
    }
}

/* Reduced Motion Accessibility */

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

    .ds-campaign-modal,
    .ds-campaign-dialog,
    .ds-campaign-trigger,
    .ds-campaign-submit,
    .ds-success-state,
    .ds-success-icon circle,
    .ds-success-icon path {
        animation: none;
        transition: none;
    }
}

/* =========================================
   ABOUT US HERO SECTION
========================================= */


.about-hero {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: linear-gradient(90deg, rgb(8 27 46 / 0%) 0%, rgb(15 48 78 / 0%) 40%, rgba(32, 75, 117, 0.42) 75%, rgba(32, 75, 117, 0.25) 100%), url(../images/image1.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Subtle background zoom animation */
.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg,
            rgba(8, 27, 46, 0.25),
            rgba(32, 75, 117, 0.05));
    animation: aboutOverlay 6s ease-in-out infinite alternate;
}

/* Grid texture */
.about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.12;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to right, #000, transparent 80%);
}

.about-hero__container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    padding: 120px 0 130px;
}

.about-hero__content {
    max-width: 780px;
    position: relative;
    z-index: 2;
}

/* Small top label */
.about-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: white;
    font-family: var(--ds-body-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 0;
    animation: aboutFadeUp 0.7s ease forwards 0.1s;
}

.about-hero__label-line {
    width: 38px;
    height: 2px;
    background: white;
    position: relative;
}

.about-hero__label-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--ds-accent);
    border-radius: 50%;
    transform: translateY(-50%);
}

/* Main heading */
.about-hero__title {
    max-width: 850px;
    margin: 0 0 18px;
    color: var(--ds-white);
    font-family: var(--ds-heading-font);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-wrap: balance;
    opacity: 0;
    animation: aboutFadeUp 0.8s ease forwards 0.25s;
}

.about-hero__title span {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
}

/* Description */
.about-hero__description {
    max-width: 670px;
    margin: 0 0 30px;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.85);
    border-left: 3px solid var(--ds-accent);
    font-family: var(--ds-body-font);
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 400;
    line-height: 1.75;
    opacity: 0;
    animation: aboutFadeUp 0.8s ease forwards 0.4s;
}

/* Breadcrumb */
.about-breadcrumb {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    color: var(--ds-white);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--ds-body-font);
    font-size: 13px;
    opacity: 0;
    animation: aboutFadeUp 0.8s ease forwards 0.55s;
}

.about-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.3s ease;
}

.about-breadcrumb__link:hover {
    color: var(--ds-accent);
}

.about-breadcrumb__link svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-breadcrumb__separator {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.45);
}

.about-breadcrumb__separator svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-breadcrumb__current {
    color: var(--ds-accent);
    font-weight: 600;
}

/* Decorative circles */
.about-hero__shape {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

.about-hero__shape--one {
    top: 80px;
    right: 8%;
    width: 190px;
    height: 190px;
    animation: shapeFloat 7s ease-in-out infinite;
}

.about-hero__shape--two {
    right: 20%;
    bottom: 80px;
    width: 70px;
    height: 70px;
    background: rgba(217, 180, 109, 0.10);
    animation: shapeFloat 5s ease-in-out infinite reverse;
}

/* Bottom wave */
.about-hero__bottom {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 80px;
    pointer-events: none;
}

.about-hero__bottom svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--ds-light);
}

/* Animations */
@keyframes aboutFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shapeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-18px) rotate(8deg);
    }
}

@keyframes aboutOverlay {
    from {
        opacity: 0.65;
    }

    to {
        opacity: 1;
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {
    .about-hero {
        min-height: 500px;
        background-position: 62% center;
    }

    .about-hero__container {
        padding: 105px 0 120px;
    }

    .about-hero__content {
        max-width: 650px;
    }

    .about-hero__shape--one {
        right: -60px;
    }
}

@media (max-width: 767px) {
    .about-hero {
        min-height: 470px;
        text-align: left;
        background-position: 65% center;
        background-image:
            linear-gradient(90deg,
                rgba(8, 27, 46, 0.96),
                rgba(15, 48, 78, 0.82)),
            url("../images/about-hero-billboard.jpg");
    }

    .about-hero__container {
        width: min(100% - 30px, 1180px);
        padding: 90px 0 105px;
    }

    .about-hero__label {
        margin-bottom: 16px;
        font-size: 11px;
        letter-spacing: 2px;
    }

    .about-hero__title {
        margin-bottom: 16px;
        font-size: clamp(43px, 14vw, 62px);
        line-height: 1;
    }

    .about-hero__description {
        margin-bottom: 25px;
        padding-left: 14px;
        font-size: 15px;
        line-height: 1.65;
    }

    .about-breadcrumb {
        padding: 10px 14px;
        font-size: 12px;
    }

    .about-hero__shape--one {
        display: none;
    }

    .about-hero__bottom {
        height: 52px;
    }
}

@media (max-width: 420px) {
    .about-hero__title span {
        display: block;
        margin-top: 5px;
    }
}

/* Accessibility: reduce animations when requested */
@media (prefers-reduced-motion: reduce) {

    .about-hero *,
    .about-hero::before {
        animation: none !important;
    }

    .about-hero__label,
    .about-hero__title,
    .about-hero__description,
    .about-breadcrumb {
        opacity: 1;
        transform: none;
    }
}


/*vison and mission*/

.vm-section {
    position: relative;
    padding: 110px 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%, rgba(72, 107, 147, 0.12), transparent 28%),
        radial-gradient(circle at 90% 85%, rgba(32, 75, 117, 0.1), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f6f9fc 50%, #eef4f9 100%);
    font-family: "Inter", sans-serif;
}

.vm-container {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
}

/* Heading */
.vm-heading {
    max-width: 760px;
    margin: 0 auto 58px;
    text-align: center;
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.vm-section.vm-visible .vm-heading {
    opacity: 1;
    transform: translateY(0);
}

.vm-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--vm-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.vm-label::before,
.vm-label::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--vm-secondary);
}

.vm-heading h2 {
    margin: 0;
    color: var(--vm-dark);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(45px, 6vw, 72px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
}

.vm-heading h2 span {
    color: var(--vm-primary);
}

.vm-heading p {
    max-width: 680px;
    margin: 20px auto 0;
    color: var(--vm-text);
    font-size: 15px;
    line-height: 1.8;
}

/* Cards Layout */
.vm-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.vm-card {
    position: relative;
    min-height: 440px;
    padding: 44px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.67);
    box-shadow: var(--vm-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(55px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.vm-card-mission {
    transition-delay: 0.15s;
}

.vm-section.vm-visible .vm-card {
    opacity: 1;
    transform: translateY(0);
}

/* Animated border light */
.vm-card::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(130deg, #486b9385 20%, #486b9321, #486b933d 55%);
    opacity: 0;
    transform: rotate(-8deg) scale(1.1);
    transition: opacity 0.4s ease, transform 0.7s ease;
}

/* Bottom glow */
.vm-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -90px;
    bottom: -110px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: rgba(32, 75, 117, 0.1);
    filter: blur(8px);
    transition: transform 0.6s ease, background 0.6s ease;
}

.vm-card:hover {
    transform: translateY(-12px);
    border-color: rgba(72, 107, 147, 0.3);
    box-shadow: 0 35px 85px rgba(32, 75, 117, 0.19);
}

.vm-card:hover::before {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.vm-card:hover::after {
    background: rgba(32, 75, 117, 0.17);
    transform: scale(1.2);
}

/* Card Number */
.vm-card-number {
    position: absolute;
    top: 25px;
    right: 30px;
    color: rgba(32, 75, 117, 0.07);
    font-family: "Bebas Neue", sans-serif;
    font-size: 105px;
    line-height: 1;
    pointer-events: none;
    transition: color 0.4s ease, transform 0.5s ease;
}

.vm-card:hover .vm-card-number {
    color: rgba(32, 75, 117, 0.11);
    transform: translateY(-5px);
}

/* Icons */
.vm-icon-wrap {
    position: relative;
    display: grid;
    width: 108px;
    height: 108px;
    margin-bottom: 38px;
    place-items: center;
}

.vm-icon-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(32, 75, 117, 0.32);
    border-radius: 50%;
    animation: vmRotate 15s linear infinite;
}

.vm-icon-ring::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vm-primary);
    box-shadow: 0 0 0 6px rgba(32, 75, 117, 0.1);
}

.vm-icon {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border: 1px solid rgba(32, 75, 117, 0.14);
    border-radius: 22px;
    color: var(--vm-primary);
    background: linear-gradient(145deg, #ffffff, #eaf1f7);
    box-shadow:
        0 15px 30px rgba(32, 75, 117, 0.14),
        inset 0 1px 0 #ffffff;
    transform: rotate(-6deg);
    transition: transform 0.5s ease, background 0.5s ease, color 0.5s ease;
}

.vm-icon svg {
    width: 43px;
    height: 43px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vm-icon-dot {
    fill: currentColor;
    stroke: none;
}

.vm-card:hover .vm-icon {
    color: #ffffff;
    background: linear-gradient(135deg, var(--vm-primary), var(--vm-secondary));
    transform: rotate(0deg) scale(1.08);
}

/* Card Content */
.vm-card-label {
    display: block;
    margin-bottom: 9px;
    color: var(--vm-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.vm-card h3 {
    margin: 0 0 16px;
    color: var(--vm-dark);
    font-family: "Bebas Neue", sans-serif;
    font-size: 45px;
    font-weight: 400;
    letter-spacing: 1px;
}

.vm-card p {
    max-width: 470px;
    margin: 0;
    color: var(--vm-text);
    font-size: 15px;
    line-height: 1.85;
}

.vm-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--vm-border);
    color: var(--vm-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vm-arrow {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--vm-border);
    border-radius: 50%;
    font-size: 18px;
    transition: transform 0.4s ease, color 0.4s ease, background 0.4s ease;
}

.vm-card:hover .vm-arrow {
    color: #ffffff;
    background: var(--vm-primary);
    transform: rotate(45deg);
}

/* Background Decorations */
.vm-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.vm-shape-one {
    top: 120px;
    left: -80px;
    width: 230px;
    height: 230px;
    border: 40px solid rgba(32, 75, 117, 0.04);
    animation: vmFloat 7s ease-in-out infinite;
}

.vm-shape-two {
    right: -70px;
    bottom: 40px;
    width: 190px;
    height: 190px;
    background: rgba(72, 107, 147, 0.06);
    animation: vmFloat 8s ease-in-out infinite reverse;
}

.vm-grid {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(32, 75, 117, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 75, 117, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
    -webkit-mask-image: linear-gradient(to bottom,
            transparent,
            black 30%,
            black 70%,
            transparent);
}

@keyframes vmRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes vmFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-22px);
    }
}

/* Tablet */
@media (max-width: 900px) {
    .vm-section {
        padding: 85px 20px;
    }

    .vm-cards {
        grid-template-columns: 1fr;
    }

    .vm-card {
        min-height: auto;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .vm-section {
        padding: 70px 15px;
    }

    .vm-heading {
        margin-bottom: 40px;
    }

    .vm-heading h2 {
        font-size: 43px;
    }

    .vm-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .vm-card {
        padding: 32px 25px;
        border-radius: 22px;
    }

    .vm-card-number {
        top: 22px;
        right: 20px;
        font-size: 78px;
    }

    .vm-icon-wrap {
        width: 92px;
        height: 92px;
        margin-bottom: 30px;
    }

    .vm-icon {
        width: 65px;
        height: 65px;
        border-radius: 19px;
    }

    .vm-icon svg {
        width: 36px;
        height: 36px;
    }

    .vm-card h3 {
        font-size: 38px;
    }

    .vm-card p {
        font-size: 14px;
        line-height: 1.75;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .vm-heading,
    .vm-card {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .vm-icon-ring,
    .vm-shape {
        animation: none;
    }
}


/*how it works*/



.ds-process,
.ds-process * {
    box-sizing: border-box;
}

.ds-process {
    position: relative;
    padding: 110px 20px;
    background:
        radial-gradient(circle at 10% 20%, rgba(72, 107, 147, 0.09), transparent 25%),
        radial-gradient(circle at 90% 75%, rgba(32, 75, 117, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f5f9fc 50%, #ffffff 100%);
    font-family: "Inter", sans-serif;
    overflow: hidden;
}

.ds-process__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* Background decorations */
.ds-process__decor {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(32, 75, 117, 0.08);
    pointer-events: none;
}

.ds-process__decor::before,
.ds-process__decor::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    border: inherit;
}

.ds-process__decor::before {
    inset: 25px;
}

.ds-process__decor::after {
    inset: 50px;
}

.ds-process__decor--one {
    top: 120px;
    left: -100px;
    width: 260px;
    height: 260px;
    animation: dsDecorFloat 7s ease-in-out infinite;
}

.ds-process__decor--two {
    right: -110px;
    bottom: 100px;
    width: 310px;
    height: 310px;
    animation: dsDecorFloat 8s ease-in-out infinite reverse;
}

/* Section heading */
.ds-process__heading {
    max-width: 720px;
    margin: 0 auto 75px;
    text-align: center;
}

.ds-process__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.ds-process__label::before,
.ds-process__label::after {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--ds-secondary);
}

.ds-process__heading h2 {
    margin: 0 0 16px;
    color: var(--ds-dark);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
}

.ds-process__heading h2 span {
    color: var(--ds-primary);
}

.ds-process__heading p {
    max-width: 630px;
    margin: 0 auto;
    color: var(--ds-text);
    font-size: 16px;
    line-height: 1.8;
}

/* Timeline */
.ds-timeline {
    position: relative;
    padding: 12px 0;
}

.ds-timeline__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    border-radius: 20px;
    background: #e1ebf3;
    transform: translateX(-50%);
    overflow: hidden;
}

.ds-timeline__progress {
    display: block;
    width: 100%;
    height: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
            var(--ds-secondary),
            var(--ds-primary));
    box-shadow: 0 0 18px rgba(32, 75, 117, 0.4);
    transition: height 0.15s linear;
}

.ds-timeline__item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 190px;
    margin-bottom: 35px;
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.ds-timeline__item:last-child {
    margin-bottom: 0;
}

.ds-timeline__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Alternating cards */
.ds-timeline__item:nth-child(odd) {
    justify-content: flex-start;
    padding-right: calc(50% + 55px);
}

.ds-timeline__item:nth-child(even) {
    justify-content: flex-end;
    padding-left: calc(50% + 55px);
}

.ds-timeline__content {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    width: 100%;
    padding: 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(32, 75, 117, 0.12);
    border-radius: 22px;
    box-shadow: var(--ds-shadow);
    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    overflow: hidden;
}

.ds-timeline__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
            var(--ds-secondary),
            var(--ds-primary));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
}

.ds-timeline__content::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(32, 75, 117, 0.05);
    transition: transform 0.5s ease;
}

.ds-timeline__content:hover {
    border-color: rgba(32, 75, 117, 0.28);
    box-shadow: 0 25px 65px rgba(32, 75, 117, 0.17);
    transform: translateY(-8px);
}

.ds-timeline__content:hover::before {
    transform: scaleY(1);
}

.ds-timeline__content:hover::after {
    transform: scale(1.25);
}

/* Step number */
.ds-timeline__number {
    position: absolute;
    top: 15px;
    right: 20px;
    color: rgba(32, 75, 117, 0.07);
    font-family: "Bebas Neue", sans-serif;
    font-size: 72px;
    line-height: 1;
    pointer-events: none;
}

/* Icon */
.ds-timeline__icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    color: var(--ds-white);
    font-size: 25px;
    border-radius: 20px;
    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-secondary));
    box-shadow: 0 12px 25px rgba(32, 75, 117, 0.25);
    transition:
        transform 0.4s ease,
        border-radius 0.4s ease;
}

.ds-timeline__content:hover .ds-timeline__icon {
    border-radius: 50%;
    transform: rotate(-8deg) scale(1.07);
}

/* Text */
.ds-timeline__text {
    position: relative;
    z-index: 2;
}

.ds-timeline__text>span {
    display: block;
    margin-bottom: 7px;
    color: var(--ds-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ds-timeline__text h3 {
    margin: 0 0 10px;
    color: var(--ds-dark);
    font-size: 22px;
    font-weight: 700;
}

.ds-timeline__text p {
    margin: 0;
    color: var(--ds-text);
    font-size: 14px;
    line-height: 1.75;
}

/* Center markers */
.ds-timeline__marker {
    position: absolute;
    top: 57px;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 6px solid #edf4f9;
    border-radius: 50%;
    background: var(--ds-white);
    box-shadow: 0 0 0 1px rgba(32, 75, 117, 0.14);
    transform: translateX(-50%);
}

.ds-timeline__marker span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #b8c9d8;
    transition:
        background 0.4s ease,
        box-shadow 0.4s ease,
        transform 0.4s ease;
}

.ds-timeline__item.is-visible .ds-timeline__marker span {
    background: var(--ds-primary);
    box-shadow: 0 0 0 5px rgba(32, 75, 117, 0.13);
    transform: scale(1.1);
    animation: dsMarkerPulse 2s infinite;
}

/* Small connecting arrows */
.ds-timeline__item:nth-child(odd) .ds-timeline__content::marker,
.ds-timeline__item:nth-child(even) .ds-timeline__content::marker {
    display: none;
}

/* Animations */
@keyframes dsMarkerPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(32, 75, 117, 0.12);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(32, 75, 117, 0);
    }
}

@keyframes dsDecorFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(8deg);
    }
}

/* Tablet and mobile */
@media (max-width: 900px) {
    .ds-process {
        padding: 85px 18px;
    }

    .ds-process__heading {
        margin-bottom: 55px;
    }

    .ds-timeline {
        padding-left: 35px;
    }

    .ds-timeline__line {
        left: 15px;
        transform: none;
    }

    .ds-timeline__item,
    .ds-timeline__item:nth-child(odd),
    .ds-timeline__item:nth-child(even) {
        justify-content: flex-start;
        min-height: auto;
        margin-bottom: 28px;
        padding: 0;
    }

    .ds-timeline__marker {
        top: 48px;
        left: -20px;
        width: 30px;
        height: 30px;
        transform: none;
    }
}

@media (max-width: 575px) {
    .ds-process {
        padding: 70px 14px;
    }

    .ds-process__heading h2 {
        font-size: 43px;
    }

    .ds-process__heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .ds-timeline {
        padding-left: 28px;
    }

    .ds-timeline__line {
        left: 10px;
        width: 3px;
    }

    .ds-timeline__marker {
        top: 42px;
        left: -28px;
        width: 27px;
        height: 27px;
        border-width: 5px;
    }

    .ds-timeline__content {
        grid-template-columns: 54px 1fr;
        gap: 14px;
        padding: 22px 18px;
        border-radius: 17px;
    }

    .ds-timeline__icon {
        width: 54px;
        height: 54px;
        font-size: 20px;
        border-radius: 15px;
    }

    .ds-timeline__number {
        top: 13px;
        right: 15px;
        font-size: 55px;
    }

    .ds-timeline__text h3 {
        font-size: 19px;
    }

    .ds-timeline__text p {
        font-size: 13px;
        line-height: 1.65;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .ds-process__decor,
    .ds-timeline__marker span {
        animation: none !important;
    }

    .ds-timeline__item,
    .ds-timeline__content,
    .ds-timeline__icon,
    .ds-timeline__progress {
        transition: none !important;
    }
}

/* =========================================================
   DS OUTDOOR MEDIA
   CERTIFICATIONS, ACHIEVEMENTS & COMPANY JOURNEY
========================================================= */

.ds-professional-section {


    position: relative;
    padding: 110px 20px;
    background:
        linear-gradient(135deg,
            rgba(248, 247, 242, 0.98),
            rgba(238, 243, 245, 0.96));
    font-family: "Roboto", sans-serif;
    overflow: hidden;
    isolation: isolate;
}

.ds-professional-section *,
.ds-professional-section *::before,
.ds-professional-section *::after {
    box-sizing: border-box;
}

.ds-professional-container {
    position: relative;
    width: min(100%, 1200px);
    margin-inline: auto;
    z-index: 2;
}

/* =========================
   Background Decorations
========================= */

.ds-professional-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.ds-professional-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.45;
    background-image:
        linear-gradient(rgba(23, 42, 58, 0.04) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(23, 42, 58, 0.04) 1px,
            transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent);
}

.ds-bg-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(3px);
    animation: dsOrbFloat 8s ease-in-out infinite;
}

.ds-bg-orb-one {
    width: 330px;
    height: 330px;
    top: -140px;
    left: -110px;
    background: rgba(196, 154, 82, 0.13);
}

.ds-bg-orb-two {
    width: 440px;
    height: 440px;
    right: -200px;
    bottom: -190px;
    background: rgba(23, 42, 58, 0.08);
    animation-delay: -4s;
}

.ds-bg-line {
    position: absolute;
    display: block;
    width: 230px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(196, 154, 82, 0.5),
            transparent);
}

.ds-bg-line-one {
    top: 22%;
    right: 6%;
    transform: rotate(-35deg);
}

.ds-bg-line-two {
    bottom: 15%;
    left: 5%;
    transform: rotate(35deg);
}

/* =========================
   Section Heading
========================= */

.ds-professional-heading {
    max-width: 790px;
    margin: 0 auto 55px;
    text-align: center;
}

.ds-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 16px 7px 8px;
    color: var(--ds-gold-dark);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(196, 154, 82, 0.32);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(23, 42, 58, 0.08);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ds-section-badge-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #204b75;
    background: linear-gradient(135deg,
            var(--ds-gold),
            var(--ds-gold-dark));
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(196, 154, 82, 0.3);
}

.ds-professional-heading h2 {
    margin: 0;
    color: var(--ds-heading);
    font-family: "Poppins", sans-serif;
    font-size: clamp(32px, 4.4vw, 56px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.7px;
}

.ds-professional-heading h2 span {
    display: block;
    color: var(--ds-gold-dark);
}

.ds-professional-heading p {
    max-width: 680px;
    margin: 20px auto 0;
    color: var(--ds-text);
    font-size: 16px;
    line-height: 1.8;
}

/* =========================
   Achievement Grid
========================= */

.ds-achievements-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
}

.ds-achievement-card {
    position: relative;
    grid-column: span 4;
    min-height: 350px;
    padding: 30px 30px 45px 30px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.98),
            rgba(255, 255, 255, 0.83));
    border: 1px solid rgba(228, 231, 233, 0.95);
    border-radius: 25px;
    box-shadow: 0 15px 45px rgba(23, 42, 58, 0.08);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}

.ds-achievement-card::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    top: -110px;
    right: -100px;
    background: rgba(196, 154, 82, 0.13);
    border-radius: 50%;
    transition: transform 0.6s ease;
    z-index: -1;
}

.ds-achievement-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
            transparent 38%,
            rgba(255, 255, 255, 0.8) 50%,
            transparent 62%);
    transform: translateX(-130%);
    transition: transform 0.9s ease;
    pointer-events: none;
}

.ds-achievement-card:hover {
    transform: translateY(-10px);
    border-color: rgba(196, 154, 82, 0.52);
    box-shadow: 0 26px 65px rgba(23, 42, 58, 0.14);
}

.ds-achievement-card:hover::before {
    transform: scale(1.8);
}

.ds-achievement-card:hover::after {
    transform: translateX(130%);
}

/* =========================
   Company Journey Card
========================= */

.ds-card-journey {
    grid-column: span 5;
    grid-row: span 2;
    min-height: 722px;
    display: flex;
    flex-direction: column;
    color: var(--ds-white);
    background:
        radial-gradient(circle at 85% 85%,
            rgba(196, 154, 82, 0.22),
            transparent 30%),
        linear-gradient(150deg,
            #172a3a 0%,
            #263a47 100%);
    border-color: rgba(255, 255, 255, 0.12);
}

.ds-card-journey::before {
    width: 310px;
    height: 310px;
    top: auto;
    right: -130px;
    bottom: -140px;
    background: rgba(196, 154, 82, 0.14);
}

.ds-card-journey::after {
    background: linear-gradient(115deg,
            transparent 38%,
            rgba(255, 255, 255, 0.07) 50%,
            transparent 62%);
}

.ds-card-decoration {
    position: absolute;
    width: 190px;
    height: 190px;
    top: 95px;
    right: -100px;
    border: 1px solid rgba(196, 154, 82, 0.2);
    border-radius: 50%;
}

.ds-card-decoration::before,
.ds-card-decoration::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(196, 154, 82, 0.14);
    border-radius: 50%;
}

.ds-card-decoration::before {
    inset: 22px;
}

.ds-card-decoration::after {
    inset: 45px;
}

/* =========================
   Card Top & Icons
========================= */

.ds-card-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.ds-card-index {
    color: rgba(23, 42, 58, 0.27);
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ds-card-journey .ds-card-index {
    color: rgba(255, 255, 255, 0.38);
}

.ds-premium-icon {
    position: relative;
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: var(--ds-gold-dark);
    background: rgba(196, 154, 82, 0.12);
    border: 1px solid rgba(196, 154, 82, 0.22);
    border-radius: 18px;
    font-size: 26px;
    box-shadow: 0 10px 25px rgba(23, 42, 58, 0.08);
    transition:
        color 0.4s ease,
        background 0.4s ease,
        transform 0.4s ease;
}

.ds-premium-icon::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(196, 154, 82, 0.26);
    border-radius: 13px;
}

.ds-achievement-card:hover .ds-premium-icon {
    color: #204b75;
    background: linear-gradient(135deg,
            var(--ds-gold),
            var(--ds-gold-dark));
    transform: rotate(-6deg) scale(1.08);
}

.ds-premium-icon-light {
    color: var(--ds-white);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.ds-premium-icon-light::after {
    border-color: rgba(255, 255, 255, 0.18);
}

/* =========================
   Card Content
========================= */

.ds-card-content {
    position: relative;
    margin-top: 45px;
    z-index: 2;
}

.ds-card-content h3 {
    margin: 18px 0 11px;
    color: var(--ds-heading);
    font-family: "Poppins", sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
}

.ds-card-content p {
    margin: 0;
    color: var(--ds-text);
    font-size: 14px;
    line-height: 1.75;
}

.ds-counter-wrapper {
    display: flex;
    align-items: flex-start;
    color: var(--ds-navy);
    font-family: "Poppins", sans-serif;
    line-height: 1;
}

.ds-counter {
    font-size: clamp(48px, 5vw, 52px);
    font-weight: 400;
    letter-spacing: 0;
}

.ds-counter-symbol {
    margin: 5px 0 0 5px;
    color: var(--ds-gold);
    font-size: 28px;
    font-weight: 700;
}

/* =========================
   Journey Card Content
========================= */

.ds-card-journey .ds-card-content {
    margin-top: auto;
    margin-bottom: auto;
}

.ds-journey-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ds-live-dot {
    position: relative;
    width: 8px;
    height: 8px;
    background: var(--ds-gold);
    border-radius: 50%;
}

.ds-live-dot::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(196, 154, 82, 0.6);
    border-radius: 50%;
    animation: dsDotPulse 1.8s ease-out infinite;
}

.ds-established-year {
    display: flex;
    flex-direction: column;
}

.ds-established-year span {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ds-established-year strong {
    color: var(--ds-white);
    font-family: "Poppins", sans-serif;
    font-size: clamp(75px, 10vw, 128px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -7px;
}

.ds-card-journey .ds-card-content h3 {
    margin-top: 25px;
    color: var(--ds-white);
    font-size: clamp(25px, 3vw, 34px);
}

.ds-card-journey .ds-card-content p {
    max-width: 410px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
}

/* Journey Footer */

.ds-journey-footer {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    z-index: 2;
}

.ds-journey-footer-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.ds-journey-footer-item i {
    color: var(--ds-gold);
    font-size: 20px;
}

.ds-journey-footer-item div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ds-journey-footer-item span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.ds-journey-footer-item strong {
    margin-top: 3px;
    color: var(--ds-white);
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.ds-card-watermark {
    position: absolute;
    right: -28px;
    bottom: -50px;
    color: rgba(255, 255, 255, 0.035);
    font-size: 230px;
    line-height: 1;
    transform: rotate(-8deg);
}

/* =========================
   Small Card Badge
========================= */

.ds-card-bottom {
    position: absolute;
    left: 30px;
    bottom: 0px;
    z-index: 2;
}

.ds-small-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    color: var(--ds-navy);
    background: var(--ds-soft-bg);
    border: 1px solid rgba(228, 231, 233, 0.9);
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.ds-small-badge i {
    color: var(--ds-gold-dark);
    font-size: 14px;
}

/* =========================
   Quality Card
========================= */

.ds-card-quality {
    grid-column: span 7;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 35px;
}

.ds-quality-left {
    min-width: 0;
}

.ds-quality-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.ds-quality-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: var(--ds-navy);
    background: var(--ds-soft-bg);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.ds-quality-points i {
    color: var(--ds-gold-dark);
}

/* =========================
   Premium Rotating Seal
========================= */

.ds-premium-seal {
    position: relative;
    display: grid;
    width: 175px;
    height: 175px;
    flex-shrink: 0;
    place-items: center;
    border: 1px dashed rgba(196, 154, 82, 0.55);
    border-radius: 50%;
}

.ds-premium-seal::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(196, 154, 82, 0.2);
    border-radius: 50%;
}

.ds-seal-text {
    position: absolute;
    inset: 0;
    color: var(--ds-gold-dark);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-align: center;
    text-transform: uppercase;
    animation: dsSealRotate 16s linear infinite;
}

.ds-seal-center {
    position: relative;
    display: flex;
    width: 125px;
    height: 125px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #204b75;
    background: linear-gradient(145deg,
            var(--ds-navy),
            var(--ds-navy-light));
    border: 7px solid rgba(196, 154, 82, 0.16);
    border-radius: 50%;
    box-shadow:
        0 18px 35px rgba(23, 42, 58, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ds-seal-center i {
    margin-bottom: 6px;
    color: var(--ds-gold);
    font-size: 27px;
}

.ds-seal-center strong {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
}

.ds-seal-center span {
    margin-top: 3px;
    color: #204b75;
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

/* =========================
   Scroll Reveal
========================= */

.ds-scroll-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ds-scroll-reveal.ds-visible {
    opacity: 1;
    transform: translateY(0);
}

.ds-achievement-card:nth-child(2) {
    transition-delay: 0.08s;
}

.ds-achievement-card:nth-child(3) {
    transition-delay: 0.16s;
}

.ds-achievement-card:nth-child(4) {
    transition-delay: 0.24s;
}

.ds-achievement-card:nth-child(5) {
    transition-delay: 0.32s;
}

/* =========================
   Animations
========================= */

@keyframes dsOrbFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(18px, 25px, 0);
    }
}

@keyframes dsDotPulse {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

@keyframes dsSealRotate {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Tablet Responsive
========================= */

@media (max-width: 991px) {
    .ds-professional-section {
        padding: 85px 20px;
    }

    .ds-achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-achievement-card,
    .ds-card-journey,
    .ds-card-quality {
        grid-column: auto;
        grid-row: auto;
    }

    .ds-card-journey {
        min-height: 580px;
    }

    .ds-card-quality {
        min-height: 430px;
        display: block;
    }

    .ds-premium-seal {
        position: absolute;
        right: 22px;
        bottom: 20px;
        width: 125px;
        height: 125px;
        opacity: 0.16;
    }

    .ds-seal-center {
        width: 90px;
        height: 90px;
    }

    .ds-seal-center i {
        font-size: 20px;
    }

    .ds-seal-center strong {
        font-size: 10px;
    }

    .ds-seal-center span {
        font-size: 7px;
    }

    .ds-seal-text {
        font-size: 6px;
    }
}

/* =========================
   Mobile Responsive
========================= */

@media (max-width: 650px) {
    .ds-professional-section {
        padding: 70px 15px;
    }

    .ds-professional-heading {
        margin-bottom: 38px;
    }

    .ds-section-badge {
        padding-right: 13px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .ds-section-badge-icon {
        width: 29px;
        height: 29px;
    }

    .ds-professional-heading h2 {
        font-size: 32px;
        letter-spacing: -0.9px;
    }

    .ds-professional-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

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

    .ds-achievement-card,
    .ds-card-journey,
    .ds-card-quality {
        width: 100%;
        min-height: 350px;
        padding: 24px;
        border-radius: 21px;
    }

    .ds-card-journey {
        min-height: 570px;
    }

    .ds-card-quality {
        min-height: 470px;
    }

    .ds-premium-icon {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 23px;
    }

    .ds-card-content {
        margin-top: 36px;
    }

    .ds-counter {
        font-size: 54px;
    }

    .ds-counter-symbol {
        font-size: 24px;
    }

    .ds-card-content h3 {
        font-size: 19px;
    }

    .ds-card-bottom {
        left: 24px;
        bottom: 23px;
    }

    .ds-established-year strong {
        font-size: 78px;
        letter-spacing: -5px;
    }

    .ds-journey-footer {
        grid-template-columns: 1fr;
    }

    .ds-quality-points {
        flex-direction: column;
        align-items: flex-start;
    }

    .ds-quality-points span {
        width: 100%;
    }

    .ds-premium-seal {
        right: -25px;
        bottom: -28px;
    }
}

/* Small Mobile */

@media (max-width: 380px) {
    .ds-professional-heading h2 {
        font-size: 28px;
    }

    .ds-achievement-card,
    .ds-card-journey,
    .ds-card-quality {
        padding: 21px;
    }

    .ds-established-year strong {
        font-size: 68px;
    }

    .ds-card-content p {
        font-size: 13px;
    }
}

/* Reduced Motion Accessibility */

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

    .ds-professional-section *,
    .ds-professional-section *::before,
    .ds-professional-section *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .ds-scroll-reveal {
        opacity: 1;
        transform: none;
    }
}


/*faq*/

/* ==========================================
   FAQ VARIABLES AND MAIN SECTION
=========================================== */
.ds-faq-section {
    --ds-primary: #204b75;
    --ds-secondary: #486b93;
    --ds-white: #ffffff;
    --ds-light: #eef5fb;
    --ds-border: rgba(255, 255, 255, 0.22);
    --ds-hover: rgba(255, 255, 255, 0.12);

    --ds-heading: #16324d;
    --ds-text: #60768b;
    --ds-card-border: #dce8f2;
    --ds-shadow: 0 24px 60px rgba(32, 75, 117, 0.13);

    position: relative;
    padding: 110px 20px;
    background:
        linear-gradient(rgba(32, 75, 117, 0.035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(32, 75, 117, 0.035) 1px,
            transparent 1px),
        linear-gradient(180deg, #fafdff 0%, var(--ds-light) 100%);
    background-size: 75px 75px, 75px 75px, 100% 100%;
    overflow: hidden;
    isolation: isolate;
}

.ds-faq-section *,
.ds-faq-section *::before,
.ds-faq-section *::after {
    box-sizing: border-box;
}

.ds-faq-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* Background Shapes */
.ds-faq-shape {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.ds-faq-shape-one {
    top: -180px;
    right: -150px;
    width: 460px;
    height: 460px;
    background: rgba(72, 107, 147, 0.10);
    filter: blur(5px);
}

.ds-faq-shape-two {
    bottom: -190px;
    left: -160px;
    width: 430px;
    height: 430px;
    background: rgba(32, 75, 117, 0.08);
    filter: blur(5px);
}

/* ==========================================
   SECTION HEADER
=========================================== */
.ds-faq-header {
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.ds-faq-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 17px;
    color: var(--ds-primary);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.1px;
}

.ds-eyebrow-line {
    display: block;
    width: 30px;
    height: 2px;
    background: var(--ds-secondary);
    border-radius: 10px;
}

.ds-faq-header h2 {
    margin: 0;
    color: var(--ds-heading);
    font-family: "Poppins", sans-serif;
    font-size: clamp(36px, 4.6vw, 57px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -2px;
}

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

.ds-faq-header p {
    max-width: 650px;
    margin: 18px auto 0;
    color: var(--ds-text);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

/* ==========================================
   MAIN GRID LAYOUT
=========================================== */
.ds-faq-layout {
    display: grid;
    grid-template-columns:
        minmax(310px, 0.84fr) minmax(520px, 1.55fr);
    align-items: start;
    gap: 34px;
}

/* ==========================================
   LEFT PREMIUM CARD
=========================================== */
.ds-help-card {
    position: sticky;
    top: 110px;
    min-height: 535px;
    padding: 42px;
    color: var(--ds-white);
    background:
        radial-gradient(circle at 100% 0%,
            rgba(255, 255, 255, 0.17),
            transparent 38%),
        linear-gradient(145deg,
            var(--ds-secondary) 0%,
            var(--ds-primary) 55%,
            #153653 100%);
    border: 1px solid var(--ds-border);
    border-radius: 30px;
    box-shadow: 0 30px 70px rgba(32, 75, 117, 0.25);
    overflow: hidden;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.ds-help-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 38px 80px rgba(32, 75, 117, 0.31);
}

/* Decorative Circles */
.ds-help-card::before,
.ds-help-card::after {
    content: "";
    position: absolute;
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    pointer-events: none;
}

.ds-help-card::before {
    top: -100px;
    right: -95px;
    width: 270px;
    height: 270px;
}

.ds-help-card::after {
    top: -58px;
    right: -55px;
    width: 185px;
    height: 185px;
}

.ds-card-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: radial-gradient(rgba(255, 255, 255, 0.50) 1px,
            transparent 1px);
    background-size: 23px 23px;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
    -webkit-mask-image:
        linear-gradient(to bottom, #000 0%, transparent 75%);
}

.ds-card-glow {
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 280px;
    height: 280px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    filter: blur(8px);
}

.ds-help-card-content {
    position: relative;
    z-index: 2;
}

/* Small Label */
.ds-help-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 30px;
    padding: 9px 14px;
    color: var(--ds-white);
    background: var(--ds-hover);
    border: 1px solid var(--ds-border);
    border-radius: 100px;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Message Icon */
.ds-help-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 67px;
    height: 67px;
    margin-bottom: 25px;
    color: var(--ds-primary);
    background: var(--ds-white);
    border-radius: 21px;
    box-shadow: 0 15px 35px rgba(10, 35, 60, 0.20);
    font-size: 27px;
    transform: rotate(-4deg);
    transition: transform 0.4s ease;
}

.ds-help-card:hover .ds-help-icon {
    transform: rotate(4deg) translateY(-4px);
}

.ds-icon-pulse {
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-radius: 26px;
    animation: dsIconPulse 2.2s ease-out infinite;
}

.ds-help-card h3 {
    margin: 0 0 16px;
    color: var(--ds-white);
    font-family: "Poppins", sans-serif;
    font-size: clamp(29px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
}

.ds-help-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

/* CTA Button */
.ds-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 30px;
    padding: 8px 8px 8px 23px;
    color: var(--ds-primary);
    background: var(--ds-white);
    border-radius: 100px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-help-btn:hover {
    color: var(--ds-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(8, 30, 50, 0.24);
}

.ds-btn-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    color: var(--ds-white);
    background: var(--ds-primary);
    border-radius: 50%;
    overflow: hidden;
}

.ds-btn-icon i {
    animation: dsArrowAnimation 1.5s ease-in-out infinite;
}

.ds-help-btn:hover .ds-btn-icon {
    background: var(--ds-secondary);
}

/* Support Information */
.ds-card-divider {
    width: 100%;
    height: 1px;
    margin: 36px 0 24px;
    background: var(--ds-border);
}

.ds-support-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ds-support-avatars {
    display: flex;
}

.ds-support-avatars span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: -9px;
    color: var(--ds-primary);
    background: var(--ds-light);
    border: 2px solid var(--ds-primary);
    border-radius: 50%;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
}

.ds-support-avatars span:first-child {
    margin-left: 0;
}

.ds-support-avatars span:last-child {
    color: var(--ds-white);
    background: var(--ds-secondary);
}

.ds-support-text strong,
.ds-support-text small {
    display: block;
    font-family: "Roboto", sans-serif;
}

.ds-support-text strong {
    margin-bottom: 5px;
    color: var(--ds-white);
    font-size: 13px;
    font-weight: 500;
}

.ds-support-text small {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 11px;
}

.ds-online-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #72e6a5;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(114, 230, 165, 0.13);
    animation: dsOnlinePulse 1.7s ease-in-out infinite;
}

/* ==========================================
   FAQ ACCORDION
=========================================== */
.ds-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ds-faq-item {
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid var(--ds-card-border);
    border-radius: 22px;
    box-shadow: 0 8px 28px rgba(32, 75, 117, 0.06);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.ds-faq-item:hover {
    transform: translateY(-3px);
    border-color: rgba(32, 75, 117, 0.30);
    box-shadow: 0 14px 35px rgba(32, 75, 117, 0.10);
}

.ds-faq-item.active {
    background: var(--ds-white);
    border-color: rgba(32, 75, 117, 0.30);
    box-shadow: var(--ds-shadow);
}

/* Question Button */
.ds-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 22px 23px 22px 27px;
    color: var(--ds-heading);
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    text-align: left;
}

.ds-question-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ds-question-number {
    flex: 0 0 auto;
    color: var(--ds-secondary);
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ds-question-title {
    color: var(--ds-heading);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.ds-faq-item.active .ds-question-title {
    color: var(--ds-primary);
}

/* Plus Minus Button */
.ds-faq-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    background: var(--ds-white);
    border: 1px solid var(--ds-card-border);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(32, 75, 117, 0.09);
    transition:
        transform 0.4s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-toggle-line {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 15px;
    height: 2px;
    background: var(--ds-primary);
    border-radius: 10px;
    transform: translate(-50%, -50%);
    transition:
        transform 0.4s ease,
        opacity 0.3s ease,
        background 0.3s ease;
}

.ds-line-vertical {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Active Minus State */
.ds-faq-item.active .ds-faq-toggle {
    background: linear-gradient(135deg,
            var(--ds-secondary),
            var(--ds-primary));
    border-color: var(--ds-primary);
    box-shadow: 0 10px 24px rgba(32, 75, 117, 0.26);
    transform: rotate(180deg);
}

.ds-faq-item.active .ds-toggle-line {
    background: var(--ds-white);
}

.ds-faq-item.active .ds-line-vertical {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* FAQ Answer Animation */
.ds-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition:
        grid-template-rows 0.48s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.ds-faq-item.active .ds-faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

.ds-answer-content {
    min-height: 0;
    overflow: hidden;
}

.ds-answer-content p {
    position: relative;
    margin: 0;
    padding: 0 85px 28px 72px;
    color: var(--ds-text);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

.ds-answer-content p::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 49px;
    width: 3px;
    height: calc(100% - 35px);
    min-height: 34px;
    background: linear-gradient(to bottom,
            var(--ds-primary),
            var(--ds-secondary));
    border-radius: 10px;
}

/* Focus Accessibility */
.ds-faq-question:focus-visible,
.ds-help-btn:focus-visible {
    outline: 3px solid rgba(72, 107, 147, 0.40);
    outline-offset: 4px;
}

/* ==========================================
   CUSTOM ANIMATIONS
=========================================== */
@keyframes dsArrowAnimation {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

@keyframes dsIconPulse {
    0% {
        opacity: 0.75;
        transform: scale(0.88);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

@keyframes dsOnlinePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.82);
    }
}

/* ==========================================
   TABLET RESPONSIVE
=========================================== */
@media (max-width: 1024px) {
    .ds-faq-layout {
        grid-template-columns:
            minmax(290px, 0.8fr) minmax(430px, 1.3fr);
        gap: 25px;
    }

    .ds-help-card {
        padding: 35px 29px;
    }
}

@media (max-width: 900px) {
    .ds-faq-section {
        padding: 85px 20px;
    }

    .ds-faq-layout {
        grid-template-columns: 1fr;
    }

    .ds-help-card {
        position: relative;
        top: auto;
        min-height: auto;
    }

    .ds-help-btn {
        width: fit-content;
    }
}

/* ==========================================
   MOBILE RESPONSIVE
=========================================== */
@media (max-width: 600px) {
    .ds-faq-section {
        padding: 65px 15px;
        background-size: 48px 48px, 48px 48px, 100% 100%;
    }

    .ds-faq-header {
        margin-bottom: 38px;
    }

    .ds-faq-eyebrow {
        gap: 8px;
        font-size: 9px;
        letter-spacing: 1.4px;
    }

    .ds-eyebrow-line {
        width: 18px;
    }

    .ds-faq-header h2 {
        font-size: 34px;
        letter-spacing: -1.1px;
    }

    .ds-faq-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .ds-faq-layout {
        gap: 25px;
    }

    .ds-help-card {
        padding: 29px 23px;
        border-radius: 24px;
    }

    .ds-help-label {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .ds-help-card h3 {
        font-size: 28px;
    }

    .ds-help-card p {
        font-size: 14px;
    }

    .ds-help-btn {
        width: 100%;
    }

    .ds-support-info {
        align-items: flex-start;
    }

    .ds-faq-accordion {
        gap: 12px;
    }

    .ds-faq-item {
        border-radius: 18px;
    }

    .ds-faq-question {
        gap: 12px;
        padding: 17px 15px;
    }

    .ds-question-left {
        align-items: flex-start;
        gap: 10px;
    }

    .ds-question-number {
        margin-top: 3px;
        font-size: 10px;
    }

    .ds-question-title {
        font-size: 14px;
        line-height: 1.45;
    }

    .ds-faq-toggle {
        width: 39px;
        height: 39px;
    }

    .ds-toggle-line {
        width: 13px;
    }

    .ds-answer-content p {
        padding: 0 20px 22px 42px;
        font-size: 14px;
        line-height: 1.7;
    }

    .ds-answer-content p::before {
        left: 20px;
    }
}

/* ==========================================
   SMALL MOBILE
=========================================== */
@media (max-width: 380px) {
    .ds-faq-header h2 {
        font-size: 30px;
    }

    .ds-help-card {
        padding: 25px 19px;
    }

    .ds-support-avatars span {
        width: 34px;
        height: 34px;
    }

    .ds-question-title {
        font-size: 13px;
    }

    .ds-faq-toggle {
        width: 36px;
        height: 36px;
    }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {

    .ds-help-card,
    .ds-help-icon,
    .ds-help-btn,
    .ds-faq-item,
    .ds-faq-toggle,
    .ds-faq-answer,
    .ds-toggle-line {
        transition: none;
    }

    .ds-btn-icon i,
    .ds-icon-pulse,
    .ds-online-dot {
        animation: none;
    }
}

/* =========================================
   WHY BRANDS TRUST US
========================================= */

.ds-trust-section {
    --ds-primary: #204b75;
    --ds-secondary: #486b93;
    --ds-white: #ffffff;
    --ds-light: #eef5fb;
    --ds-border: rgba(255, 255, 255, 0.22);
    --ds-hover: rgba(255, 255, 255, 0.12);
    --ds-heading: #163a5d;
    --ds-text: #647789;
    --ds-star: #ffb547;

    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(32, 75, 117, 0.10), transparent 25%),
        radial-gradient(circle at 92% 80%, rgba(72, 107, 147, 0.10), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, var(--ds-light) 100%);
    overflow: hidden;
}

.ds-trust-section *,
.ds-trust-section *::before,
.ds-trust-section *::after {
    box-sizing: border-box;
}

.ds-trust-container {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 40px));
    margin-inline: auto;
}

/* Background decorations */

.ds-trust-decoration {
    position: absolute;
    border: 1px solid rgba(32, 75, 117, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.ds-decoration-one {
    top: -170px;
    right: -150px;
    width: 430px;
    height: 430px;
    box-shadow:
        0 0 0 45px rgba(32, 75, 117, 0.025),
        0 0 0 90px rgba(32, 75, 117, 0.018);
}

.ds-decoration-two {
    bottom: -190px;
    left: -160px;
    width: 400px;
    height: 400px;
    box-shadow:
        0 0 0 45px rgba(72, 107, 147, 0.025),
        0 0 0 90px rgba(72, 107, 147, 0.018);
}

/* Heading */

.ds-section-heading {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}

.ds-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--ds-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ds-section-label span {
    position: relative;
    width: 30px;
    height: 2px;
    background: var(--ds-primary);
}

.ds-section-label span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-primary);
    transform: translateY(-50%);
}

.ds-section-heading h2 {
    margin: 0;
    color: var(--ds-heading);
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.ds-section-heading h2 strong {
    position: relative;
    color: var(--ds-primary);
    font-weight: 700;
}

.ds-section-heading h2 strong::after {
    content: "";
    position: absolute;
    left: 5%;
    bottom: -6px;
    width: 90%;
    height: 7px;
    border-radius: 50%;
    background: rgba(72, 107, 147, 0.16);
}

.ds-section-heading p {
    max-width: 680px;
    margin: 22px auto 0;
    color: var(--ds-text);
    font-size: 16px;
    line-height: 1.8;
}

/* Brands wrapper */

.ds-brands-wrapper {
    position: relative;
    padding: 34px 0;
    border: 1px solid rgba(32, 75, 117, 0.10);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 25px 70px rgba(32, 75, 117, 0.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

.ds-brands-wrapper::before,
.ds-brands-wrapper::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 84px;
    bottom: 25px;
    width: 110px;
    pointer-events: none;
}

.ds-brands-wrapper::before {
    left: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.98),
        rgba(255, 255, 255, 0)
    );
}

.ds-brands-wrapper::after {
    right: 0;
    background: linear-gradient(
        -90deg,
        rgba(255, 255, 255, 0.98),
        rgba(255, 255, 255, 0)
    );
}

.ds-brands-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    padding: 0 34px;
}

.ds-brands-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ds-heading);
    font-size: 15px;
    font-weight: 600;
}

.ds-live-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ds-primary);
}

.ds-live-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid var(--ds-primary);
    border-radius: inherit;
    animation: dsPulse 1.8s ease-out infinite;
}

@keyframes dsPulse {
    0% {
        opacity: 0.8;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

.ds-brands-count {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-text);
    font-size: 13px;
}

.ds-brands-count strong {
    color: var(--ds-primary);
    font-size: 19px;
}

/* Marquee */

.ds-marquee {
    width: 100%;
    padding: 8px 0;
    overflow: hidden;
}

.ds-marquee + .ds-marquee {
    margin-top: 9px;
}

.ds-marquee-track {
    display: flex;
    width: max-content;
    gap: 18px;
    will-change: transform;
}

.ds-marquee-left .ds-marquee-track {
    animation: dsMarqueeLeft 28s linear infinite;
}

.ds-marquee-right .ds-marquee-track {
    animation: dsMarqueeRight 30s linear infinite;
}

.ds-marquee:hover .ds-marquee-track {
    animation-play-state: paused;
}

@keyframes dsMarqueeLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 9px));
    }
}

@keyframes dsMarqueeRight {
    from {
        transform: translateX(calc(-50% - 9px));
    }

    to {
        transform: translateX(0);
    }
}

/* Logo cards */

.ds-logo-card {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 185px;
    width: 185px;
    height: 92px;
    padding: 20px;
    border: 1px solid rgba(32, 75, 117, 0.10);
    border-radius: 16px;
    background: var(--ds-white);
    box-shadow: 0 8px 24px rgba(32, 75, 117, 0.06);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.ds-logo-card::before {
    content: "";
    position: absolute;
    inset: auto 22px 0;
    height: 2px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ds-primary),
        transparent
    );
    opacity: 0;
    transform: scaleX(0);
    transition: 0.35s ease;
}

.ds-logo-card:hover {
    z-index: 3;
    border-color: rgba(32, 75, 117, 0.28);
    box-shadow: 0 15px 35px rgba(32, 75, 117, 0.14);
    transform: translateY(-5px);
}

.ds-logo-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.ds-logo-card img {
    display: block;
    max-width: 130px;
    max-height: 50px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.62;
    transition:
        filter 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
}

.ds-logo-card:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* Testimonials area */

.ds-testimonials-area {
    margin-top: 75px;
}

.ds-testimonial-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.ds-small-label {
    display: block;
    margin-bottom: 8px;
    color: var(--ds-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ds-testimonial-heading h3 {
    margin: 0;
    color: var(--ds-heading);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
}

.ds-rating-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border: 1px solid rgba(32, 75, 117, 0.10);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
}

.ds-rating-summary > strong {
    color: var(--ds-primary);
    font-size: 30px;
    line-height: 1;
}

.ds-summary-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 3px;
    color: var(--ds-star);
    font-size: 12px;
}

.ds-rating-summary span {
    color: var(--ds-text);
    font-size: 11px;
}

/* Testimonial cards */

.ds-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ds-testimonial-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 330px;
    padding: 30px;
    flex-direction: column;
    border: 1px solid rgba(32, 75, 117, 0.10);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 45px rgba(32, 75, 117, 0.08);
    overflow: hidden;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.ds-testimonial-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(32, 75, 117, 0.055);
    transition: transform 0.45s ease;
}

.ds-testimonial-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--ds-secondary),
        var(--ds-primary)
    );
    transition: width 0.4s ease;
}

.ds-testimonial-card:hover {
    border-color: rgba(32, 75, 117, 0.22);
    box-shadow: 0 24px 65px rgba(32, 75, 117, 0.15);
    transform: translateY(-9px);
}

.ds-testimonial-card:hover::before {
    transform: scale(1.25);
}

.ds-testimonial-card:hover::after {
    width: 100%;
}

.ds-featured-card {
    color: var(--ds-white);
    border-color: transparent;
    background:
        linear-gradient(
            145deg,
            rgba(32, 75, 117, 0.97),
            rgba(72, 107, 147, 0.95)
        );
    box-shadow: 0 22px 55px rgba(32, 75, 117, 0.23);
}

.ds-featured-card::before {
    background: rgba(255, 255, 255, 0.07);
}

.ds-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-stars {
    display: flex;
    gap: 4px;
    color: var(--ds-star);
    font-size: 14px;
}

.ds-quote-icon {
    color: rgba(32, 75, 117, 0.12);
    font-size: 35px;
    line-height: 1;
}

.ds-featured-card .ds-quote-icon {
    color: rgba(255, 255, 255, 0.16);
}

.ds-testimonial-card blockquote {
    position: relative;
    z-index: 2;
    margin: 32px 0 28px;
    color: #40576d;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
}

.ds-featured-card blockquote {
    color: rgba(255, 255, 255, 0.93);
}

.ds-client-info {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(32, 75, 117, 0.10);
}

.ds-featured-card .ds-client-info {
    border-top-color: var(--ds-border);
}

.ds-client-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--ds-white);
    background: linear-gradient(
        135deg,
        var(--ds-primary),
        var(--ds-secondary)
    );
    box-shadow: 0 7px 18px rgba(32, 75, 117, 0.20);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.ds-featured-card .ds-client-avatar {
    color: var(--ds-primary);
    background: var(--ds-white);
}

.ds-client-details {
    min-width: 0;
}

.ds-client-details h4 {
    margin: 0 0 4px;
    color: var(--ds-heading);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-client-details p {
    margin: 0;
    color: var(--ds-text);
    font-size: 12px;
}

.ds-featured-card .ds-client-details h4 {
    color: var(--ds-white);
}

.ds-featured-card .ds-client-details p {
    color: rgba(255, 255, 255, 0.72);
}

.ds-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ds-secondary);
    font-size: 10px;
    font-weight: 600;
}

.ds-featured-card .ds-verified {
    color: rgba(255, 255, 255, 0.85);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {
    .ds-trust-section {
        padding: 85px 0;
    }

    .ds-testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-testimonial-card:last-child {
        grid-column: 1 / -1;
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .ds-trust-section {
        padding: 70px 0;
    }

    .ds-trust-container {
        width: min(100% - 28px, 1240px);
    }

    .ds-section-heading {
        margin-bottom: 36px;
    }

    .ds-section-heading h2 {
        font-size: 34px;
        letter-spacing: -0.8px;
    }

    .ds-section-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .ds-brands-wrapper {
        padding: 25px 0;
        border-radius: 20px;
    }

    .ds-brands-wrapper::before,
    .ds-brands-wrapper::after {
        top: 75px;
        width: 50px;
    }

    .ds-brands-top {
        align-items: flex-start;
        padding: 0 20px;
        flex-direction: column;
        gap: 10px;
    }

    .ds-logo-card {
        flex-basis: 150px;
        width: 150px;
        height: 78px;
        padding: 16px;
    }

    .ds-logo-card img {
        max-width: 108px;
        max-height: 42px;
    }

    .ds-testimonials-area {
        margin-top: 55px;
    }

    .ds-testimonial-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ds-rating-summary {
        width: 100%;
        justify-content: center;
    }

    .ds-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .ds-testimonial-card,
    .ds-testimonial-card:last-child {
        grid-column: auto;
        min-height: 310px;
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .ds-trust-container {
        width: min(100% - 22px, 1240px);
    }

    .ds-section-heading h2 {
        font-size: 30px;
    }

    .ds-testimonial-card blockquote {
        font-size: 14px;
        line-height: 1.75;
    }

    .ds-client-info {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ds-verified {
        grid-column: 2;
    }

    .ds-logo-card {
        flex-basis: 135px;
        width: 135px;
    }
}

/* Motion accessibility */

@media (prefers-reduced-motion: reduce) {
    .ds-marquee-track,
    .ds-live-dot::after {
        animation-play-state: paused;
    }

    .ds-testimonial-card,
    .ds-logo-card,
    .ds-logo-card img {
        transition: none;
    }
}



/* ===================================
   DS OUTDOOR MEDIA ANIMATED TOP BAR
=================================== */

.ds-announcement-bar {
    --ds-red: #dd0f18;
    --ds-dark: #171b1f;
    --ds-light: #fff4f4;

    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ds-light);
    border-bottom: 1px solid rgba(221, 15, 24, 0.18);
    z-index: 9999;
}

/* Subtle background shine */
.ds-announcement-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    width: 100px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.9),
        transparent
    );
    transform: skewX(-25deg);
    animation: dsBarShine 5s linear infinite;
    pointer-events: none;
    z-index: 2;
}

.ds-announcement-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: dsTickerScroll 28s linear infinite;
    will-change: transform;
}

.ds-announcement-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.ds-announcement-content span,
.ds-announcement-content strong {
    display: inline-block;
    margin: 0 25px;
    color: var(--ds-dark);
    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Red circular separator */
.ds-announcement-content i {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    display: inline-block;
    border-radius: 50%;
    background: var(--ds-red);
    box-shadow: 0 0 0 5px rgba(221, 15, 24, 0.1);
}

/* Outline-to-fill animated text */
.ds-announcement-content .ds-fill-text {
    position: relative;
    color: transparent;
    font-family: "Bebas Neue", "Arial Narrow", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1.5px;
    -webkit-text-stroke: 1px var(--ds-red);
    background-image: linear-gradient(
        90deg,
        var(--ds-red) 0%,
        var(--ds-red) 50%,
        transparent 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    background-clip: text;
    -webkit-background-clip: text;
    animation: dsTextFill 3s ease-in-out infinite;
}

/* Pause when user places cursor over bar */
.ds-announcement-bar:hover .ds-announcement-track {
    animation-play-state: paused;
}

/* Continuous right-to-left movement */
@keyframes dsTickerScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Outline text fills with red color */
@keyframes dsTextFill {
    0%,
    15% {
        background-position: 100% 0;
    }

    50%,
    75% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@keyframes dsBarShine {
    from {
        left: -150px;
    }

    to {
        left: calc(100% + 150px);
    }
}

/* Tablet */
@media (max-width: 991px) {
    .ds-announcement-bar {
        height: 46px;
    }

    .ds-announcement-content span,
    .ds-announcement-content strong {
        margin: 0 20px;
        font-size: 14px;
    }

    .ds-announcement-content .ds-fill-text {
        font-size: 19px;
    }

    .ds-announcement-track {
        animation-duration: 24s;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .ds-announcement-bar {
        height: 42px;
    }

    .ds-announcement-content span,
    .ds-announcement-content strong {
        margin: 0 15px;
        font-size: 12px;
        letter-spacing: 0.2px;
    }

    .ds-announcement-content .ds-fill-text {
        font-size: 17px;
        letter-spacing: 1px;
        -webkit-text-stroke-width: 0.7px;
    }

    .ds-announcement-content i {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 0 3px rgba(221, 15, 24, 0.1);
    }

    .ds-announcement-track {
        animation-duration: 20s;
    }
}

/* Accessibility: stop animation if reduced motion is enabled */
@media (prefers-reduced-motion: reduce) {
    .ds-announcement-track,
    .ds-announcement-bar::before,
    .ds-announcement-content .ds-fill-text {
        animation: none;
    }
}
#backToTop {
    position: fixed;
    right: 28px;
    bottom: 135px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: linear-gradient(135deg, #204b75, #486b93);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    box-shadow: 0 8px 25px rgba(32, 75, 117, 0.35);
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.3s ease;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    animation: backToTopPulse 2s infinite;
}

#backToTop:hover {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 14px 30px rgba(32, 75, 117, 0.5);
}

#backToTop:active {
    transform: translateY(-2px) scale(0.95);
}

#backToTop svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

#backToTop:hover svg {
    transform: translateY(-3px);
}

@keyframes backToTopPulse {
    0%,
    100% {
        box-shadow:
            0 8px 25px rgba(32, 75, 117, 0.35),
            0 0 0 0 rgba(72, 107, 147, 0.35);
    }

    50% {
        box-shadow:
            0 8px 25px rgba(32, 75, 117, 0.35),
            0 0 0 10px rgba(72, 107, 147, 0);
    }
}

@media (max-width: 576px) {
    #backToTop {
        right: 25px;
        bottom: 100px;
        width: 46px;
        height: 46px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    #backToTop,
    #backToTop.show,
    #backToTop svg {
        animation: none;
        transition: none;
    }
}


/* Map container */
.location-map,
.map-container,
.map-wrapper {
    position: relative;
    overflow: hidden;
}

/* Pin */
.map-pin {
    position: absolute;
    z-index: 5;
}

/* Default tooltip — pin ke upar */
.map-pin .pin-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(8px);

    min-width: 190px;
    padding: 10px 14px;
    background: #102c46;
    color: #ffffff;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

/* Tooltip arrow */
.map-pin .pin-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #102c46;
}

/* Hover par show */
.map-pin:hover {
    z-index: 1000;
}

.map-pin:hover .pin-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 
   Upper pins ke liye tooltip neeche khulega.
   Pin par tooltip-bottom class lagani hai.
*/
.map-pin.tooltip-bottom .pin-tooltip {
    top: calc(100% + 12px);
    bottom: auto;
    transform: translateX(-50%) translateY(-8px);
}

.map-pin.tooltip-bottom:hover .pin-tooltip {
    transform: translateX(-50%) translateY(0);
}

.map-pin.tooltip-bottom .pin-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #102c46;
}