@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--navy:#0b2852;--blue:#1468d7;--orange:#ff8a18;--ink:#10284d;--muted:#63748e;--line:#dce7f5;--bg:#f7fbff;--white:#fff;--shadow:0 18px 55px rgba(23,65,125,.13);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}a{text-decoration:none;color:inherit}.container{width:min(1360px,102%);margin:auto}.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(220,231,245,.8)}.brand{display:flex;align-items:center;gap:10px;color:var(--navy)}.brand-mark{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy),#164d9b);color:#fff;font-weight:800;font-size:21px;box-shadow:0 8px 22px rgba(11,40,82,.2)}.brand b{display:block;font:700 20px 'Space Grotesk'}.brand small{display:block;font-size:14px;letter-spacing:1px;color:#75849a;text-transform:uppercase}.main-nav{display:flex;align-items:center;gap:25px;font-size:16px;font-weight:700}.main-nav a{padding:28px 0;position:relative}.main-nav a.active,.main-nav a:hover{color:var(--orange)}.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:2px;background:var(--orange);border-radius:10px}.main-nav .nav-cta{padding:12px 17px;background:#183b56;color:#fff;border-radius:30px;box-shadow:0 10px 22px rgba(255,138,24,.24)}.main-nav .nav-cta:after{display:none}.nav-toggle{display:none;border:0;background:none;font-size:25px;color:var(--navy)}
.hero{position:relative;overflow:hidden;padding:70px 0 80px;background:radial-gradient(circle at 78% 42%,#e7f4ff 0,transparent 30%),linear-gradient(135deg,#fff 0,#f4faff 100%)}.hero:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-200px;top:-260px;background:radial-gradient(circle,#d8edff,transparent 65%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:35px;align-items:center}.eyebrow{display:inline-flex;gap:8px;align-items:center;background:#fff0df;color:#b65b00;padding:8px 14px;border-radius:30px;font-size:14px;font-weight:800;margin-bottom:18px}.eyebrow:before{content:"✦";color:var(--orange)}h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.12;margin:0 0 16px}h1{font-size:clamp(40px,5vw,68px);letter-spacing:-2.5px}h1 span,.accent{color:var(--orange)}.lead{font-size:17px;color:var(--muted);max-width:600px}.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 21px;border-radius:14px;font-weight:800;font-size:18px;border:1px solid transparent;transition:.25s}.btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 24px rgba(255,138,24,.22)}.btn-outline{background:#fff;border-color:#b9cce4;color:var(--navy)}.btn:hover{transform:translateY(-3px)}.hero-actions{display:flex;gap:12px;margin:25px 0 30px}.hero-points{display:flex;gap:22px;flex-wrap:wrap}.point{display:flex;gap:8px;align-items:center;font-size:18px;font-weight:800}.point i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff2e2;color:var(--orange);font-style:normal}.scene-wrap{min-height:480px;display:grid;place-items:center;perspective:1200px;position:relative}.scene{width:410px;height:410px;position:relative;transform-style:preserve-3d;transition:transform .08s linear;cursor:grab}.scene:active{cursor:grabbing}.platform{position:absolute;left:50%;top:68%;transform:translate(-50%,-50%) rotateX(70deg);width:370px;height:190px;border-radius:50%;background:linear-gradient(180deg,#fff,#d8eaff);border:2px solid #b8d6fa;box-shadow:0 35px 70px rgba(24,94,173,.25),inset 0 0 35px #fff}.platform:after{content:"";position:absolute;inset:28px;border:2px solid #ffb25e;border-radius:50%;box-shadow:0 0 30px rgba(255,138,24,.45)}.laptop,.target,.float-card,.social-orb{position:absolute;transform-style:preserve-3d}.laptop{width:230px;height:145px;left:87px;top:105px;border:10px solid #163e70;border-radius:15px;background:linear-gradient(145deg,#fff,#d8efff);box-shadow:0 18px 35px rgba(12,54,103,.2);transform:translateZ(50px) rotateX(2deg)}.laptop:after{content:"↗";font-size:80px;font-weight:900;color:var(--orange);position:absolute;right:25px;bottom:20px}.laptop:before{content:"";position:absolute;left:20px;right:20px;top:20px;height:12px;background:#c3e0ff;box-shadow:0 24px 0 #77b5ff,0 48px 0 #d1e8ff;border-radius:5px}.target{width:100px;height:100px;border-radius:50%;right:40px;bottom:85px;background:radial-gradient(circle,#ff8a18 0 17%,#fff 18% 31%,#ff8a18 32% 46%,#fff 47% 62%,#ff8a18 63%);box-shadow:0 12px 30px rgba(255,138,24,.28);transform:translateZ(105px)}.float-card{background:rgba(255,255,255,.88);border:1px solid #cfe0f5;border-radius:17px;padding:14px 16px;box-shadow:0 18px 35px rgba(19,68,130,.14);font-size:16px;font-weight:800}.float-card strong{display:block;font-size:24px;color:var(--blue)}.fc1{left:5px;top:120px;transform:translateZ(85px) rotateY(8deg)}.fc2{right:-5px;top:35px;transform:translateZ(70px) rotateY(-8deg)}.fc3{left:45px;bottom:40px;transform:translateZ(90px)}.social-orb{width:55px;height:55px;border-radius:18px;display:grid;place-items:center;background:#fff;border:1px solid #cce0fa;box-shadow:0 12px 25px rgba(30,78,130,.15);font-weight:900;color:var(--orange);transform:translateZ(115px)}.so1{right:60px;top:160px}.so2{left:75px;top:45px}.drag-hint{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:16px;color:#58708e;font-weight:800}
.section{padding:55px 0}.section-head{text-align:center;max-width:900px;margin:0 auto 35px}.section-head h2{font-size:40px}.section-head p{color:var(--muted)}.light{background:#fff}.service-scroller{position:relative}.cards-track{display:flex;gap:16px;overflow:auto;scroll-behavior:smooth;padding:10px 3px 20px;cursor:grab;scrollbar-width:none}.cards-track::-webkit-scrollbar{display:none}.service-card{flex:0 0 210px;min-height:345px;padding:22px;border:1px solid #d9e6f5;border-radius:22px;background:linear-gradient(145deg,#fff,#f4f9ff);box-shadow:0 10px 30px rgba(32,78,135,.08);transition:.3s;position:relative;overflow:hidden}.service-card:before{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:#e7f4ff;right:-40px;top:-40px}.service-card:hover{transform:translateY(-10px) rotateX(2deg);box-shadow:0 22px 45px rgba(22,83,154,.16);border-color:#ffbd76}.service-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#e6f4ff);font-size:29px;margin-bottom:20px;box-shadow:inset 0 0 0 1px #d7e7fa}.service-card h3{font-size:17px}.service-card p{font-size:12px;color:var(--muted)}.learn{color:var(--orange);font-weight:800;font-size:14px}.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid #c9dbef;background:#fff;z-index:2;box-shadow:0 8px 22px rgba(20,61,110,.1);cursor:pointer}.scroll-btn.left{left:-20px}.scroll-btn.right{right:-20px}.why{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.analytics-scene{min-height:420px;background:linear-gradient(145deg,#eef8ff,#fff);border-radius:35px;position:relative;overflow:hidden;display:grid;place-items:center}.phone{width:175px;height:335px;border-radius:30px;background:#0d315f;border:8px solid #fff;box-shadow:0 30px 55px rgba(16,56,103,.28);transform:rotate(-8deg);position:relative;z-index:2;padding:35px 18px;color:#fff}.phone:before{content:"";position:absolute;top:10px;left:50%;width:65px;height:5px;border-radius:8px;background:#56749a;transform:translateX(-50%)}.chart{height:130px;margin-top:25px;border-bottom:2px solid #8bb7ea;position:relative;background:linear-gradient(transparent 96%,rgba(255,255,255,.2) 96%);overflow:hidden}.chart:after{content:"";position:absolute;left:5px;right:5px;bottom:20px;height:75px;border-top:5px solid var(--orange);transform:skewY(-20deg)}.metric{position:absolute;padding:15px 18px;background:rgba(255,255,255,.94);border:1px solid #d5e5f6;border-radius:17px;box-shadow:0 15px 35px rgba(29,73,123,.14);font-size:14px;font-weight:700}.metric b{display:block;font-size:26px;color:var(--blue)}.m1{left:9%;top:23%}.m2{right:8%;top:31%}.m3{right:10%;bottom:15%}.why-copy h2{font-size:40px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}.check{display:flex;gap:9px;font-size:14px;font-weight:700}.check span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e9f6ff;color:var(--blue)}.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #dce8f5;border-radius:22px;box-shadow:var(--shadow);padding:22px;margin-top:-25px;position:relative;z-index:3}.stat{text-align:center;border-right:1px solid #e2eaf4}.stat:last-child{border:0}.stat b{display:block;font:700 30px 'Space Grotesk';color:var(--navy)}.stat span{font-size:14px;color:var(--muted)}.logos{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#6f86a4;font-weight:900;font-size:18px}.cta-band{margin:65px 0 0;background:linear-gradient(120deg,#082958,#164c8f);color:#fff;padding:35px;border-radius:28px;position:relative;overflow:hidden}.cta-band:after{content:"";position:absolute;width:380px;height:380px;border:2px solid rgba(255,138,24,.45);border-radius:50%;right:-130px;top:-220px}.cta-band-inner{display:flex;justify-content:space-between;gap:20px;align-items:center;position:relative;z-index:1}.cta-band p{margin:5px 0 0;color:#bdd0e9;font-size:16px}.page-hero{padding:70px 0;background:linear-gradient(135deg,#f4faff,#fff);border-bottom:1px solid #e4edf7}.page-hero h1{font-size:50px}.breadcrumbs{font-size:14px;color:#70839d;margin-bottom:14px}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-box,.portfolio-card,.blog-card,.contact-card,.faq-item{background:#fff;border:1px solid #dbe7f4;border-radius:22px;box-shadow: 2px 2px 10px 2px;padding:24px}.feature-box h3,.portfolio-card h3,.blog-card h3{font-size:20px}.feature-box p,.portfolio-card p,.blog-card p{font-size:16px;color:var(--muted)}.portfolio-card{padding:0;overflow:hidden}.project-visual{height:180px;background:linear-gradient(145deg,#dcefff,#fff0df);display:grid;place-items:center;font-size:58px}.portfolio-body{padding:20px}.tag{display:inline-block;background:#eef6ff;color:#2863a8;border-radius:30px;padding:5px 9px;font-size:14px;font-weight:800;margin:3px}.blog-card{padding:0;overflow:hidden}.blog-img{height:150px;background:linear-gradient(135deg,#dff2ff,#fff0df);display:grid;place-items:center;font-size:45px}.blog-body{padding:20px}.blog-meta{font-size:14px;color:#8494a9}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:25px}.contact-card h2{font-size:30px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-group{display:flex;flex-direction:column;gap:7px}.form-group.full{grid-column:1/-1}.form-group label{font-size:14px;font-weight:800}.form-group input,.form-group select,.form-group textarea{border:1px solid #d5e3f1;border-radius:12px;padding:13px 14px;font:inherit;outline:none;background:#fbfdff}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#74a7e3;box-shadow:0 0 0 4px #eaf4ff}.form-group textarea{min-height:130px;resize:vertical}.notice{padding:13px 16px;border-radius:12px;margin-bottom:16px;background:#edf9f1;color:#18743b;font-size:14px;font-weight:700}.site-footer{background:#071f40;color:#d9e7f7;margin-top:0;padding:55px 0 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:35px}.footer-brand{color:#fff}.footer-grid p,.footer-grid span{font-size:14px;color:#98afc9}.footer-grid h4{color:#fff;font-size:16px}.footer-grid>div>a:not(.brand){display:block;font-size:14px;color:#a9bdd3;margin:9px 0}.footer-grid>div>a:hover{color:#ff9b36}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 4%;font-size:14px;color:#829bb7;text-align:center}.footer-bottom a{color:#ff9b36}.faq-list{max-width:850px;margin:auto}.faq-item{margin-bottom:12px}.faq-q{display:flex;justify-content:space-between;gap:15px;font-weight:800;cursor:pointer}.faq-a{display:none;color:var(--muted);font-size:16px;padding-top:12px}.faq-item.open .faq-a{display:block}.faq-item.open .faq-q span{transform:rotate(45deg)}.faq-q span{transition:.2s;color:var(--orange);font-size:22px}
@media(max-width:900px){.main-nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:10px 5%;box-shadow:0 20px 30px rgba(20,50,90,.1)}.main-nav.open{display:flex}.main-nav a{padding:12px;width:100%}.main-nav a.active:after{bottom:5px}.nav-toggle{display:block}.hero-grid,.why,.contact-grid{grid-template-columns:1fr}.scene-wrap{min-height:410px}.content-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr;gap:20px}.stat:nth-child(2){border:0}}@media(max-width:600px){h1{font-size:43px}.hero{padding-top:45px}.scene{transform:scale(.8)}.content-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-group.full{grid-column:auto}.stats{grid-template-columns:1fr 1fr}.stat{border:0}.page-hero h1{font-size:40px}.checks{grid-template-columns:1fr}.scroll-btn{display:none}.cta-band-inner{flex-direction:column;align-items:flex-start}}

/* =========================================================
   PREMIUM SERVICE CARDS
   DARK GLASS / NAVY / ORANGE
========================================================= */

.service-scroller {
    position: relative;
    width: 100%;
    padding: 12px 8px 30px;
}

/* SERVICE TRACK */
.cards-track {
    display: flex;
    gap: 22px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    padding: 12px 5px 30px;

    scrollbar-width: none;
    -ms-overflow-style: none;

    cursor: grab;
}

.cards-track::-webkit-scrollbar {
    display: none;
}

.cards-track:active {
    cursor: grabbing;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {

    flex: 0 0 calc((100% - 66px) / 4);
    min-width: calc((100% - 66px) / 4);

    min-height: 350px;

    padding: 27px 24px;

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    /*
       DARK PREMIUM BACKGROUND
    */
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(255,181,54,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(50,130,255,.16),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #102d52 0%,
            #0a203d 55%,
            #071a32 100%
        );

    /*
       STRONG VISIBLE BORDER
    */
    border: 1px solid rgba(126,177,232,.28);

    /*
       DEPTH
    */
    box-shadow:
        0 18px 35px rgba(5,24,49,.20),
        inset 0 1px 0 rgba(255,255,255,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    scroll-snap-align: start;

    box-sizing: border-box;
}


/* =========================================================
   TOP GLOW
========================================================= */

.service-card::before {

    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -75px;
    top: -75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,181,54,.24),
            rgba(255,181,54,.06) 45%,
            transparent 70%
        );

    filter: blur(2px);

    transition: .4s ease;

    pointer-events: none;
}


/* =========================================================
   BOTTOM BLUE GLOW
========================================================= */

.service-card::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 100px;

    left: -80px;
    bottom: -70px;

    border-radius: 50%;

    background: rgba(45,129,255,.20);

    filter: blur(30px);

    transition: .4s ease;

    pointer-events: none;
}


