* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat";
}

body {
    font-family: "Montserrat";
    background: #f5f7fb;
}

/* Announcement Bar */
.announcement-bar {
    width: 100%;
    height: 45px;
    background: linear-gradient(90deg, #048ef7 0%, #001c4e 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Text Wrapper — acts as anchor for absolute spans */
.announcement-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Each text span — stacked at center, hidden by default */
.announcement-track span {
    position: absolute;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0);
    transform-origin: 50% 50%;
    animation: scaleUpCenter 12s ease-in-out infinite;
}

/* Stagger each span 3 s apart inside the 12 s cycle */
.announcement-track span:nth-child(1) {
    animation-delay: 0s;
}
.announcement-track span:nth-child(2) {
    animation-delay: 3s;
}
.announcement-track span:nth-child(3) {
    animation-delay: 6s;
}
.announcement-track span:nth-child(4) {
    animation-delay: 9s;
}

/* Scale Up Center — only on the text spans */
@keyframes scaleUpCenter {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    6% {
        transform: scale(1.05);
        opacity: 1;
    }
    10% {
        transform: scale(1);
        opacity: 1;
    }
    22% {
        transform: scale(1);
        opacity: 1;
    }
    25% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Demo Section */
.main-section {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.main-section h1 {
    font-size: 42px;
    color: #001c4e;
    margin-bottom: 15px;
}

.main-section p {
    font-size: 18px;
    color: #333333;
}

/* Responsive */
@media (max-width: 768px) {
    .announcement-bar {
        height: 40px;
    }

    .announcement-track span {
        font-size: 12px;
    }

    .main-section h1 {
        font-size: 30px;
    }

    .main-section p {
        font-size: 15px;
    }
}
/* Header */
.site-header {
    width: 100%;
    background: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-container {
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    padding: 16px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* Logo Left */
.header-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-logo img {
    width: 202px;
    height: 53px;
    display: block;
    left: 123px;
}

/* Center Menu */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.header-nav a {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 11px 18px;
    /* border-radius: 40px; */
    transition: 0.3s ease;
}

/* Hover Effect */
.header-nav a:hover {
    background: #048ef7;
    color: #ffffff;
}

/* Active Page */
.header-nav a.active {
    background: #048ef7;
    color: #ffffff;
}

/* Desktop Nav Dropdown */
/* ── Desktop Dropdown ── */
.nav-dropdown {
    position: relative;
    display: inline-flex;
}

.nav-caret {
    font-size: 9px;
    margin-left: 4px;
    vertical-align: middle;
    transition: transform 0.25s ease;
}

.nav-dropdown:hover .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: #1a1a2e;
    border-radius: 8px;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    z-index: 999;
    padding: 6px 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-dropdown-menu a {
    display: block;
    padding: 9px 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s;
}

.nav-dropdown:hover .nav-dropdown-menu a {
    opacity: 1;
    transform: translateX(0);
}

.nav-dropdown:hover .nav-dropdown-menu a:nth-child(1)  { transition-delay: 0.03s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(2)  { transition-delay: 0.06s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(3)  { transition-delay: 0.09s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(4)  { transition-delay: 0.12s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(5)  { transition-delay: 0.15s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(6)  { transition-delay: 0.18s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(7)  { transition-delay: 0.21s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(8)  { transition-delay: 0.24s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(9)  { transition-delay: 0.27s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(10) { transition-delay: 0.30s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(11) { transition-delay: 0.33s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(12) { transition-delay: 0.36s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(13) { transition-delay: 0.39s; }
.nav-dropdown:hover .nav-dropdown-menu a:nth-child(14) { transition-delay: 0.42s; }

.nav-dropdown-menu a:hover {
    background: #048ef7;
    color: #ffffff;
}

/* ── Mobile Nav Dropdown ── */
.mobile-nav-dropdown {
    width: 100%;
}

.mobile-services-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.mobile-services-link {
    flex: 1;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    display: block;
    transition: background 0.2s, color 0.2s;
}

.mobile-services-link:hover,
.mobile-services-link.active {
    background: #048ef7;
    color: #ffffff;
}

.mobile-caret-btn {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.12);
    color: inherit;
    padding: 12px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

.mobile-caret-btn:hover,
.mobile-caret-btn.open {
    background: #048ef7;
    color: #ffffff;
}

.mobile-nav-caret {
    font-size: 9px;
    transition: transform 0.25s ease;
    display: block;
}

.mobile-caret-btn.open .mobile-nav-caret {
    transform: rotate(180deg);
}

.mobile-nav-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    padding-left: 16px;
    transition: max-height 0.35s ease;
}

.mobile-nav-dropdown-menu.open {
    max-height: 600px;
}

.mobile-nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
}

.mobile-nav-dropdown-menu a:hover {
    background: #048ef7;
    color: #ffffff;
}

/* Right Button */
.header-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.get-touch-btn {
    background: #048ef7;
    /* border: 1px solid #048EF7; */
    color: #ffffff;
    padding: 13px 26px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: visible;
    transition: 0.3s ease;
}

/* Get in Touch — always blinking glow */
.get-touch-btn::before {
    content: "";
    position: absolute;
    inset: -6px;
    background: #048ef7;
    opacity: 0.25;
    z-index: -1;
    border-radius: 6px;
    animation: popupBlink 1.2s ease-in-out infinite;
}

.get-touch-btn:hover {
    background: #048ef7;
    color: #ffffff;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 28px rgba(4, 142, 247, 0.35);
}

/* Get in Touch Active */
.get-touch-btn.active-btn {
    background: #048ef7;
    color: #ffffff;
    border-color: #048ef7;
}

/* Popup Blink Animation */
@keyframes popupBlink {
    0% {
        opacity: 0.25;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.12);
    }

    100% {
        opacity: 0.25;
        transform: scale(0.95);
    }
}

/* ── Hamburger button — hidden on desktop ── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    z-index: 1001;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
    transform-origin: center;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile dropdown menu ── */
.mobile-menu {
    display: none;
    width: 100%;
    background: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-menu.open {
    max-height: 520px;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 24px 20px;
    gap: 2px;
}

.mobile-nav a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.mobile-nav a:hover,
.mobile-nav a.active {
    background: #048ef7;
    color: #ffffff;
}

.mobile-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 13px 26px;
    background: #048ef7;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    text-align: center;
}

.mobile-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(4, 142, 247, 0.35);
}

/* ── Responsive: show hamburger, hide desktop nav ── */
@media (max-width: 1024px) {
    .header-container {
        grid-template-columns: 1fr auto;
        padding: 14px 20px;
    }

    .header-nav,
    .header-action {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }
}

@media (max-width: 480px) {
    .header-logo img {
        width: 160px;
        height: auto;
    }
}
/* ═══════════════════════════════════════════
   HOME HERO SECTION
═══════════════════════════════════════════ */
.home-hero {
    width: 100%;
    background: #000000;
    position: relative;
    overflow: hidden;
    font-family: "Montserrat";
    display: flex;
    flex-direction: column;
}

/* ── Inner 2-column grid ── */
.hero-inner {
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;
    padding: 90px 0 70px 116px;
    min-height: calc(100vh - 165px); /* 165px = announcement bar + header */
}

/* ── Left Content ── */
.hero-left-content {
    width: 100%;
    max-width: 560px;
    position: relative;
    z-index: 5;
}

.hero-left-content h1 {
    color: #ffffff;
    font-size: 62px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 18px;
}

.hero-left-content h1 span {
    color: #048ef7;
}

.hero-left-content > p {
    width: 520px;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: -0.01em;
    margin-top: 18px;
    margin-bottom: 32px;
}

/* ── CTA Button ── */
.hero-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 257px;
    height: 46px;
    border-radius: 3px;
    background: #ffffff;
    color: #048ef7;
    border: none;
    text-decoration: none;
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.hero-project-btn:hover {
    background: #048ef7;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(4, 142, 247, 0.4);
}

/* ── Trust Ratings (Clutch / GoodFirms / Trustpilot / Google) ── */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-ratings {
    margin-top: 30px;
    animation: slideUpFade 0.7s ease-out both;
    animation-delay: 0.3s;
}

.hero-trust-image {
    width: 480px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Right: Continuously scrolling hero1 image ── */
.hero-right-image {
    width: 100%;
    height: 832px; /* matches image height so one full image is visible */
    position: relative;
    z-index: 3;
    overflow: hidden; /* hides the duplicate below */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* The scrolling track — holds 2 copies for seamless loop */
.hero-slide-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 920px;
    object-fit: none;
    animation: heroScrollUp 80s linear infinite;
}

/* Each image */
.hero1-img {
    width: 512px;
    height: auto;
    border-radius: 10px;
    display: block;
    flex-shrink: 0;
}

/* Seamless upward scroll: JS sets --hero-scroll-dist after images load */
@keyframes heroScrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(var(--hero-scroll-dist, -5184px));
    }
}

/* ── Decorative corner frame ── */
.hero-frame {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 390px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

/* ═══════════════════════════════════════════
   TRUSTED BY STRIP
═══════════════════════════════════════════ */
.hero-trusted-by {
    width: 100%;
    padding: 28px 20px 40px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 5;
}

.trusted-heading {
    color: #ffffff;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 42.62px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: capitalize;
    text-align: center;
    vertical-align: middle;
    margin: 0;
}

/* ── Bordered brands box ── */
.trusted-brands-box {
    width: 100%;
    max-width: 960px;
    height: 70px;
    border: 2px solid #ffffff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    /* fade edges */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.brands-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    height: 100%;
    animation: brands-slide 18s linear infinite;
}

.brands-track:hover {
    animation-play-state: paused;
}

@keyframes brands-slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Vertical divider between brands */
.brand-sep {
    width: 1.5px;
    height: 28px;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

/* Every brand logo */
.brand-item {
    flex-shrink: 0;
    padding: 0 22px;
    display: flex;
    align-items: center;
}

.brand-item img {
    height: 22px;
    width: auto;
    display: block;
}

.brand-tissot img {
    height: 36px;
}

.brand-sony img {
    height: 50px;
}

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

    .trusted-brands-box {
        height: 60px;
    }

    .brand-item {
        padding: 0 14px;
    }

    .brand-item img {
        height: 18px;
    }

    .brand-tissot img {
        height: 28px;
    }

    .brand-sony img {
        height: 38px;
    }
}

@media (max-width: 600px) {
    .trusted-heading {
        font-size: 26px;
    }

    .trusted-brands-box {
        height: 50px;
    }

    .brand-item {
        padding: 0 10px;
    }

    .brand-item img {
        height: 14px;
    }

    .brand-tissot img {
        height: 22px;
    }

    .brand-sony img {
        height: 30px;
    }

    .brands-track {
        animation-duration: 12s;
    }
}

@media (max-width: 480px) {
    .trusted-heading {
        font-size: 22px;
    }

    .trusted-brands-box {
        height: 44px;
    }

    .brand-item {
        padding: 0 8px;
    }

    .brand-item img {
        height: 12px;
    }

    .brand-tissot img {
        height: 18px;
    }

    .brand-sony img {
        height: 26px;
    }

    .brands-track {
        animation-duration: 10s;
    }
}

.trusted-logos img:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — HERO
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
    .hero-inner {
        padding: 80px 0 60px 60px;
    }

    .hero-left-content h1 {
        font-size: 58px;
    }

    .hero-trusted-by {
        padding: 22px 60px;
        gap: 36px;
    }
}

@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        padding: 70px 32px 50px;
        min-height: auto;
        gap: 50px;
    }

    .hero-left-content {
        max-width: 100%;
    }

    .hero-left-content h1 {
        font-size: 46px;
    }

    .hero-left-content > p {
        width: 100%;
        font-size: 15px;
        line-height: 24px;
    }

    .hero-right-image {
        width: 100%;
        height: auto;
        padding: 0;
        justify-content: flex-start;
        overflow: hidden;
    }

    .hero-slide-track {
        flex-direction: row;
        animation: heroScrollLeft 25s linear infinite;
    }

    .hero1-img {
        width: 440px;
        max-width: none;
        height: auto;
        flex-shrink: 0;
    }

    @keyframes heroScrollLeft {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-6 * (440px + 32px)));
        }
    }

    .hero-mockup-wrap {
        height: 380px;
    }

    .hero-trusted-by {
        padding: 22px 32px;
        gap: 28px;
    }

    .trusted-logos {
        gap: 28px;
    }
}

@media (max-width: 600px) {
    .hero-inner {
        padding: 55px 20px 40px;
    }

    .hero-left-content h1 {
        font-size: 38px;
    }

    .hero-project-btn {
        width: 220px;
        height: 44px;
        font-size: 12px;
    }

    .hero-right-image {
        height: auto;
        padding: 0;
        justify-content: flex-start;
        overflow: hidden;
    }

    .hero-slide-track {
        flex-direction: row;
        animation: heroScrollLeft 20s linear infinite;
    }

    .hero1-img {
        width: 340px;
        max-width: none;
        height: auto;
        flex-shrink: 0;
    }

    @keyframes heroScrollLeft {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-6 * (340px + 32px)));
        }
    }

    .hero-mockup-wrap {
        height: 300px;
    }

    .hero-frame {
        width: 180px;
    }

    .hero-trusted-by {
        padding: 20px;
        gap: 18px;
    }

    .trusted-logos {
        gap: 20px;
    }

    .trusted-logos img {
        height: 20px;
    }
}

@media (max-width: 480px) {
    .hero-inner {
        padding: 48px 16px 36px;
    }

    .hero-left-content h1 {
        font-size: 32px;
    }

    .hero-left-content > p {
        font-size: 14px;
    }

    .hero-right-image {
        height: auto;
    }

    .hero1-img {
        width: 280px;
        max-width: none;
        height: auto;
        flex-shrink: 0;
    }

    @keyframes heroScrollLeft {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-6 * (280px + 32px)));
        }
    }

    .hero-frame {
        width: 130px;
    }
}

/* ═══════════════════════════════════════════
   STATS SECTION — A Digital Team
═══════════════════════════════════════════ */
.stats-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 0 90px;
}

.stats-container {
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
}

/* ── Heading block ── */
.stats-heading {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* "A Digital Team" — blue */
.stats-title-blue {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: -0.05em;
    text-transform: capitalize;
    vertical-align: middle;
    color: #048ef7;
    margin: 0;
}

/* "Focused On Real Results" — dark */
.stats-title-dark {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: -0.05em;
    text-transform: capitalize;
    vertical-align: middle;
    color: #333333;
    margin: 0;
}

/* ── 4-column stat boxes ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    align-items: stretch; /* equal height */
}

/* Individual stat box */
.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 16px;
    border: 1.5px solid #000000;
    border-radius: 10px;
    background: #ffffff;
    min-height: 90px;
    position: relative;
    overflow: hidden;
    transition:
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}

/* Blue glow layer on hover */
.stat-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(4, 142, 247, 0.07) 0%,
        rgba(4, 142, 247, 0.16) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
}

.stat-box:hover::before {
    opacity: 1;
}

.stat-box:hover {
    box-shadow: 0 8px 28px rgba(4, 142, 247, 0.18);
    border-color: #048ef7;
    transform: translateY(-4px);
}

/* keep content above the bg layer */
.stat-box > * {
    position: relative;
    z-index: 1;
}

/* ── Count-up animation: fade + scale in on start ── */
@keyframes statPop {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }
    60% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.stat-count[data-animated="1"] {
    display: inline-block;
    animation: statPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* The big number — blue digits */
.stat-number {
    font-family: "Montserrat";
    font-size: 36px;
    font-weight: 800;
    color: #048ef7;
    line-height: 1;
    letter-spacing: -1px;
    white-space: nowrap;
}

/* "+" matches number — also blue */
.stat-plus {
    color: #111111;
}

/* The label */
.stat-label {
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-title-blue,
    .stats-title-dark {
        font-size: 38px;
    }
}

@media (max-width: 520px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .stats-title-blue,
    .stats-title-dark {
        font-size: 28px;
    }

    .stat-number {
        font-size: 30px;
    }

    .stat-label {
        font-size: 12px;
        white-space: normal;
    }

    .stat-box {
        padding: 22px 14px;
        min-height: 90px;
    }
}

/* ═══════════════════════════════════════════
   MARQUEE SLIDING STRIP
═══════════════════════════════════════════ */
.marquee-strip {
    width: 100%;
    background: #ffffff;
    overflow: hidden;
    padding: 22px 0;
    border-top: 2px solid #048ef7;
    border-bottom: 2px solid #048ef7;
}

/* Track holds 2 copies side by side — moves left by exactly 50% for seamless loop */
.marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    animation: marqueeSlide 40s linear infinite;
}

/* Each text copy */
.marquee-text {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding-right: 56px; /* gap between the two copies */

    font-family: "Montserrat";
    font-weight: 500;
    font-size: 52.78px;
    line-height: 100%;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #048ef7;
}

/* Blue diamond separator */
.marquee-star {
    color: #048ef7;
    font-size: 40px;
    line-height: 1;
    flex-shrink: 0;
}

/* Slide: 50% = first copy width → seamless jump to identical second copy */
@keyframes marqueeSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ═══════════════════════════════════════════
   PORTFOLIO SECTION
═══════════════════════════════════════════ */
.portfolio-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 0 90px;
}

.portfolio-container {
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ── Header block (title + filters) ── */
.portfolio-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Heading */
.portfolio-title {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #333333;
    text-align: center;
    margin: 0;
}

/* ── Filter pill buttons ── */
.portfolio-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 3px;
    border: 1.5px solid #d0d0d0;
    background: #ffffff;
    color: #333333;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.filter-btn:hover {
    border-color: #048ef7;
    color: #048ef7;
}

/* Active pill */
.filter-btn.active {
    background: #048ef7;
    border-color: #048ef7;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(4, 142, 247, 0.3);
}

/* ── Bento grid: narrow | wide-featured | narrow ── */
/* ── 3-column projects grid ── */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@keyframes portfolio-pan {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-25%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Each project card */
.portfolio-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #f2f2f2;
    aspect-ratio: 4 / 3;
}