/* =========================================================
   HOVER
========================================================= */

.service-card:hover {

    transform: translateY(-12px);

    border-color: rgba(255,181,54,.70);

    box-shadow:
        0 28px 55px rgba(4,25,52,.32),
        0 0 35px rgba(255,181,54,.08),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.service-card:hover::before {

    transform: scale(1.35);

    background:
        radial-gradient(
            circle,
            rgba(255,181,54,.32),
            rgba(255,181,54,.08) 45%,
            transparent 70%
        );
}

.service-card:hover::after {

    transform: scale(1.5);

    background: rgba(45,129,255,.28);
}


/* =========================================================
   CARD ICON
========================================================= */

.service-icon {

    width: 62px;
    height: 62px;

    border-radius: 19px;

    display: grid;
    place-items: center;

    font-size: 28px;

    margin-bottom: 24px;

    position: relative;
    z-index: 2;

    /*
       ORANGE PREMIUM ICON
    */
    background:
        linear-gradient(
            145deg,
            #ffbf55,
            #ff9d18
        );

    color: #10294a;

    border: 1px solid rgba(255,255,255,.35);

    box-shadow:
        0 12px 25px rgba(255,157,24,.22),
        inset 0 1px 0 rgba(255,255,255,.45);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.service-card:hover .service-icon {

    transform:
        translateY(-4px)
        rotate(-3deg)
        scale(1.08);

    box-shadow:
        0 16px 32px rgba(255,157,24,.34),
        0 0 22px rgba(255,181,54,.16),
        inset 0 1px 0 rgba(255,255,255,.55);
}


/* =========================================================
   CARD TITLE
========================================================= */

.service-card h3 {

    margin: 0 0 12px;

    font-size: 20px;

    line-height: 1.4;

    color: #ffffff;

    font-weight: 800;

    position: relative;
    z-index: 2;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.service-card p {

    margin: 0 0 22px;

    font-size: 14px;

    line-height: 1.75;

    color: #b9cbe0;

    position: relative;
    z-index: 2;
}


/* =========================================================
   LEARN MORE
========================================================= */

.learn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #ffb536;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    position: relative;
    z-index: 3;

    transition: .3s ease;
}

.learn::after {

    content: "→";

    font-size: 16px;

    transition: .3s ease;
}

.learn:hover {

    color: #ffd27a;
}

.learn:hover::after {

    transform: translateX(6px);
}


/* =========================================================
   CARD NUMBER
========================================================= */

.service-card .service-number {

    position: absolute;

    right: 20px;
    bottom: 16px;

    font-size: 42px;

    font-weight: 900;

    color: rgba(255,255,255,.035);

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   SCROLL BUTTON
========================================================= */

.scroll-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border: 1px solid rgba(31,54,92,.18);

    background: #ffffff;

    color: #1f365c;

    display: grid;

    place-items: center;

    z-index: 10;

    cursor: pointer;

    font-size: 18px;

    box-shadow:
        0 12px 30px rgba(20,50,90,.18);

    transition: .3s ease;
}

.scroll-btn:hover {

    background: #ffb536;

    color: #10294a;

    border-color: #ffb536;

    box-shadow:
        0 14px 30px rgba(255,181,54,.30);

    transform:
        translateY(-50%)
        scale(1.08);
}

.scroll-btn.left {
    left: -18px;
}

.scroll-btn.right {
    right: -18px;
}


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

@media (max-width: 1100px) {

    .service-card {

        flex: 0 0 calc((100% - 44px) / 3);

        min-width: calc((100% - 44px) / 3);
    }
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 800px) {

    .service-card {

        flex: 0 0 calc((100% - 22px) / 2);

        min-width: calc((100% - 22px) / 2);
    }

    .scroll-btn.left {
        left: -8px;
    }

    .scroll-btn.right {
        right: -8px;
    }
}


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

@media (max-width: 560px) {

    .service-scroller {
        padding-left: 0;
        padding-right: 0;
    }

    .cards-track {

        gap: 16px;

        padding-left: 4px;
        padding-right: 4px;
    }

    .service-card {

        flex: 0 0 86%;

        min-width: 86%;

        min-height: 325px;

        padding: 24px 21px;
    }

    .service-icon {

        width: 58px;
        height: 58px;

        font-size: 26px;
    }

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

    .service-card p {
        font-size: 12px;
    }

    .scroll-btn {

        width: 38px;
        height: 38px;

        font-size: 15px;
    }
}


/* =========================================================
   DIFFERENT COLOR FOR EACH SERVICE CARD
========================================================= */

/* Card 1 - Blue */
.service-card:nth-child(1) {
    background:
        radial-gradient(circle at 90% 5%, rgba(79, 150, 255, .28), transparent 30%),
        linear-gradient(145deg, #123b70, #081f3d);
}

/* Card 2 - Purple */
.service-card:nth-child(2) {
    background:
        radial-gradient(circle at 90% 5%, rgba(177, 113, 255, .28), transparent 30%),
        linear-gradient(145deg, #39205f, #1c1235);
}

/* Card 3 - Orange */
.service-card:nth-child(3) {
    background:
        radial-gradient(circle at 90% 5%, rgba(255, 181, 54, .30), transparent 30%),
        linear-gradient(145deg, #704215, #321d0b);
}

/* Card 4 - Teal */
.service-card:nth-child(4) {
    background:
        radial-gradient(circle at 90% 5%, rgba(48, 211, 190, .28), transparent 30%),
        linear-gradient(145deg, #104f50, #092c35);
}

/* Card 5 - Pink / Red */
.service-card:nth-child(5) {
    background:
        radial-gradient(circle at 90% 5%, rgba(255, 102, 145, .27), transparent 30%),
        linear-gradient(145deg, #63243f, #301526);
}

/* Card 6 - Green */
.service-card:nth-child(6) {
    background:
        radial-gradient(circle at 90% 5%, rgba(82, 211, 139, .27), transparent 30%),
        linear-gradient(145deg, #14513d, #092c27);
}

/* Card 7 - Indigo */
.service-card:nth-child(7) {
    background:
        radial-gradient(circle at 90% 5%, rgba(103, 123, 255, .30), transparent 30%),
        linear-gradient(145deg, #27356f, #111b40);
}

/* Card 8 - Cyan */
.service-card:nth-child(8) {
    background:
        radial-gradient(circle at 90% 5%, rgba(49, 201, 255, .28), transparent 30%),
        linear-gradient(145deg, #104d69, #082b43);
}

/* =========================================================
   ZOOMZAR PREMIUM MOTION SYSTEM
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* ---------------------------------------------------------
   SCROLL REVEAL
   --------------------------------------------------------- */

.reveal,
.service-card,
.stat,
.logo,
.cta-band,
.why-copy,
.analytics-scene,
.section-head {
    opacity: 0;
    transform: translateY(55px);
    transition:
        opacity .85s cubic-bezier(.16,1,.3,1),
        transform .85s cubic-bezier(.16,1,.3,1);
}

.reveal.show,
.service-card.show,
.stat.show,
.logo.show,
.cta-band.show,
.why-copy.show,
.analytics-scene.show,
.section-head.show {
    opacity: 1;
    transform: translateY(0);
}

/* Different reveal directions */

.reveal-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: all .9s cubic-bezier(.16,1,.3,1);
}

.reveal-left.show {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(80px);
    transition: all .9s cubic-bezier(.16,1,.3,1);
}

.reveal-right.show {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(.75);
    transition: all .9s cubic-bezier(.16,1,.3,1);
}

.reveal-scale.show {
    opacity: 1;
    transform: scale(1);
}

/* ---------------------------------------------------------
   STAGGER ANIMATION
   --------------------------------------------------------- */

.service-card:nth-child(1) {
    transition-delay: .05s;
}

.service-card:nth-child(2) {
    transition-delay: .12s;
}

.service-card:nth-child(3) {
    transition-delay: .19s;
}

.service-card:nth-child(4) {
    transition-delay: .26s;
}

.service-card:nth-child(5) {
    transition-delay: .33s;
}

.service-card:nth-child(6) {
    transition-delay: .40s;
}

.service-card:nth-child(7) {
    transition-delay: .47s;
}

.stat:nth-child(1) {
    transition-delay: .05s;
}

.stat:nth-child(2) {
    transition-delay: .15s;
}

.stat:nth-child(3) {
    transition-delay: .25s;
}

.stat:nth-child(4) {
    transition-delay: .35s;
}

/* ---------------------------------------------------------
   HERO MOTION
   --------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
}

.hero-content {
    animation: heroContentIn 1s cubic-bezier(.16,1,.3,1) both;
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }

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

.scene-wrap {
    animation: sceneEnter 1.2s .15s cubic-bezier(.16,1,.3,1) both;
    perspective: 1200px;
}

@keyframes sceneEnter {
    from {
        opacity: 0;
        transform: translateX(80px) scale(.82);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ---------------------------------------------------------
   FLOATING / JUMPING ELEMENTS
   --------------------------------------------------------- */

.float-card {
    animation:
        floatingCard 4s ease-in-out infinite,
        cardGlow 3s ease-in-out infinite alternate;
}

.fc1 {
    animation-delay: 0s;
}

.fc2 {
    animation-delay: .8s;
}

.fc3 {
    animation-delay: 1.4s;
}

@keyframes floatingCard {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-18px) rotate(1deg);
    }
}

@keyframes cardGlow {
    from {
        filter: drop-shadow(0 10px 20px rgba(31, 54, 92, .08));
    }

    to {
        filter: drop-shadow(0 18px 35px rgba(255, 181, 54, .20));
    }
}

/* ---------------------------------------------------------
   SOCIAL ORBS
   --------------------------------------------------------- */

.social-orb {
    animation: orbFloat 3.5s ease-in-out infinite;
}

.so1 {
    animation-delay: .4s;
}

.so2 {
    animation-delay: 1.1s;
}

@keyframes orbFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(12deg);
    }
}

/* ---------------------------------------------------------
   SERVICE CARD PREMIUM EFFECT
   --------------------------------------------------------- */

.service-card {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}

.service-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 181, 54, .22),
        transparent 70%
    );
    top: -90px;
    right: -90px;
    opacity: 0;
    transition: .5s ease;
    pointer-events: none;
}

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

.service-card:hover {
    box-shadow:
        0 25px 55px rgba(31, 54, 92, .14),
        0 5px 20px rgba(255, 181, 54, .10);
}

.service-icon {
    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease;
}

.service-card:hover .service-icon {
    transform:
        translateY(-8px)
        rotate(-8deg)
        scale(1.12);
    box-shadow:
        0 12px 25px rgba(255, 181, 54, .25);
}

.service-card h3 {
    transition: transform .4s ease;
}

.service-card:hover h3 {
    transform: translateX(5px);
}

.learn {
    display: inline-block;
    transition:
        transform .35s ease,
        letter-spacing .35s ease;
}

.service-card:hover .learn {
    transform: translateX(7px);
    letter-spacing: .3px;
}

/* ---------------------------------------------------------
   BUTTON JUMP
   --------------------------------------------------------- */

.btn {
    position: relative;
    overflow: hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

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

.btn:active {
    transform: translateY(1px) scale(.97);
}

.btn::after {
    content: "";
    position: absolute;
    top: -80%;
    left: -100%;
    width: 60px;
    height: 250%;
    background: rgba(255,255,255,.35);
    transform: rotate(25deg);
    transition: left .65s ease;
}

.btn:hover::after {
    left: 130%;
}

/* ---------------------------------------------------------
   CHECK ITEMS
   --------------------------------------------------------- */

.check {
    transition:
        transform .35s ease,
        background .35s ease;
}

.check:hover {
    transform: translateX(8px);
}

.check span {
    transition:
        transform .35s ease,
        background .35s ease;
}

.check:hover span {
    transform: rotate(360deg) scale(1.12);
}

/* ---------------------------------------------------------
   ANALYTICS FLOATING METRICS
   --------------------------------------------------------- */

.metric {
    animation: metricFloat 4s ease-in-out infinite;
}

.m1 {
    animation-delay: .2s;
}

.m2 {
    animation-delay: .9s;
}

.m3 {
    animation-delay: 1.5s;
}

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

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

.phone {
    animation: phoneFloat 5s ease-in-out infinite;
}

@keyframes phoneFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

/* ---------------------------------------------------------
   CHART ANIMATION
   --------------------------------------------------------- */

.chart {
    transform-origin: bottom;
    animation: chartGrow 1.8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes chartGrow {
    from {
        opacity: 0;
        transform: scaleY(0);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* ---------------------------------------------------------
   STATS
   --------------------------------------------------------- */

.stat {
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        opacity .85s ease;
}

.stat:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(31,54,92,.12);
}

.stat b {
    display: block;
    transition: transform .35s ease;
}

.stat:hover b {
    transform: scale(1.08);
}

/* ---------------------------------------------------------
   BRAND LOGOS
   --------------------------------------------------------- */

.logos span {
    display: inline-block;
    transition:
        transform .35s ease,
        opacity .35s ease;
}

.logos span:hover {
    transform: translateY(-7px) scale(1.08);
    opacity: 1;
}

/* ---------------------------------------------------------
   CTA BAND
   --------------------------------------------------------- */

.cta-band {
    position: relative;
    overflow: hidden;
}

.cta-band::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    right: -100px;
    top: -180px;
    animation: ctaCircle 7s linear infinite;
}

.cta-band::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.10);
    left: -100px;
    bottom: -130px;
    animation: ctaCircle 5s linear infinite reverse;
}

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

/* ---------------------------------------------------------
   HORIZONTAL SERVICE SCROLLER
   --------------------------------------------------------- */

.cards-track {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.cards-track::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.scroll-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 10px 25px rgba(31,54,92,.15);
}

.scroll-btn:active {
    transform: scale(.92);
}

/* ---------------------------------------------------------
   DRAGGING STATE
   --------------------------------------------------------- */

.scene.dragging {
    cursor: grabbing !important;
}

.scene {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

/* ---------------------------------------------------------
   MOUSE PARALLAX
   --------------------------------------------------------- */

.hero .scene {
    transition: transform .18s ease-out;
}

/* ---------------------------------------------------------
   SCROLL TOP BUTTON
   --------------------------------------------------------- */

.zz-scroll-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #1f365c;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;
    box-shadow: 0 12px 30px rgba(31,54,92,.22);
    display: none;
}

.zz-scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.zz-scroll-top:hover {
    background: #ffb536;
    color: #1f365c;
    transform: translateY(-5px);
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .reveal,
    .reveal-left,
    .reveal-right {
        transform: translateY(35px);
    }

    .reveal.show,
    .reveal-left.show,
    .reveal-right.show {
        transform: translateY(0);
    }

    .float-card {
        animation-duration: 4.5s;
    }

    .zz-scroll-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        display: none;
    }
}

/* ---------------------------------------------------------
   REDUCE MOTION ACCESSIBILITY
   --------------------------------------------------------- */

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

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



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

.services-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,181,54,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f4f9ff,
            #ffffff
        );
}

.services-hero-content {
    max-width: 900px;
}

.services-hero h1 {
    max-width: 900px;
}

.services-hero .lead {
    max-width: 760px;
}


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

.hero-actions,
.service-actions,
.final-cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 13px 20px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: .3s ease;
}

.btn-primary {
    background: #1f365c;
    color: #fff;

    box-shadow:
        0 10px 25px rgba(31,54,92,.18);
}

.btn-primary:hover {
    background: #ffb536;
    color: #172b49;

    transform: translateY(-3px);
}

.btn-whatsapp {
    background: #20b866;
    color: #fff;

    box-shadow:
        0 10px 25px rgba(32,184,102,.18);
}

.btn-whatsapp:hover {
    background: #159653;
    color: #fff;

    transform: translateY(-3px);
}


/* =========================================================
   SERVICE INTRO
========================================================= */

.services-intro {
    padding-bottom: 25px;
}

.services-intro .section-head {
    max-width: 800px;
}


/* =========================================================
   SERVICE DETAIL SECTION
========================================================= */

.service-detail {
    padding: 90px 0;

    position: relative;

    overflow: hidden;
}

.service-detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .85fr);

    gap: 70px;

    align-items: center;
}

.service-detail-grid.reverse {
    grid-template-columns:
        minmax(330px, .85fr)
        minmax(0, 1.15fr);
}


/* =========================================================
   SERVICE COLORS
========================================================= */

.service-blue {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(72,137,255,.13),
            transparent 28%
        ),
        #f5f9ff;
}

.service-purple {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(153,91,255,.12),
            transparent 30%
        ),
        #faf7ff;
}

.service-orange {
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(255,181,54,.16),
            transparent 28%
        ),
        #fffaf2;
}

.service-teal {
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(27,190,174,.13),
            transparent 28%
        ),
        #f2fcfb;
}

.service-cyan {
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(38,181,232,.13),
            transparent 28%
        ),
        #f2fbff;
}

.service-pink {
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(239,91,135,.12),
            transparent 28%
        ),
        #fff6f9;
}

.service-green {
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(49,190,112,.12),
            transparent 28%
        ),
        #f3fcf7;
}

.service-indigo {
    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(88,105,235,.13),
            transparent 28%
        ),
        #f5f6ff;
}

.service-dark {
    background:
        linear-gradient(
            135deg,
            #071d39,
            #102f57
        );

    color: #fff;
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.service-detail-content {
    position: relative;
    z-index: 2;
}

.service-label {
    font-size: 54px;

    line-height: 1;

    font-weight: 900;

    color: rgba(31,54,92,.08);

    margin-bottom: -10px;
}

.service-dark .service-label {
    color: rgba(255,255,255,.08);
}

.service-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #ff9f16;

    font-size: 14px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}

.service-detail-content h2 {
    font-size: 44px;

    line-height: 1.12;

    margin: 0 0 18px;

    color: #1f365c;
}

.service-detail-content h2 span {
    color: #ff9f16;
}

.service-dark .service-detail-content h2 {
    color: #fff;
}

.service-description {
    max-width: 680px;

    color: #667991;

    font-size: 16px;

    line-height: 1.85;

    margin-bottom: 25px;
}

.service-dark .service-description {
    color: #b5c8df;
}

.service-detail-content h3 {
    font-size: 17px;

    color: #1f365c;

    margin: 25px 0 15px;
}

.service-dark .service-detail-content h3 {
    color: #fff;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.service-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 11px 25px;

    max-width: 680px;
}

.service-list div {
    font-size: 15px;

    font-weight: 700;

    color: #4f6480;
}

.service-list div::first-letter {
    color: #ffb536;
}

.service-dark .service-list div {
    color: #c3d2e3;
}


/* =========================================================
   SERVICE BUTTONS
========================================================= */

.service-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 18px;

    border-radius: 11px;

    background: #1f365c;

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: .3s ease;
}

.service-btn:hover {
    background: #ffb536;

    color: #172b49;

    transform: translateY(-2px);
}

.service-whatsapp {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 11px;

    background: #20b866;

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: .3s ease;
}

.service-whatsapp:hover {
    background: #159653;

    color: #fff;

    transform: translateY(-2px);
}


/* =========================================================
   SERVICE VISUAL CARD
========================================================= */

.service-detail-card {

    min-height: 390px;

    padding: 35px;

    border-radius: 30px;

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 15px;

    color: #fff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255,181,54,.25),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #1f365c,
            #071c37
        );

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 25px 60px rgba(19,52,91,.20);
}

.service-purple .service-detail-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(181,112,255,.30),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #442266,
            #1d1233
        );
}

.service-orange .service-detail-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255,181,54,.32),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #70400e,
            #321b08
        );
}

.service-teal .service-detail-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(65,221,202,.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #105354,
            #082b32
        );
}

.service-cyan .service-detail-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(65,205,255,.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #104d69,
            #08263e
        );
}

.service-pink .service-detail-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255,105,151,.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #65243f,
            #301426
        );
}

.service-green .service-detail-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(78,221,139,.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #14533e,
            #092c26
        );
}

.service-indigo .service-detail-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(111,129,255,.30),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #29376f,
            #121a3e
        );
}


/* =========================================================
   BIG ICON
========================================================= */

.big-service-icon {
    width: 76px;
    height: 76px;

    display: grid;

    place-items: center;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #ffca68,
            #ff9d18
        );

    color: #132d4f;

    font-size: 36px;

    box-shadow:
        0 18px 35px rgba(255,171,44,.22);
}

.service-detail-card > span {
    color: #a9c1dd;

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.service-detail-card > strong {
    font-size: 22px;

    line-height: 1.4;

    color: #fff;
}


/* =========================================================
   MINI STAT
========================================================= */

.mini-stat {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 0;

    border-top: 1px solid rgba(255,255,255,.10);

    color: #b7c9dc;

    font-size: 14px;
}

.mini-stat b {
    color: #ffb536;

    font-size: 16px;
}


/* =========================================================
   GROWTH POINTS
========================================================= */

.growth-points {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.growth-point {
    display: flex;

    gap: 18px;

    padding: 25px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #dce7f4;

    box-shadow:
        0 12px 30px rgba(31,54,92,.07);

    transition: .3s ease;
}

.growth-point:hover {
    transform: translateY(-5px);

    border-color: #ffca71;

    box-shadow:
        0 18px 38px rgba(31,54,92,.12);
}

.growth-point > span {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background: #1f365c;

    color: #ffb536;

    font-size: 14px;

    font-weight: 900;
}

.growth-point h3 {
    margin: 0 0 7px;

    font-size: 18px;

    color: #1f365c;
}

.growth-point p {
    margin: 0;

    color: #71839a;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   FINAL CTA
========================================================= */

.services-final-cta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    padding: 45px;

    border-radius: 30px;

    position: relative;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255,181,54,.22),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #071d3b,
            #1f4a82
        );

    box-shadow:
        0 25px 55px rgba(16,49,88,.20);
}

.services-final-cta h2 {
    max-width: 700px;

    font-size: 38px;

    line-height: 1.15;

    margin: 8px 0 12px;
}

.services-final-cta h2 span {
    color: #ffb536;
}

.services-final-cta p {
    max-width: 680px;

    margin: 0;

    color: #b9cbe0;

    font-size: 16px;

    line-height: 1.7;
}

.final-cta-actions {
    flex: 0 0 auto;

    margin-top: 0;
}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {
    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #20b866;

    color: #fff;

    text-decoration: none;

    font-size: 28px;

    z-index: 999;

    box-shadow:
        0 12px 30px rgba(32,184,102,.35);

    animation: whatsappPulse 2s infinite;
}

.floating-whatsapp:hover {
    background: #159653;

    color: #fff;

    transform: scale(1.08);
}

@keyframes whatsappPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(32,184,102,.35);
    }

    70% {
        box-shadow:
            0 0 0 14px rgba(32,184,102,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(32,184,102,0);
    }
}


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

@media (max-width: 1000px) {

    .service-detail-grid,
    .service-detail-grid.reverse {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .service-detail-grid.reverse
    .service-detail-card {
        order: 2;
    }

    .service-detail-grid.reverse
    .service-detail-content {
        order: 1;
    }

    .service-detail-card {
        min-height: 340px;
    }

    .services-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }
}


@media (max-width: 700px) {

    .service-detail {
        padding: 65px 0;
    }

    .service-detail-content h2 {
        font-size: 32px;
    }

    .service-list {
        grid-template-columns: 1fr;
    }

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

    .services-final-cta {
        padding: 30px 24px;
    }

    .services-final-cta h2 {
        font-size: 28px;
    }
}


@media (max-width: 520px) {

    .hero-actions,
    .service-actions,
    .final-cta-actions {
        width: 100%;
    }

    .hero-actions .btn,
    .service-actions a,
    .final-cta-actions .btn {
        width: 100%;
    }

    .service-detail-card {
        min-height: 310px;

        padding: 25px;
    }

    .floating-whatsapp {
        width: 52px;
        height: 52px;

        right: 15px;
        bottom: 15px;
    }
}



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

.nav-dropdown {
    position: relative;
}


/* Services button */

.nav-dropdown-toggle {

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 10px 0;

    font-size: 16px;

    font-weight: 700;

    transition: .25s ease;
}

.nav-dropdown-toggle:hover {
    color: #ffb536;
}

.nav-dropdown.active .nav-dropdown-toggle {
    color: #ffb536;
}


/* Arrow */

.dropdown-arrow {

    font-size: 14px;

    transition: .25s ease;
}

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


/* =========================================================
   DROPDOWN MENU
========================================================= */

.services-menu {

    position: absolute;

    top: calc(100% + 18px);

    left: 50%;

    transform:
        translateX(-50%)
        translateY(10px);

    width: 430px;

    padding: 12px;

    background: rgba(255,255,255,.98);

    border: 1px solid #dbe7f4;

    border-radius: 20px;

    box-shadow:
        0 25px 60px rgba(24,55,95,.18);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 9999;
}


/* Small top arrow */

.services-menu::before {

    content: "";

    position: absolute;

    top: -7px;

    left: 50%;

    width: 14px;

    height: 14px;

    background: #fff;

    border-left: 1px solid #dbe7f4;

    border-top: 1px solid #dbe7f4;

    transform: translateX(-50%) rotate(45deg);
}


/* Desktop hover */

.nav-dropdown:hover .services-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


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

.services-menu-header {

    padding: 10px 13px 14px;

    border-bottom: 1px solid #edf2f7;

    margin-bottom: 6px;
}

.services-menu-header span {

    display: block;

    color: #ff9f16;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1.5px;
}

.services-menu-header small {

    display: block;

    margin-top: 4px;

    color: #8192a7;

    font-size: 14px;
}


/* =========================================================
   DROPDOWN LINKS
========================================================= */

.services-menu > a {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 9px;

    border-radius: 12px;

    text-decoration: none;

    transition: .22s ease;
}

.services-menu > a:hover {

    background: #f4f8fc;

    transform: translateX(3px);
}


/* Text */

.services-menu > a > span:last-child {

    display: flex;

    flex-direction: column;

    min-width: 0;
}

.services-menu > a b {

    color: #1f365c;

    font-size: 14px;

    line-height: 1.3;
}

.services-menu > a small {

    color: #8998aa;

    font-size: 14px;

    margin-top: 2px;

    line-height: 1.3;
}


/* =========================================================
   MENU ICONS
========================================================= */

.menu-icon {

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    font-size: 16px;

    font-weight: 800;
}


/* Individual colors */

.menu-icon.all {
    background: #1f365c;
    color: #ffb536;
}

.menu-icon.blue {
    background: #e8f2ff;
    color: #3579d4;
}