.portfolio-item img {
    width: 100%;
    height: 133%;
    object-fit: cover;
    display: block;
    animation: portfolio-pan 8s ease-in-out infinite;
}

.portfolio-item:nth-child(2) img {
    animation-delay: -2s;
}
.portfolio-item:nth-child(3) img {
    animation-delay: -4s;
}
.portfolio-item:nth-child(4) img {
    animation-delay: -1s;
}
.portfolio-item:nth-child(5) img {
    animation-delay: -3s;
}
.portfolio-item:nth-child(6) img {
    animation-delay: -5s;
}
.portfolio-item:nth-child(7) img {
    animation-delay: -6s;
}
.portfolio-item:nth-child(8) img {
    animation-delay: -1.5s;
}
.portfolio-item:nth-child(9) img {
    animation-delay: -3.5s;
}

.portfolio-overlay {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-title {
        font-size: 28px;
    }
}

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

    .portfolio-title {
        font-size: 24px;
    }

    .filter-btn {
        font-size: 12px;
        padding: 7px 14px;
    }
}

/* ═══════════════════════════════════════════
   TRUST BADGES SECTION
═══════════════════════════════════════════ */
.trust-section {
    width: 100%;
    background: #ffffff;
    padding: 70px 0 80px;
}

.trust-container {
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.trust-heading {
    font-size: 32px;
    font-weight: 800;
    color: #333333;
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

.trust-subtext {
    font-size: 15px;
    font-weight: 400;
    color: #666666;
    text-align: center;
    line-height: 1.7;
    max-width: 620px;
    margin: 0;
}

.trust-badges {
    width: 100%;
    overflow: hidden;
    margin-top: 24px;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.badges-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    animation: badges-slide 10s linear infinite;
}

@keyframes badges-slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.badge-item {
    flex-shrink: 0;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

.badge-item img {
    height: 150px;
    width: auto;
    display: block;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
    opacity: 0.85;
}

.badge-item img:hover {
    transform: scale(1.08);
    opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .badge-item {
        padding: 0 20px;
    }
    .badge-item img {
        height: 120px;
    }
}

@media (max-width: 600px) {
    .trust-heading {
        font-size: 24px;
    }
    .badge-item {
        padding: 0 16px;
    }
    .badge-item img {
        height: 100px;
    }
    .badges-track {
        animation-duration: 14s;
    }
}

@media (max-width: 480px) {
    .badge-item {
        padding: 0 12px;
    }
    .badge-item img {
        height: 80px;
    }
    .badges-track {
        animation-duration: 12s;
    }
}

/* ═══════════════════════════════════════════
   PROCESS STEPS SECTION — Figma Match
═══════════════════════════════════════════ */
.process-section {
    width: 100%;
    background: #ffffff;
    padding: 40px 0 90px;
}

.process-container {
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Each row has 3 steps */
.process-row {
    display: grid;
    grid-template-columns: repeat(3, 260px);
    gap: 0;
    justify-content: center;
    justify-items: center;
}

/* ── Single step container ── */
.process-step {
    position: relative;
    width: 100%;
    max-width: 290px;
    display: flex;
    justify-content: center;
}

/* ── The circle itself ── */
.step-circle {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 72px 26px 26px;
    box-sizing: border-box;
    cursor: pointer;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease;
}

/* Shrink all circles when container is being hovered */
.process-container:hover .step-circle {
    transform: scale(0.9);
    box-shadow: none;
}

/* Scale up + full even shadow on the hovered circle */
.process-container:hover .process-step:hover .step-circle {
    transform: scale(1.15);
    box-shadow:
        0 0 0 6px rgba(4, 142, 247, 0.1),
        0 0 40px 12px rgba(4, 142, 247, 0.22),
        0 12px 40px rgba(4, 142, 247, 0.28);
}

/* Rotate number badge and add glow on hover */
.process-container:hover .process-step:hover .step-badge {
    transform: translateX(-50%) rotate(360deg);
    box-shadow: 0 0 18px 4px rgba(4, 142, 247, 0.55);
}

.step-variant-b .process-step:hover .step-badge {
    box-shadow: 0 0 18px 4px rgba(4, 142, 247, 0.7);
}

/* ── Black dot badge (default) ── */
.step-badge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0a0a0a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: “Montserrat”;
    font-size: 15px;
    font-weight: 700;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease;
}

/* ── Content inside the circle ── */
.step-content {
    text-align: center;
    margin-top: 18px;
}

.step-title {
    font-family: "Montserrat";
    font-size: 17px;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 10px;
    line-height: 1.2;
}

.step-desc {
    font-family: "Montserrat";
    font-size: 12px;
    color: #555555;
    line-height: 1.55;
    margin: 0;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
}

/* ════════════════════════════════════════
   VARIANT A — Steps 01, 03, 05
   Top half: BLACK arc
═══════════════════════════════════════════ */
.step-variant-a .step-badge {
    background: #048ef7;
}

.step-variant-a .step-circle {
    border: none;
}

.step-variant-a .step-circle::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #0a0a0a;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    pointer-events: none;
}

.step-variant-a .step-circle::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background:
        radial-gradient(circle 18px at 0% 50%, #ffffff 0%, transparent 100%),
        radial-gradient(circle 18px at 100% 50%, #ffffff 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* ════════════════════════════════════════
   VARIANT B — Step 02 (Blue badge + Blue bottom half arc)
═══════════════════════════════════════════ */
.step-variant-b .step-badge {
    background: #0a0a0a;
}

.step-variant-b .step-title {
    color: #048ef7;
}

.step-variant-b .step-circle {
    border: none;
}

.step-variant-b .step-circle::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #048ef7;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    pointer-events: none;
}

.step-variant-b .step-circle::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background:
        radial-gradient(circle 18px at 0% 50%, #ffffff 0%, transparent 100%),
        radial-gradient(circle 18px at 100% 50%, #ffffff 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* ════════════════════════════════════════
   VARIANT C — Steps 04, 06 (Black badge + Blue bottom arc + Blue title)
═══════════════════════════════════════════ */
.step-variant-c .step-title {
    color: #048ef7;
}

.step-variant-c .step-circle {
    border: none;
}

.step-variant-c .step-circle::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid #048ef7;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    pointer-events: none;
}

.step-variant-c .step-circle::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background:
        radial-gradient(circle 18px at 0% 50%, #ffffff 0%, transparent 100%),
        radial-gradient(circle 18px at 100% 50%, #ffffff 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .process-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

@media (max-width: 560px) {
    .process-row {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .step-circle {
        width: 240px;
        height: 240px;
    }
}
@media (max-width: 380px) {
    .step-circle {
        width: 200px;
        height: 200px;
        padding: 60px 20px 20px;
    }

    .process-section {
        padding: 28px 0 60px;
    }

    .step-title {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .step-desc {
        font-size: 10px;
        max-width: 130px;
        line-height: 1.4;
    }
}

/* ═══════════════════════════════════════════
   CASE STUDIES SECTION
═══════════════════════════════════════════ */
.case-studies-section {
    width: 100%;
    background: transparent;
    padding: 80px 0 90px;
}

.case-studies-heading {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: #333333;
    margin: 0 0 36px;
    line-height: 1.2;
}

/* Dark rounded box — only wraps the image grid */
.case-studies-dark-box {
    width: 1193px;
    max-width: 95%;
    background: #222222;
    border-radius: 10px;
    margin: 0 auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-studies-grid {
    display: grid;
    grid-template-columns: 0.9fr 2fr 1.2fr;
    gap: 14px;
    align-items: stretch;
}

/* Col 4 — two images stacked vertically */
.case-study-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.case-study-stack .case-study-card img {
    height: 132px;
}

/* ── Sales Chart Widget ─────────────────────────────────────── */
.sales-chart-widget {
    width: 100%;
    height: 132px;
    background: linear-gradient(145deg, #06110a 0%, #0a1a10 100%);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 6px;
    box-sizing: border-box;
    overflow: hidden;
}

.sales-chart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.sales-chart-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}

.sales-chart-value {
    font-size: 20px;
    font-weight: 700;
    color: #00e676;
    line-height: 1;
}

.sales-chart-badge {
    font-size: 10px;
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid rgba(0, 230, 118, 0.25);
}

.sales-chart-svg {
    flex: 1;
    width: 100%;
    display: block;
}

.s-area {
    opacity: 0;
}

.sales-chart-widget.is-animated .s-area {
    animation: fadeAreaCS 0.4s ease-out forwards;
}

.reveal-rect {
    transform-origin: 0 0;
    transform: scaleX(0);
}

.sales-chart-widget.is-animated .reveal-rect {
    animation: revealCS 1s ease-out forwards;
}

.s-line {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}

.sales-chart-widget.is-animated .s-line {
    animation: drawLineCS 1s ease-out forwards;
}

.s-dot {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
}

.sales-chart-widget.is-animated .s-dot {
    animation: dotPopCS 0.3s ease-out 0.95s forwards;
}

@keyframes revealCS {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes drawLineCS {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeAreaCS {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dotPopCS {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.case-study-card--tall img {
    height: 200px;
}

.case-study-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(4, 142, 247, 0.3);
}

.case-study-card img {
    width: 100%;
    height: 280px;
    /* object-fit: contain; */
    display: block;
}

@media (max-width: 900px) {
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .case-study-card img {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .case-studies-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .case-studies-grid {
        grid-template-columns: 1fr;
    }
    .case-studies-heading {
        font-size: 24px;
    }
}

.case-studies-banner {
    width: 90%;
    max-width: 1300px;
    margin: 32px auto 0;
}

.case-studies-banner img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════
   SERVICES SECTION
═══════════════════════════════════════════ */
.services-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 0 90px;
}

/* ── 3-column grid: 3 cards × 5 rows ── */
.services-container {
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* ── Top-left heading card — soft gray border, no blue ── */
.services-left-card {
    background: #ffffff;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px;
    padding: 30px 30px 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 28px;
}

.services-main-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    color: #333333;
    margin: 0;
}

/* CTA button */
.services-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #048ef7;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 11px 18px;
    border-radius: 3px;
    text-decoration: none;
    width: fit-content;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.services-cta-btn:hover {
    background: #0278d4;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(4, 142, 247, 0.35);
}

/* ── Every service card — exact Figma dims ── */
.service-card {
    background: #ffffff;
    border: 1.5px solid #048ef7;
    border-radius: 10px;
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
        background 0.38s ease,
        border-color 0.38s ease,
        box-shadow 0.38s ease,
        transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Shine sweep on hover — excluded on the left heading card */
.service-card:not(.services-left-card)::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
    transform: skewX(-15deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.service-card:not(.services-left-card):hover::after {
    left: 160%;
}

.service-card:not(.services-left-card):hover {
    background: #048ef7;
    border-color: #048ef7;
    box-shadow: 0 16px 42px rgba(4, 142, 247, 0.5);
    transform: translateY(-6px);
}

.service-card:not(.services-left-card):active:not(.explore-card) {
    transform: translateY(-2px) scale(0.97);
    box-shadow: 0 6px 22px rgba(4, 142, 247, 0.4);
    transition-duration: 0.1s;
}

.services-left-card {
    border: none;
}

/* ── Blue circle icon ── */
.service-icon {
    width: 44px;
    height: 44px;
    background: #048ef7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition:
        background 0.38s ease,
        transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.38s ease;
}

.service-card:not(.services-left-card):hover .service-icon {
    background: #0a0a0a;
    transform: scale(1.12) rotate(6deg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.service-card:not(.services-left-card):hover .service-icon--black {
    background: #0a0a0a;
}

/* Cards with a black icon hover to black instead of blue */
.service-card:not(.services-left-card):has(.service-icon--black):hover {
    background: #0a0a0a;
    border-color: #0a0a0a;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
}

.service-card:not(.services-left-card):has(.service-icon--black):hover
    .service-icon--black {
    background: #ffffff;
}

.service-card:not(.services-left-card):has(.service-icon--black):hover
    .service-icon--black::before {
    border-color: #0a0a0a;
}

.service-card:not(.services-left-card):has(.service-icon--black):hover
    .service-icon--black
    svg
    path {
    fill: #0a0a0a;
    stroke: #0a0a0a;
}

/* Inner circle */
.service-icon::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    transition: border-color 0.38s ease;
}

/* Keep icon above inner circle */
.service-icon svg,
.service-icon i,
.service-icon img {
    position: relative;
    z-index: 2;
    width: 14px;
    height: 14px;
}
.service-icon--black {
    background: #0a0a0a;
}

/* Service title */
.service-title {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    margin: 0;
    line-height: 1.3;
    transition: color 0.38s ease;
}

.service-card:not(.services-left-card):hover .service-title {
    color: #ffffff;
}

/* Service description */
.service-desc {
    font-size: 13px;
    font-weight: 400;
    color: #666666;
    line-height: 1.65;
    margin: 0;
    transition: color 0.38s ease;
}

.service-card:not(.services-left-card):hover .service-desc {
    color: rgba(255, 255, 255, 0.88);
}

/* ── EXPLORE MORE dark card ── */
.explore-card {
    background: #0a0a0a;
    border-color: #0a0a0a;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    cursor: pointer;
}

.explore-card:hover {
    background: #048ef7;
    border-color: #048ef7;
    box-shadow: 0 8px 28px rgba(4, 142, 247, 0.35);
    transform: translateY(-3px);
}

.explore-text {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.2;
}

.explore-arrow {
    font-size: 26px;
    color: #ffffff;
    font-weight: 700;
    display: inline-block;
    transition: transform 0.3s ease;
}

.explore-card:hover .explore-arrow {
    transform: translateX(7px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-main-title {
        font-size: 22px;
    }
}

@media (max-width: 520px) {
    .services-container {
        grid-template-columns: 1fr;
    }
    .services-main-title {
        font-size: 20px;
    }
    .services-section {
        padding: 50px 0 60px;
    }
}

/* ═══════════════════════════════════════════
   PRICING SECTION
═══════════════════════════════════════════ */
.pricing-section {
    width: 100%;
    background: #060b1a;
    padding: 80px 0 90px;
    border-radius: 48px 48px 0 0;
}

/* ── Header ── */
.pricing-header {
    text-align: center;
    margin-bottom: 52px;
}

.pricing-title {
    font-family: "Montserrat";
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 14px;
    line-height: 1.2;
}

.pricing-subtitle {
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── 3-column grid ── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    align-items: start;
}

/* ── Base card ── */
.pricing-card {
    position: relative;
    background: #1565c0;
    border-radius: 10px;
    overflow: visible;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.pricing-card:hover {
    background: #000000;
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(4, 142, 247, 0.35);
}

.pricing-grid:hover .pricing-card:not(:hover) {
    background: #1565c0;
}

/* ── Featured (middle) card — black background ── */
.pricing-card--featured {
    background: #000000;
    margin-top: -10px;
}

/* ── Best Seller badge ── */
.pricing-bestseller-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #048ef7;
    font-family: "Montserrat";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
}

/* ── Card inner padding ── */
.pricing-card-inner {
    padding: 32px 28px 28px;
}

.pricing-card--featured .pricing-card-inner {
    padding-top: 40px;
}

/* ── "limited time offer" label ── */
.pricing-offer-label {
    font-family: "Montserrat";
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
    margin: 0 0 6px;
    text-transform: lowercase;
}

/* ── Plan name ── */
.pricing-plan-name {
    font-family: "Montserrat";
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px;
    line-height: 1.2;
}

/* ── Price ── */
.pricing-price {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 24px;
    line-height: 1;
}

.pricing-currency {
    font-family: "Montserrat";
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin-top: 6px;
}

.pricing-amount {
    font-family: "Montserrat";
    font-size: 60px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

/* ── Feature list ── */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pricing-features li {
    font-family: "Montserrat";
    font-size: 13.5px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

/* ── Green tick ── */
.pricing-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #22c55e;
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    flex-shrink: 0;
}

/* ── Button row ── */
.pricing-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Get Started — white bg, dark text */
.pricing-btn-primary {
    display: block;
    width: 100%;
    padding: 13px 0;
    background: #ffffff;
    color: #1565c0;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 3px;
    letter-spacing: 0.3px;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.pricing-btn-primary:hover {
    background: #e0f0ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Featured card — "Get Started" dark version */
.pricing-btn-primary--dark {
    background: #ffffff;
    color: #000000;
}

.pricing-btn-primary--dark:hover {
    background: #f0f0f0;
}

/* Chat Now — blue outline default */
.pricing-btn-secondary {
    display: block;
    width: 100%;
    padding: 12px 0;
    background: #048ef7;
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 3px;
    letter-spacing: 0.3px;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.pricing-btn-secondary:hover {
    background: #0278d4;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(4, 142, 247, 0.4);
}

/* Featured card — "Chat Now" black version */
.pricing-btn-secondary--dark {
    background: #ffffff;
    color: #000000;
}

.pricing-btn-secondary--dark:hover {
    background: #0278d4;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .pricing-card--featured {
        margin-top: 16px;
    }

    .pricing-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .pricing-section {
        padding: 60px 16px 70px;
    }

    .pricing-header {
        margin-bottom: 36px;
    }

    .pricing-title {
        font-size: 22px;
    }

    .pricing-subtitle {
        font-size: 13px;
    }

    .pricing-card-inner {
        padding: 24px 20px 20px;
    }

    .pricing-card--featured .pricing-card-inner {
        padding-top: 32px;
    }

    .pricing-currency {
        font-size: 20px;
    }

    .pricing-amount {
        font-size: 44px;
    }

    .pricing-plan-name {
        font-size: 19px;
    }

    .pricing-features {
        gap: 9px;
        margin-bottom: 22px;
    }

    .pricing-features li {
        font-size: 13px;
    }

    .pricing-btn-primary,
    .pricing-btn-secondary {
        padding: 11px 0;
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════
   REVIEWS SECTION
═══════════════════════════════════════════ */
.reviews-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 0 90px;
}

.reviews-container {
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 38% 62%;
    align-items: center;
    gap: 48px;
}

/* ── LEFT COLUMN ── */
.reviews-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.reviews-banner-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative;
}

/* Blue rounded background shape behind the person */
.reviews-banner-wrap::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 88%;
    height: 82%;
    background: #048ef7;
    border-radius: 10px;
    z-index: 0;
}

.reviews-banner-img {
    width: 100%;
    max-width: 340px;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

.reviews-left-content {
    padding: 24px 0 0;
}

.reviews-heading {
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}

.reviews-subtext {
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 1.75;
    margin: 0;
    max-width: 360px;
}

/* ── RIGHT COLUMN — 2×2 grid ── */
.reviews-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ── Each review card ── */
.review-card {
    background: #ffffff;
    border: 2px solid #e4e4e4;
    border-radius: 6px;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(4, 142, 247, 0.14);
}

/* ── Card top row: avatar + name ── */
.review-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #f0f0f0;
    background: #e0e0e0;
}

.review-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-name {
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    line-height: 1.2;
}

.review-role {
    font-family: "Montserrat";
    font-size: 11.5px;
    font-weight: 500;
    color: #888888;
    line-height: 1.2;
}

/* ── Review body text ── */
.review-text {
    font-family: "Montserrat";
    font-size: 12.5px;
    font-weight: 400;
    color: #444444;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* ── Trustpilot row ── */
.review-trustpilot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.trustpilot-logo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 700;
    color: #111111;
    letter-spacing: 0.2px;
}

/* ── Star row ── */
.review-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.review-stars .star {
    font-size: 16px;
    color: #d0d0d0;
    line-height: 1;
}

.review-stars .star.filled {
    color: #00b67a;
}
.banner-slide-up {
    opacity: 0;
    transform: translateY(70px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.banner-slide-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .reviews-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .reviews-left {
        flex-direction: row;
        align-items: flex-end;
        gap: 28px;
    }

    .reviews-banner-wrap {
        width: 200px;
        flex-shrink: 0;
    }

    .reviews-banner-wrap::before {
        width: 85%;
        height: 80%;
    }

    .reviews-banner-img {
        max-width: 200px;
    }

    .reviews-left-content {
        padding: 0;
    }

    .reviews-heading {
        font-size: 26px;
    }
}

@media (max-width: 640px) {
    .reviews-right {
        grid-template-columns: 1fr;
    }

    .reviews-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .reviews-banner-wrap {
        width: 100%;
    }

    .reviews-banner-img {
        max-width: 240px;
    }

    .reviews-heading {
        font-size: 22px;
    }

    .reviews-subtext {
        font-size: 13px;
    }

    .review-name {
        font-size: 13px;
    }

    .review-role {
        font-size: 10.5px;
    }

    .review-text {
        font-size: 12px;
        line-height: 1.65;
    }

    .review-avatar {
        width: 40px;
        height: 40px;
    }

    .review-avatar-initials {
        width: 40px !important;
        height: 40px !important;
        font-size: 13px !important;
    }

    .review-card {
        padding: 16px 16px 14px;
        gap: 10px;
    }

    .trustpilot-logo {
        font-size: 11px;
    }

    .review-stars .star {
        font-size: 14px;
    }

    .reviews-section {
        padding: 50px 0 60px;
    }
}

/* ═══════════════════════════════════════════
   FAQ — BANNER STRIP
═══════════════════════════════════════════ */

/* Outer wrapper: side padding so rounded corners are visible;
   padding-top reserves space for the girl who overflows above the box */
.faq-outer {
    background: #f5f7fb;
}

/* The blue rounded box */
.faq-banner {
    max-width: 1200px;
    margin: 0 auto;
    background: #048ef7;
    border-radius: 10px; /* ← rounded edges */
    position: relative;
    overflow: visible;
}

/* Inner text area — no image column, image is absolute */
.faq-banner-inner {
    padding: 40px 52px;
    max-width: 620px; /* only text lives here */
}

/* LEFT — text block */
.faq-banner-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-banner-title {
    font-family: "Montserrat";
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

.faq-banner-desc {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 460px;
    margin: 0;
}

.faq-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 44px;
    background: #001c4e;
    color: #048ef7;
    text-decoration: none;
    font-family: "Montserrat";
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 3px;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.faq-banner-btn:hover {
    background: #000000;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Girl image — absolute, anchored to the bottom-right of the blue box.
   She is taller than the box so her upper body overflows above it. */
.faq-banner-image {
    position: absolute;
    right: -30px;
    bottom: -65px; /* feet sit at the bottom edge of the blue box */
    width: 460px;
    display: flex;
    align-items: flex-end;
    /* height: 2px; */
    justify-content: flex-end;
    pointer-events: none;
}

.faq-banner-image img {
    width: 460px;
    height: auto;
    max-height: 900px; /* tall enough to overflow well above the box */
    display: block;
    object-fit: contain;
    object-position: bottom right;
}

/* ── Responsive Banner ── */
@media (max-width: 1100px) {
    .faq-outer {
        padding: 200px 32px 0;
    }

    .faq-banner-image {
        width: 340px;
        right: 3px;
    }

    .faq-banner-image img {
        width: 340px;
        max-height: 420px;
    }

    .faq-banner-title {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .faq-outer {
        padding: 220px 20px 0;
    }

    .faq-banner {
        min-height: 200px;
        border-radius: 10px;
    }

    .faq-banner-inner {
        padding: 32px 28px;
        max-width: 100%;
        padding-right: 210px;
    }

    .faq-banner-image {
        width: 240px;
        right: -10px;
        bottom: -40px;
    }

    .faq-banner-image img {
        width: 240px;
        max-height: 420px;
    }

    .faq-banner-title {
        font-size: 22px;
    }
}

@media (max-width: 500px) {
    .faq-outer {
        padding: 0 14px 0;
        margin-top: 0;
    }

    .faq-banner {
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .faq-banner-inner {
        padding: 28px 22px 20px;
        max-width: 100%;
        text-align: center;
    }

    .faq-banner-content {
        align-items: center;
    }

    .faq-banner-title {
        font-size: 20px;
    }

    .faq-banner-desc {
        font-size: 12px;
        line-height: 1.7;
    }

    .faq-banner-btn {
        white-space: nowrap;
        width: auto;
        height: 42px;
        padding: 0 24px;
        font-size: 10px;
    }
}

/* -- FAQ Banner Image -- 500px -- */
@media (max-width: 500px) {
    .faq-banner-image {
        position: relative;
        width: 100%;
        right: auto;
        bottom: auto;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        pointer-events: none;
    }

    .faq-banner-image img {
        width: 65%;
        max-width: 260px;
        height: auto;
        object-fit: contain;
        object-position: bottom center;
    }
}

/* ═══════════════════════════════════════════
   FAQ — ACCORDION SECTION
═══════════════════════════════════════════ */
.faq-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 20px 90px;
}

.faq-header {
    text-align: center;
    margin-bottom: 48px;
}

.faq-title {
    font-family: "Montserrat";
    font-size: 36px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}

.faq-subtitle {
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 400;
    color: #666666;
    margin: 0;
}

/* ── List ── */
.faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each row */
.faq-item {
    border-bottom: 1px solid #e5e7eb;
}

/* Question button */
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: color 0.2s ease;
}

.faq-question span:first-child {
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.faq-item--open .faq-question span:first-child {
    color: #048ef7;
}

/* + / × icon circle */
.faq-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #048ef7;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
    pointer-events: none;
}

.faq-item--open .faq-icon {
    background: #001c4e;
    transform: rotate(45deg);
}

/* Answer panel — slides open */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer p {
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 400;
    color: #555555;
    line-height: 1.75;
    padding: 0 4px 20px;
    margin: 0;
}

/* ── Responsive Accordion ── */
@media (max-width: 600px) {
    .faq-title {
        font-size: 26px;
    }

    .faq-question span:first-child {
        font-size: 14px;
    }

    .faq-answer p {
        font-size: 13px;
    }
}

/* blue wave and icon code  */

.website-hero-strip {
    width: 100%;
    height: 300px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    font-family: "Montserrat";
}

@media (max-width: 600px) {
    .website-hero-strip {
        height: auto;
        min-height: 280px;
        padding-bottom: 24px;
    }

    .hero-content h1 {
        font-size: 22px;
        padding: 0 16px;
        top: 16px;
    }

    .hero-content p {
        padding: 0 16px;
        font-size: 12px;
    }
}

/* Content */
.hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding-top: 22px;
    width: 100%;
}

.hero-icon-box {
    width: 124px;
    height: 124px;
    margin: 0 auto 8px;
    position: relative;
    margin-top: -35px;
}
@keyframes spin360 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.hero-icon {
    width: 124px;
    height: 124px;
    position: relative;
    top: auto;
    left: auto;
    display: block;
    margin: 0 auto;
    opacity: 1;
    animation: spin360 4s linear infinite;
    object-fit: contain;
}

/* Animation below icon */
.icon-wave-animation {
    width: 44px;
    height: 8px;
    margin: -3px auto 2px;
    position: relative;
    overflow: hidden;
}

.icon-wave-animation span {
    position: absolute;
    bottom: 0;
    width: 18px;
    height: 6px;
    border: 2px solid #048ef7;
    border-color: transparent transparent #048ef7 transparent;
    border-radius: 50%;
    animation: smallWave 1.8s ease-in-out infinite;
}

.icon-wave-animation span:nth-child(1) {
    left: 0;
    animation-delay: 0s;
}

.icon-wave-animation span:nth-child(2) {
    left: 13px;
    animation-delay: 0.25s;
}

.icon-wave-animation span:nth-child(3) {
    left: 26px;
    animation-delay: 0.5s;
}

@keyframes smallWave {
    0%,
    100% {
        transform: translateY(2px);
        opacity: 0.35;
    }

    50% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

@keyframes iconPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

/* Text */
.hero-content h1 {
    /* margin-top: -35px; */
    font-size: 30px;
    font-weight: 400;
    color: #333333;
    line-height: 1.1;
}

.hero-content h1 span {
    color: #048ef7;
    font-weight: 500;
}

.hero-content p {
    margin: 3px 0 12px;
    font-size: 13px;
    color: #666666;
    line-height: 1.2;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 145px;
    height: 26px;
    background: #111111;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.4px;
    border-radius: 3px;
    /* margin-top: -35px; */
}

.hero-btn:hover {
    background: #048ef7;
}

/* Bottom sea wave */
.bottom-wave {
    position: absolute;
    left: 0;
    bottom: -78px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.wave-gif {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* footer 1 */
.site-footer {
    width: 100%;
    background: #000;
    color: #fff;
    font-family: "Montserrat";
}

/* Top Row */
.footer-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #2b2b2b;
    /* width: 1193px; */
    max-width: 95%;
    margin: 0 auto;
    padding: 13px 0 11px;
    gap: 30px;
}

.footer-top-item {
    position: relative;
    display: flex;
    align-items: start;
    left: -30px;
    gap: 10px;
}
.footer-top-item::before {
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 24px;
    opacity: 0.95;
}

.footer-top-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.9;
}

.footer-top-item h6 {
    margin: 0;
    font-size: 14.5px;
    line-height: 12px;
    font-weight: 700;
    color: #ffffff;
}

.footer-top-item p {
    margin: 1px 0 0;
    font-size: 10px;
    line-height: 15px;
    color: #cfcfcf;
}

/* Main Footer */
.footer-main {
    display: grid;
    grid-template-columns: 180px 200px 1fr;
    gap: 40px;
    width: 90%;
    max-width: 95%;
    margin: 0 auto;
    padding: 24px 0 28px;
}

.footer-col h5 {
    margin: 0 0 8px;
    margin-right: 5px;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
}

.footer-col ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 6px;
}

.footer-col ul li a {
    text-decoration: none;
    font-size: 12px;
    color: #c9c9c9;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    color: #ffffff;
}

.region-col p {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 18px;
    color: #c9c9c9;
}

.footer-contact-link {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-contact-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.flag {
    font-size: 11px;
    margin-right: 4px;
}

/* Bottom Footer */
.footer-bottom {
    /* border-top: 1px solid #2b2b2b; */
    width: 90%;
    max-width: 95%;
    margin: 0 auto;
    padding: 10px 0 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
}
.half-line {
    width: 90%;
    margin: 20px auto;
    border: none;
    border-top: 1px solid #ffffff;
}

.footer-copy {
    font-size: 10px;
    color: #c9c9c9;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links a {
    font-size: 10px;
    color: #ffffff;
    text-decoration: underline;
}

.footer-payments img {
    height: 18px;
    width: auto;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        padding: 15px 0;
        gap: 18px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        padding: 20px 0;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        padding: 12px 0;
        gap: 8px;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}
.region-col p {
    position: relative;
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 18px;
    color: #c9c9c9;
}

/* SVG Flag */
.region-col .flag {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("/images/flag.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .footer-top {
        grid-template-columns: 1fr;
        /* left: -20px; */
        /* padding: 14px 0; */
    }

    .footer-main {
        grid-template-columns: 1fr;
        padding: 20px 0;
    }
}

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

/* ── Journey Marquee Strip ── */
.journey-strip {
    width: 100%;
    background: #048ef7;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 28px 0;
}

.journey-track {
    display: flex;
    align-items: center;
    gap: 48px;
    white-space: nowrap;
    animation: journeySlide 18s linear infinite;
}

.journey-item {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 50px;
    line-height: 21.29px;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-transform: uppercase;
    flex-shrink: 0;
}

.journey-dot {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

@keyframes journeySlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ─── Dual-row variant (service-client page) ─── */
.journey-strip--dual {
    flex-direction: column;
    padding: 24px 0;
    gap: 12px;
}

/* Row 1: left (default) – uses existing journeySlide */
.journey-track--left {
    animation: journeySlide 20s linear infinite;
}

/* Row 2: right – mirror direction */
.journey-track--right {
    animation: journeySlideRight 20s linear infinite;
}

@keyframes journeySlideRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* ════════════════════════════════════════════
   SERVICE-CLIENT STATS STRIP
════════════════════════════════════════════ */
.sc-stats-section {
    width: 100%;
    background: #ffffff;
    padding: 32px 24px 36px;
}

.sc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
}

/* ── Simple clean stat box ── */
.sc-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px 12px;
    border: 1px solid #000;
    border-radius: 10px;
    background: #ffffff;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.sc-stat-box:hover {
    border-color: #048ef7;
    box-shadow: 0 4px 16px rgba(4, 142, 247, 0.12);
}

.sc-stat-number {
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 800;
    color: #048ef7;
    line-height: 1;
    letter-spacing: -1px;
    white-space: nowrap;
}

.sc-stat-plus {
    color: #000000;
}

.sc-stat-label {
    font-family: "Montserrat";
    font-size: 11.5px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
}

/* Count-up pop animation */
.sc-stats-section .stat-count[data-animated="1"] {
    display: inline-block;
    animation: statPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (max-width: 768px) {
    .sc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 480px;
    }
}
@media (max-width: 480px) {
    .sc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        max-width: 100%;
    }
    .sc-stats-section {
        padding: 24px 16px 28px;
    }
    .sc-stat-number {
        font-size: 26px;
    }
    .sc-stat-label {
        font-size: 10.5px;
        white-space: normal;
    }
}

/* ════════════════════════════════════════════
   WHY PROFESSIONAL WEB SOLUTIONS — 3 CARDS
════════════════════════════════════════════ */
.why-section {
    width: 100%;
    background: #ffffff;
    padding: 10px 0 60px;
}

.why-container {
    width: 1193px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ── Section heading ── */
.why-title {
    font-family: "Montserrat";
    font-size: 26px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin: 0;
}

/* ── 3-column card grid ── */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* -- Base card -- */
.why-card .why-badge,
.why-card .why-card-title,
.why-card .why-card-desc {
    transition:
        color 0.35s ease,
        background 0.35s ease;
}

.why-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 22px 26px;
    border: 3px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}

.why-card:hover {
    background: #048ef7;
    border-color: #048ef7;
    box-shadow: 0 12px 40px rgba(4, 142, 247, 0.35);
    transform: translateY(-5px);
}

.why-card:hover .why-badge {
    background: #ffffff;
    color: #048ef7;
}

.why-card:hover .why-card-title {
    color: #ffffff;
}

.why-card:hover .why-card-desc {
    color: rgba(255, 255, 255, 0.82);
}

/* ── Number badge ── */
.why-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    align-self: flex-start;
}

.why-badge--dark {
    background: #111111;
    color: #ffffff;
}

.why-badge--blue {
    background: #048ef7;
    color: #ffffff;
}

/* ── Card title ── */
.why-card-title {
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    line-height: 1.35;
    margin: 0;
}

/* ── Card description ── */
.why-card-desc {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
    .why-title {
        font-size: 22px;
    }
}
@media (max-width: 480px) {
    .why-section {
        padding: 10px 0 48px;
    }
    .why-title {
        font-size: 20px;
    }
    .why-card {
        padding: 20px 18px 22px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .journey-item {
        font-size: 32px;
    }
    .journey-track {
        gap: 32px;
        animation-duration: 14s;
    }
}

@media (max-width: 480px) {
    .journey-item {
        font-size: 22px;
    }
    .journey-strip {
        padding: 20px 0;
    }
}

/* ══════════════════════════════════════
   MISSION & VISION SECTION
   ══════════════════════════════════════ */

.mv-section {
    background: #ffffff;
    padding: 70px 5% 80px;
}

.mv-row {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    padding-top: 40px;
}

.mv-card {
    flex: 1;
    position: relative;
    border-radius: 10px;
    padding: 52px 36px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition:
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
    cursor: pointer;
}

/* Card borders always visible */
.mv-card--mission {
    border: 2px solid #048ef7;
    border-radius: 10px;
}

.mv-card--vision {
    border: 2px solid #111111;
    border-radius: 10px;
}

/* Hover effect */
.mv-card--mission:hover {
    background: #048ef7;
    box-shadow: 0 10px 30px rgba(4, 142, 247, 0.3);
    transform: translateY(-4px);
}

.mv-card--vision:hover {
    background: #111111;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(-4px);
}

/* Mission hover — text turns white */
.mv-card--mission:hover .mv-title,
.mv-card--mission:hover .mv-text {
    color: #ffffff;
}

/* Mission hover — icon circle keeps blue border, glow shadow */
.mv-card--mission:hover .mv-icon-wrap--mission {
    border-color: #048ef7;
    box-shadow: 0 6px 22px rgba(4, 142, 247, 0.5);
}

/* Vision hover — text turns white */
.mv-card--vision:hover .mv-title,
.mv-card--vision:hover .mv-text {
    color: #ffffff;
}

/* Vision hover — icon circle keeps dark border, glow shadow */
.mv-card--vision:hover .mv-icon-wrap--vision {
    border-color: #111111;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.mv-icon-wrap {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.mv-icon-wrap--mission {
    border: 2px solid #048ef7;
}

.mv-icon-wrap--vision {
    border: 2px solid #111111;
}

.mv-eye-svg,
.mv-target-svg {
    width: 38px;
    height: 38px;
    display: block;
}

/* Mission eye animation only on hover */
.mv-card--mission:hover .mv-eye-blink {
    animation: eyeBlink 1.8s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.mv-card--mission:hover .mv-eye-gaze {
    animation: eyeMove 1.5s ease-in-out infinite;
}

@keyframes eyeBlink {
    0%,
    88%,
    100% {
        transform: scaleY(1);
    }
    92%,
    96% {
        transform: scaleY(0.12);
    }
}

@keyframes eyeMove {
    0%,
    100% {
        transform: translateX(-3px);
    }
    50% {
        transform: translateX(3px);
    }
}

/* Vision target animation only on hover */
.mv-card--vision:hover .mv-ring-outer {
    animation: targetPulse 1.4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.mv-card--vision:hover .mv-ring-dot {
    animation: dotPulse 1.4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.mv-card--vision:hover .mv-arrow-orbit {
    animation: arrowOrbit 2.4s linear infinite;
    transform-origin: 24px 24px;
    transform-box: view-box;
}

@keyframes targetPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.65;
    }
}

@keyframes dotPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.35);
    }
}

@keyframes arrowOrbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.mv-title {
    font-family: "Montserrat";
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
    transition: color 0.35s ease;
}

.mv-text {
    font-family: "Montserrat";
    font-size: 13.5px;
    font-weight: 400;
    color: #555;
    line-height: 1.78;
    margin: 0;
    transition: color 0.35s ease;
}
.mv-eye-img {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
}

/* ══════════════════════════════════════
   SVG ANIMATIONS — paused by default,
   run only while the card is hovered
   ══════════════════════════════════════ */

/* Eye: gaze (pupil left ↔ right) */
.mv-eye-gaze {
    transform-box: fill-box;
    transform-origin: center;
    animation: mvEyeGaze 4.5s ease-in-out infinite;
    animation-play-state: paused;
}
.mv-card:hover .mv-eye-gaze {
    animation-play-state: running;
}

@keyframes mvEyeGaze {
    0% {
        transform: translateX(0px);
    }
    20% {
        transform: translateX(4px);
    }
    55% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(3px);
    }
    100% {
        transform: translateX(0px);
    }
}

/* Eye: blink (full eye scaleY) */
.mv-eye-blink {
    transform-box: fill-box;
    transform-origin: center;
    animation: mvEyeBlink 5.5s ease-in-out infinite;
    animation-play-state: paused;
}
.mv-card:hover .mv-eye-blink {
    animation-play-state: running;
}

@keyframes mvEyeBlink {
    0%,
    78%,
    100% {
        transform: scaleY(1);
    }
    84% {
        transform: scaleY(0.06);
    }
    88% {
        transform: scaleY(1);
    }
    93% {
        transform: scaleY(0.06);
    }
    97% {
        transform: scaleY(1);
    }
}

/* Target: outer ring pulse */
.mv-ring-outer {
    transform-box: fill-box;
    transform-origin: center;
    animation: mvRingPulse 2.6s ease-in-out infinite;
    animation-play-state: paused;
}
.mv-card:hover .mv-ring-outer {
    animation-play-state: running;
}

@keyframes mvRingPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.12);
        opacity: 0.45;
    }
}

/* Target: centre dot counter-pulse */
.mv-ring-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: mvDotPulse 2.6s ease-in-out infinite;
    animation-play-state: paused;
}
.mv-card:hover .mv-ring-dot {
    animation-play-state: running;
}

@keyframes mvDotPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.7);
        opacity: 0.55;
    }
}

/* Target: arrow orbits around SVG centre (24 24) */
.mv-arrow-orbit {
    transform-origin: 24px 24px; /* SVG viewport coords */
    animation: mvArrowOrbit 7s linear infinite;
    animation-play-state: paused;
}
.mv-card:hover .mv-arrow-orbit {
    animation-play-state: running;
}

@keyframes mvArrowOrbit {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ── Responsive ── */
@media (max-width: 680px) {
    .mv-row {
        flex-direction: column;
        gap: 56px;
    }

    .mv-card {
        padding: 48px 28px 34px;
    }

    .mv-title {
        font-size: 18px;
    }
    .mv-text {
        font-size: 13px;
    }
}

/* ── Our Journey Steps ── */
.our-journey {
    background: #ffffff;
    padding: 90px 5% 100px;
}

.our-journey-inner {
    max-width: 860px;
    margin: 0 auto;
}

.our-journey-title {
    text-align: center;
    font-family: "Montserrat";
    font-size: 38px;
    font-weight: 700;
    color: #000;
    margin: 0 0 64px;

    letter-spacing: -0.02em;
}

/* ── Timeline grid ── */
.oj-timeline {
    display: flex;
    flex-direction: column;
}

.oj-row {
    display: grid;
    grid-template-columns: 1fr 110px 1fr;
    align-items: stretch;
    min-height: 108px;
    column-gap: 10px;
    transition: min-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.oj-row.active {
    min-height: 192px;
    column-gap: 40px;
}

/* ── Centre column: vertical line + button ── */
.oj-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Continuous vertical line through every centre cell */
.oj-center::before {
    content: “”;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: #d0d0d0;
    z-index: 0;
}

/* Hide the line above the first button and below the last button */
.oj-row:first-child .oj-center::before {
    top: 50%;
}
.oj-row:last-child .oj-center::before {
    bottom: 50%;
}

/* ── Number button ── */
@keyframes oj-number-spin {
    0% {
        transform: scale(1) rotate(0deg);
    }
    55% {
        transform: scale(1.65) rotate(280deg);
    }
    100% {
        transform: scale(1.55) rotate(360deg);
    }
}

.oj-btn {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2.5px solid #000000;
    background: #ffffff;
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 800;
    color: #048ef7;
    cursor: pointer;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.oj-btn:not(.active):hover {
    border-color: #048ef7;
    color: #048ef7;
    transform: scale(1.3);
    box-shadow:
        0 0 0 10px rgba(4, 142, 247, 0.12),
        0 0 0 20px rgba(4, 142, 247, 0.06),
        0 8px 28px rgba(4, 142, 247, 0.35);
    z-index: 2;
}

/* Active = spin + grow + filled blue */
.oj-btn.active {
    background: #048ef7;
    border-color: #048ef7;
    color: #ffffff;
    animation: oj-number-spin 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    box-shadow:
        0 0 0 10px rgba(4, 142, 247, 0.12),
        0 0 0 20px rgba(4, 142, 247, 0.06),
        0 8px 28px rgba(4, 142, 247, 0.35);
    z-index: 2;
}

/* ── Text card ── */
.oj-card {
    border: 1.5px solid #048ef7;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 10px 0;
    background: #fafafa;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Left-side cards: right-aligned text */
.oj-row--left .oj-card {
    text-align: right;
}

/* Right-side cards: left-aligned text */
.oj-row--right .oj-card {
    text-align: left;
}

.oj-card-title {
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px;
    transition: color 0.25s ease;
}

.oj-card-text {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 400;
    color: #555;
    margin: 0;
    line-height: 1.6;
    transition: color 0.25s ease;
}

/* Active card = black background, white text, glowing shadow */
.oj-card.active {
    background: #000000;
    border-color: #000000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

.oj-card.active .oj-card-title,
.oj-card.active .oj-card-text {
    color: #ffffff;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .our-journey-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    /* Hide the empty spacer column */
    .oj-empty {
        display: none;
    }

    /* Hide the connecting line — buttons alternate sides on mobile */
    .oj-center::before {
        display: none;
    }

    /* Shared row reset */
    .oj-row {
        min-height: auto;
        align-items: center;
        gap: 14px;
    }

    .oj-row.active {
        min-height: auto;
    }

    /* Left rows: card (left col) | button (right col)
       HTML order is .oj-card → .oj-center → .oj-empty (hidden)
       so natural grid order already puts card left, button right */
    .oj-row--left {
        grid-template-columns: 1fr 52px;
    }

    /* Right rows: button (left col) | card (right col)
       HTML order is .oj-empty (hidden) → .oj-center → .oj-card
       so natural grid order puts button left, card right */
    .oj-row--right {
        grid-template-columns: 52px 1fr;
    }

    .oj-btn {
        width: 52px;
        height: 52px;
        font-size: 14px;
    }

    .oj-card {
        padding: 14px 16px;
        margin: 8px 0;
    }

    /* Desktop font sizes preserved */
    .oj-card-title {
        font-size: 15px;
    }
    .oj-card-text {
        font-size: 13px;
    }
}

/* About Hero */
.about-hero {
    background: #000000;
    min-height: 420px;
    display: flex;
    align-items: center;
    border-radius: 48px 48px 0 0;
    justify-content: center;
    padding: 80px 6%;
    text-align: center;
}

.about-hero-content {
    max-width: 760px;
    margin: 0 auto;
}

.about-hero-eyebrow {
    color: #048ef7;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.about-hero-title {
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 49px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.04em;
    text-align: center;
    margin-bottom: 22px;
}

.about-hero-highlight {
    font-family: "Montserrat";
    font-size: 49px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.04em;
    text-align: center;
    background: linear-gradient(90deg, #4333ff 0%, #048ef7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 0.8em;
    background-color: #4333ff;
    margin-left: 2px;
    vertical-align: middle;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from,
    to {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.about-hero-subtitle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

/* About Mission */
.about-mission {
    background: #ffffff;
    padding: 80px 6%;
}

.about-mission-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-section-label {
    color: #048ef7;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.about-section-title {
    color: #001c4e;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 22px;
}

.about-section-body {
    color: #555555;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    margin-bottom: 16px;
}

/* Stats Grid */
.about-mission-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.about-stat-card {
    background: #f5f7fb;
    border-radius: 10px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1.5px solid #e8edf5;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.about-stat-card:hover {
    box-shadow: 0 8px 28px rgba(4, 142, 247, 0.12);
    transform: translateY(-4px);
}

.about-stat-number {
    color: #048ef7;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.about-stat-label {
    color: #001c4e;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Values Section */
.about-values {
    background: #f5f7fb;
    padding: 80px 6%;
}

.about-values-container {
    max-width: 1200px;
    margin: 0 auto;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.about-value-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 36px 28px;
    text-align: center;
    border: 1.5px solid #e8edf5;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.about-value-card:hover {
    box-shadow: 0 8px 28px rgba(4, 142, 247, 0.12);
    transform: translateY(-4px);
}

.about-value-icon {
    color: #048ef7;
    font-size: 28px;
    margin-bottom: 16px;
}

.about-value-card h3 {
    color: #001c4e;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
}

.about-value-card p {
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

/* About CTA */
.about-cta {
    background: linear-gradient(90deg, #048ef7 0%, #001c4e 100%);
    padding: 80px 6%;
    text-align: center;
}

.about-cta-content {
    max-width: 680px;
    margin: 0 auto;
}

.about-cta-title {
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.about-cta-subtitle {
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 36px;
}

.about-cta-btn {
    display: inline-block;
    background: #ffffff;
    color: #048ef7;
    font-size: 14px;
    font-weight: 800;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.about-cta-btn:hover {
    background: #001c4e;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* About Responsive */
@media (max-width: 1024px) {
    .about-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-hero-title {
        font-size: 38px;
        letter-spacing: -0.03em;
    }

    .about-mission-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-section-title {
        font-size: 28px;
    }

    .about-stat-number {
        font-size: 36px;
    }

    .about-cta-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .about-hero {
        padding: 60px 5%;
        min-height: 320px;
    }

    .about-hero-title {
        font-size: 30px;
        letter-spacing: -0.02em;
    }

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

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

/* =============================================
   ABOUT PAGE — HEADER
   ============================================= */

.about-site-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 999;
}

.about-header-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* Logo Left */
.about-header-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.about-header-logo img {
    width: 140px;
    height: 53px;
    display: block;
    left: 14px;
    position: relative;
}

/* Center Menu */
.about-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.about-header-nav a {
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 11px 18px;
    transition: 0.3s ease;
}

/* Hover Effect */
.about-header-nav a:hover {
    background: #048ef7;
    color: #ffffff;
}

/* Active Page */
.about-header-nav a.active {
    background: #048ef7;
    color: #ffffff;
}

/* About Header Desktop Dropdown */
.about-nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.about-nav-caret {
    font-size: 9px;
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.2s ease;
    line-height: 1;
}

.about-nav-dropdown:hover .about-nav-caret {
    transform: rotate(180deg);
}

/* About Header Desktop Dropdown – animated */
.about-nav-dropdown-menu {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: 6px 0;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.about-nav-dropdown:hover .about-nav-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.about-nav-dropdown-menu a {
    display: block;
    padding: 9px 18px;
    color: #000000;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s, color 0.15s;
}

.about-nav-dropdown:hover .about-nav-dropdown-menu a {
    opacity: 1;
    transform: translateX(0);
}

.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(1)  { transition-delay: 0.03s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(2)  { transition-delay: 0.06s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(3)  { transition-delay: 0.09s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(4)  { transition-delay: 0.12s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(5)  { transition-delay: 0.15s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(6)  { transition-delay: 0.18s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(7)  { transition-delay: 0.21s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(8)  { transition-delay: 0.24s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(9)  { transition-delay: 0.27s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(10) { transition-delay: 0.30s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(11) { transition-delay: 0.33s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(12) { transition-delay: 0.36s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(13) { transition-delay: 0.39s; }
.about-nav-dropdown:hover .about-nav-dropdown-menu a:nth-child(14) { transition-delay: 0.42s; }

.about-nav-dropdown-menu a:hover {
    background: #048ef7;
    color: #ffffff;
}

/* About Mobile Services Dropdown */
.about-mobile-nav-dropdown {
    width: 100%;
}

.about-mobile-services-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.about-mobile-services-link {
    flex: 1;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000000;
    text-decoration: none;
    display: block;
    transition: background 0.25s ease, color 0.25s ease;
}

.about-mobile-services-link:hover,
.about-mobile-services-link.active {
    background: #048ef7;
    color: #ffffff;
}

.about-mobile-caret-btn {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(0,0,0,0.12);
    color: #000000;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: inherit;
    transition: background 0.25s ease, color 0.25s ease;
}

.about-mobile-caret-btn:hover,
.about-mobile-caret-btn.open {
    background: #048ef7;
    color: #ffffff;
}

.about-mobile-nav-caret {
    font-size: 10px;
    display: block;
    transition: transform 0.25s ease;
}

.about-mobile-caret-btn.open .about-mobile-nav-caret {
    transform: rotate(180deg);
}

.about-mobile-nav-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding-left: 12px;
}

.about-mobile-nav-dropdown-menu.open {
    max-height: 600px;
}

.about-mobile-nav-dropdown-menu a {
    display: block;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    transition: background 0.25s ease, color 0.25s ease;
}

.about-mobile-nav-dropdown-menu a:hover {
    background: #048ef7;
    color: #ffffff;
}

/* Right Button */
.about-header-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.about-get-touch-btn {
    background: #048ef7;
    color: #ffffff;
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: visible;
    transition: 0.3s ease;
    display: inline-block;
}

/* Get in Touch — always blinking glow */
.about-get-touch-btn::before {
    content: "";
    position: absolute;
    inset: -6px;
    background: #048ef7;
    opacity: 0.25;
    z-index: -1;
    border-radius: 6px;
    animation: popupBlink 1.2s ease-in-out infinite;
}

.about-get-touch-btn:hover {
    background: #048ef7;
    color: #ffffff;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 28px rgba(4, 142, 247, 0.35);
}

/* Get in Touch Active */
.about-get-touch-btn.active-btn {
    background: #048ef7;
    color: #ffffff;
    border-color: #048ef7;
}

/* Popup Blink Animation */
@keyframes popupBlink {
    0% {
        opacity: 0.25;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.12);
    }

    100% {
        opacity: 0.25;
        transform: scale(0.95);
    }
}

/* ── About Hamburger button — hidden on desktop ── */
.about-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    z-index: 1001;
    flex-shrink: 0;
}

.about-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #000000;
    border-radius: 2px;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
    transform-origin: center;
}

.about-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.about-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.about-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── About Mobile dropdown menu ── */
.about-mobile-menu {
    display: none;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.about-mobile-menu.open {
    max-height: 1000px;
}

.about-mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 24px 20px;
    gap: 2px;
}

.about-mobile-nav a {
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.about-mobile-nav a:hover,
.about-mobile-nav a.active {
    background: #048ef7;
    color: #ffffff;
}

.about-mobile-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 13px 26px;
    background: #048ef7;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    text-align: center;
}

.about-mobile-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(4, 142, 247, 0.35);
}

/* ── Responsive: show hamburger, hide desktop nav ── */
@media (max-width: 1024px) {
    .about-header-container {
        grid-template-columns: 1fr auto;
        padding: 14px 20px;
    }

    .about-header-nav,
    .about-header-action {
        display: none;
    }

    .about-hamburger {
        display: flex;
    }

    .about-mobile-menu {
        display: block;
    }
}

@media (max-width: 480px) {
    .about-header-logo img {
        width: 120px;
        height: auto;
    }
}

/* ═══════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════ */

.contact-page {
    width: 100%;
    background: #0b0b12;
    padding: 70px 5% 100px;
    min-height: calc(100vh - 130px);
}

/* ── Centered heading block — sits above the grid ── */
.contact-heading-wrap {
    text-align: center;
    max-width: 1160px;
    margin: 0 auto 52px;
}

.contact-heading {
    font-family: "Montserrat";
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 0 0 14px;
}

.contact-heading-blue {
    color: #048ef7;
}

.contact-subtext {
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0;
}

/* ── Two-column layout — below heading ── */
.contact-page-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 48px;
    align-items: start;
}

/* ════════════════════════════════
   LEFT — FORM SIDE
════════════════════════════════ */
.contact-form-side {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Form grid */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.contact-form-row:has(.contact-textarea) {
    grid-template-columns: 1fr;
}

/* Inputs */
.contact-input,
.contact-select,
.contact-textarea {
    width: 100%;
    background: #161623;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 13.5px;
    font-weight: 500;
    padding: 14px 18px;
    outline: none;
    border-radius: 0;
    transition:
        border-color 0.25s ease,
        background 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
}

.contact-input::placeholder,
.contact-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.contact-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.contact-select option {
    background: #161623;
    color: #ffffff;
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
    border-color: #048ef7;
    background: #1c1c2e;
}

.contact-textarea {
    resize: vertical;
    min-height: 130px;
}

/* Checkbox row */
.contact-checkbox-row {
    margin-top: 4px;
}

.contact-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.contact-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #048ef7;
    cursor: pointer;
}

.contact-checkbox-text {
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
}

.contact-link {
    color: #048ef7;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.contact-link:hover {
    color: #ffffff;
}

/* Submit button with blink animation */
.contact-submit-wrap {
    margin-top: 8px;
}

.contact-send-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ffffff;
    border: none;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0;
    cursor: pointer;
    gap: 8px;
    transition: color 0.25s ease;
}

/* Underline blink effect */
.contact-send-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: #048ef7;
    animation: sendBlink 1.4s ease-in-out infinite;
}

@keyframes sendBlink {
    0%,
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.25;
        transform: scaleX(0.6);
    }
}

.contact-send-btn:hover {
    color: #048ef7;
}

/* ════════════════════════════════
   RIGHT — INFO CARD
════════════════════════════════ */
.contact-info-side {
    position: sticky;
    top: 110px;
}

.contact-info-card {
    background: #048ef7;
    border: 3px solid #ffffff;
    border-radius: 10px;
    padding: 40px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Card heading */
.contact-info-title {
    font-family: "Montserrat";
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin: 0;
    text-transform: uppercase;
}

.contact-info-desc {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin: -16px 0 0;
}

/* Info list */
.contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

/* Icon circle */
.contact-info-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-icon svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    display: block;
}

.contact-info-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
}

.contact-info-label {
    font-family: "Montserrat";
    font-size: 11px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.contact-info-value {
    font-family: "Montserrat";
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

/* Badges marquee row */
.contact-badges-row {
    width: 100%;
    overflow: hidden;
    margin-top: 12px;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.contact-badges-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    animation: contact-badges-slide 10s linear infinite;
}

@keyframes contact-badges-slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.contact-badge-item {
    flex-shrink: 0;
    padding: 0 18px;
    display: flex;
    align-items: center;
}

.contact-badge-item img {
    height: 100px;
    width: auto;
    display: block;
    opacity: 0.85;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.contact-badge-item img:hover {
    transform: scale(1.08);
    opacity: 1;
}

@media (max-width: 900px) {
    .contact-badge-item img {
        height: 80px;
    }
}

@media (max-width: 600px) {
    .contact-badge-item {
        padding: 0 12px;
    }
    .contact-badge-item img {
        height: 65px;
    }
    .contact-badges-track {
        animation-duration: 13s;
    }
}

@media (max-width: 480px) {
    .contact-badge-item {
        padding: 0 10px;
    }
    .contact-badge-item img {
        height: 50px;
    }
    .contact-badges-track {
        animation-duration: 11s;
    }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .contact-page-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-info-side {
        position: static;
    }

    .contact-info-card {
        max-width: 540px;
    }
}

@media (max-width: 768px) {
    .contact-page {
        padding: 56px 5% 72px;
    }

    .contact-heading-wrap {
        margin-bottom: 40px;
    }

    .contact-heading {
        font-size: 36px;
    }

    .contact-subtext {
        font-size: 14px;
    }

    .contact-page-inner {
        gap: 32px;
    }

    .contact-info-card {
        padding: 30px 26px 26px;
        gap: 20px;
    }

    .contact-info-title {
        font-size: 18px;
    }

    .contact-info-desc {
        font-size: 12.5px;
        margin-top: -10px;
    }

    .contact-info-list {
        gap: 16px;
    }

    .contact-info-icon {
        width: 36px;
        height: 36px;
    }

    .contact-info-icon svg {
        width: 15px;
        height: 15px;
    }

    .contact-info-label {
        font-size: 10px;
    }

    .contact-info-value {
        font-size: 12.5px;
    }
}

@media (max-width: 640px) {
    .contact-page {
        padding: 48px 4.5% 64px;
    }

    .contact-heading-wrap {
        margin-bottom: 32px;
    }

    .contact-heading {
        font-size: 30px;
        letter-spacing: -0.5px;
    }

    .contact-subtext {
        font-size: 13px;
    }

    .contact-form {
        gap: 12px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 340px;
    }
    .contact-info-card {
        width: 340px;
    }

    .contact-input,
    .contact-select,
    .contact-textarea {
        padding: 12px 14px;
        font-size: 13px;
    }

    .contact-textarea {
        min-height: 110px;
    }

    .contact-checkbox-text {
        font-size: 11.5px;
    }

    .contact-send-btn {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .contact-page {
        padding: 40px 4% 56px;
    }

    .contact-heading-wrap {
        margin-bottom: 26px;
    }

    .contact-heading {
        font-size: 26px;
    }

    .contact-subtext {
        font-size: 12.5px;
    }

    .contact-page-inner {
        gap: 24px;
    }

    .contact-info-card {
        padding: 24px 18px 22px;
        gap: 16px;
        border-width: 2px;
        max-width: 100%;
    }

    .contact-info-title {
        font-size: 16px;
        letter-spacing: 0.3px;
    }

    .contact-info-desc {
        font-size: 12px;
        margin-top: -8px;
    }

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

    .contact-info-icon {
        width: 32px;
        height: 32px;
    }

    .contact-info-icon svg {
        width: 13px;
        height: 13px;
    }

    .contact-info-label {
        font-size: 9.5px;
    }

    .contact-info-value {
        font-size: 12px;
    }

    .contact-input,
    .contact-select,
    .contact-textarea {
        padding: 11px 13px;
        font-size: 12.5px;
    }

    .contact-checkbox-text {
        font-size: 11px;
    }

    .contact-submit-wrap {
        margin-top: 4px;
    }

    .contact-send-btn {
        font-size: 12.5px;
        letter-spacing: 1.2px;
    }
}

@media (max-width: 420px) {
    .contact-heading {
        font-size: 24px;
    }

    .contact-info-card {
        padding: 20px 14px 18px;
        gap: 13px;
    }

    .contact-info-title {
        font-size: 14px;
    }

    .contact-info-icon {
        width: 28px;
        height: 28px;
    }

    .contact-info-icon svg {
        width: 12px;
        height: 12px;
    }

    .contact-info-list {
        gap: 12px;
    }

    .contact-info-value {
        font-size: 11.5px;
    }

    .contact-input,
    .contact-select,
    .contact-textarea {
        padding: 10px 12px;
        font-size: 12px;
    }

    .contact-checkbox-text {
        font-size: 10.5px;
    }
}

/* ═══════════════════════════════════════════
   SERVICE HERO SECTION
═══════════════════════════════════════════ */
.service-hero {
    width: 100%;
    background: #000000;
    border-radius: 48px 48px 0 0;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 6% 80px;
    text-align: center;
    position: relative;
    
    overflow: hidden;
}

.service-hero-content {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 160px auto;
    justify-items: center;
    align-items: start;
    row-gap: 44px;
    
}

/* Main heading */
.service-hero-title {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 61.32px;
    line-height: 120%;
    letter-spacing: -0.04em;
    text-align: center;
    color: #ffffff;
    margin: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    height: 160px;
}

/* Gradient typing text */
.service-hero-highlight {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    background: linear-gradient(90deg, #4333ff 0%, #048ef7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Typing cursor */
.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 0.75em;
    background: linear-gradient(180deg, #4333ff 0%, #048ef7 100%);
    margin-left: 4px;
    vertical-align: middle;
    border-radius: 1px;
    animation: cursor-blink 0.75s step-end infinite;
}

@keyframes cursor-blink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes btn-blue-glow {
    0%,
    100% {
        box-shadow: 0 0 8px 2px rgba(4, 142, 247, 0.35);
    }
    50% {
        box-shadow: 0 0 28px 10px rgba(4, 142, 247, 0.85);
    }
}

/* Arrow + Button row fixed */
.service-hero-cta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

/* Arrow */
.service-hero-arrow {
    width: 250px;
    height: auto;
    flex-shrink: 0;
    display: block;
    transform: translateX(-140px);
    margin-left: -110px;
}

/* Button */
.service-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 179px;
    height: 50px;
    border-radius: 3px;
    /* padding: 16px 36px; */
     /* border: 2px solid red; */
    gap: 6.4px;
    background: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #048ef7;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 0.2px;
    white-space: nowrap;
    margin-top: -70px;


    margin-left: -170px;
    flex-shrink: 0;
    animation: btn-blue-glow 1.6s ease-in-out infinite;
    will-change: box-shadow;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.25s ease;
}

.service-hero-btn:hover {
    background: #ffffff;
    color: #048ef7;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 1100px) {
    .service-hero-title {
        font-size: 50px;
        height: 145px;
    }

    .service-hero-content {
        min-height: 245px;
        
    }
}

@media (max-width: 768px) {
    .service-hero {
        border-radius: 32px 32px 0 0;
        /* padding: 50px 5% 44px; */
        /* min-height: auto; */
        align-items:center;
    }

    .service-hero-content {
        /* grid-template-rows: auto auto; */
        /* row-gap: 18px; */
        /* min-height: auto; */
        justify-items: center;
        /* margin-top: 30px; */
        
        
    }

    .service-hero-title {
        font-size: 38px;
        letter-spacing: -0.03em;
        height: auto;
    }

    .service-hero-cta-row {
        width: 300px;        /* align-items: center; */
        gap: 14px;
        /* margin-left: 3px; */
        /* justify-content: flex-start; */
    }

    .service-hero-arrow {
        width: 140px;
        height: auto;
        transform: none;
        /* margin-left: 0;
        flex-shrink: 0; */
    }

    .service-hero-btn {
        width: 22px;
        height: auto;
        
        /* justify-content: center; */
        font-size: 13px;
        /* left: -30px; */
        margin-left: 1px;
       
    }
}

@media (max-width: 400px) {
    .service-hero {
        overflow: hidden;
        padding-left: 16px;
        padding-right: 16px;
        align-items: center;
    }

    .service-hero-content {
        width: 100%;
        max-width: 100%;
        justify-items: start;
    }

    .service-hero-title {
        width: 100%;
        max-width: 100%;
        font-size: 20px;
        line-height: 1.15;
        min-height: 50px;
        height: auto;
        text-align: left;
        white-space: normal;
        overflow-wrap: normal;
    }

    .service-hero-highlight {
        display: inline;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    /* .service-hero-cta-row {
        margin: 0;
        gap: 12px;
        justify-content:center;
        
    } */

    .service-hero-arrow {
        width: 10px;
        /* height: auto; */
        /* transform: none; */
        /* margin-left: -70px; */
        /* flex-shrink: 0; */
    }

    .service-hero-btn {
        width: 190px;
        height: 46px;
        font-size: 13px;
        /* border: 2px solid red; */

        
        
        margin: 0;
        transform: none;
        flex-shrink: 0;
    }
}

@media (max-width: 370px) {
    .service-hero-title {
        font-size: 32px;
        /* height: auto; */
        text-align: left;
    }

    .service-hero-content {
        /* min-height: auto; */
        justify-items: center;
        row-gap: 12px;
        
    }

    .service-hero-cta-row {
        width: 100px;
        justify-content: center;
        
        align-items: center;
        gap: 10px;
    }

    .service-hero-arrow {
        width: 150px;
        height: auto;
        
    }

    .service-hero-btn {
        width: 100px;
        height: 42px;
        

        font-size: 12px;
        
        
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        transform: none;
    }
} 
/* ═══════════════════════════════════════════
   OUR WORK HERO — COMPACT HERO + CARD STAGE
═══════════════════════════════════════════ */

/* Hero: compact text + button only, no cards inside */
.pkg-hero {
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
    padding-bottom: 56px !important;
    min-height: unset !important;
    border-radius: 48px 48px 0 0 !important;
}

/* Tighten gap between heading and CTA row */
.pkg-hero .service-hero-content {
    gap: 32px;
}

/* Outline/ghost button for Our Work hero */
 .service-hero-btn {
    width: 210px;
    height: 46px;
    background: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
     /* border: 2px solid red; */
    
    font-size: 14px;
}
.pkg-hero .service-hero-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    
    border-color: rgba(255, 255, 255, 0.7);
}

/* ── Dark stage that holds the fanned cards ── */
/* The 1440px inner container is centered; at narrower viewports
   overflow:hidden clips the outer cards symmetrically — no JS needed. */
.pkg-hero-stage {
    width: 100%;
    background: #000000;
    overflow: hidden;
    height: 380px;
}

/* ── 1440px absolute-position container (matches Figma frame) ── */
.pkg-hero-images {
    position: relative;
    width: auto;
    height: 680px;
    margin: 0 auto;
    top:80px;
    /* margin-left: -2px; */
}

/* ── Base card ── */
.pkg-hero-img-card {
    position: absolute;
    overflow: hidden;
    border: 5.1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.pkg-hero-img-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─────────────────────────────────────────
   Exact Figma values per card.
   top values are normalised: card_top − 632 (the minimum top in Figma).
   b5 mirrors b1 (identical b4/b5 data in the Figma spec was a copy-paste slip).
───────────────────────────────────────── */
.pkg-hero-img-card--1 {
    width: 289px;
    height: 288px;
    left: -56px;
    top: 14px; /* 645.5 − 632 */
    border-radius: 10px;
    transform: rotate(-9.66deg);
    z-index: 1;
}
.pkg-hero-img-card--2 {
    width: 312px;
    height: 311px;
    left: 249px;
    top: 13px; /* 644.76 − 632 */
    border-radius: 10px;
    transform: rotate(0deg);
    z-index: 2;
}
.pkg-hero-img-card--3 {
    width: 309px;
    height: 309px;
    left: 536px;
    top: 20px; /* 651.57 − 632 */
    border-radius: 10px;
    transform: rotate(-9.58deg);
    z-index: 3;
}
.pkg-hero-img-card--4 {
    width: 346px;
    height: 346px;
    left: 825px;
    top: 0; /* 632 − 632 */
    border-radius: 10px;
    transform: rotate(4.72deg);
    z-index: 4;
}
/* b5: symmetric mirror of b1 — same overhang past right edge as b1 past left */
.pkg-hero-img-card--5 {
    width: 346px;
    height: 346px;
    left: 1149px; /* b4 right (1171) − ~22px overlap, mirrors b1 */
    top: 14px;
    border-radius: 10px;
    transform: rotate(9.66deg);
    z-index: 5;
}

/* ── Responsive: images switch to full-width fan row ── */
@media (max-width: 768px) {
    .pkg-hero {
        padding-bottom: 0 !important;
        padding-top: 24px !important;
        align-items: center !important;
    }
    /* .pkg-hero .service-hero-content {
        justify-items: center;
        row-gap: 16px;
    }
    .pkg-hero .service-hero-title {
        text-align: center;
        height: auto;
    }
    .pkg-hero .service-hero-cta-row {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-left: 0;
        width: 100%;
    }
    .pkg-hero .service-hero-btn {
        order: 1;
        margin-top: 0;
        margin-left: 0;
        width: 220px;
        height: 46px;
    }
    .pkg-hero .service-hero-arrow {
        order: 2;
        width: 55px;
        transform: rotate(-15deg);
        margin-left: 0;
        margin-top: 12px;
    } */
    .pkg-hero-stage {
        height: auto;
        overflow: hidden;
        background: #000000;
        padding: 24px 0 32px;
    }
    .pkg-hero-images {
        width: 900px;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 0 8px;
        position: relative;
        left: -15px;
    }
    .pkg-hero-img-card {
        position: relative !important;
        width: 22vw !important;
        height: 24vw !important;
        top: auto !important;
        left: auto !important;
        bottom: -29px;
        flex-shrink: 0;
        margin-right: -18px;
    }
    .pkg-hero-img-card--1 {
        transform: rotate(-9.66deg) !important;
    }
    .pkg-hero-img-card--2 {
        transform: rotate(0deg) !important;
    }
    .pkg-hero-img-card--3 {
        transform: rotate(-9.58deg) !important;
    }
    .pkg-hero-img-card--4 {
        transform: rotate(-9.79deg) !important;
    }
    .pkg-hero-img-card--5 {
        transform: rotate(9.66deg) !important;
    }
}
@media (max-width: 540px) {
    .pkg-hero-img-card {
        width: 20vw !important;
        height: 20vw !important;
        margin-right: -10px;
        bottom: -29px;
    }
        .pkg-hero-images {
        width: 550px;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
        left: -20px;
     
    }
    .service-hero-content {
        width: 100%;
        display: grid;
        grid-template-rows: auto auto;
        justify-items: start;
        align-items: start;
        row-gap: 20px;
    }

    .service-hero-title {
        font-size: 30px;
        letter-spacing: -0.02em;
        height: auto;
        text-align: left;
    }

    .service-hero-cta-row {
        width: auto;
        margin-left: 0;
        
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 14px;
    }

    .service-hero-arrow {
        width: 55px;
        flex-shrink: 0;
    }

    .service-hero-btn {
        width: 220px;
        height: 46px;
        font-size: 13px;
        
        flex-shrink: 0;
    }
}

@media (max-width: 400px) {
    .service-hero {
        padding: 44px 5% 38px;
        align-items: flex-start;
    }

    .service-hero-content {
        justify-items: start;
        row-gap: 18px;
    }

    .service-hero-title {
        font-size: 24px;
        height: auto;
        text-align: left;
    }

    .service-hero-cta-row {
        width: 100px;
        /* margin: 0; */
        /* border: 2px solid red; */
        justify-content: center;
        
        
        gap: 12px;
    }

    .service-hero-arrow {
        width: 55px;
        transform: none;
        margin: 0;
        flex-shrink: 0;
    }

    .service-hero-btn {
        width: 200px;
        /* height: 46px; */
        font-size: 13px;
        
        margin-left: -40px;
         /* border: 2px solid red; */
        
/*         
        margin: 0;
        transform: none;
        flex-shrink: 0; */
    }
}

/* @media (max-width: 370px) {

    .pkg-hero {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .pkg-hero .service-hero-content {
        width: 100%;
        max-width: 100%;
        display: grid;
        justify-items: flex-start;
        align-items: flex-start;
        gap: 18px;
    }

    .pkg-hero .service-hero-title {
        font-size: 24px;
        height: auto;
        text-align: left;
        letter-spacing: -0.02em;
    }

    .pkg-hero .service-hero-highlight {
        font-size: 22px;
        letter-spacing: -0.02em;
    }

    .pkg-hero .service-hero-cta-row {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-left: -18px;
    }

    .pkg-hero .service-hero-arrow {
        order: 1;
        width: 125px;
        height: auto;
        position: relative;
        top: -6px;
        margin: 0;
        flex-shrink: 0;
        transform: none;
    }

    .pkg-hero .service-hero-btn {
        order: 2;
        width: 160px;
        height: 42px;
        font-size: 12px;
        margin: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: none;
    }

    .pkg-hero-stage {
        padding: 20px 0 24px;
    }

    .pkg-hero-img-card {
        width: 21vw;
        height: 21vw;
        margin-right: -10px;
    }
} */
/* ═══════════════════════════════════════════
   SERVICE BANNER SECTION
═══════════════════════════════════════════ */
.service-banner {
    width: 100%;
    padding: 32px 24px;
    background: transparent;
}

.service-banner-container {
    max-width: 1203px;
    height: 391px;
    margin: 0 auto;
    background: #048ef7;
    border: 0.8px solid #ffffff;
    border-radius: 10px;
    padding: 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    overflow: visible; /* icons can poke above */
    box-sizing: border-box;
}

/* ════ LEFT ════ */
.service-banner-left {
    flex: 0 0 auto;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.service-banner-title {
    font-family: "Montserrat";
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.5px;
}

.service-banner-desc {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
    margin: 0;
    max-width: 400px;
}

.service-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-top: 4px;
}

/* Rounded dark button */
.service-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111111;
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.service-banner-btn:hover {
    background: #2a2a2a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.service-banner-call {
    font-family: "Montserrat";
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

.service-banner-call-link {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.service-banner-call-link:hover {
    text-decoration: underline;
}

/* ════ RIGHT ════ */
.service-banner-right {
    flex: 0 0 auto;
    width: 489px;
    height: 302px; /* exact Figma size */
    position: relative;
    display: block;
}

/* ── Icon row — overlapping circles ── */
.service-banner-icons {
    position: absolute;
    top: -40px;
    left: 91px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    background: transparent;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 32px;
    padding: 6px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    gap: 4px;
}

.service-banner-image-wrap {
    width: 489px;
    height: 302px;
    border-radius: 10px;
    top: 18px;
    overflow: hidden;
    /* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); */
    position: relative;
    /* z-index: 1; */
}

/* ── Mockup image ── sits flush at the bottom ── */
.service-banner-image-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* removed height: 50px */
}

.banner-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
}
.banner-icon-wrap:first-child {
    margin-left: 0;
}

.banner-icon-wrap:hover {
    transform: translateY(-5px);
    z-index: 10;
}

.banner-icon-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

.service-banner-image {
    width: 100%;
    height: 302px;
    object-fit: cover;
    border-radius: 10px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .service-banner-container {
        flex-direction: column;
        align-items: stretch;
        padding: 44px 32px 0;
        gap: 28px;
    }
    .service-banner-left {
        flex: none;
        padding-bottom: 0;
    }
    .service-banner-right {
        align-items: flex-start;
    }
    .service-banner-image {
        max-width: 100%;
        border-radius: 10px 10px 0 0;
    }
    .service-banner-title {
        font-size: 26px;
    }
}

@media (max-width: 520px) {
    .service-banner-container {
        padding: 36px 20px 0;
    }
    .service-banner-title {
        font-size: 22px;
    }
    .service-banner-desc {
        font-size: 12.5px;
    }
    .service-banner-btn {
        width: 100%;
        justify-content: center;
    }
    .banner-icon-wrap {
        width: 38px;
        height: 38px;
    }
    .banner-icon-img {
        width: 24px;
        height: 24px;
    }
}
/* ══════════════════════════════════════════════════════
   PACKAGE HERO — pkg-hero- prefix
══════════════════════════════════════════════════════ */
.pkg-hero-section {
    width: 100%;
    background: #000000;
    border-radius: 48px 48px 0 0;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 6% 70px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pkg-hero-content {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pkg-hero-title {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 61.32px;
    line-height: 120%;
    letter-spacing: -0.04em;
    text-align: center;
    color: #ffffff;
    margin: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

.pkg-hero-highlight {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    background: linear-gradient(90deg, #4333ff 0%, #048ef7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

@media (max-width: 1100px) {
    .pkg-hero-title {
        font-size: 50px;
    }
}

@media (max-width: 768px) {
    .pkg-hero-section {
        border-radius: 32px 32px 0 0;
        padding: 60px 5% 50px;
        min-height: auto;
    }
    .pkg-hero-title {
        font-size: 38px;
        letter-spacing: -0.03em;
    }
}

@media (max-width: 480px) {
    .pkg-hero-section {
        padding: 48px 5% 40px;
    }
    .pkg-hero-title {
        font-size: 30px;
    }
}

@media (max-width: 400px) {
    .pkg-hero-section {
        padding: 44px 5% 36px;
        border-radius: 24px 24px 0 0;
    }
    .pkg-hero-title {
        font-size: 26px;
        letter-spacing: -0.02em;
        line-height: 1.25;
    }
}

@media (max-width: 370px) {
    .pkg-hero-title {
        font-size: 24px;
    }
}


/* ═══════════════════════════════════════════
   SERVICES PLAN COMPONENT — sp- prefix
═══════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   DISCUSS BANNER — db- prefix
══════════════════════════════════════════════════════ */

.db-section {
    width: 100%;
    padding: 48px 24px;
    position: relative;
}

.db-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #048ef7;
    border-radius: 10px;
    padding: 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    height: 102px;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    min-height: 220px;
}

.db-left {
    flex: 1;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 0;
}

.db-title {
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.db-desc {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 0;
    max-width: 400px;
}

.db-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111111;
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 3px;
    width: fit-content;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.db-btn:hover {
    background: #2a2a2a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.db-call {
    font-family: "Montserrat";
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.db-call-link {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.db-call-link:hover {
    text-decoration: underline;
}

.db-right {
    position: absolute;
    right: 24px;
    top: 48px;
    bottom: 48px;
    width: 480px;
    pointer-events: none;
}

.db-image {
    position: absolute;
    bottom: -70px;
    right: -102px;
    height: calc(100% + 60px);
    width: auto;
    max-width: 560px;
    object-fit: contain;
    object-position: bottom right;
}

/* ── Section wrapper ── */
.sp-section {
    width: 100%;
    padding: 80px 20px 90px;
    border-radius: 48px 48px 0 0;
}

/* ── Section header ── */
.sp-header {
    text-align: center;
    margin-bottom: 52px;
}

.sp-title {
    font-family: "Montserrat";
    font-size: 36px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 14px;
    line-height: 1.2;
}

.sp-subtitle {
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 400;
    color: #555555;
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

/* ── Category tabs ── */
.sp-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-tab {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 700;
    color: #048ef7;
    background: transparent;
    border: 2px solid #048ef7;
    border-radius: 50px;
    padding: 9px 24px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.sp-tab:hover {
    background: #048ef7;
    color: #ffffff;
}

.sp-tab--active {
    background: #048ef7;
    color: #ffffff;
}

/* ── 3-column grid ── */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}

/* ── Base card — white bg + blue border ── */
.sp-card {
    position: relative;
    background: #ffffff;
    border: 2px solid #048ef7;
    border-radius: 10px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.sp-card .sp-offer-label,
.sp-card .sp-plan-name,
.sp-card .sp-amount,
.sp-card .sp-currency,
.sp-card .sp-features li,
.sp-card .sp-check {
    transition: color 0.3s ease;
}

.sp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    background: #000000;
    border-color: #000000;
}

.sp-card:hover .sp-offer-label,
.sp-card:hover .sp-plan-name,
.sp-card:hover .sp-amount,
.sp-card:hover .sp-currency,
.sp-card:hover .sp-features li,
.sp-card:hover .sp-check {
    color: #ffffff;
}

/* ── Featured (middle) card — same white bg, lifted slightly ── */
.sp-card--featured {
    background: #ffffff;
    border: 2px solid #048ef7;
    margin-top: 0;
}

.sp-card--featured:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    background: #000000;
    border-color: #000000;
}

/* â"€â"€ BEST SELLER badge â"€â"€ */
.sp-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* ── Card inner padding ── */
.sp-card-inner {
    padding: 32px 28px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sp-card--featured .sp-card-inner {
    padding-top: 44px;
}

/* ── "limited time offer" label ── */
.sp-offer-label {
    font-family: "Montserrat";
    font-size: 11px;
    font-weight: 500;
    color: #888888;
    letter-spacing: 0.4px;
    margin: 0 0 4px;
    text-transform: lowercase;
}

/* ── Plan name ── */
.sp-plan-name {
    font-family: "Montserrat";
    font-size: 22px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 14px;
    line-height: 1.2;
}

/* ── Price row ── */
.sp-price {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 22px;
    line-height: 1;
}

.sp-currency {
    font-family: "Montserrat";
    font-size: 26px;
    font-weight: 800;
    color: #048ef7;
    margin-top: 8px;
}

.sp-amount {
    font-family: "Montserrat";
    font-size: 62px;
    font-weight: 800;
    color: #048ef7;
    line-height: 1;
}

/* ── Feature list ── */
.sp-features {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
}

.sp-features li {
    font-family: "Montserrat";
    font-size: 13.5px;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

/* ── Green tick circle ── */
.sp-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #22c55e;
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    flex-shrink: 0;
}

/* ── Button stack ── */
.sp-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* “Get Started” — blue fill on regular cards */
.sp-btn-primary {
    display: block;
    width: 100%;
    padding: 13px 0;
    background: #048ef7;
    color: #ffffff;
    border: 2px solid #048ef7;
    font-family: “Montserrat”;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 3px;
    letter-spacing: 0.3px;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.sp-btn-primary:hover {
    background: #0278d4;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(4, 142, 247, 0.4);
}

/* When Chat Now is hovered, Get Started flips to white */
.sp-buttons:has(.sp-btn-secondary:hover) .sp-btn-primary {
    background: #ffffff;
    color: #048ef7;
    border-color: #048ef7;
    box-shadow: none;
    transform: none;
}

/* "Get Started" — white fill on featured card */
.sp-btn-primary--light {
    background: #ffffff;
    color: #0a0a0a;
}

.sp-btn-primary--light:hover {
    background: #f0f0f0;
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.15);
}

/* "Chat Now" — white outline on regular cards */
.sp-btn-secondary {
    display: block;
    width: 100%;
    padding: 12px 0;
    background: transparent;
    color: #048ef7;
    border: 2px solid #048ef7;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 3px;
    letter-spacing: 0.3px;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.sp-btn-secondary:hover {
    background: #048ef7;
    color: #ffffff;
    transform: translateY(-2px);
}

/* "Chat Now" — solid blue on featured card */
.sp-btn-secondary--solid {
    background: #048ef7;
    color: #ffffff;
    border-color: #048ef7;
}

.sp-btn-secondary--solid:hover {
    background: #0278d4;
    border-color: #0278d4;
    box-shadow: 0 6px 18px rgba(4, 142, 247, 0.45);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .sp-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .sp-card--featured {
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .sp-section {
        padding: 60px 16px 70px;
        border-radius: 28px 28px 0 0;
    }

    .sp-amount {
        font-size: 50px;
    }

    .sp-plan-name {
        font-size: 19px;
    }
}

/* ═══════════════════════════════════════════
   BUILD METHOD COMPONENT — bm- prefix
═══════════════════════════════════════════ */

.bm-section {
    width: 100%;
    padding: 80px 20px 90px;
    background: #ffffff;
}

.bm-container {
    max-width: 1100px;
    margin: 0 auto;
}

.bm-title {
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    text-align: center;
    margin: 0 0 48px;
    line-height: 1.25;
}

.bm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bm-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 28px 24px 26px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.bm-card:nth-child(odd) {
    border: 2.5px solid rgba(0, 0, 0, 0.15);
}

.bm-card:nth-child(even) {
    border: 2.5px solid rgba(4, 142, 247, 0.35);
}

.bm-card {
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

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

/* Dark (odd) card hover */
.bm-card:nth-child(odd):hover {
    background: #111111;
    border-color: #111111;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.bm-card:nth-child(odd):hover .bm-badge--dark {
    background: #ffffff;
    color: #111111;
}

.bm-card:nth-child(odd):hover .bm-card-title,
.bm-card:nth-child(odd):hover .bm-card-desc {
    color: #ffffff;
}

/* Blue (even) card hover */
.bm-card:nth-child(even):hover {
    background: #048ef7;
    border-color: #048ef7;
    box-shadow: 0 16px 40px rgba(4, 142, 247, 0.3);
}

.bm-card:nth-child(even):hover .bm-badge--blue {
    background: #ffffff;
    color: #048ef7;
}

.bm-card:nth-child(even):hover .bm-card-title,
.bm-card:nth-child(even):hover .bm-card-desc {
    color: #ffffff;
}

.bm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 16px;
}

.bm-badge--dark {
    background: #111111;
    color: #ffffff;
}

.bm-badge--blue {
    background: #048ef7;
    color: #ffffff;
}

.bm-card-title {
    font-family: "Montserrat";
    font-size: 18px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 10px;
    transition: color 0.3s ease;
}

.bm-card-desc {
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 400;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s ease;
}

@media (max-width: 900px) {
    .bm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .bm-section {
        padding: 60px 16px 70px;
    }

    .bm-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .bm-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   DISCUSS BANNER COMPONENT — db- prefix
═══════════════════════════════════════════ */

.db-section {
    background: #048ef7;
    border-radius: 10px;
    width: 1193px;
    max-width: 95%;
    margin: 0 auto 90px;
    overflow: visible;
    position: relative;
}

.db-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 52px;
    min-height: 200px;
}

.db-left {
    flex: 0 0 auto;
    max-width: 520px;
    padding: 44px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.db-title {
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 12px;
}

.db-desc {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin: 0 0 22px;
    max-width: 400px;
}

.db-btn {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
    margin-bottom: 12px;
}

.db-btn:hover {
    background: #222222;
    transform: translateY(-2px);
}

.db-call {
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.db-call-link {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.db-call-link:hover {
    text-decoration: underline;
}

.db-right {
    flex: 0 0 auto;
    display: flex;
    align-items: end;
    justify-content: end;
}

.db-image {
    height: 350px;
    width: auto;
    object-fit: contain;
    display: block;
    align-self: center;
    border-radius: 10px;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.22));
    position: relative;
    z-index: 2;
}

.db-laptop-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
    z-index: 2;
}

/* Overlay that sits exactly on the laptop screen area */
.db-laptop-screen {
    position: absolute;
    top: 135px;
    right: 16px;
    width: 225px;
    height: 180px;
    overflow: hidden;
    border-radius: 4px;
    z-index: 1;
    transform: rotate(-8deg);
}

.db-laptop-track {
    display: flex;
    flex-direction: column;
    animation: db-scroll-up 14s linear infinite;
    will-change: transform;
}

.db-screen-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
}

@keyframes db-scroll-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(var(--db-scroll-dist, -2000px));
    }
}

@media (max-width: 770px) {
    .db-section {
        margin: 0 auto 60px;
        padding-bottom: 30px;
    }

    .db-container {
        flex-direction: column;
        align-items: center;
        padding: 40px 36px 20px;
        text-align: center;
        min-height: auto;
        height: 200px;
    }

    .db-left {
        padding: 0;
        align-items: center;
        max-width: 100%;
    }

    .db-desc {
        max-width: 100%;
    }

    .db-right {
        position: relative;
        right: auto;
        top: auto;
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 16px 0 0;
    }

    .db-image {
        height: 400px;
        left: 20px;
        top: 120px;
    }

    .db-laptop-wrapper {
        position: relative;
        top: 60px;
        left: auto;
    }

    .db-laptop-screen {
        position: absolute;
        top: 190px;
        left: 86px;
        width: 260px;
        height: 175px;
        overflow: hidden;
        border-radius: 2px;
        z-index: 1;
        transform: rotate(-8deg);
    }
}

@media (max-width: 490px) {
    .db-container {
        padding: 32px 24px 16px;
        /* min-height: auto; */
    }

    .db-title {
        font-size: 24px;
    }

    .db-image {
        height: 210px;
        top: 50px;
    }

    .db-laptop-screen {
        position: absolute;
        top: 90px;
        left: 57px;
        width: 135px;
        height: 92px;
        overflow: hidden;
        border-radius: 2px;
        z-index: 1;
        transform: rotate(-8deg);
    }
}
@media (max-width: 380px) {
    .db-container {
        height: 120px;
    }

    .db-title {
        font-size: 24px;
    }

    .db-image {
        height: 50px;
        top: -120px;
    }

    .db-laptop-screen {
        position: absolute;
        top: 81px;
        left: 45px;
        width: 142px;
        height: 91px;
        overflow: hidden;
        border-radius: 2px;
        z-index: 1;
        transform: rotate(-8deg);
    }
}

/* =============================================
   package-discuss component
   ============================================= */

/* ── How Do We Build Better Websites? ── */
.hdbw-section {
    background: #fff;
    padding: 80px 20px 90px;
}

.hdbw-container {
    max-width: 1160px;
    margin: 0 auto;
}

.hdbw-heading {
    text-align: center;
    font-family: "Montserrat";
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 800;
    color: #111827;
    margin-bottom: 56px;
    letter-spacing: -0.5px;
}

.hdbw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hdbw-card {
    border: 1.5px solid #000000;
    border-radius: 10px;
    padding: 36px 32px 40px;
    background: #fff;
    transition:
        box-shadow 0.35s ease,
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
}

.hdbw-card .hdbw-badge,
.hdbw-card .hdbw-card-title,
.hdbw-card .hdbw-card-desc {
    transition:
        background 0.35s ease,
        color 0.35s ease;
}

.hdbw-card:hover {
    background: #048ef7;
    border-color: #048ef7;
    box-shadow: 0 12px 40px rgba(4, 142, 247, 0.35);
    transform: translateY(-5px);
}

.hdbw-card:hover .hdbw-badge {
    background: #ffffff;
    color: #048ef7;
}

.hdbw-card:hover .hdbw-card-title {
    color: #ffffff;
}

.hdbw-card:hover .hdbw-card-desc {
    color: rgba(255, 255, 255, 0.82);
}

.hdbw-card--active {
    background: #048ef7;
    border-color: #048ef7;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(4, 142, 247, 0.35);
}

.hdbw-card--active .hdbw-badge {
    background: #ffffff;
    color: #000000;
}

.hdbw-card--active:hover {
    box-shadow: 0 8px 32px rgba(0, 82, 204, 0.2);
    transform: translateY(-4px);
}

.hdbw-card--active:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 16px rgba(0, 82, 204, 0.15);
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

.hdbw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 22px;
    transition:
        background 0.35s ease,
        color 0.35s ease;
}

.hdbw-badge--light {
    background: #000;
    color: #ffffff;
}

.hdbw-badge--white {
    background: #000000;
    color: #fff;
}

.hdbw-card-title {
    font-family: "Montserrat";
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 14px;
}

.hdbw-card--active .hdbw-card-title {
    color: #fff;
}

.hdbw-card-desc {
    font-family: "Montserrat";
    font-size: 14.5px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
}

.hdbw-card--active .hdbw-card-desc {
    color: rgba(255, 255, 255, 0.82);
}

/* ── Company Description + Stats ── */
.pd-cs-section {
    background: #f0f4ff;
    padding: 80px 20px 88px;
}

.pd-cs-container {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.pd-cs-heading {
    font-family: "Montserrat";
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
    margin: 0 0 20px;
}

.pd-cs-heading span {
    color: #048ef7;
}

.pd-cs-heading .pd-cs-digital {
    background: linear-gradient(90deg, #003862, #048ef7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pd-cs-desc {
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 400;
    color: #4b5563;
    line-height: 1.75;
    margin: 0;
    max-width: 440px;
}

.pd-cs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pd-cs-stat {
    background: #fff;
    border-radius: 10px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1.5px solid #000000;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.pd-cs-stat:hover {
    box-shadow: 0 6px 24px rgba(20, 71, 230, 0.12);
    transform: translateY(-3px);
}

.pd-cs-stat-number {
    font-family: "Montserrat";
    font-size: 36px;
    font-weight: 800;
    color: #048ef7;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}

.pd-cs-plus {
    color: #111111;
}

.pd-cs-stat-label {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

    .pd-cs-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pd-cs-desc {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .pd-cs-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hdbw-card {
        padding: 28px 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FULL-SITE RESPONSIVE PATCH
   Fixes and enhancements for all pages and components
   Breakpoints: 960 · 768 · 640 · 540 · 480 · 380 · 360
═══════════════════════════════════════════════════════════════ */

/* ── Global: prevent horizontal overflow on all screens ── */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ── Images never overflow their containers ── */
img {
    max-width: 100%;
}

/* ════════════════════════════════════════════════════════
   HOME HERO — right image height + keyframe per breakpoint
════════════════════════════════════════════════════════ */

/* Tablet stacked (900 px) — already 1-column; scale image down */
@media (max-width: 900px) {
    .hero-right-image {
        height: auto;
        padding: 0;
        justify-content: center;
    }

    .hero1-img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    @keyframes heroScrollUp {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(calc(-6 * (500px + 32px)));
        }
    }
}

/* Large mobile (600 px) */
@media (max-width: 600px) {
    .hero-inner {
        padding: 55px 16px 40px;
        gap: 36px;
    }

    .hero-left-content h1 {
        font-size: 32px;
    }

    .hero-right-image {
        height: auto;
        padding: 0;
    }

    .hero1-img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    @keyframes heroScrollUp {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(calc(-6 * (420px + 32px)));
        }
    }

    .trusted-heading {
        font-size: 26px;
    }
}

/* Small mobile (480 px) */
@media (max-width: 480px) {
    .hero-inner {
        padding: 44px 14px 32px;
        gap: 28px;
    }

    .hero-left-content h1 {
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .hero-left-content > p {
        font-size: 14px;
        line-height: 22px;
    }

    .hero-right-image {
        height: auto;
        padding: 0;
    }

    .hero1-img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    @keyframes heroScrollUp {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(calc(-6 * (360px + 32px)));
        }
    }

    .trusted-heading {
        font-size: 20px;
    }

    .hero-trust-image {
        width: 100%;
        max-width: 320px;
    }

    .hero-project-btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Extra small (380 px) */
@media (max-width: 380px) {
    .hero-left-content h1 {
        font-size: 24px;
    }

    .trusted-heading {
        font-size: 17px;
    }

    .trusted-brands-box {
        padding: 12px;
        gap: 2px;
    }

    .brand-item {
        padding: 4px 8px;
    }

    .brand-item img {
        height: 14px;
    }
}

/* ════════════════════════════════════════════════════════
   SERVICE HERO — reset negative CTA-row margin on mobile
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .service-hero-cta-row {
        margin-left: 0;
        flex-wrap: nowrap;
    }
}

@media (max-width: 480px) {
    .service-hero {
        padding: 44px 5% 38px;
        align-items: center;
    }

    .service-hero-content {
        justify-items: center;
         /* border: 2px solid red; */
         
        
        row-gap: 10px;
    }
    .service-hero-btn{
        width: auto;
        height: 42px;
        /* border: 2px solid red; */
        font-size: 12px;
        margin-left: -30px;
        margin-top: 30px;
        
    }

    .service-hero-title {
        font-size: 26px;
        height: auto;
        text-align: center;
    }

    /* .service-hero-cta-row {
        width: 100%;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
    } */

    .service-hero-arrow {
        width: 106px;
        /* height: auto; */
        margin-top: 110px;
        margin-left: -50px;
        /* flex-shrink: 0;
        transform: none; */
        
        /* margin: 0; */
    }

    .service-hero-btn {
        width: 200px;
        height: 46px;
        font-size: 13px;
        
        flex-shrink: 0;
        /* margin: 0; */
        
        transform: none;
    }
}

@media (max-width: 370px) {
    .service-hero {
        padding: 36px 14px 30px;
        align-items: center;
    }

    .service-hero-content {
        justify-items: center;
        
        row-gap: 12px;
        

    }

    .service-hero-title {
        font-size: 24px;
        height: auto;
        text-align: center;
    }

    .service-hero-cta-row {
        width: 100%;
        margin: 0;
        display: flex;
        flex-direction: row;
        
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .service-hero-arrow {
        width: 50px;
        /* height: auto; */
        flex-shrink: 0;
        transform: none;
       
        /* margin: 0; */
    }

    .service-hero-btn {
        width: 180px;
        height: 42px;
        font-size: 12px;
        
        
        flex-shrink: 0;
        margin: 0;
        transform: none;
    }
}

/* ════════════════════════════════════════════════════════
   ABOUT HERO HIGHLIGHT — own font-size must track h1
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .about-hero-highlight {
        font-size: 38px;
        letter-spacing: -0.03em;
    }
    .about-hero-highlight br {
        display: none;
    }
}

@media (max-width: 480px) {
    .about-hero-highlight {
        font-size: 30px;
        letter-spacing: -0.02em;
    }
}

@media (max-width: 380px) {
    .about-hero-title,
    .about-hero-highlight {
        font-size: 26px;
    }
}

/* ════════════════════════════════════════════════════════
   SERVICE BANNER — override fixed height + right column width
════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .service-banner-container {
        height: auto;
    }

    .service-banner-right {
        width: 100%;
        height: auto;
    }

    .service-banner-image-wrap {
        width: 100%;
        height: auto;
    }

    .service-banner-image {
        width: 100%;
        height: auto;
        max-height: 280px;
        object-fit: cover;
        border-radius: 0 0 10px 10px;
    }
}

@media (max-width: 520px) {
    .service-banner-image {
        max-height: 220px;
    }

    .service-banner-icons {
        top: -20px;
        left: 12px;
    }
}

@media (max-width: 380px) {
    .service-banner-container {
        height: auto;
    }

    .service-banner-right {
        width: 100%;
        height: auto;
    }

    .service-banner-image-wrap {
        width: 100%;
        height: 300px;
        top: -30px;
    }

    .service-banner-image {
        width: 1200px;
        height: 310px;
        /* max-height: 280px; */
        object-fit: cover;

        border-radius: 10px;
    }
}

/* ════════════════════════════════════════════════════════
   CASE STUDIES — dark box padding on small screens
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .case-studies-dark-box {
        max-width: 96%;
        padding: 20px 14px;
    }

    .case-studies-section {
        padding: 60px 0 70px;
    }
}

/* ════════════════════════════════════════════════════════
   PORTFOLIO SECTION — padding + filter alignment
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .portfolio-section {
        padding: 60px 0 70px;
    }

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

/* ════════════════════════════════════════════════════════
   MARQUEE STRIP — reduce font on small screens
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .marquee-text {
        font-size: 36px;
        gap: 20px;
    }

    .marquee-star {
        font-size: 28px;
    }
}

@media (max-width: 380px) {
    .marquee-text {
        font-size: 26px;
    }

    .marquee-star {
        font-size: 22px;
    }
}

/* ════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — prevent text overflow on tiny screens
════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .announcement-track span {
        font-size: 10px;
        letter-spacing: 0.3px;
        white-space: normal;
        text-align: center;
        padding: 4px 10px;
        line-height: 1.3;
    }
}

/* ════════════════════════════════════════════════════════
   STATS SECTION — extra small screens
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .stats-section {
        padding: 56px 12px 64px;
    }

    .stats-title-blue,
    .stats-title-dark {
        font-size: 22px;
    }

    .stat-box {
        padding: 18px 10px;
    }
}

/* ════════════════════════════════════════════════════════
   REVIEWS SECTION — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .reviews-section {
        padding: 44px 0 52px;
    }

    .reviews-heading {
        font-size: 20px;
        letter-spacing: -0.3px;
    }

    .reviews-subtext {
        font-size: 12px;
        line-height: 1.7;
    }

    .review-card {
        padding: 14px 14px 12px;
        gap: 8px;
    }

    .review-name {
        font-size: 12px;
    }

    .review-role {
        font-size: 10px;
    }

    .review-text {
        font-size: 11.5px;
        line-height: 1.6;
    }

    .trustpilot-logo {
        font-size: 10.5px;
    }

    .review-stars .star {
        font-size: 13px;
    }

    .review-avatar {
        width: 36px;
        height: 36px;
    }

    .review-avatar-initials {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    .reviews-heading {
        font-size: 18px;
    }

    .reviews-subtext {
        font-size: 11.5px;
    }

    .review-card {
        padding: 12px 12px 10px;
    }

    .review-name {
        font-size: 11.5px;
    }

    .review-text {
        font-size: 11px;
    }
}

/*════════════════════════════════════════════════════════
   PRICING SECTION — very small screens
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .pricing-section {
        padding: 56px 12px 64px;
    }

    .pricing-title {
        font-size: 18px;
    }

    .pricing-grid {
        max-width: 100%;
    }

    .pricing-card-inner {
        padding: 20px 16px 18px;
    }

    .pricing-card--featured .pricing-card-inner {
        padding-top: 28px;
    }

    .pricing-currency {
        font-size: 18px;
    }

    .pricing-amount {
        font-size: 38px;
    }

    .pricing-plan-name {
        font-size: 17px;
    }

    .pricing-features li {
        font-size: 12px;
    }
}

/* ════════════════════════════════════════════════════════
   FAQ BANNER — very small screens
════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
    .faq-outer {
        padding: 0 10px 0;
    }

    .faq-banner-inner {
        padding: 24px 20px 20px;
        max-width: 100%;
        text-align: center;
    }

    .faq-banner-content {
        align-items: center;
    }

    .faq-banner-title {
        font-size: 15px;
    }

    .faq-banner-desc {
        font-size: 12px;
        display: none;
    }

    .faq-banner-btn {
        white-space: nowrap;
        width: auto;
        height: 40px;
        padding: 0 20px;
        font-size: 10px;
    }
}

/* -- FAQ Banner Image -- 420px -- */
@media (max-width: 420px) {
    .faq-banner-image {
        position: relative;
        width: 100%;
        right: auto;
        bottom: auto;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        pointer-events: none;
    }

    .faq-banner-image img {
        width: 55%;
        max-width: 200px;
        height: auto;
        object-fit: contain;
        object-position: bottom center;
    }
}

/* ════════════════════════════════════════════════════════
   FOOTER — polish on extra small screens
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .footer-bottom {
        text-align: center;
        justify-items: center;
    }

    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .footer-copy {
        font-size: 9px;
    }

    .footer-links a {
        font-size: 9px;
    }

    .footer-payments img {
        height: 14px;
    }
}

@media (max-width: 380px) {
    .footer-top {
        gap: 14px;
    }

    .footer-top-item h6 {
        font-size: 12px;
    }

    .footer-top-item p {
        font-size: 9px;
    }

    .footer-col h5 {
        font-size: 14px;
    }
}

/* ════════════════════════════════════════════════════════
   CONTACT PAGE — very small screens
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .contact-heading {
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    .contact-page {
        padding: 36px 4% 52px;
    }

    .contact-heading-wrap {
        margin-bottom: 22px;
    }

    .contact-subtext {
        font-size: 12px;
    }

    .contact-info-card {
        padding: 18px 12px 16px;
        gap: 12px;
    }

    .contact-info-title {
        font-size: 13px;
    }

    .contact-info-icon {
        width: 26px;
        height: 26px;
    }

    .contact-info-icon svg {
        width: 11px;
        height: 11px;
    }

    .contact-info-list {
        gap: 10px;
    }

    .contact-info-value {
        font-size: 11px;
    }

    .contact-input,
    .contact-select,
    .contact-textarea {
        padding: 9px 11px;
        font-size: 11.5px;
    }

    .contact-checkbox-text {
        font-size: 10px;
    }
}

/* ════════════════════════════════════════════════════════
   DISCUSS BANNER (db-) — very small
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .db-section {
        height: auto;
        padding: 0 12px 40px;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .db-container {
        width: 100%;
        /* min-height: auto; */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        overflow: visible;
        position: relative;
        z-index: 2;
        height: auto;
    }

    .db-left {
        width: 100%;
        padding: 28px 18px 22px;
        text-align: center;
        position: relative;
        z-index: 3;
    }

    .db-title {
        font-size: 20px;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .db-desc {
        font-size: 12px;
        line-height: 1.5;
        max-width: 290px;
        margin: 0 auto 14px;
    }

    .db-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        position: relative;
        z-index: 4;
    }

    .db-call {
        font-size: 12px;
        margin: 0;
        position: relative;
        z-index: 4;
    }

    .db-right {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;

        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        margin-top: -38px;
        z-index: 1;
        pointer-events: none;
    }

    .db-image {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;

        width: 270px;
        max-width: 92%;
        height: auto;
        display: block;
        object-fit: contain;
        margin: 0 auto;
        margin-top: 38px;
        border-radius: 10px;
    }
}

/* ════════════════════════════════════════════════════════
   SERVICES PLAN (sp-) — center grid on mobile
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .sp-grid {
        justify-items: center;
        margin: 0 auto;
    }
}

/* ════════════════════════════════════════════════════════
   BUILD METHOD (bm-) — container width on small screens
════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    .bm-container {
        max-width: 95%;
    }
}

/* ════════════════════════════════════════════════════════
   HDBW + PD-CS SECTIONS (package discuss)
════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .hdbw-section {
        padding: 60px 14px 70px;
    }

    .pd-cs-section {
        padding: 60px 14px 70px;
    }
}

@media (max-width: 480px) {
    .pd-cs-grid {
        gap: 14px;
    }

    .pd-cs-stat-number {
        font-size: 28px;
    }
}

/* ════════════════════════════════════════════════════════
   ABOUT MISSION — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .about-stat-number {
        font-size: 30px;
    }

    .about-section-title {
        font-size: 24px;
    }

    .about-mission {
        padding: 60px 5%;
    }

    .about-values {
        padding: 60px 5%;
    }

    .about-cta-title {
        font-size: 24px;
    }
}

/* ════════════════════════════════════════════════════════
   OUR JOURNEY (about page) — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .our-journey-title {
        font-size: 24px;
        margin-bottom: 36px;
    }

    .our-journey {
        padding: 70px 4% 80px;
    }

    .oj-row {
        gap: 10px;
        padding: 20px 0;
    }

    .oj-row--left {
        grid-template-columns: 1fr 44px;
    }

    .oj-row--right {
        grid-template-columns: 44px 1fr;
    }

    .oj-btn {
        width: 44px;
        height: 44px;
        font-size: 12px;
    }

    .oj-card {
        padding: 12px 14px;
        margin: 8px 0;
    }

    .oj-card-title {
        font-size: 15px;
    }

    .oj-card-text {
        font-size: 13px;
    }
}

/* ════════════════════════════════════════════════════════
   PROCESS STEPS — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .step-circle {
        width: 200px;
        height: 200px;
        padding: 60px 20px 20px;
    }

    .process-section {
        padding: 28px 0 60px;
    }
}

/* ════════════════════════════════════════════════════════
   SC-STATS SECTION (service-client) — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .sc-stats-section {
        padding: 18px 10px 22px;
    }

    .sc-stat-number {
        font-size: 22px;
    }
}

/* ════════════════════════════════════════════════════════
   PACKAGE HERO STAGE — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .pkg-hero-img-card {
        width: 100px !important;
        height: 100px !important;
    }
}

/* ════════════════════════════════════════════════════════
   HEADER LOGO — prevent overflow on tiny screens
════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .header-logo img,
    .about-header-logo img {
        width: 130px;
        height: auto;
    }
}

/* ════════════════════════════════════════════════════════
   MISSION & VISION CARDS — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .mv-section {
        padding: 56px 4% 64px;
    }

    .mv-title {
        font-size: 16px;
    }

    .mv-text {
        font-size: 12px;
    }
}

/* ════════════════════════════════════════════════════════
   WEBSITE HERO STRIP (wave section) — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .website-hero-strip {
        height: 260px;
    }

    .hero-content h1 {
        font-size: 22px;
    }
}

@media (max-width: 400px) {
    .hero-content {
        margin-top: 20px;
    }

    .hero-icon-box,
    .hero-icon {
        width: 80px;
        height: 80px;
    }

    .hero-content h1 {
        font-size: 17px;
        padding: 0 12px;
    }

    .hero-content p {
        font-size: 10px;
        padding: 0 12px;
    }

    .hero-btn {
        width: 120px;
        height: 24px;
        font-size: 9px;
    }
}

/* ════════════════════════════════════════════════════════
   TRUST BADGES SECTION — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .trust-heading {
        font-size: 20px;
    }

    .trust-section {
        padding: 56px 0 64px;
    }
}

/* ════════════════════════════════════════════════════════
   JOURNEY STRIP — extra small
════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .journey-item {
        font-size: 18px;
    }

    .journey-track {
        gap: 24px;
    }
}

/* ════════════════════════════════════════════════════════
   SERVICES PLAN — title + subtitle responsive
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .sp-title {
        font-size: 24px;
    }

    .sp-subtitle {
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .sp-title {
        font-size: 20px;
    }
}

/* ════════════════════════════════════════════════════════
   SERVICE HERO HIGHLIGHT — extra small fix
════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .service-hero-title {
        font-size: 24px;
    }
    .service-hero-highlight {
        font-size: 20px;
        white-space: nowrap;
        overflow-wrap: normal;
    }
    
}

/* ════════════════════════════════════════════════════════
   WHY SECTION — centre cards on mobile
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .why-grid {
        justify-items: center;
    }
}

/* ════════════════════════════════════════════════════════
   GENERAL SECTION PADDING — ensure breathing room
   on all sections at 480px and below
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .stats-section,
    .trust-section,
    .process-section,
    .reviews-section,
    .faq-section {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ════════════════════════════════════════════════════════
   PRICING GRID — full-width on mobile
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .pricing-grid {
        max-width: 100%;
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════
   ABOUT HEADER LOGO — fix relative positioning on mobile
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .about-header-logo img {
        left: 0;
    }
}

/* ════════════════════════════════════════════════════════
   SP GRID — full width on mobile (override max-width: 420px)
════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   TOAST NOTIFICATION
═══════════════════════════════════════════ */
.toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0a0a0a;
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 600;
    padding: 16px 22px;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    pointer-events: none;
}

.toast.toast--show {
    opacity: 1;
    transform: translateY(0);
}

.toast-icon {
    width: 20px;
    height: 20px;
    background: #048ef7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-icon svg {
    width: 12px;
    height: 12px;
    fill: #ffffff;
}

@media (max-width: 480px) {
    .toast {
        bottom: 20px;
        right: 16px;
        left: 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .sp-grid {
        max-width: 100%;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════
   WEBSITE DEVELOPMENT BANNER — wd- prefix
═══════════════════════════════════════════════════════ */

/* ── Blue portfolio banner header ── */
.wd-portfolio-banner {
    width: 100%;
    background: linear-gradient(90deg, #048ef7 0%, #001c4e 100%);
    padding: 60px 20px 50px;
    text-align: center;
}

.wd-portfolio-banner-inner {
    max-width: 1193px;
    margin: 0 auto;
}

.wd-portfolio-banner-title {
    font-family: "Montserrat";
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 28px;
}

.wd-portfolio-filters {
    justify-content: center;
}

/* ── Scrolling image rows (live inside .wd-portfolio-banner) ── */
.wd-portfolio-banner {
    overflow: hidden;
}

.wd-scroll-row {
    overflow: hidden;
    margin-top: 16px;
}

.wd-scroll-track {
    display: flex;
    width: max-content;
    animation: wdScrollLeft 30s linear infinite;
}

.wd-scroll-row--rtl .wd-scroll-track {
    animation: wdScrollRight 30s linear infinite;
}

.wd-scroll-item {
    width: 380px;
    height: 240px;
    margin-right: 16px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.wd-scroll-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 9 items × 396px = 3564px track; -33.33% = -1188px = one set */
@keyframes wdScrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.33%);
    }
}

@keyframes wdScrollRight {
    0% {
        transform: translateX(-33.33%);
    }
    100% {
        transform: translateX(0);
    }
}

/* ── Bottom row (cards 4 & 5): reverse hover — 4=blue, 5=dark ── */
.wd-process-row--center .bm-card:nth-child(odd) {
    border: 2.5px solid rgba(4, 142, 247, 0.35);
}
.wd-process-row--center .bm-card:nth-child(even) {
    border: 2.5px solid rgba(0, 0, 0, 0.15);
}
.wd-process-row--center .bm-card:nth-child(odd):hover {
    background: #048ef7;
    border-color: #048ef7;
    box-shadow: 0 16px 40px rgba(4, 142, 247, 0.3);
}
.wd-process-row--center .bm-card:nth-child(odd):hover .bm-badge--blue {
    background: #ffffff;
    color: #048ef7;
}
.wd-process-row--center .bm-card:nth-child(odd):hover .bm-card-title,
.wd-process-row--center .bm-card:nth-child(odd):hover .bm-card-desc {
    color: #ffffff;
}
.wd-process-row--center .bm-card:nth-child(even):hover {
    background: #111111;
    border-color: #111111;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
.wd-process-row--center .bm-card:nth-child(even):hover .bm-badge--dark {
    background: #ffffff;
    color: #111111;
}
.wd-process-row--center .bm-card:nth-child(even):hover .bm-card-title,
.wd-process-row--center .bm-card:nth-child(even):hover .bm-card-desc {
    color: #ffffff;
}

/* ── Process section layout (5 steps: 3 + 2 centered) ── */
.wd-process-title {
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    color: #0a0a0a;
    margin-bottom: 48px;
    line-height: 1.25;
}

.wd-process-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.wd-process-row:last-child {
    margin-bottom: 0;
}

.wd-process-row .bm-card {
    flex: 0 0 calc(33.33% - 16px);
    max-width: calc(33.33% - 16px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .wd-portfolio-banner-title {
        font-size: 28px;
    }

    .wd-scroll-item {
        width: 300px;
        height: 190px;
    }

    .wd-process-row .bm-card {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 560px) {
    .wd-portfolio-banner-title {
        font-size: 22px;
    }

    .wd-scroll-item {
        width: 220px;
        height: 145px;
    }

    .wd-process-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .wd-process-row {
        flex-wrap: wrap;
    }

    .wd-process-row .bm-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Brand Logo Scroll (logo-branding-banner) ── */
.wd-logo-scroll-row {
    overflow: hidden;
    margin-top: 16px;
}

.wd-logo-scroll-track {
    display: flex;
    width: max-content;
    animation: wdLogoScrollLeft 40s linear infinite;
}

@keyframes wdLogoScrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.wd-logo-scroll-item {
    width: 180px;
    height: 80px;
    margin-right: 24px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    /* background: #fff; */
    display: flex;

    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.wd-logo-scroll-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 900px) {
    .wd-logo-scroll-item {
        width: 140px;
        height: 64px;
    }
}

@media (max-width: 560px) {
    .wd-logo-scroll-item {
        width: 110px;
        height: 52px;
        margin-right: 16px;
    }
}

/* ══════════════════════════════════════════════════════
   PROJECT DISCUSS BANNER — project- prefix
══════════════════════════════════════════════════════ */

.project-section {
    width: 100%;
    padding: 48px 24px;
    position: relative;
}

.project-container {
    max-width: 1300px;
    margin: 0 auto;
    background: #048ef7;
    border-radius: 10px;
    padding: 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    height: 280px;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    min-height: 220px;
}

.project-left {
    flex: 1;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 0;
}

.project-title {
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.project-desc {
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 0;
    max-width: 400px;
}

.project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111111;
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 3px;
    width: fit-content;
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.project-btn:hover {
    background: #2a2a2a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.project-call {
    font-family: "Montserrat";
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.project-call-link {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.project-call-link:hover {
    text-decoration: underline;
}

.project-right {
    position: absolute;
    right: -130px;
    top: -4px;
    /* bottom: 48px; */
    width: 480px;
    pointer-events: none;
}

.project-image {
    position: absolute;
    /* bottom: -70px; */
    /* right: -102px; */
    /* height: calc(100% + 60px); */
    left: 10px;
    top: 20px;
    height: 245px;
    border-radius: 4px;
    width: auto;
    max-width: 560px;
    object-fit: contain;
    object-position: bottom right;
}

@media (max-width: 960px) {
    .project-section {
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
    }

    .project-container {
        flex-direction: column;
        align-items: stretch;
        padding: 44px 32px 24px;
        gap: 0;
        height: auto;
        min-height: unset;
    }

    .project-left {
        padding-bottom: 16px;
    }

    .project-right {
        position: static;
        width: 100%;
        height: 260px;
    }

    .project-image {
        position: static;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }
}

@media (max-width: 520px) {
    .project-title {
        font-size: 24px;
    }

    .project-right {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .project-container {
        padding: 24px 20px 16px;
        gap: 12px;
    }

    .project-title {
        font-size: 22px;
    }

    .project-right {
        padding: 0 20px 20px;
    }
}

@media (max-width: 380px) {
    .project-container {
        padding: 20px 16px 14px;
        gap: 10px;
        width: auto;
        margin: auto;
    }

    .project-title {
        font-size: 19px;
    }

    /* .project-right {
        position: relative;
        height: 220px;
        padding: 0 16px 0;
    } */

    .project-image {
        position: absolute;

        /* right: 16px;  */
        top: 290px;
        width: 235px;
        /* right: 160px; */

        height: auto;
        /* width: calc(100% - 32px); */
        object-fit: contain;
        object-position: bottom center;
    }
}

/* ══════════════════════════════════════════════════════════
   WEBSITE DEVELOPMENT HERO — each element has its own class
══════════════════════════════════════════════════════════ */

/* Section wrapper */
.wd-hero-section {
    width: 100%;
    background: #000000;
    border-radius: 48px 48px 0 0;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 6% 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Inner content grid */
.wd-hero-content {
    /* max-width: 960px; */
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: start;
    row-gap: 44px;
}

/* Main heading */
.wd-hero-title {
    font-family: "Montserrat";
    font-weight: 800;
    font-size: 54px;
    line-height: 1.15;
    letter-spacing: -0.04em;
    text-align: center;
    color: #ffffff;
    margin: 0;
}

/* Gradient first line */
.wd-hero-highlight {
    display: block;
    font-family: "Montserrat";
    font-weight: 800;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    background: linear-gradient(90deg, #4333ff 0%, #048ef7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
}

/* Arrow + button column: button on top, arrow below */
.wd-hero-cta-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* border: 2px solid red; */
    margin-left: -90px;
}

/* Decorative arrow — small, below button */
.wd-hero-arrow,
.website-development-hero-arrow {
    width: 160px;
    /* height: auto; */
    /* flex-shrink: 0; */
    margin-left: -430px;
    margin-top: -45px;
    display: block;
  
}

/* Centre mockup image */
.wd-mockup-img {
    width: 60px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    flex-shrink: 0;
}

/* CTA button */
.wd-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 279px;
    height: 50px;
    border-radius: 3px;
    padding: 16px 36px;
    gap: 6.4px;
    background: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #048ef7;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
    animation: btn-blue-glow 1.6s ease-in-out infinite;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.25s ease;
}

.wd-hero-btn:hover {
    background: #ffffff;
    color: #048ef7;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 1100px) {
    .wd-hero-title {
        font-size: 44px;
    }
}

@media (max-width: 900px) {
    .wd-hero-title {
        font-size: 36px;
    }
    .wd-mockup-img {
        width: 200px;
    }
}
/* MOBILE ONLY FIX */
@media (max-width: 768px) {

    .wd-hero-section {
        padding: 48px 5% 42px;
        min-height: auto;
        overflow: hidden;
    }

    .wd-hero-content {
        row-gap: 22px;
        justify-items: center;
        align-items: center;
    }

    .wd-hero-title {
        font-size: 26px;
        line-height: 1.18;
        /* letter-spacing: -0.02em; */
        text-align: center;
        max-width: 100%;
    }

    .wd-hero-highlight {
        margin-bottom: 4px;
    }

    .wd-hero-cta-row {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-left: -50px;
        
    }

    .wd-hero-btn {
        width: 180px;
        height: 42px;
        padding: 10px 18px;
        font-size: 12px;
        white-space: nowrap;
    }

    .wd-hero-arrow,
    .website-development-hero-arrow {
        display: block;
        width: 90px;
        height: auto;
        margin-left: 0;
        margin-top: 0;
        transform: rotate(-12deg);
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {

    .wd-hero-section {
        padding: 42px 5% 36px;
    }

    .wd-hero-title {
        font-size: 20px;
        line-height: 1.2;
    }

    .wd-hero-content {
        row-gap: 18px;
    }

    .wd-hero-btn {
        width: 170px;
        height: 40px;
        font-size: 11px;
    }

    .wd-hero-arrow,
    .website-development-hero-arrow {
        width: 80px;
          /* border: 2px solid red; */
        margin-left: -220px;
        margin-top: -20px;
    }
}

@media (max-width: 370px) {

    .wd-hero-title {
        font-size: 21px;
    }

    .wd-hero-btn {
        width: 160px;
        height: 38px;
        font-size: 10.5px;
    }

    .wd-hero-arrow,
    .website-development-hero-arrow {
        width: 75px;
        margin-left: 0;
        margin-top: 0;
    }
}

/* ═══════════════════════════════════════════════════
   OUR WORK — 3-CARD SECTION
═══════════════════════════════════════════════════ */
.ow-cards-section {
    width: 100%;
    background: #ffffff;
    padding: 60px 0 80px;
}

.ow-cards-wrapper {
    display: flex;
    gap: 20px;
    width: 92%;
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Individual card ── */
.ow-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 0;
    min-height: 500px;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ow-card:hover {
    background: #000000;
    border-color: #000000;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

/* ── Top row: tag + arrow ── */
.ow-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 3;
}

.ow-tag {
    display: inline-block;
    border: 1.5px solid rgba(0,0,0,0.22);
    color: #1a1a2e;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.ow-arrow-btn {
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(0,0,0,0.22);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;

    font-size: 18px;
    text-decoration: none;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.ow-arrow-btn:hover {
    background: rgba(4,142,247,0.08);
    border-color: #048ef7;
    color: #048ef7;
}

/* ── Ghost background text ── */
.ow-ghost-text {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%) scale(0.7);
    font-size: clamp(26px, 3.2vw, 44px);
    font-weight: 900;
    line-height: 1.1;
    color: rgba(4, 142, 247, 0.22);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), opacity 0.8s ease;
    letter-spacing: -2px;
}

/* ── Mockup image ── */
.ow-mockup {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 16px;
}

.ow-mockup img {
    width: 100%;
    max-width: 340px;
    display: block;
    object-fit: contain;
}

/* ── Bottom text ── */
.ow-card-bottom {
    position: relative;
    z-index: 3;
    padding: 20px 0 28px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
}

.ow-card-title {
    color: #1a1a2e;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.ow-card-desc {
    color: rgba(26,26,46,0.6);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s ease;
}

/* ── Triggered state on scroll (ghost text only) ── */
.ow-card--visible .ow-ghost-text {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* ── Bottom text slides in on hover ── */
.ow-card:hover .ow-card-bottom {
    transform: translateY(0);
    opacity: 1;
}

.ow-card:hover .ow-card-title {
    color: #ffffff;
}

.ow-card:hover .ow-card-desc {
    color: rgba(255,255,255,0.65);
}

.ow-card:hover .ow-tag {
    color: #ffffff;
    border-color: rgba(255,255,255,0.45);
}

.ow-card:hover .ow-arrow-btn {
    color: #ffffff;
    border-color: rgba(255,255,255,0.45);
}

/* ── Stagger ghost text only ── */
.ow-card:nth-child(2) .ow-ghost-text { transition-delay: 0.1s; }
.ow-card:nth-child(3) .ow-ghost-text { transition-delay: 0.2s; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .ow-cards-wrapper {
        flex-direction: column;
        width: 92%;
    }

    .ow-card {
        min-height: 400px;
    }

    .ow-ghost-text {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .ow-cards-section {
        padding: 40px 0 60px;
    }

    .ow-card {
        min-height: 340px;
        padding: 22px 18px 0;
    }

    .ow-card-title {
        font-size: 16px;
    }

    .ow-card-desc {
        font-size: 12.5px;
    }
}