.menu-icon.purple {
    background: #f0e8ff;
    color: #8b55d9;
}

.menu-icon.orange {
    background: #fff0d5;
    color: #e99118;
}

.menu-icon.teal {
    background: #e1f8f5;
    color: #159e91;
}

.menu-icon.cyan {
    background: #e2f6ff;
    color: #168fc1;
}

.menu-icon.pink {
    background: #ffe8ef;
    color: #d94d78;
}

.menu-icon.green {
    background: #e5f8ec;
    color: #20965a;
}

.menu-icon.indigo {
    background: #e9ebff;
    color: #5364cf;
}

.menu-icon.dark {
    background: #e8edf5;
    color: #1f365c;
}


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

@media (max-width: 900px) {

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-toggle {

        width: 100%;

        justify-content: space-between;

        padding: 12px 0;
    }

    .services-menu {

        position: static;

        width: 100%;

        transform: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        display: none;

        box-shadow: none;

        border-radius: 14px;

        margin: 5px 0 10px;

        padding: 8px;
    }

    .services-menu::before {
        display: none;
    }

    .nav-dropdown.open .services-menu {
        display: block;
    }

    .nav-dropdown:hover .services-menu {

        transform: none;
    }

    .services-menu > a {
        padding: 8px;
    }

}


/* =========================================================
   DETAILED SERVICE PAGE
========================================================= */

.service-page-hero {

    position: relative;

    overflow: hidden;

    padding: 75px 0 90px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,181,54,.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f5f9ff,
            #ffffff 60%,
            #fffaf0
        );

    border-bottom: 1px solid #e4ecf5;

}


.service-hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(5px);

    pointer-events: none;

}


.hero-glow-one {

    width: 300px;
    height: 300px;

    background: rgba(31,54,92,.07);

    right: -120px;
    top: -100px;

}


.hero-glow-two {

    width: 220px;
    height: 220px;

    background: rgba(255,181,54,.12);

    left: -90px;
    bottom: -90px;

}


.service-breadcrumb {

    display: flex;

    gap: 9px;

    align-items: center;

    margin-bottom: 35px;

    font-size: 14px;

    color: #8392a6;

}


.service-breadcrumb a {

    color: #667991;

    text-decoration: none;

}


.service-breadcrumb strong {

    color: #1f365c;

}


.service-hero-grid {

    display: grid;

    grid-template-columns:
        1.08fr .92fr;

    gap: 65px;

    align-items: center;

}


.service-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 13px;

    border-radius: 30px;

    background: #fff4dc;

    border: 1px solid #ffe0a0;

    color: #9a6507;

    font-size: 14px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .8px;

}


.service-hero-content h1 {

    margin: 20px 0 20px;

    font-size: clamp(40px, 5vw, 67px);

    line-height: 1.02;

    color: #152d50;

    letter-spacing: -2px;

}


.service-hero-content h1 span {

    display: block;

    color: #ffb536;

}


.service-hero-text {

    max-width: 680px;

    color: #61738b;

    font-size: 16px;

    line-height: 1.9;

}


.service-hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 28px;

}


.btn-primary,
.btn-secondary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 20px;

    border-radius: 13px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

    transition: .25s ease;

}


.btn-primary {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1f365c,
            #315986
        );

    box-shadow:
        0 15px 30px rgba(31,54,92,.18);

}


.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px rgba(31,54,92,.24);

}


.btn-primary span {

    color: #ffb536;

    font-size: 20px;

}


.btn-secondary {

    color: #1f365c;

    background: #fff;

    border: 1px solid #dce6f1;

}


.btn-secondary:hover {

    border-color: #ffb536;

    transform: translateY(-3px);

}


.service-trust-row {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;

    margin-top: 40px;

    max-width: 650px;

}


.service-trust-row div {

    padding-right: 12px;

    border-right: 1px solid #dce5ef;

}


.service-trust-row div:last-child {

    border-right: 0;

}


.service-trust-row strong {

    display: block;

    color: #1f365c;

    font-size: 14px;

}


.service-trust-row small {

    color: #8492a4;

    font-size: 14px;

}


.service-hero-visual {

    min-height: 470px;

    position: relative;

    display: grid;

    place-items: center;

}


.seo-dashboard-card {

    width: min(440px, 100%);

    padding: 27px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #162f53,
            #244c7b
        );

    box-shadow:
        0 35px 70px rgba(22,48,83,.27);

    color: #fff;

    transform: rotate(2deg);

}


.dashboard-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 14px;

    font-weight: 800;

}


.dashboard-dot {

    color: #ffb536;

}


.fake-chart {

    position: relative;

    height: 210px;

    margin-top: 25px;

    overflow: hidden;

    border-bottom: 1px solid rgba(255,255,255,.2);

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 40px,
            rgba(255,255,255,.08) 41px
        );

}


.chart-line {

    position: absolute;

    width: 115%;

    height: 140px;

    left: -5%;

    bottom: 15px;

    border-top: 4px solid #ffb536;

    transform:
        rotate(-10deg)
        skewY(-8deg);

}


.chart-point {

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #ffb536;

    box-shadow:
        0 0 0 5px rgba(255,181,54,.15);

}


.p1 {
    left: 10%;
    bottom: 32%;
}

.p2 {
    left: 28%;
    bottom: 43%;
}

.p3 {
    left: 49%;
    bottom: 55%;
}

.p4 {
    left: 69%;
    bottom: 68%;
}

.p5 {
    left: 87%;
    bottom: 82%;
}


.dashboard-stats {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 10px;

    margin-top: 20px;

}


.dashboard-stats div {

    padding: 12px;

    border-radius: 12px;

    background: rgba(255,255,255,.08);

}


.dashboard-stats small {

    display: block;

    color: #a9bed7;

    font-size: 12px;

}


.dashboard-stats strong {

    font-size: 14px;

}


.floating-seo-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 15px;

    border-radius: 15px;

    background: rgba(255,255,255,.94);

    border: 1px solid #dbe7f3;

    box-shadow:
        0 20px 40px rgba(31,54,92,.14);

}


.floating-seo-card > span {

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #fff3d8;

    color: #d48b00;

    font-weight: 900;

}


.floating-seo-card small {

    display: block;

    color: #8a98aa;

    font-size: 12px;

}


.floating-seo-card strong {

    display: block;

    color: #1f365c;

    font-size: 14px;

}


.card-one {

    left: 0;

    top: 23%;

    animation: floatingCard 4s ease-in-out infinite;

}


.card-two {

    right: 0;

    bottom: 17%;

    animation: floatingCard 4s ease-in-out infinite 1s;

}


@keyframes floatingCard {

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

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

}


/* SECTION */

.service-section-heading {

    max-width: 1250px;

    margin: 0 auto 40px;

    text-align: center;

}


.service-section-heading.left {

    text-align: left;

    margin-left: 0;

}


.section-kicker {

    display: inline-block;

    margin-bottom: 10px;

    color: #d28b05;

    font-size: 14px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1.4px;

}


.service-section-heading h2 {

    margin: 0 0 14px;

    color: #1f365c;

    font-size: clamp(30px,4vw,45px);

    line-height: 1.1;

    letter-spacing: -1px;

}


.service-section-heading p {

    margin: 0 auto;

    color: #6f8095;

    font-size: 16px;

    line-height: 1.85;

    text-align: center;

}


.service-section-heading.left p {

    margin-left: 0;

}


.service-long-content,
.seo-long-content {

    max-width: 950px;

    margin: auto;

}


.seo-long-content p {

    color: #5f7188;

    font-size: 18px;

    line-height: 1.95;

    margin-bottom: 18px;

    
}


/* SEO SERVICE CARDS */

.seo-light-section {

    background:
        linear-gradient(
            180deg,
            #f7fbff,
            #ffffff
        );

}


.seo-service-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}


.seo-detail-card {

    position: relative;

    padding: 28px;

    border-radius: 24px;

    min-height: 440px;

    overflow: hidden;

    border: 1px solid transparent;

    transition: .3s ease;

}


.seo-detail-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(31,54,92,.13);

}


.seo-detail-card:after {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background: rgba(255,255,255,.5);

}


.blue-card {
    background: #edf6ff;
    border-color: #d4e9ff;
}

.purple-card {
    background: #f4efff;
    border-color: #e6d9ff;
}

.orange-card {
    background: #fff5e6;
    border-color: #ffe1b3;
}

.green-card {
    background: #edfff6;
    border-color: #d2f3e2;
}

.pink-card {
    background: #fff0f6;
    border-color: #ffd9e9;
}

.navy-card {
    background: #edf2f9;
    border-color: #d5e0ef;
}


.seo-card-icon {

    width: 53px;
    height: 53px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background: rgba(255,255,255,.8);

    color: #1f365c;

    font-size: 24px;

    margin-bottom: 20px;

}


.seo-detail-card h3 {

    color: #1f365c;

    font-size: 25px;

    margin-bottom: 12px;

}


.seo-detail-card p {

    color: #687b91;

    font-size: 18px;

    line-height: 1.75;

}


.seo-detail-card ul {

    padding: 0;

    margin: 20px 0 0;

    list-style: none;

}


.seo-detail-card li {

    position: relative;

    padding-left: 18px;

    margin: 9px 0;

    color: #52667d;

    font-size: 14px;

}


.seo-detail-card li:before {

    content: "✓";

    position: absolute;

    left: 0;

    color: #1f365c;

    font-weight: 900;

}


/* TWO COLUMN */

.two-column-seo {

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    gap: 70px;

    align-items: center;

}


.two-column-seo p {

    color: #65778d;

    font-size: 16px;

    line-height: 1.85;

}


.seo-check-list {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 25px;

}


.seo-check-list div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #1f365c;

    font-size: 14px;

    font-weight: 800;

}


.seo-check-list span {

    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff2d5;

    color: #c88400;

}


.seo-audit-box {

    padding: 27px;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            #172f52,
            #2a507d
        );

    box-shadow:
        0 30px 60px rgba(31,54,92,.2);

}


.audit-top {

    display: flex;

    justify-content: space-between;

    padding-bottom: 20px;

    margin-bottom: 10px;

    border-bottom: 1px solid rgba(255,255,255,.13);

    color: #fff;

    font-size: 14px;

    font-weight: 900;

}


.audit-top span:last-child {

    color: #ffb536;

}


.audit-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 0;

    border-bottom: 1px solid rgba(255,255,255,.09);

    color: #bcd0e5;

    font-size: 14px;

}


.audit-row b {

    color: #fff;

}


/* PROCESS */

.seo-process-section {

    background: #f7faff;

}


.seo-process-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

}


.process-card {

    position: relative;

    padding: 27px;

    min-height: 190px;

    border-radius: 22px;

    background: #fff;

    border: 1px solid #dce7f2;

    box-shadow:
        0 10px 30px rgba(31,54,92,.05);

}


.process-card > span {

    color: #ffb536;

    font-size: 16px;

    font-weight: 900;

}


.process-card h3 {

    margin: 15px 0 8px;

    color: #1f365c;

    font-size: 19px;

}


.process-card p {

    color: #718197;

    font-size: 14px;

    line-height: 1.7;

}


/* BENEFITS */

.seo-benefit-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 18px;

}


.benefit-box {

    padding: 25px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f7fbff
        );

    border: 1px solid #dce7f3;

}


.benefit-box > span {

    color: #ffb536;

    font-size: 14px;

    font-weight: 900;

}


.benefit-box h3 {

    margin: 16px 0 9px;

    color: #1f365c;

    font-size: 18px;

}


.benefit-box p {

    color: #718196;

    font-size: 14px;

    line-height: 1.7;

}


/* INDUSTRIES */

.seo-industries {

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #fffaf1
        );

}


.industry-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 12px;

}


.industry-grid span {

    padding: 16px;

    text-align: center;

    border-radius: 14px;

    background: #fff;

    border: 1px solid #dfe8f1;

    color: #1f365c;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(31,54,92,.04);

    transition: .25s ease;

}


.industry-grid span:hover {

    transform: translateY(-4px);

    border-color: #ffcf79;

}


/* FAQ */

.seo-faq-list {

    max-width: 900px;

    margin: auto;

}


.seo-faq {

    margin-bottom: 12px;

    border: 1px solid #dce6f0;

    border-radius: 17px;

    overflow: hidden;

    background: #fff;

}


.seo-faq button {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border: 0;

    background: #fff;

    padding: 19px 21px;

    text-align: left;

    cursor: pointer;

    color: #1f365c;

    font-size: 16px;

    font-weight: 800;

}


.seo-faq button span {

    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #fff3d8;

    color: #c48200;

    font-size: 18px;

}


.seo-faq div {

    display: none;

    padding: 0 21px 20px;

    color: #718197;

    font-size: 14px;

    line-height: 1.8;

}


.seo-faq.open div {

    display: block;

}


/* FINAL CTA */

.service-final-cta {

    padding: 30px 0 75px;

}


.service-cta-inner {

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 35px;

    padding: 45px;

    border-radius: 30px;

    background:
        linear-gradient(
            120deg,
            #132d50,
            #285382
        );

    color: #fff;

    box-shadow:
        0 25px 55px rgba(31,54,92,.2);

}


.service-cta-inner:after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(255,181,54,.3);

    border-radius: 50%;

    right: -130px;

    top: -180px;

}


.service-cta-inner > div:first-child {

    position: relative;

    z-index: 1;

}


.service-cta-inner span {

    color: #ffb536;

    font-size: 13px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.service-cta-inner h2 {

    margin: 10px 0;

    font-size: 32px;

}


.service-cta-inner p {

    margin: 0;

    color: #bdcee1;

    font-size: 14px;

    line-height: 1.7;

}


.cta-actions {

    position: relative;

    z-index: 2;

    display: flex;

    gap: 10px;

    flex-shrink: 0;

}


.cta-enquiry,
.cta-whatsapp {

    padding: 14px 18px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 900;

}


.cta-enquiry {

    background: #ffb536;

    color: #1f365c;

}


.cta-whatsapp {

    background: #fff;

    color: #1f365c;

}


/* FLOATING WHATSAPP */

.floating-whatsapp {

    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: 999;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 15px;

    border-radius: 50px;

    background: #1f365c;

    color: #fff;

    text-decoration: none;

    box-shadow:
        0 15px 35px rgba(31,54,92,.25);

    border: 2px solid #fff;

}


.floating-whatsapp span {

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #25d366;

    color: #fff;

}


.floating-whatsapp small {

    font-size: 10px;

    font-weight: 800;

}


.floating-whatsapp:hover {

    transform: translateY(-4px);

}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .service-hero-grid,
    .two-column-seo {

        grid-template-columns: 1fr;

    }

    .service-hero-content {

        text-align: center;

    }

    .service-hero-buttons {

        justify-content: center;

    }

    .service-trust-row {

        margin-left: auto;
        margin-right: auto;

    }

    .seo-service-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

    .seo-process-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

    .seo-benefit-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

}


@media (max-width: 650px) {

    .service-page-hero {

        padding: 45px 0 60px;

    }

    .service-hero-content h1 {

        font-size: 40px;

    }

    .service-trust-row {

        grid-template-columns:
            repeat(2,1fr);

    }

    .service-trust-row div {

        border-right: 0;

        padding: 8px;

        border-bottom: 1px solid #dce5ef;

    }

    .service-hero-visual {

        min-height: 380px;

    }

    .seo-dashboard-card {

        width: 92%;

    }

    .floating-seo-card {

        transform: scale(.85);

    }

    .card-one {

        left: -5px;

    }

    .card-two {

        right: -5px;

    }

    .seo-service-grid,
    .seo-process-grid,
    .seo-benefit-grid,
    .industry-grid {

        grid-template-columns: 1fr;

    }

    .seo-check-list {

        grid-template-columns: 1fr;

    }

    .service-cta-inner {

        padding: 30px 22px;

        flex-direction: column;

        align-items: flex-start;

    }

    .cta-actions {

        width: 100%;

        flex-direction: column;

    }

    .cta-enquiry,
    .cta-whatsapp {

        text-align: center;

    }

    .floating-whatsapp small {

        display: none;

    }

}

/* =========================================================
   ZOOMZAR ABOUT PAGE - PREMIUM DESIGN
========================================================= */

.about-hero{
    position:relative;
    overflow:hidden;
    padding:80px 0 90px;
    background:
        radial-gradient(circle at 10% 20%,rgba(255,181,54,.12),transparent 28%),
        radial-gradient(circle at 90% 10%,rgba(31,54,92,.12),transparent 30%),
        linear-gradient(135deg,#f7fbff,#ffffff 55%,#f5f9ff);
    border-bottom:1px solid #e5edf7;
}

.about-hero-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(2px);
}

.about-glow-one{
    width:300px;
    height:300px;
    background:rgba(255,181,54,.08);
    left:-150px;
    top:100px;
}

.about-glow-two{
    width:400px;
    height:400px;
    background:rgba(31,54,92,.06);
    right:-200px;
    bottom:-180px;
}

.about-hero .breadcrumbs{
    position:relative;
    z-index:2;
    margin-bottom:25px;
}

.about-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:65px;
    align-items:center;
}

.about-hero-content{
    position:relative;
    z-index:2;
}

.about-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.about-eyebrow:before{
    content:"";
    width:25px;
    height:2px;
    background:#ffb536;
}

.about-hero h1{
    max-width:800px;
    font-size:58px;
    line-height:1.04;
    letter-spacing:-2.5px;
    margin:18px 0 24px;
    color:#142b4c;
}

.about-gradient-text{
    background:linear-gradient(120deg,#1f365c,#395d91);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.about-hero-lead{
    max-width:720px;
    font-size:19px;
    line-height:1.8;
    color:#425876;
    margin-bottom:16px;
}

.about-hero-description{
    max-width:700px;
    color:#71839b;
    font-size:14px;
    line-height:1.9;
}

.about-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.about-hero-actions .btn{
    min-height:50px;
}

.about-hero-actions .btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border:1px solid #cbd9e9;
    border-radius:12px;
    color:#1f365c;
    background:#fff;
    font-weight:800;
    text-decoration:none;
    transition:.25s;
}

.about-hero-actions .btn-outline:hover{
    transform:translateY(-3px);
    border-color:#ffb536;
    box-shadow:0 12px 25px rgba(31,54,92,.08);
}

.about-mini-trust{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    margin-top:38px;
}

.about-mini-trust div{
    padding:0 25px;
    border-left:1px solid #d9e3ef;
}

.about-mini-trust div:first-child{
    padding-left:0;
    border-left:0;
}

.about-mini-trust strong{
    display:block;
    color:#1f365c;
    font-size:16px;
}

.about-mini-trust span{
    display:block;
    color:#8291a5;
    font-size:14px;
    margin-top:5px;
}


/* HERO VISUAL */

.about-hero-visual{
    min-height:520px;
    position:relative;
    display:grid;
    place-items:center;
}

.about-orbit{
    position:absolute;
    border:1px solid rgba(31,54,92,.1);
    border-radius:50%;
}

.orbit-one{
    width:430px;
    height:430px;
}

.orbit-two{
    width:340px;
    height:340px;
    border-color:rgba(255,181,54,.2);
}

.about-main-card{
    width:370px;
    min-height:350px;
    padding:27px;
    position:relative;
    z-index:3;
    border-radius:28px;
    background:linear-gradient(145deg,#1f365c,#132847);
    box-shadow:
        0 35px 80px rgba(18,42,74,.25),
        inset 0 1px rgba(255,255,255,.12);
    color:#fff;
    transform:rotate(-2deg);
}

.about-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.about-card-label{
    padding:7px 11px;
    border-radius:30px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12);
    font-size:13px;
    font-weight:800;
}

.about-live{
    color:#dce8f6;
    font-size:13px;
}

.about-live i{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:5px;
    border-radius:50%;
    background:#ffb536;
    box-shadow:0 0 0 5px rgba(255,181,54,.1);
}

.growth-number{
    margin-top:38px;
}

.growth-number span{
    display:block;
    color:#a9bad0;
    font-size:15px;
}

.growth-number strong{
    display:block;
    font-size:45px;
    letter-spacing:-1px;
    margin-top:2px;
}

.growth-chart{
    height:115px;
    display:flex;
    align-items:end;
    gap:10px;
    margin-top:30px;
    padding:0 5px;
    border-bottom:1px solid rgba(255,255,255,.16);
}

.growth-chart span{
    flex:1;
    min-width:18px;
    border-radius:8px 8px 0 0;
    background:linear-gradient(to top,#ffb536,#ffd87e);
    box-shadow:0 -8px 25px rgba(255,181,54,.12);
    animation:aboutBar 1.2s ease both;
}

.growth-chart span:nth-child(2){animation-delay:.1s}
.growth-chart span:nth-child(3){animation-delay:.2s}
.growth-chart span:nth-child(4){animation-delay:.3s}
.growth-chart span:nth-child(5){animation-delay:.4s}
.growth-chart span:nth-child(6){animation-delay:.5s}

@keyframes aboutBar{
    from{
        transform:scaleY(0);
        transform-origin:bottom;
    }
    to{
        transform:scaleY(1);
        transform-origin:bottom;
    }
}

.growth-footer{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:20px;
}

.growth-footer small{
    display:block;
    color:#91a7c1;
    font-size:12px;
}

.growth-footer b{
    display:block;
    margin-top:4px;
    font-size:14px;
}

.about-floating-card{
    position:absolute;
    z-index:5;
    min-width:145px;
    padding:13px 15px;
    border-radius:15px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);
    border:1px solid #e0e9f3;
    box-shadow:0 20px 40px rgba(29,60,100,.14);
}

.about-floating-card span{
    display:block;
    color:#ff9f18;
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
}

.about-floating-card b{
    display:block;
    margin-top:4px;
    color:#1f365c;
    font-size:14px;
}

.floating-one{
    left:0;
    top:20%;
    transform:rotate(-6deg);
}

.floating-two{
    right:0;
    top:13%;
    transform:rotate(5deg);
}

.floating-three{
    right:4%;
    bottom:14%;
    transform:rotate(-4deg);
}


/* INTRO */

.about-intro-section{
    padding-top:90px;
    padding-bottom:90px;
}

.about-intro-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px;
}

.about-intro-heading h2{
    font-size:45px;
    line-height:1.12;
    color:#172e4e;
    margin-top:14px;
}

.about-intro-content{
    max-width:850px;
}

.about-intro-content p{
    color:#667b95;
    line-height:1.9;
    font-size:16px;
    margin-bottom:18px;
}

.about-intro-content .large-text{
    color:#334f70;
    font-size:18px;
    line-height:1.8;
}


/* STATS */

.about-stat-section{
    margin-top:-25px;
    position:relative;
    z-index:5;
}

.about-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border:1px solid #dce7f3;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(26,62,103,.1);
    padding:10px;
}

.about-stat-card{
    position:relative;
    padding:27px 20px;
    text-align:center;
    border-right:1px solid #e4ebf3;
}

.about-stat-card:last-child{
    border-right:0;
}

.about-stat-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    margin:0 auto 10px;
    border-radius:12px;
    background:#fff5df;
    color:#e49b16;
    font-weight:900;
}

.about-stat-card strong{
    display:block;
    color:#1f365c;
    font-size:28px;
}

.about-stat-card small{
    display:block;
    color:#8392a5;
    font-size:14px;
    margin-top:5px;
}


/* CAPABILITIES */

.about-capability-section{
    padding-top:100px;
}

.about-capability-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.about-capability-card{
    position:relative;
    min-height:285px;
    padding:25px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border-radius:24px;
    text-decoration:none;
    overflow:hidden;
    border:1px solid #dce7f2;
    background:#fff;
    box-shadow:0 12px 30px #ffb536;
    transition:.3s ease;
}

.about-capability-card:before{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    right:-90px;
    top:-90px;
    background:var(--cap-bg);
    transition:.4s;
}

.about-capability-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(31,54,92,.13);
    border-color:var(--cap-border);
}

.about-capability-card:hover:before{
    transform:scale(1.4);
}

.capability-icon{
    position:relative;
    z-index:1;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:var(--cap-bg);
    color:var(--cap-color);
    font-size:24px;
    font-weight:900;
}

.about-capability-card span{
    position:relative;
    z-index:1;
    display:block;
    margin-top:22px;
    color:#8a99aa;
    font-size:14px;
    font-weight:900;
}

.about-capability-card h3{
    position:relative;
    z-index:1;
    color:#1f365c;
    font-size:20px;
    margin:5px 0 10px;
}

.about-capability-card p{
    position:relative;
    z-index:1;
    color:#71839a;
    font-size:14px;
    line-height:1.7;
    margin:0;
}

.about-capability-card > b{
    position:relative;
    z-index:1;
    margin-top:20px;
    color:var(--cap-color);
    font-size:14px;
}

.capability-seo{
    --cap-bg:#eaf3ff;
    --cap-color:#2366a9;
    --cap-border:#b8d4f0;
}

.capability-social{
    --cap-bg:#fff0e6;
    --cap-color:#e26c20;
    --cap-border:#ffd0b0;
}

.capability-ads{
    --cap-bg:#eaf8ef;
    --cap-color:#23814b;
    --cap-border:#b9dfc7;
}

.capability-content{
    --cap-bg:#fff8df;
    --cap-color:#c48b10;
    --cap-border:#edd78b;
}

.capability-web{
    --cap-bg:#f0ecff;
    --cap-color:#6b54ba;
    --cap-border:#d1c7fa;
}

.capability-branding{
    --cap-bg:#ffeaf0;
    --cap-color:#bb4b6d;
    --cap-border:#f1bfd0;
}

.capability-email{
    --cap-bg:#e9f8f7;
    --cap-color:#218b88;
    --cap-border:#b9dfdd;
}

.capability-reputation{
    --cap-bg:#fff0f0;
    --cap-color:#c04b4b;
    --cap-border:#f0c2c2;
}

.capability-analytics{
    --cap-bg:#edf0ff;
    --cap-color:#4f63bb;
    --cap-border:#c8cff2;
}


/* APPROACH */

.about-approach-section{
    background:
        radial-gradient(circle at 15% 50%,rgba(255,181,54,.08),transparent 30%),
        #f7faff;
}

.about-approach-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-approach-visual{
    min-height:540px;
    position:relative;
    display:grid;
    place-items:center;
}

.approach-circle{
    position:absolute;
    border:1px dashed rgba(31,54,92,.18);
    border-radius:50%;
}

.circle-one{
    width:430px;
    height:430px;
}

.circle-two{
    width:300px;
    height:300px;
    border-color:rgba(255,181,54,.35);
}

.approach-center{
    position:relative;
    z-index:3;
    width:190px;
    height:190px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:linear-gradient(145deg,#1f365c,#132847);
    box-shadow:0 30px 70px rgba(31,54,92,.24);
    color:#fff;
}

.approach-center span{
    font-size:14px;
    letter-spacing:3px;
    color:#ffcb65;
}

.approach-center strong{
    font-size:30px;
    margin:4px 0;
}

.approach-center small{
    font-size:13px;
    color:#b8c9dc;
}

.approach-node{
    position:absolute;
    z-index:5;
    padding:12px 17px;
    display:flex;
    align-items:center;
    gap:9px;
    border-radius:14px;
    background:#fff;
    border:1px solid #dce6f1;
    box-shadow:0 15px 35px rgba(31,54,92,.12);
}

.approach-node b{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:9px;
    background:#fff4db;
    color:#d99010;
    font-size:13px;
}

.approach-node span{
    color:#1f365c;
    font-size:14px;
    font-weight:800;
}

.node-one{
    top:13%;
    left:5%;
}

.node-two{
    top:13%;
    right:5%;
}

.node-three{
    bottom:13%;
    left:3%;
}

.node-four{
    bottom:13%;
    right:3%;
}

.about-approach-content h2{
    font-size:45px;
    line-height:1.12;
    color:#172e4e;
    margin:15px 0 20px;
}

.about-approach-content > p{
    color:#71839a;
    font-size:16px;
    line-height:1.85;
}

.approach-list{
    margin-top:28px;
}

.approach-item{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:14px;
    margin-bottom:22px;
}

.approach-number{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#fff4db;
    color:#d99317;
    font-size:14px;
    font-weight:900;
}

.approach-item h3{
    margin:0 0 5px;
    color:#1f365c;
    font-size:17px;
}

.approach-item p{
    margin:0;
    color:#7b8ca0;
    font-size:14px;
    line-height:1.7;
}


/* WHY US */

.about-why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.about-why-card{
    padding:28px;
    border:1px solid #dce7f2;
    border-radius:22px;
    background:linear-gradient(145deg,#fff,#f9fbfe);
    transition:.3s;
}

.about-why-card:hover{
    transform:translateY(-6px);
    border-color:#eacb86;
    box-shadow:0 18px 40px rgba(31,54,92,.1);
}

.why-card-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin-bottom:20px;
    border-radius:14px;
    background:#fff4db;
    color:#d99417;
    font-size:20px;
    font-weight:900;
}

.about-why-card h3{
    color:#1f365c;
    font-size:18px;
    margin-bottom:10px;
}

.about-why-card p{
    color:#73849a;
    font-size:14px;
    line-height:1.8;
    margin:0;
}


/* JOURNEY */

.about-journey-section{
    background:#f8fbff;
}

.growth-journey{
    position:relative;
    max-width:950px;
    margin:45px auto 0;
}

.journey-line{
    position:absolute;
    top:20px;
    bottom:20px;
    left:23px;
    width:1px;
    background:linear-gradient(#ffb536,#dbe5f0,#ffb536);
}

.journey-item{
    position:relative;
    display:grid;
    grid-template-columns:48px 1fr;
    gap:25px;
    margin-bottom:34px;
}

.journey-dot{
    position:relative;
    z-index:2;
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#1f365c;
    color:#ffca66;
    border:5px solid #f8fbff;
    box-shadow:0 0 0 1px #d7e2ee;
    font-size:13px;
    font-weight:900;
}

.journey-content{
    padding:23px 25px;
    border:1px solid #dce6f1;
    border-radius:19px;
    background:#fff;
    box-shadow:0 10px 25px rgba(31,54,92,.05);
}

.journey-content span{
    color:#d89316;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
}

.journey-content h3{
    margin:5px 0 8px;
    color:#1f365c;
    font-size:18px;
}

.journey-content p{
    color:#74869b;
    font-size:14px;
    line-height:1.75;
    margin:0;
}


/* VALUES */

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.value-card{
    position:relative;
    min-height:190px;
    padding:25px;
    overflow:hidden;
    border:1px solid #dce6f1;
    border-radius:22px;
    background:#fff;
    transition:.3s;
}

.value-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(31,54,92,.08);
}

.value-number{
    position:absolute;
    right:20px;
    top:10px;
    color:#edf2f7;
    font-size:50px;
    font-weight:900;
}

.value-card h3,
.value-card p{
    position:relative;
    z-index:1;
}

.value-card h3{
    color:#1f365c;
    font-size:20px;
    margin-top:25px;
}

.value-card p{
    color:#74859a;
    font-size:14px;
    line-height:1.75;
}


/* INDUSTRIES */

.about-industries-section{
    padding-top:90px;
    padding-bottom:90px;
}

.about-industries-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:center;
}

.about-industries-grid h2{
    color:#1f365c;
    font-size:45px;
    line-height:1.15;
    margin:15px 0 20px;
}

.about-industries-grid p{
    color:#728399;
    font-size:16px;
    line-height:1.85;
}

.about-industries-grid .btn{
    display:inline-flex;
    margin-top:15px;
}

.industry-cloud{
    min-height:360px;
    padding:45px;
    display:flex;
    align-content:center;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    border-radius:30px;
    background:
        radial-gradient(circle at 50% 50%,rgba(255,181,54,.12),transparent 40%),
        #f7faff;
    border:1px solid #dce7f2;
    box-shadow:inset 0 0 50px rgba(31,54,92,.03);
}

.industry-cloud span{
    display:inline-block;
    padding:11px 16px;
    border-radius:40px;
    background:#fff;
    border:1px solid #dbe5ef;
    color:#395371;
    font-size:14px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(31,54,92,.05);
    transition:.25s;
}

.industry-cloud span:nth-child(2n){
    background:#fff7e5;
    border-color:#f2d99f;
}

.industry-cloud span:hover{
    transform:translateY(-4px);
    border-color:#ffb536;
}


/* FAQ */

.about-faq-list{
    max-width:900px;
    margin:auto;
}

.about-faq-item{
    margin-bottom:12px;
    border:1px solid #dce6f1;
    border-radius:17px;
    background:#fff;
    overflow:hidden;
    transition:.25s;
}

.about-faq-item.open{
    border-color:#e6c16e;
    box-shadow:0 12px 30px rgba(31,54,92,.07);
}

.about-faq-question{
    width:100%;
    padding:20px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border:0;
    background:transparent;
    text-align:left;
    color:#1f365c;
    font:inherit;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
}

.about-faq-question b{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff4dc;
    color:#d99316;
    font-size:20px;
    transition:.3s;
}

.about-faq-item.open .about-faq-question b{
    transform:rotate(45deg);
}

.about-faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:.3s;
}

.about-faq-answer p{
    overflow:hidden;
    margin:0;
    padding:0 22px;
    color:#74859a;
    font-size:14px;
    line-height:1.8;
}

.about-faq-item.open .about-faq-answer{
    grid-template-rows:1fr;
}

.about-faq-item.open .about-faq-answer p{
    padding-bottom:20px;
}


/* FINAL CTA */

.about-final-cta{
    position:relative;
    overflow:hidden;
    margin:70px 0 0;
    padding:65px;
    border-radius:32px;
    background:
        radial-gradient(circle at 90% 10%,rgba(255,181,54,.18),transparent 30%),
        linear-gradient(120deg,#142b4b,#1f365c);
    color:#fff;
    box-shadow:0 25px 60px rgba(31,54,92,.2);
}

.about-final-cta-content{
    position:relative;
    z-index:2;
    max-width:780px;
}

.about-final-cta .eyebrow{
    color:#ffca68;
}

.about-final-cta h2{
    font-size:45px;
    line-height:1.15;
    margin:15px 0;
}

.about-final-cta h2 span{
    color:#ffbd4b;
}

.about-final-cta p{
    max-width:700px;
    color:#b8c9dc;
    font-size:16px;
    line-height:1.8;
}

.about-final-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.about-whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 20px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    transition:.25s;
}

.about-whatsapp-btn:hover{
    background:#fff;
    color:#1f365c;
    transform:translateY(-3px);
}

.about-final-badge{
    position:absolute;
    right:8%;
    top:50%;
    transform:translateY(-50%);
    width:190px;
    height:190px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.04);
    box-shadow:inset 0 0 50px rgba(255,255,255,.03);
}

.about-final-badge span{
    color:#ffca68;
    font-size:13px;
    letter-spacing:3px;
}

.about-final-badge strong{
    font-size:30px;
    margin:3px 0;
}

.about-final-badge small{
    color:#9db2ca;
    font-size:12px;
}

.cta-decoration{
    position:absolute;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.cta-decoration-one{
    width:400px;
    height:400px;
    right:-180px;
    top:-220px;
}

.cta-decoration-two{
    width:250px;
    height:250px;
    right:-100px;
    bottom:-170px;
}


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

@media(max-width:1000px){

    .about-hero-grid,
    .about-intro-grid,
    .about-approach-grid,
    .about-industries-grid{
        grid-template-columns:1fr;
    }

    .about-hero h1{
        font-size:48px;
    }

    .about-hero-visual{
        min-height:470px;
    }

    .about-intro-heading h2,
    .about-approach-content h2,
    .about-industries-grid h2{
        font-size:36px;
    }

    .about-capability-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-why-grid,
    .values-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-final-badge{
        opacity:.3;
        right:3%;
    }

}


@media(max-width:700px){

    .about-hero{
        padding:55px 0 65px;
    }

    .about-hero h1{
        font-size:38px;
        letter-spacing:-1.5px;
    }

    .about-hero-lead{
        font-size:16px;
    }

    .about-mini-trust{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:15px;
    }

    .about-mini-trust div{
        padding:0 0 0 15px;
    }

    .about-mini-trust div:first-child{
        padding-left:0;
    }

    .about-hero-visual{
        min-height:390px;
    }

    .about-main-card{
        width:310px;
        min-height:310px;
        padding:22px;
    }

    .about-orbit.orbit-one{
        width:350px;
        height:350px;
    }

    .about-orbit.orbit-two{
        width:275px;
        height:275px;
    }

    .about-floating-card{
        min-width:120px;
        padding:10px;
    }

    .floating-one{
        left:-2%;
    }

    .floating-two{
        right:-2%;
    }

    .floating-three{
        right:0;
        bottom:5%;
    }

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

    .about-stat-card:nth-child(2){
        border-right:0;
    }

    .about-stat-card:nth-child(-n+2){
        border-bottom:1px solid #e4ebf3;
    }

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

    .about-approach-visual{
        min-height:400px;
    }

    .circle-one{
        width:340px;
        height:340px;
    }

    .circle-two{
        width:240px;
        height:240px;
    }

    .approach-center{
        width:145px;
        height:145px;
    }

    .approach-center strong{
        font-size:22px;
    }

    .approach-node{
        padding:8px 11px;
    }

    .node-one{
        left:0;
    }

    .node-two{
        right:0;
    }

    .node-three{
        left:0;
    }

    .node-four{
        right:0;
    }

    .about-final-cta{
        padding:40px 25px;
        margin-top:45px;
    }

    .about-final-cta h2{
        font-size:31px;
    }

    .about-final-badge{
        display:none;
    }

    .journey-item{
        gap:15px;
    }

    .journey-content{
        padding:18px;
    }

    .industry-cloud{
        padding:25px;
        min-height:300px;
    }

}

/* =========================================================
   TRUSTED COMPANIES
========================================================= */

.trusted-companies {
    position: relative;
    padding: 110px 0 0;
    background: #f7f9fc;
    overflow: hidden;
}

.trusted-head {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.trusted-head h2 {
    margin: 16px 0;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: #1f365c;
}

.trusted-head h2 span {
    color: #ffb536;
}

.trusted-head p {
    max-width: 720px;
    margin: 0 auto;
    color: #68758a;
    line-height: 1.8;
    font-size: 16px;
}


/* COMPANY GRID */

.company-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.company-card {
    position: relative;
    padding: 30px;
    min-height: 270px;
    background: #ffffff;
    border: 1px solid rgba(31, 54, 92, .08);
    border-radius: 20px;
    box-shadow: 2px 2px 10px 2px;
    transition: all .35s ease;
    overflow: hidden;
}

.company-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        #1f365c,
        #ffb536
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.company-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(31, 54, 92, .13);
    border-color: rgba(255, 181, 54, .35);
}

.company-card:hover::before {
    transform: scaleX(1);
}


/* COMPANY TOP */

.company-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

.company-logo {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    background: #1f365c;
    box-shadow: 0 10px 25px rgba(31, 54, 92, .2);
}

.tech-logo,
.travel-logo {
    background: #ffb536;
    color: #1f365c;
}

.urban-logo {
    background: #1f365c;
}

.medi-logo {
    background: #294a78;
}

.edu-logo {
    background: #ffb536;
    color: #1f365c;
}

.company-top h3 {
    margin: 0 0 5px;
    color: #1f365c;
    font-size: 17px;
    letter-spacing: .4px;
}

.company-top span {
    color: #8a94a6;
    font-size: 13px;
}

.company-card > p {
    margin: 0 0 22px;
    color: #69768a;
    line-height: 1.7;
    font-size: 14px;
}


/* TAGS */

.company-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.company-tags span {
    padding: 7px 11px;
    border-radius: 50px;
    background: #f4f6f9;
    color: #1f365c;
    font-size: 11px;
    font-weight: 700;
}


/* TRUST STRIP */

.trust-strip {
    margin-top: 35px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(31, 54, 92, .08);
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(31, 54, 92, .05);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 23px 25px;
}

.trust-item + .trust-item {
    border-left: 1px solid #edf0f5;
}

.trust-item strong {
    font-size: 25px;
    color: #ffb536;
    line-height: 1;
}

.trust-item b {
    display: block;
    color: #1f365c;
    font-size: 16px;
    margin-bottom: 4px;
}

.trust-item span {
    display: block;
    color: #8791a2;
    font-size: 15px;
    line-height: 1.5;
}


/* CTA BAND */

.cta-band {
    position: relative;
    margin-top: 70px;
    border-radius: 26px 26px 0 0;
    overflow: hidden;
    background: #1f365c;
}

.cta-band::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -100px;
    top: -180px;
    border-radius: 50%;
    background: rgba(255, 181, 54, .12);
}

.cta-band::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: 40%;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}

.cta-band-inner {
    position: relative;
    z-index: 2;
    min-height: 220px;
    padding: 45px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-content > span {
    display: inline-block;
    margin-bottom: 10px;
    color: #ffb536;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.cta-content h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.15;
}

.cta-content h2 strong {
    color: #ffb536;
}

.cta-content p {
    max-width: 600px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.7);
    line-height: 1.7;
}

.cta-band .btn-primary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 23px;
    border-radius: 12px;
    background: #ffb536;
    color: #1f365c;
    font-weight: 800;
    text-decoration: none;
    transition: all .3s ease;
}

.cta-band .btn-primary span {
    font-size: 20px;
}

.cta-band .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255,181,54,.25);
}


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

.testimonials-section {
    position: relative;
    padding: 110px 0;
    background: #ffffff;
    overflow: hidden;
}

.testimonials-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -300px;
    top: 100px;
    border-radius: 50%;
    background: rgba(255,181,54,.06);
}

.testimonial-head {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.testimonial-head h2 {
    margin: 15px 0;
    font-size: clamp(34px, 4vw, 52px);
    color: #1f365c;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.testimonial-head h2 span {
    color: #ffb536;
}

.testimonial-head p {
    max-width: 680px;
    margin: auto;
    color: #718096;
    line-height: 1.8;
}


/* TESTIMONIAL GRID */

.testimonial-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.testimonial-card {
    position: relative;
    padding: 34px;
    border-radius: 20px;
    border: 1px solid #e9edf3;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(31,54,92,.055);
    transition: all .35s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,181,54,.4);
    box-shadow: 0 22px 55px rgba(31,54,92,.1);
}

.featured-testimonial {
    background: linear-gradient(
        145deg,
        #1f365c,
        #263f69
    );
    border-color: #1f365c;
}

.quote-mark {
    position: absolute;
    top: 18px;
    right: 30px;
    font-size: 76px;
    line-height: 1;
    font-family: Georgia, serif;
    color: rgba(31,54,92,.08);
}

.featured-testimonial .quote-mark {
    color: rgba(255,255,255,.08);
}

.stars {
    margin-bottom: 20px;
    color: #ffb536;
    font-size: 16px;
    letter-spacing: 2px;
}

.testimonial-text {
    position: relative;
    z-index: 1;
    margin: 0 0 30px;
    color: #647186;
    font-size: 16px;
    line-height: 1.85;
}

.featured-testimonial .testimonial-text {
    color: rgba(255,255,255,.78);
}


/* CLIENT INFO */

.client-info {
    display: flex;
    align-items: center;
    gap: 13px;
}

.client-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffb536;
    color: #1f365c;
    font-size: 16px;
    font-weight: 900;
}

.client-info h4 {
    margin: 0 0 3px;
    color: #1f365c;
    font-size: 16px;
}

.client-info span {
    color: #8b95a5;
    font-size: 14px;
}

.featured-testimonial .client-info h4 {
    color: #ffffff;
}

.featured-testimonial .client-info span {
    color: rgba(255,255,255,.55);
}


/* =========================================================
   MULTI COLOR TESTIMONIAL CARDS
========================================================= */

.testimonial-card {
    position: relative;

    width: 365px;
    min-width: 365px;
    min-height: 285px;

    padding: 30px;

    border-radius: 22px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 18px 45px rgba(20,30,50,.16);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}


/* =========================================================
   CARD 01 — NAVY / BLUE
========================================================= */

.testimonial-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #1f365c,
            #102442
        );
}


/* =========================================================
   CARD 02 — PURPLE
========================================================= */

.testimonial-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #493477,
            #24183e
        );
}


/* =========================================================
   CARD 03 — TEAL
========================================================= */

.testimonial-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #087f82,
            #064b50
        );
}


/* =========================================================
   CARD 04 — ORANGE
========================================================= */

.testimonial-card:nth-child(4) {
    background:
        linear-gradient(
            145deg,
            #c86b18,
            #73370d
        );
}


/* =========================================================
   CARD 05 — DARK GREEN
========================================================= */

.testimonial-card:nth-child(5) {
    background:
        linear-gradient(
            145deg,
            #24634f,
            #123d31
        );
}


/* =========================================================
   SECOND ROW COLORS
========================================================= */

/* CARD 01 */

.second-marquee .testimonial-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #384b7a,
            #202d51
        );
}


/* CARD 02 */

.second-marquee .testimonial-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #8a426b,
            #4b2140
        );
}


/* CARD 03 */

.second-marquee .testimonial-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #126b91,
            #093d59
        );
}


/* CARD 04 */

.second-marquee .testimonial-card:nth-child(4) {
    background:
        linear-gradient(
            145deg,
            #78552b,
            #423016
        );
}


/* CARD 05 */

.second-marquee .testimonial-card:nth-child(5) {
    background:
        linear-gradient(
            145deg,
            #465c32,
            #26351c
        );
}


/* =========================================================
   GOLD TOP ACCENT
========================================================= */

.testimonial-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffcf70,
            transparent
        );

    opacity: .85;
}


/* =========================================================
   CARD GLOW
========================================================= */

.testimonial-card::after {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    top: -110px;
    right: -80px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    filter: blur(12px);

    transition: all .4s ease;

    pointer-events: none;
}


.testimonial-card:hover::after {

    width: 260px;
    height: 260px;

    background:
        rgba(255,255,255,.13);
}


/* =========================================================
   HOVER
========================================================= */

.testimonial-card:hover {

    transform: translateY(-9px);

    border-color:
        rgba(255,255,255,.30);

    box-shadow:
        0 28px 65px rgba(15,25,45,.28);
}


/* =========================================================
   QUOTE
========================================================= */

.quote-mark {

    position: absolute;

    right: 24px;
    top: 10px;

    font-family: Georgia, serif;

    font-size: 88px;

    line-height: 1;

    color:
        rgba(255,255,255,.10);

    pointer-events: none;
}


/* =========================================================
   STARS
========================================================= */

.stars {

    position: relative;

    z-index: 3;

    margin-bottom: 20px;

    color: #ffd166;

    font-size: 14px;

    letter-spacing: 3px;

    text-shadow:
        0 0 12px rgba(255,209,102,.25);
}


/* =========================================================
   TESTIMONIAL TEXT
========================================================= */

.testimonial-text {

    position: relative;

    z-index: 3;

    margin: 0 0 28px;

    color:
        rgba(255,255,255,.84);

    font-size: 14px;

    line-height: 1.85;

    min-height: 105px;
}


/* =========================================================
   CLIENT INFO
========================================================= */

.client-info {

    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 13px;

    padding-top: 17px;

    border-top:
        1px solid rgba(255,255,255,.14);
}


.client-avatar {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ffe09a,
            #ffb536
        );

    color: #1f365c;

    font-size: 12px;

    font-weight: 900;

    box-shadow:
        0 8px 22px rgba(0,0,0,.15);
}


.client-info h4 {

    margin: 0 0 4px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;
}


.client-info span {

    color:
        rgba(255,255,255,.58);

    font-size: 11px;
}


/* =========================================================
   CLIENT LABEL
========================================================= */

.testimonial-card .client-info::after {

    content: "CLIENT";

    margin-left: auto;

    padding: 5px 8px;

    border-radius: 50px;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.10);

    color:
        rgba(255,255,255,.55);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   PAUSE ON HOVER
========================================================= */

.testimonial-marquee:hover .testimonial-track {

    animation-play-state: paused;
}


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

@media (max-width: 1200px) {

    .testimonial-card {

        width: 325px;
        min-width: 325px;

    }

}


@media (max-width: 700px) {

    .testimonial-card {

        width: 290px;
        min-width: 290px;

        min-height: 270px;

        padding: 25px;

        border-radius: 19px;

    }

}


/* ==========================================
   TESTIMONIAL MARQUEE FIX
========================================== */

.testimonial-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 50px;
}

.testimonial-row {
    width: 100%;
    overflow: hidden;
    margin-bottom: 25px;

    /* edge fade */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
}

.testimonial-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 22px;
    width: max-content !important;
}

/* IMPORTANT:
   Card ko column me jaane se rokta hai
*/
.testimonial-track .testimonial-card {
    flex: 0 0 360px !important;
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;

    min-height: 285px;

    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    border-radius: 22px;
    padding: 30px;

    color: #fff;

    border: 1px solid rgba(255,255,255,.13);

    box-shadow:
        0 18px 45px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

/* Hover */
.testimonial-track .testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 28px 55px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.15);
    z-index: 5;
}


/* ==========================================
   ROW 1
   LEFT → RIGHT
========================================== */

.testimonial-left {
    animation: testimonialLeft 35s linear infinite;
}


/* ==========================================
   ROW 2
   RIGHT → LEFT
========================================== */

.testimonial-right {
    animation: testimonialRight 35s linear infinite;
}


/* LEFT MOVEMENT */
@keyframes testimonialLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 11px));
    }

}


/* RIGHT MOVEMENT */
@keyframes testimonialRight {

    from {
        transform: translateX(calc(-50% - 11px));
    }

    to {
        transform: translateX(0);
    }

}


/* Pause on hover */
.testimonial-row:hover .testimonial-track {
    animation-play-state: paused;
}


/* ==========================================
   CARD COLORS
========================================== */

/* ROW 1 */

.testimonial-left .testimonial-card:nth-child(1),
.testimonial-left .testimonial-card:nth-child(6) {
    background: linear-gradient(
        145deg,
        #1f365c,
        #102442
    );
}

.testimonial-left .testimonial-card:nth-child(2),
.testimonial-left .testimonial-card:nth-child(7) {
    background: linear-gradient(
        145deg,
        #493477,
        #24183e
    );
}

.testimonial-left .testimonial-card:nth-child(3),
.testimonial-left .testimonial-card:nth-child(8) {
    background: linear-gradient(
        145deg,
        #087f82,
        #064b50
    );
}

.testimonial-left .testimonial-card:nth-child(4),
.testimonial-left .testimonial-card:nth-child(9) {
    background: linear-gradient(
        145deg,
        #c86b18,
        #73370d
    );
}

.testimonial-left .testimonial-card:nth-child(5),
.testimonial-left .testimonial-card:nth-child(10) {
    background: linear-gradient(
        145deg,
        #24634f,
        #123d31
    );
}


/* ROW 2 */

.testimonial-right .testimonial-card:nth-child(1),
.testimonial-right .testimonial-card:nth-child(6) {
    background: linear-gradient(
        145deg,
        #384b7a,
        #202d51
    );
}

.testimonial-right .testimonial-card:nth-child(2),
.testimonial-right .testimonial-card:nth-child(7) {
    background: linear-gradient(
        145deg,
        #8a426b,
        #4b2140
    );
}

.testimonial-right .testimonial-card:nth-child(3),
.testimonial-right .testimonial-card:nth-child(8) {
    background: linear-gradient(
        145deg,
        #126b91,
        #093d59
    );
}

.testimonial-right .testimonial-card:nth-child(4),
.testimonial-right .testimonial-card:nth-child(9) {
    background: linear-gradient(
        145deg,
        #78552b,
        #423016
    );
}

.testimonial-right .testimonial-card:nth-child(5),
.testimonial-right .testimonial-card:nth-child(10) {
    background: linear-gradient(
        145deg,
        #465c32,
        #26351c
    );
}


/* ==========================================
   CARD CONTENT
========================================== */

.testimonial-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #ffb536,
        transparent
    );

    opacity: .9;
}

.quote-mark {
    position: absolute;

    right: 24px;
    top: 15px;

    font-size: 75px;
    line-height: 1;

    font-family: Georgia, serif;

    color: rgba(255,255,255,.10);
}

.stars {
    position: relative;
    z-index: 2;

    color: #ffd166;

    font-size: 14px;
    letter-spacing: 2px;

    margin-bottom: 18px;
}

.testimonial-text {
    position: relative;
    z-index: 2;

    color: rgba(255,255,255,.88);

    font-size: 15px;
    line-height: 1.75;

    margin: 0 0 25px;
}

.client-info {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: auto;
}

.client-avatar {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 50%;

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

    background: linear-gradient(
        135deg,
        #ffcf70,
        #ff9d00
    );

    color: #172742;

    font-size: 13px;
    font-weight: 800;

    box-shadow: 0 7px 20px rgba(0,0,0,.22);
}

.client-info h4 {
    margin: 0 0 3px;

    color: #fff;

    font-size: 15px;
}

.client-info span {
    color: rgba(255,255,255,.65);

    font-size: 12px;
}


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

@media (max-width: 768px) {

    .testimonial-track {
        gap: 16px;
    }

    .testimonial-track .testimonial-card {
        flex: 0 0 290px !important;
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;

        min-height: 270px;

        padding: 25px;
    }

    .testimonial-left {
        animation-duration: 28s;
    }

    .testimonial-right {
        animation-duration: 28s;
    }

}

@media (max-width: 480px) {

    .testimonial-track .testimonial-card {
        flex: 0 0 275px !important;
        width: 275px !important;
        min-width: 275px !important;
        max-width: 275px !important;
    }

}

/* ==========================================
   TESTIMONIAL BOTTOM CTA
========================================== */

.testimonial-bottom {
    position: relative;
    margin-top: 55px;
    padding: 30px 34px;

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

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,181,54,.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #1f365c 0%,
            #152945 55%,
            #0d1b30 100%
        );

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 20px 50px rgba(15,30,55,.18),
        inset 0 1px 0 rgba(255,255,255,.08);

    overflow: hidden;
}


/* Background glow */
.testimonial-bottom::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -60px;
    bottom: -90px;

    background: rgba(255,181,54,.16);

    border-radius: 50%;

    filter: blur(10px);

    pointer-events: none;
}


/* Gold top line */
.testimonial-bottom::after {
    content: "";

    position: absolute;

    left: 35px;
    right: 35px;
    top: 0;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #ffb536 25%,
        #ffd477 50%,
        #ffb536 75%,
        transparent
    );

    opacity: .9;
}


/* ==========================================
   LEFT CONTENT
========================================== */

.testimonial-bottom > div {
    position: relative;
    z-index: 2;
}

.testimonial-bottom span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 9px;

    color: #ffb536;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;
}


/* Small gold dot */
.testimonial-bottom span::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ffb536;

    box-shadow:
        0 0 0 5px rgba(255,181,54,.10),
        0 0 18px rgba(255,181,54,.45);
}


/* Heading */
.testimonial-bottom h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(22px, 2.3vw, 31px);
    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -.5px;
}


/* ==========================================
   CTA BUTTON
========================================== */

.testimonial-btn {
    position: relative;
    z-index: 3;

    flex-shrink: 0;

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

    min-height: 54px;

    padding: 0 23px;

    border-radius: 13px;

    background: #ffb536;

    color: #182b48 !important;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 800;

    border: 1px solid rgba(255,255,255,.18);

    box-shadow:
        0 10px 25px rgba(0,0,0,.20),
        0 0 0 rgba(255,181,54,0);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* Arrow */
.testimonial-btn span {
    margin: 0;

    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    background: rgba(24,43,72,.12);

    color: #182b48;

    font-size: 16px;

    letter-spacing: 0;

    transition:
        transform .3s ease,
        background .3s ease;
}


/* Remove dot from button span */
.testimonial-btn span::before {
    display: none;
}


/* Hover */
.testimonial-btn:hover {
    background: #ffd06b;

    transform: translateY(-4px);

    box-shadow:
        0 16px 35px rgba(0,0,0,.25),
        0 0 25px rgba(255,181,54,.20);
}


.testimonial-btn:hover span {
    transform: translate(3px, -3px);

    background: rgba(24,43,72,.18);
}


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

@media (max-width: 768px) {

    .testimonial-bottom {
        margin-top: 40px;

        padding: 27px 24px;

        flex-direction: column;
        align-items: flex-start;

        gap: 22px;

        border-radius: 20px;
    }

    .testimonial-bottom h3 {
        font-size: 22px;
        max-width: 480px;
    }

    .testimonial-btn {
        width: 100%;
        min-height: 52px;
    }

}


@media (max-width: 480px) {

    .testimonial-bottom {
        padding: 24px 20px;
    }

    .testimonial-bottom::after {
        left: 20px;
        right: 20px;
    }

    .testimonial-bottom span {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .testimonial-bottom h3 {
        font-size: 20px;
    }

}

/* ==========================================
   COMPANY CARD - PREMIUM HOVER BACKGROUND
========================================== */

.company-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Existing transition */
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border-color .45s ease,
        box-shadow .45s ease;
}


/* ==========================================
   BOTTOM TO TOP COLOR FILL
========================================== */

.company-card::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 100%;

    /* Default hover color */
    background: linear-gradient(
        135deg,
        #ffb536,
        #f28a18
    );

    transform: translateY(100%);

    transition:
        transform .55s cubic-bezier(.77,0,.18,1);

    z-index: -1;
}


/* ==========================================
   HOVER
========================================== */

.company-card:hover::before {
    transform: translateY(0);
}


.company-card:hover {
    transform: translateY(-8px);

    border-color: rgba(255,255,255,.25);

    box-shadow:
        0 25px 55px rgba(15,35,65,.25),
        0 0 30px rgba(255,181,54,.12);
}


/* ==========================================
   CONTENT ABOVE BACKGROUND
========================================== */

.company-card > * {
    position: relative;
    z-index: 2;
}


/* ==========================================
   DIFFERENT COLOR FOR EVERY CARD
========================================== */


/* CARD 01 - Orange */
.company-card:nth-child(1)::before {
    background:
        linear-gradient(
            135deg,
            #ffb536 0%,
            #f27b18 100%
        );
}


/* CARD 02 - Blue */
.company-card:nth-child(2)::before {
    background:
        linear-gradient(
            135deg,
            #3d82ff 0%,
            #1f4fa8 100%
        );
}


/* CARD 03 - Purple */
.company-card:nth-child(3)::before {
    background:
        linear-gradient(
            135deg,
            #9b5cff 0%,
            #5930a8 100%
        );
}


/* CARD 04 - Teal */
.company-card:nth-child(4)::before {
    background:
        linear-gradient(
            135deg,
            #20c9b0 0%,
            #087c78 100%
        );
}


/* CARD 05 - Pink / Red */
.company-card:nth-child(5)::before {
    background:
        linear-gradient(
            135deg,
            #ff6b81 0%,
            #b72f52 100%
        );
}


/* CARD 06 - Green */
.company-card:nth-child(6)::before {
    background:
        linear-gradient(
            135deg,
            #62c96b 0%,
            #23703b 100%
        );
}


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

.company-card:hover .company-logo {
    background: rgba(255,255,255,.95);

    color: #1f365c;

    transform: scale(1.08) rotate(-3deg);

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);
}


/* ==========================================
   HEADING / TEXT HOVER
========================================== */

.company-card:hover h3 {
    color: #fff;
}

.company-card:hover .company-top span {
    color: rgba(255,255,255,.82);
}

.company-card:hover > p {
    color: rgba(255,255,255,.90);
}


/* ==========================================
   TAGS HOVER
========================================== */

.company-card:hover .company-tags span {
    background: rgba(255,255,255,.16);

    border-color: rgba(255,255,255,.28);

    color: #fff;
}


/* ==========================================
   LOGO SMOOTH TRANSITION
========================================== */

.company-logo {
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}


.company-tags span {
    transition:
        background .35s ease,
        border-color .35s ease,
        color .35s ease;
}

/* =========================================================
   MOBILE + TABLET RESPONSIVE ONLY
   Desktop / Laptop CSS is NOT affected
========================================================= */


/* =========================================================
   TABLET — 991px AND BELOW
========================================================= */

@media (max-width: 991px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 40px);
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
    }


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

    .hero {
        padding-top: 70px;
        padding-bottom: 60px;
        overflow: hidden;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .hero-grid > div:first-child {
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
    }

    .hero h1 {
        font-size: clamp(42px, 7vw, 60px);
        line-height: 1.08;
    }

    .hero .lead {
        max-width: 720px;
        margin: 20px auto 0;
        line-height: 1.75;
    }

    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-points {
        justify-content: center;
        flex-wrap: wrap;
    }

    .scene-wrap {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        transform: scale(.82);
        transform-origin: center top;
    }


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

    .service-scroller {
        position: relative;
        width: 100%;
    }

    .cards-track {
        display: flex;
        gap: 20px;

        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;

        padding: 10px 5px 25px;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .cards-track::-webkit-scrollbar {
        display: none;
    }

    .service-card {
        flex: 0 0 calc(50% - 10px);
        width: calc(50% - 10px);
        min-width: 0;

        scroll-snap-align: start;

        position: relative;
        z-index: 2;
    }

    .service-card .learn {
        position: relative;
        z-index: 100;
        pointer-events: auto;
        cursor: pointer;
        touch-action: manipulation;
    }

    .service-card::before,
    .service-card::after {
        pointer-events: none !important;
    }

    .scroll-btn {
        position: relative;
        z-index: 200;
    }


    /* =====================================================
       WHY CHOOSE US
    ===================================================== */

    .why {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .analytics-scene {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
    }

    .why-copy {
        width: 100%;
        max-width: 760px;
        margin: 42px auto;
    }


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

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }


    /* =====================================================
       TRUSTED COMPANIES
    ===================================================== */

    .company-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .trust-strip {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .trust-item {
        width: 100%;
    }


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

    .cta-band-inner {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }


    /* =====================================================
       TESTIMONIAL
    ===================================================== */

    .testimonial-marquee {
        width: 100%;
        overflow: hidden;
    }

    .testimonial-card {
        flex: 0 0 310px;
        width: 310px;
    }

    .testimonial-bottom {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
}


/* =========================================================
   MOBILE — 767px AND BELOW
========================================================= */

@media (max-width: 767px) {

    html,
    body {
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 28px);
    }


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

    .hero {
        padding-top: 55px;
        padding-bottom: 45px;
    }

    .hero-grid {
        gap: 5px;
    }

    .hero h1 {
        font-size: clamp(34px, 9vw, 48px);
        line-height: 1.08;
        margin-top: 12px;
    }

    .hero .lead {
        font-size: 15px;
        line-height: 1.7;
        margin-top: 18px;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        width: 90%;
        gap: 12px;
        margin-top: 25px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-points {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 25px;
    }

    .point {
        font-size: 12px;
        justify-content: center;
        white-space: nowrap;
    }

    .point i {
        font-size: 16px;
    }


    /* =====================================================
       3D HERO SCENE
    ===================================================== */

    .scene-wrap {
        transform: scale(.68);
        transform-origin: center top;

        margin-top: -35px;
        margin-bottom: -65px;
    }

    .drag-hint {
        font-size: 11px;
    }


    /* =====================================================
       SECTION HEADINGS
    ===================================================== */

    .section {
        padding-top: 55px;
        padding-bottom: 0px;
    }

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

    .section-head h2 {
        font-size: clamp(28px, 7vw, 38px);
        line-height: 1.15;
    }

    .section-head p {
        font-size: 14px;
        line-height: 1.7;
    }


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

    .service-scroller {
        margin-top: 25px;
    }

    .cards-track {
        gap: 14px;
        padding: 8px 4px 22px;
    }

    .service-card {
        flex: 0 0 82%;
        width: 82%;
        padding: 24px;
        border-radius: 22px;
    }

    .service-card h3 {
        font-size: 21px;
        margin-bottom: 10px;
    }

    .service-card p {
        font-size: 14px;
        line-height: 1.65;
    }

    .service-card .learn {
        display: inline-flex;
        margin-top: 8px;
        position: relative;
        z-index: 999;
        pointer-events: auto !important;
    }

    .scroll-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 24px;
    }


    /* =====================================================
       WHY CHOOSE US
    ===================================================== */

    .why {
        gap: 25px;
    }

    .analytics-scene {
        transform: scale(.78);
        transform-origin: center;

        margin-top: -30px;
        margin-bottom: -60px;
    }

    .why-copy h2 {
        font-size: clamp(28px, 7vw, 40px);
        line-height: 1.15;
    }

    .why-copy .lead {
        font-size: 14px;
        line-height: 1.7;
    }

    .checks {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .check {
        font-size: 14px;
    }

    .why-copy .btn {
        width: 100%;
        justify-content: center;
    }


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

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

        padding: 18px 10px;
        border-radius: 22px;
    }

    .stat {
        padding: 15px 8px;
    }

    .stat b {
        font-size: 27px;
    }

    .stat span {
        font-size: 11px;
    }


    /* =====================================================
       TRUSTED COMPANIES
    ===================================================== */

    .trusted-companies {
        overflow: hidden;
    }

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

    .company-card {
        padding: 22px;
        border-radius: 22px;
    }

    .company-card p {
        font-size: 14px;
        line-height: 1.7;
    }

    .company-tags {
        flex-wrap: wrap;
        gap: 7px;
    }

    .company-tags span {
        font-size: 10px;
    }


    /* =====================================================
       TRUST STRIP
    ===================================================== */

    .trust-strip {
        margin-top: 25px;
    }

    .trust-item {
        padding: 18px;
        gap: 15px;
    }

    .trust-item strong {
        flex-shrink: 0;
    }


    /* =====================================================
       CTA BAND
    ===================================================== */

    .cta-band {
        margin-top: 30px;
    }

    .cta-band-inner {
        padding: 32px 22px;
    }

    .cta-content h2 {
        font-size: clamp(29px, 8vw, 40px);
        line-height: 1.1;
    }

    .cta-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .cta-band .btn {
        width: 100%;
        justify-content: center;
    }


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

    .testimonials-section {
        overflow: hidden;
    }

    .testimonial-marquee {
        width: 100%;
        overflow: hidden;
    }

    .testimonial-track {
        gap: 14px;
    }

    .testimonial-card {
        flex: 0 0 285px;
        width: 285px;
        padding: 22px;
    }

    .testimonial-text {
        font-size: 13px;
        line-height: 1.7;
    }

    .testimonial-bottom {
        padding: 28px 20px;
        gap: 20px;
    }

    .testimonial-bottom h3 {
        font-size: 23px;
        line-height: 1.25;
    }

    .testimonial-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   SMALL MOBILE — 480px
========================================================= */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 22px);
    }


    /* HERO */

    .hero {
        padding-top: 45px;
        padding-bottom: 35px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero .lead {
        font-size: 14px;
    }

    .hero-points {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .point {
        justify-content: flex-start;
        text-align: left;
    }


    /* 3D */

    .scene-wrap {
        transform: scale(.57);
                margin-left: -31px;
        margin-top: 5px;
        margin-bottom: 36px;
    }


    /* SERVICES */

    .service-card {
        flex: 0 0 88%;
        width: 88%;
        padding: 21px;
    }

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

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


    /* WHY */

    .analytics-scene {
        transform: scale(.68);
        margin-top: -80px;
        margin-bottom: -110px;
    }

    .why-copy h2 {
        font-size: 29px;
    }


    /* STATS */

    .stats {
        gap: 8px;
        padding: 15px 8px;
    }

    .stat b {
        font-size: 24px;
    }

    .stat span {
        font-size: 10px;
    }


    /* COMPANY */

    .company-card {
        padding: 19px;
    }

    .company-logo {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }


    /* TESTIMONIAL */

    .testimonial-card {
        flex-basis: 270px;
        width: 270px;
    }
}


/* =========================================================
   EXTRA SMALL — 360px
========================================================= */

@media (max-width: 360px) {

    .container {
        width: calc(100% - 18px);
    }

    .hero h1 {
        font-size: 30px;
    }

    .section-head h2 {
        font-size: 25px;
    }

    .service-card {
        flex-basis: 92%;
        width: 92%;
    }

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

    .stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .testimonial-card {
        flex-basis: 255px;
        width: 255px;
    }
}


/* =========================================================
   MOBILE TOUCH FIX
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .service-card .learn,
    .btn,
    .testimonial-btn,
    .scroll-btn {
        cursor: pointer;
        touch-action: manipulation;
    }

    .service-card .learn {
        position: relative;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }

    .service-card::before,
    .service-card::after {
        pointer-events: none !important;
    }
}


/* =========================================================
   MOBILE HORIZONTAL OVERFLOW FIX
========================================================= */

@media (max-width: 991px) {

    .hero,
    .section,
    .trusted-companies,
    .testimonials-section {
        max-width: 100%;
        overflow-x: clip;
    }

    .cards-track {
        overscroll-behavior-x: contain;
    }
}