/* =========================================================
   WEBSITE BANDUNG LANDING PAGE
   Modern Digital Agency
========================================================= */

:root {
    --wb-bg: #07111f;
    --wb-bg-2: #0a1627;
    --wb-bg-3: #0e1c30;

    --wb-white: #ffffff;
    --wb-text: #e8eef7;
    --wb-muted: #8fa1b7;

    --wb-blue: #3b82f6;
    --wb-blue-2: #60a5fa;
    --wb-cyan: #22d3ee;

    --wb-border: rgba(255,255,255,.09);
    --wb-card: rgba(255,255,255,.045);

    --wb-shadow:
        0 25px 70px rgba(0,0,0,.35);

    --wb-radius: 22px;

    --wb-container: 1180px;

    --wb-transition:
        all .35s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   RESET
========================================================= */

.wb-page,
.wb-page *,
.wb-page *::before,
.wb-page *::after {
    box-sizing: border-box;
}

.wb-page {
    margin: 0 !important;
    padding: 0 !important;

    background:
        var(--wb-bg);

    color:
        var(--wb-text);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;
}

.wb-page a {
    text-decoration: none;
}

.wb-page button,
.wb-page input,
.wb-page textarea {
    font-family: inherit;
}

.wb-container {
    width: min(
        calc(100% - 40px),
        var(--wb-container)
    );

    margin-inline: auto;
}


/* =========================================================
   LOADER
========================================================= */

.wb-loader {
    position: fixed;

    inset: 0;

    z-index: 99999;

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

    background:
        #050d18;

    transition:
        opacity .6s ease,
        visibility .6s ease;
}

.wb-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.wb-loader-inner {
    width: 180px;
}

.wb-loader-logo {
    text-align: center;

    font-size: 25px;

    font-weight: 900;

    letter-spacing: 2px;

    margin-bottom: 20px;
}

.wb-loader-logo span {
    color:
        var(--wb-blue);
}

.wb-loader-bar {
    width: 100%;
    height: 3px;

    overflow: hidden;

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

.wb-loader-bar span {
    display: block;

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--wb-blue),
            var(--wb-cyan)
        );

    animation:
        wbLoader 1.4s ease forwards;
}

@keyframes wbLoader {

    to {
        width: 100%;
    }

}


/* =========================================================
   NAVBAR
========================================================= */

.wb-navbar {
    position: fixed;

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

    z-index: 1000;

    transition:
        var(--wb-transition);
}

.wb-navbar.scrolled {

    background:
        rgba(5,13,24,.82);

    backdrop-filter:
        blur(18px);

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

}

.wb-nav-inner {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.wb-logo {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        var(--wb-white);

    font-weight: 900;

    letter-spacing: .5px;
}

.wb-logo-mark {

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--wb-blue),
            var(--wb-cyan)
        );

    box-shadow:
        0 10px 30px rgba(59,130,246,.3);
}

.wb-logo-text {
    font-size: 15px;
}

.wb-logo-text span {
    color:
        var(--wb-blue-2);
    margin-left: 2px;
}

.wb-nav-menu {

    display: flex;

    align-items: center;

    gap: 29px;
}

.wb-nav-menu > a {

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

    font-size: 13px;

    font-weight: 600;

    transition:
        var(--wb-transition);
}

.wb-nav-menu > a:hover {
    color:
        #fff;
}

.wb-nav-cta {

    padding:
        11px 18px;

    border:
        1px solid rgba(96,165,250,.35);

    border-radius:
        999px;

    color:
        #fff !important;

    background:
        rgba(59,130,246,.12);
}

.wb-nav-cta:hover {
    background:
        var(--wb-blue);
}

.wb-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

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

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

    border-radius: 12px;

    cursor: pointer;
}

.wb-menu-toggle span {

    display: block;

    width: 21px;
    height: 2px;

    margin: 5px auto;

    background: #fff;

    transition: .3s;
}


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

.wb-hero {

    min-height:
        850px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        140px 0 100px;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(37,99,235,.17),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 70%,
            rgba(34,211,238,.08),
            transparent 28%
        ),
        var(--wb-bg);
}

.wb-hero-grid {

    position: absolute;

    inset: 0;

    opacity: .3;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );
}

.wb-glow {

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter:
        blur(90px);

    opacity: .2;

    pointer-events: none;
}

.wb-glow-one {

    background:
        var(--wb-blue);

    top:
        120px;

    right:
        -200px;
}

.wb-glow-two {

    background:
        var(--wb-cyan);

    bottom:
        -300px;

    left:
        -200px;
}

.wb-hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1.05fr;

    gap:
        70px;

    align-items: center;
}

.wb-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        8px 13px;

    border:
        1px solid rgba(96,165,250,.2);

    background:
        rgba(59,130,246,.08);

    border-radius:
        999px;

    color:
        #9fc7ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        1.6px;
}

.wb-eyebrow-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--wb-cyan);

    box-shadow:
        0 0 12px var(--wb-cyan);
}

.wb-hero-title {

    max-width:
        720px;

    margin:
        24px 0 22px;

    color:
        #fff;

    font-size:
        clamp(44px, 5.4vw, 76px);

    line-height:
        1.02;

    letter-spacing:
        -3.5px;

    font-weight:
        900;
}

.wb-hero-title span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #fff 0%,
            var(--wb-blue-2) 45%,
            var(--wb-cyan) 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.wb-hero-description {

    max-width:
        610px;

    color:
        var(--wb-muted);

    font-size:
        17px;

    line-height:
        1.8;

    margin-bottom:
        32px;
}

.wb-hero-buttons {

    display: flex;

    align-items: center;

    gap: 13px;

    flex-wrap: wrap;
}

.wb-btn {

    min-height:
        52px;

    padding:
        0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    border-radius:
        12px;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        var(--wb-transition);

    cursor: pointer;
}

.wb-btn-primary {

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--wb-blue),
            #2563eb
        );

    box-shadow:
        0 16px 35px rgba(37,99,235,.28);
}

.wb-btn-primary:hover {

    color: #fff;

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 45px rgba(37,99,235,.38);
}

.wb-btn-outline {

    color:
        #fff;

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

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

.wb-btn-outline:hover {

    color: #fff;

    border-color:
        rgba(96,165,250,.4);

    background:
        rgba(59,130,246,.08);

    transform:
        translateY(-3px);
}

.wb-btn-arrow {
    font-size: 18px;
}

.wb-hero-trust {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 45px;
}

.wb-trust-item {

    display: flex;

    flex-direction: column;
}

.wb-trust-item strong {

    color:
        #fff;

    font-size:
        13px;
}

.wb-trust-item span {

    color:
        #71839a;

    font-size:
        10px;
}

.wb-trust-line {

    width: 1px;

    height: 32px;

    background:
        var(--wb-border);
}


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

.wb-hero-visual {

    position: relative;

    min-height:
        560px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.wb-browser {

    width:
        min(100%, 620px);

    overflow:
        hidden;

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

    border-radius:
        20px;

    background:
        #101c2e;

    box-shadow:
        0 40px 100px rgba(0,0,0,.45),
        0 0 80px rgba(37,99,235,.1);

    transform:
        perspective(1000px)
        rotateY(-5deg)
        rotateX(2deg);

    transition:
        transform .6s ease;
}

.wb-browser:hover {

    transform:
        perspective(1000px)
        rotateY(0)
        rotateX(0)
        translateY(-5px);
}

.wb-browser-top {

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    padding:
        0 15px;

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

    background:
        #0b1525;
}

.wb-browser-dots {

    display:
        flex;

    gap:
        6px;
}

.wb-browser-dots i {

    width: 8px;
    height: 8px;

    border-radius:
        50%;

    background:
        #405066;
}

.wb-browser-address {

    flex: 1;

    max-width:
        260px;

    padding:
        6px 12px;

    border-radius:
        6px;

    color:
        #71839a;

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

    font-size:
        9px;
}

.wb-browser-body {

    min-height:
        430px;

    padding:
        24px;

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

.wb-demo-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #14233a;
}

.wb-demo-logo {

    font-size:
        11px;

    font-weight:
        900;
}

.wb-demo-navlinks {

    color:
        #728096;

    font-size:
        7px;
}

.wb-demo-button {

    padding:
        7px 11px;

    border-radius:
        7px;

    color:
        #fff;

    background:
        #2563eb;

    font-size:
        7px;

    font-weight:
        800;
}

.wb-demo-hero {

    min-height:
        315px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        20px;
}

.wb-demo-copy span {

    color:
        #2563eb;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1px;
}

.wb-demo-copy h3 {

    margin:
        8px 0;

    color:
        #16263e;

    font-size:
        31px;

    line-height:
        1.05;

    letter-spacing:
        -1.5px;
}

.wb-demo-copy p {

    color:
        #7b8aa0;

    font-size:
        8px;

    max-width:
        170px;
}

.wb-demo-cta {

    display:
        inline-block;

    margin-top:
        12px;

    padding:
        8px 12px;

    border-radius:
        6px;

    color:
        #fff;

    background:
        #2563eb;

    font-size:
        7px;

    font-weight:
        800;
}

.wb-demo-visual {

    min-height:
        250px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.wb-demo-circle {

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #60a5fa,
            #2563eb 55%,
            #172554
        );

    box-shadow:
        0 30px 60px rgba(37,99,235,.3);
}

.wb-demo-card {

    position:
        absolute;

    padding:
        12px;

    min-width:
        100px;

    border-radius:
        10px;

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

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

    backdrop-filter:
        blur(10px);
}

.wb-demo-card b {

    display:
        block;

    color:
        #17233a;

    font-size:
        16px;
}

.wb-demo-card small {

    color:
        #8090a5;

    font-size:
        7px;
}

.wb-demo-card-one {

    top:
        35px;

    right:
        0;
}

.wb-demo-card-two {

    bottom:
        35px;

    left:
        0;
}

.wb-demo-bottom {

    display:
        grid;

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

    gap:
        10px;
}

.wb-demo-bottom div {

    height:
        45px;

    border-radius:
        8px;

    background:
        #fff;

    box-shadow:
        0 8px 20px rgba(15,23,42,.06);
}

.wb-floating-card {

    position:
        absolute;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px 16px;

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

    border-radius:
        13px;

    color:
        #fff;

    background:
        rgba(12,27,48,.82);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.3);

    animation:
        wbFloat 4s ease-in-out infinite;
}

.wb-floating-card strong {

    display:
        block;

    font-size:
        11px;
}

.wb-floating-card small {

    display:
        block;

    color:
        #71839a;

    font-size:
        8px;
}

.wb-floating-top {

    top:
        50px;

    right:
        -10px;
}

.wb-floating-bottom {

    bottom:
        55px;

    left:
        -25px;

    animation-delay:
        -2s;
}

.wb-mini-icon,
.wb-stat-icon {

    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        #fff;

    background:
        rgba(59,130,246,.18);
}

.wb-scroll-indicator {

    position:
        absolute;

    left:
        50%;

    bottom:
        25px;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #60738c;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        1.4px;
}

.wb-scroll-indicator span {

    width:
        18px;

    height:
        28px;

    border:
        1px solid #41546b;

    border-radius:
        12px;

    position:
        relative;
}

.wb-scroll-indicator span::after {

    content: "";

    position:
        absolute;

    width:
        3px;

    height:
        5px;

    border-radius:
        3px;

    background:
        #8ba0ba;

    left:
        50%;

    top:
        6px;

    transform:
        translateX(-50%);

    animation:
        wbScroll 1.8s infinite;
}

@keyframes wbFloat {

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

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

}

@keyframes wbScroll {

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

    40% {
        opacity: 1;
    }

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

}


/* =========================================================
   TRUST
========================================================= */

.wb-trust-bar {

    border-top:
        1px solid var(--wb-border);

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

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

.wb-trust-grid {

    min-height:
        92px;

    display:
        grid;

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

    gap:
        20px;

    align-items:
        center;
}

.wb-trust-grid > div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        #91a3b9;

    font-size:
        11px;

    font-weight:
        700;
}

.wb-check {

    color:
        var(--wb-cyan);
}


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

.wb-section {

    position:
        relative;

    padding:
        120px 0;
}

.wb-section-heading {

    max-width:
        720px;

    margin-bottom:
        55px;
}

.wb-section-label {

    display:
        inline-block;

    color:
        #60a5fa;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        2px;
}

.wb-section-heading h2,
.wb-feature-content h2,
.wb-seo-main h2,
.wb-faq-intro h2,
.wb-area-inner h2 {

    margin:
        13px 0 18px;

    color:
        #fff;

    font-size:
        clamp(34px,4vw,55px);

    line-height:
        1.08;

    letter-spacing:
        -2px;

    font-weight:
        900;
}

.wb-section-heading h2 span,
.wb-feature-content h2 span,
.wb-seo-main h2 span,
.wb-faq-intro h2 span,
.wb-area-inner h2 span {

    color:
        var(--wb-blue-2);
}

.wb-section-heading p {

    max-width:
        650px;

    color:
        var(--wb-muted);

    font-size:
        15px;

    line-height:
        1.8;
}


/* =========================================================
   PROBLEM
========================================================= */

.wb-problem {
    background:
        #081423;
}

.wb-problem-grid {

    display:
        grid;

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

    gap:
        16px;
}

.wb-problem-card {

    position:
        relative;

    min-height:
        270px;

    padding:
        28px;

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

    border-radius:
        var(--wb-radius);

    background:
        var(--wb-card);

    overflow:
        hidden;

    transition:
        var(--wb-transition);
}

.wb-problem-card::before {

    content: "";

    position:
        absolute;

    width:
        130px;

    height:
        130px;

    right:
        -60px;

    top:
        -60px;

    border-radius:
        50%;

    background:
        rgba(59,130,246,.08);
}

.wb-problem-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(96,165,250,.28);

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

.wb-card-number {

    color:
        #3b4d65;

    font-size:
        11px;

    font-weight:
        900;
}

.wb-problem-icon {

    width:
        48px;

    height:
        48px;

    margin:
        28px 0 22px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    color:
        #8dc3ff;

    background:
        rgba(59,130,246,.1);

    font-size:
        20px;

    font-weight:
        800;
}

.wb-problem-card h3 {

    margin:
        0 0 10px;

    color:
        #fff;

    font-size:
        17px;
}

.wb-problem-card p {

    margin:
        0;

    color:
        #75879e;

    font-size:
        12px;

    line-height:
        1.7;
}


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

.wb-services {

    background:
        var(--wb-bg);
}

.wb-service-grid {

    display:
        grid;

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

    gap:
        16px;
}

.wb-service-card {

    position:
        relative;

    min-height:
        380px;

    padding:
        32px;

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

    border-radius:
        var(--wb-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    overflow:
        hidden;

    transition:
        var(--wb-transition);
}

.wb-service-card::after {

    content: "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -100px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(59,130,246,.08);

    filter:
        blur(10px);
}

.wb-service-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(96,165,250,.3);

    box-shadow:
        var(--wb-shadow);
}

.wb-service-featured {

    border-color:
        rgba(59,130,246,.3);

    background:
        linear-gradient(
            145deg,
            rgba(37,99,235,.14),
            rgba(255,255,255,.025)
        );
}

.wb-service-icon {

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    color:
        #9bcaff;

    background:
        rgba(59,130,246,.1);

    font-size:
        21px;

    font-weight:
        800;

    margin-bottom:
        25px;
}

.wb-service-number {

    position:
        absolute;

    top:
        30px;

    right:
        30px;

    color:
        #3a4c64;

    font-size:
        11px;

    font-weight:
        900;
}

.wb-service-card h3 {

    margin:
        0 0 12px;

    color:
        #fff;

    font-size:
        21px;
}

.wb-service-card p {

    color:
        #8294aa;

    font-size:
        12px;

    line-height:
        1.7;
}

.wb-service-card ul {

    list-style:
        none;

    padding:
        0;

    margin:
        22px 0 0;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;

}

.wb-service-card li {

    color:
        #a3b3c7;

    font-size:
        10px;

}

.wb-service-card li::before {

    content:
        "✓";

    color:
        var(--wb-cyan);

    margin-right:
        6px;
}


/* =========================================================
   FEATURES
========================================================= */

.wb-features {

    background:
        #081423;
}

.wb-feature-layout {

    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        90px;

    align-items:
        center;
}

.wb-feature-content p,
.wb-seo-main p,
.wb-faq-intro p {

    color:
        var(--wb-muted);

    font-size:
        14px;

    line-height:
        1.9;

    margin-bottom:
        25px;
}

.wb-feature-content .wb-btn {

    margin-top:
        12px;
}

.wb-feature-list {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        13px;
}

.wb-feature-item {

    display:
        flex;

    gap:
        15px;

    padding:
        22px;

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

    border-radius:
        16px;

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

    transition:
        var(--wb-transition);
}

.wb-feature-item:hover {

    border-color:
        rgba(96,165,250,.25);

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

    transform:
        translateY(-4px);
}

.wb-feature-icon {

    flex:
        0 0 38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    color:
        #60a5fa;

    background:
        rgba(59,130,246,.09);

    font-size:
        13px;

    font-weight:
        900;
}

.wb-feature-item h3 {

    margin:
        0 0 5px;

    color:
        #fff;

    font-size:
        13px;
}

.wb-feature-item p {

    margin:
        0;

    color:
        #71839a;

    font-size:
        10px;

    line-height:
        1.7;
}


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

.wb-stats {

    padding:
        70px 0;

    background:
        linear-gradient(
            135deg,
            #0d1d33,
            #091525
        );

    border-top:
        1px solid var(--wb-border);

    border-bottom:
        1px solid var(--wb-border);
}

.wb-stats-grid {

    display:
        grid;

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

.wb-stat {

    text-align:
        center;

    padding:
        15px;

    border-right:
        1px solid var(--wb-border);
}

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

.wb-stat strong {

    color:
        #fff;

    font-size:
        38px;

    line-height:
        1;

    font-weight:
        900;
}

.wb-stat > span {

    color:
        var(--wb-blue-2);

    font-size:
        17px;

    font-weight:
        800;
}

.wb-stat p {

    margin:
        10px 0 0;

    color:
        #71839a;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


/* =========================================================
   PORTFOLIO
========================================================= */

.wb-portfolio {
    background:
        var(--wb-bg);
}

.wb-heading-row {

    max-width:
        none;

    display:
        grid;

    grid-template-columns:
        1fr .65fr;

    gap:
        60px;

    align-items:
        end;
}

.wb-heading-row > p {

    color:
        var(--wb-muted);

    font-size:
        13px;

    line-height:
        1.8;
}

.wb-portfolio-grid {

    display:
        grid;

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

    gap:
        18px;
}

.wb-portfolio-card {

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

    border-radius:
        20px;

    overflow:
        hidden;

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

    transition:
        var(--wb-transition);
}

.wb-portfolio-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(96,165,250,.28);

    box-shadow:
        var(--wb-shadow);
}

.wb-portfolio-image {

    height:
        300px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}

.wb-portfolio-company {
    background:
        linear-gradient(
            135deg,
            #172554,
            #0f172a
        );
}

.wb-portfolio-school {
    background:
        linear-gradient(
            135deg,
            #0c4a6e,
            #082f49
        );
}

.wb-portfolio-business {
    background:
        linear-gradient(
            135deg,
            #312e81,
            #111827
        );
}

.wb-project-browser {

    width:
        72%;

    height:
        190px;

    overflow:
        hidden;

    border-radius:
        10px;

    background:
        #f8fafc;

    box-shadow:
        0 25px 50px rgba(0,0,0,.35);

    transform:
        rotate(-4deg);
}

.wb-project-top {

    height:
        22px;

    padding:
        5px 8px;

    color:
        #64748b;

    background:
        #e2e8f0;

    font-size:
        7px;
}

.wb-project-content {

    display:
        grid;

    grid-template-columns:
        30px 1fr;

    height:
        168px;
}

.wb-project-sidebar {
    background:
        #0f172a;
}

.wb-project-main {
    padding:
        18px;
}

.wb-project-line {

    width:
        55%;

    height:
        6px;

    margin-bottom:
        7px;

    border-radius:
        5px;

    background:
        #cbd5e1;
}

.wb-project-line.large {
    width:
        75%;

    height:
        10px;

    background:
        #334155;
}

.wb-project-boxes {

    display:
        grid;

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

    gap:
        7px;

    margin-top:
        20px;
}

.wb-project-boxes i {

    display:
        block;

    height:
        55px;

    border-radius:
        5px;

    background:
        #dbeafe;
}

.wb-project-label {

    position:
        absolute;

    left:
        20px;

    bottom:
        18px;

    padding:
        7px 10px;

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

    border-radius:
        999px;

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

    background:
        rgba(0,0,0,.2);

    backdrop-filter:
        blur(8px);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;
}

.wb-school-screen {

    width:
        72%;

    height:
        190px;

    border-radius:
        9px;

    overflow:
        hidden;

    background:
        #fff;

    box-shadow:
        0 25px 50px rgba(0,0,0,.3);

    transform:
        rotate(3deg);
}

.wb-school-header {

    height:
        22px;

    background:
        #0c4a6e;
}

.wb-school-hero {

    height:
        85px;

    background:
        linear-gradient(
            135deg,
            #38bdf8,
            #0c4a6e
        );
}

.wb-school-cards {

    display:
        grid;

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

    gap:
        6px;

    padding:
        12px;
}

.wb-school-cards i {

    height:
        45px;

    border-radius:
        5px;

    background:
        #e0f2fe;
}

.wb-business-screen {

    width:
        70%;

    height:
        190px;

    padding:
        18px;

    border-radius:
        12px;

    background:
        #fff;

    box-shadow:
        0 25px 50px rgba(0,0,0,.35);

    transform:
        rotate(-3deg);
}

.wb-business-chart {

    height:
        70px;

    border-radius:
        7px;

    background:
        linear-gradient(
            135deg,
            #c7d2fe,
            #6366f1
        );
}

.wb-business-bars {

    display:
        flex;

    align-items:
        end;

    gap:
        8px;

    height:
        75px;

    margin-top:
        15px;
}

.wb-business-bars i {

    flex:
        1;

    border-radius:
        4px 4px 0 0;

    background:
        #818cf8;
}

.wb-business-bars i:nth-child(1) {
    height: 35%;
}

.wb-business-bars i:nth-child(2) {
    height: 55%;
}

.wb-business-bars i:nth-child(3) {
    height: 75%;
}

.wb-business-bars i:nth-child(4) {
    height: 100%;
}

.wb-portfolio-info {

    padding:
        24px;
}

.wb-portfolio-info > span {

    color:
        #5d718b;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}

.wb-portfolio-info h3 {

    margin:
        8px 0 6px;

    color:
        #fff;

    font-size:
        19px;
}

.wb-portfolio-info p {

    margin:
        0;

    color:
        #71839a;

    font-size:
        11px;
}

.wb-centered-cta {

    text-align:
        center;

    margin-top:
        40px;
}


/* =========================================================
   SEO
========================================================= */

.wb-seo {

    background:
        #081423;
}

.wb-seo-layout {

    display:
        grid;

    grid-template-columns:
        1fr .7fr;

    gap:
        100px;

    align-items:
        center;
}

.wb-seo-main p {

    max-width:
        650px;
}

.wb-seo-checklist {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-top:
        30px;
}

.wb-seo-checklist div {

    color:
        #a0b0c3;

    font-size:
        11px;
}

.wb-seo-checklist span {

    display:
        inline-grid;

    place-items:
        center;

    width:
        22px;

    height:
        22px;

    margin-right:
        8px;

    border-radius:
        6px;

    color:
        var(--wb-cyan);

    background:
        rgba(34,211,238,.08);
}

.wb-seo-card {

    padding:
        28px;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.02)
        );

    box-shadow:
        var(--wb-shadow);
}

.wb-seo-card-top {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #74869c;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.4px;
}

.wb-online {
    color:
        #4ade80;
}

.wb-seo-ranking {

    margin:
        35px 0;
}

.wb-seo-row {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #9bacc0;

    font-size:
        11px;

    margin-bottom:
        8px;
}

.wb-seo-row strong {
    color:
        #fff;
}

.wb-seo-progress {

    height:
        5px;

    margin-bottom:
        22px;

    border-radius:
        999px;

    overflow:
        hidden;

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

.wb-seo-progress i {

    display:
        block;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--wb-blue),
            var(--wb-cyan)
        );
}

.wb-seo-card > small {

    display:
        block;

    color:
        #63758b;

    font-size:
        9px;

    line-height:
        1.7;
}


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

.wb-process {
    background:
        var(--wb-bg);
}

.wb-process-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        20px;
}

.wb-process-line {

    position:
        absolute;

    left:
        8%;

    right:
        8%;

    top:
        27px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(96,165,250,.35),
            transparent
        );
}

.wb-process-item {

    position:
        relative;

    z-index:
        2;

    text-align:
        center;
}

.wb-process-number {

    width:
        55px;

    height:
        55px;

    margin:
        0 auto 22px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(96,165,250,.25);

    border-radius:
        50%;

    color:
        #8dc3ff;

    background:
        #0b1b30;

    font-size:
        11px;

    font-weight:
        900;

    box-shadow:
        0 0 0 7px var(--wb-bg);
}

.wb-process-item h3 {

    margin:
        0 0 7px;

    color:
        #fff;

    font-size:
        13px;
}

.wb-process-item p {

    margin:
        0;

    color:
        #687b92;

    font-size:
        9px;

    line-height:
        1.7;
}


/* =========================================================
   PRICING
========================================================= */

.wb-pricing {

    background:
        #081423;
}

.wb-pricing-grid {

    display:
        grid;

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

    gap:
        18px;
}

.wb-price-card {

    position:
        relative;

    padding:
        35px 30px;

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

    border-radius:
        22px;

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

    transition:
        var(--wb-transition);
}

.wb-price-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(96,165,250,.3);
}

.wb-price-popular {

    border-color:
        rgba(59,130,246,.45);

    background:
        linear-gradient(
            145deg,
            rgba(37,99,235,.13),
            rgba(255,255,255,.025)
        );

    transform:
        translateY(-10px);
}

.wb-price-popular:hover {

    transform:
        translateY(-17px);
}

.wb-popular-label {

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    padding:
        6px 9px;

    border-radius:
        999px;

    color:
        #b9d9ff;

    background:
        rgba(59,130,246,.12);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1px;
}

.wb-price-head > span {

    color:
        #5e91c9;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}

.wb-price-head h3 {

    margin:
        12px 0 8px;

    color:
        #fff;

    font-size:
        21px;
}

.wb-price-head p {

    min-height:
        48px;

    color:
        #71839a;

    font-size:
        10px;

    line-height:
        1.7;
}

.wb-price {

    margin:
        30px 0;

    padding:
        20px 0;

    border-top:
        1px solid var(--wb-border);

    border-bottom:
        1px solid var(--wb-border);
}

.wb-price small {

    display:
        block;

    color:
        #66788f;

    font-size:
        9px;
}

.wb-price strong {

    display:
        block;

    margin-top:
        5px;

    color:
        #fff;

    font-size:
        27px;

    font-weight:
        900;
}

.wb-price-card ul {

    list-style:
        none;

    padding:
        0;

    margin:
        0 0 30px;

}

.wb-price-card li {

    padding:
        8px 0;

    color:
        #9bacbf;

    font-size:
        10px;

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

.wb-price-button {

    width:
        100%;

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        10px;

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        var(--wb-transition);
}

.wb-price-button:hover {

    color:
        #fff;

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

.wb-price-button-primary {

    border-color:
        var(--wb-blue);

    background:
        var(--wb-blue);
}

.wb-price-button-primary:hover {

    background:
        #2563eb;

    transform:
        translateY(-2px);
}

.wb-price-note {

    margin:
        22px 0 0;

    text-align:
        center;

    color:
        #5d7088;

    font-size:
        9px;
}


/* =========================================================
   FAQ
========================================================= */

.wb-faq {

    background:
        var(--wb-bg);
}

.wb-faq-layout {

    display:
        grid;

    grid-template-columns:
        .65fr 1fr;

    gap:
        100px;

    align-items:
        start;
}

.wb-text-link {

    display:
        inline-flex;

    color:
        #74b4ff;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        var(--wb-transition);
}

.wb-text-link:hover {

    color:
        #fff;
}

.wb-faq-list {

    border-top:
        1px solid var(--wb-border);
}

.wb-faq-item {

    border-bottom:
        1px solid var(--wb-border);
}

.wb-faq-item button {

    width:
        100%;

    padding:
        22px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        0;

    outline:
        none;

    color:
        #fff;

    background:
        transparent;

    text-align:
        left;

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        700;
}

.wb-faq-item button i {

    width:
        30px;

    height:
        30px;

    flex:
        0 0 30px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        8px;

    color:
        #8ca1ba;

    font-style:
        normal;

    transition:
        .3s;
}

.wb-faq-answer {

    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height .4s ease;
}

.wb-faq-answer p {

    margin:
        0 0 22px;

    padding-right:
        50px;

    color:
        #71839a;

    font-size:
        11px;

    line-height:
        1.8;
}

.wb-faq-item.active button i {

    transform:
        rotate(45deg);

    color:
        #fff;

    border-color:
        rgba(96,165,250,.4);

    background:
        rgba(59,130,246,.12);
}


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

.wb-final-cta {

    position:
        relative;

    padding:
        95px 0;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #1552b8,
            #0b3a83
        );
}

.wb-cta-glow {

    position:
        absolute;

    width:
        600px;

    height:
        600px;

    border-radius:
        50%;

    right:
        -250px;

    top:
        -350px;

    background:
        rgba(34,211,238,.2);

    filter:
        blur(50px);
}

.wb-final-inner {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;
}

.wb-final-content {

    max-width:
        700px;
}

.wb-final-content .wb-section-label {

    color:
        #b9dcff;
}

.wb-final-content h2 {

    margin:
        12px 0;

    color:
        #fff;

    font-size:
        clamp(36px,4vw,58px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    font-weight:
        900;
}

.wb-final-content h2 span {
    color:
        #9feaff;
}

.wb-final-content p {

    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.8;
}

.wb-final-button {

    min-width:
        210px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;
}

.wb-btn-white {

    width:
        100%;

    color:
        #12386f;

    background:
        #fff;

    box-shadow:
        0 18px 40px rgba(0,0,0,.2);
}

.wb-btn-white:hover {

    color:
        #12386f;

    transform:
        translateY(-3px);

    box-shadow:
        0 22px 50px rgba(0,0,0,.25);
}

.wb-final-button small {

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

    font-size:
        9px;
}


/* =========================================================
   AREA
========================================================= */

.wb-area {

    padding:
        90px 0;

    background:
        #07111f;
}

.wb-area-inner {

    text-align:
        center;
}

.wb-area-inner p {

    max-width:
        650px;

    margin:
        0 auto 30px;

    color:
        #71839a;

    font-size:
        13px;

    line-height:
        1.8;
}

.wb-area-tags {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;
}

.wb-area-tags span {

    padding:
        8px 13px;

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

    border-radius:
        999px;

    color:
        #8294aa;

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

    font-size:
        9px;

    font-weight:
        700;
}


/* =========================================================
   FOOTER
========================================================= */

.wb-footer {

    border-top:
        1px solid var(--wb-border);

    background:
        #050d18;
}

.wb-footer-grid {

    padding:
        70px 0;

    display:
        grid;

    grid-template-columns:
        1.7fr 1fr 1fr 1fr;

    gap:
        60px;
}

.wb-footer-grid > div:first-child {

    max-width:
        350px;
}

.wb-footer-grid p {

    margin:
        20px 0 0;

    color:
        #64758b;

    font-size:
        10px;

    line-height:
        1.8;
}

.wb-footer-grid h4 {

    margin:
        0 0 17px;

    color:
        #fff;

    font-size:
        11px;
}

.wb-footer-grid a:not(.wb-logo) {

    display:
        block;

    margin:
        9px 0;

    color:
        #66798f;

    font-size:
        10px;

    transition:
        .3s;
}

.wb-footer-grid a:not(.wb-logo):hover {

    color:
        #fff;
}

.wb-footer-bottom {

    padding:
        18px 0;

    border-top:
        1px solid var(--wb-border);

    color:
        #53657b;

    font-size:
        9px;
}


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

.wb-floating-wa {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        999;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        11px 15px 11px 11px;

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

    border-radius:
        999px;

    color:
        #fff;

    background:
        #16a34a;

    box-shadow:
        0 12px 35px rgba(22,163,74,.3);

    font-size:
        10px;

    font-weight:
        800;

    transition:
        var(--wb-transition);
}

.wb-floating-wa:hover {

    color:
        #fff;

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 45px rgba(22,163,74,.4);
}

.wb-wa-icon {

    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

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

.wb-wa-icon svg {

    width:
        16px;

    height:
        16px;

    fill:
        #fff;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.wb-reveal {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.wb-reveal.wb-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


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

@media (max-width: 1100px) {

    .wb-hero-container {

        grid-template-columns:
            1fr;

    }

    .wb-hero-content {

        max-width:
            800px;

        margin:
            0 auto;

        text-align:
            center;
    }

    .wb-hero-description {

        margin-inline:
            auto;
    }

    .wb-hero-buttons,
    .wb-hero-trust {

        justify-content:
            center;
    }

    .wb-hero-visual {

        max-width:
            700px;

        width:
            100%;

        margin:
            20px auto 0;
    }

    .wb-problem-grid {

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

    .wb-service-grid {

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

    .wb-feature-layout,
    .wb-seo-layout,
    .wb-faq-layout {

        grid-template-columns:
            1fr;

        gap:
            50px;
    }

    .wb-process-grid {

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

        row-gap:
            45px;
    }

    .wb-process-line {

        display:
            none;
    }

    .wb-pricing-grid {

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

}


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

@media (max-width: 768px) {

    .wb-container {

        width:
            min(
                calc(100% - 28px),
                var(--wb-container)
            );
    }

    .wb-navbar {

        background:
            rgba(5,13,24,.75);

        backdrop-filter:
            blur(18px);

        border-bottom:
            1px solid var(--wb-border);
    }

    .wb-nav-inner {

        min-height:
            70px;
    }

    .wb-menu-toggle {

        display:
            block;
    }

    .wb-nav-menu {

        position:
            fixed;

        top:
            70px;

        left:
            14px;

        right:
            14px;

        padding:
            15px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            4px;

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

        border-radius:
            17px;

        background:
            rgba(7,17,31,.97);

        backdrop-filter:
            blur(20px);

        box-shadow:
            0 25px 60px rgba(0,0,0,.35);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-10px);

        transition:
            .3s;
    }

    .wb-nav-menu.active {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);
    }

    .wb-nav-menu > a {

        padding:
            12px;

        border-radius:
            9px;
    }

    .wb-nav-menu > a:hover {

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

    .wb-nav-cta {

        text-align:
            center;

        margin-top:
            5px;
    }

    .wb-hero {

        min-height:
            auto;

        padding:
            125px 0 80px;
    }

    .wb-hero-title {

        font-size:
            clamp(40px,12vw,58px);

        letter-spacing:
            -2.5px;
    }

    .wb-hero-description {

        font-size:
            14px;
    }

    .wb-hero-trust {

        gap:
            12px;
    }

    .wb-trust-item strong {

        font-size:
            11px;
    }

    .wb-trust-line {

        height:
            25px;
    }

    .wb-hero-visual {

        min-height:
            370px;
    }

    .wb-browser {

        transform:
            none;

        border-radius:
            14px;
    }

    .wb-browser-body {

        min-height:
            270px;

        padding:
            15px;
    }

    .wb-demo-hero {

        min-height:
            190px;
    }

    .wb-demo-copy h3 {

        font-size:
            20px;
    }

    .wb-demo-circle {

        width:
            110px;

        height:
            110px;
    }

    .wb-demo-card {

        min-width:
            70px;

        padding:
            7px;
    }

    .wb-demo-card b {

        font-size:
            11px;
    }

    .wb-floating-top {

        top:
            10px;

        right:
            -3px;
    }

    .wb-floating-bottom {

        bottom:
            5px;

        left:
            -3px;
    }

    .wb-floating-card {

        padding:
            8px 10px;
    }

    .wb-floating-card strong {

        font-size:
            9px;
    }

    .wb-floating-card small {

        font-size:
            7px;
    }

    .wb-trust-grid {

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

        padding:
            20px 0;

    }

    .wb-trust-grid > div {

        justify-content:
            flex-start;
    }

    .wb-trust-grid > div:last-child {

        grid-column:
            span 2;
    }

    .wb-section {

        padding:
            80px 0;
    }

    .wb-section-heading {

        margin-bottom:
            40px;
    }

    .wb-section-heading h2,
    .wb-feature-content h2,
    .wb-seo-main h2,
    .wb-faq-intro h2,
    .wb-area-inner h2 {

        font-size:
            35px;

        letter-spacing:
            -1.5px;
    }

    .wb-problem-grid,
    .wb-service-grid,
    .wb-portfolio-grid,
    .wb-pricing-grid {

        grid-template-columns:
            1fr;
    }

    .wb-problem-card {

        min-height:
            230px;
    }

    .wb-service-card {

        min-height:
            auto;
    }

    .wb-feature-list {

        grid-template-columns:
            1fr;
    }

    .wb-stats-grid {

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

    .wb-stat {

        border-right:
            0;

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

        padding:
            25px 10px;
    }

    .wb-stat:nth-child(3),
    .wb-stat:nth-child(4) {

        border-bottom:
            0;
    }

    .wb-heading-row {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }

    .wb-portfolio-image {

        height:
            270px;
    }

    .wb-seo-checklist {

        grid-template-columns:
            1fr;
    }

    .wb-process-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            30px 15px;
    }

    .wb-price-popular {

        transform:
            none;
    }

    .wb-price-popular:hover {

        transform:
            translateY(-7px);
    }

    .wb-final-inner {

        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .wb-final-button {

        width:
            100%;

        max-width:
            320px;

        align-items:
            stretch;
    }

    .wb-footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            35px;
    }

    .wb-footer-grid > div:first-child {

        grid-column:
            span 2;
    }

    .wb-floating-wa {

        right:
            15px;

        bottom:
            15px;
    }

}


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

@media (max-width: 480px) {

    .wb-hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .wb-hero-buttons .wb-btn {

        width:
            100%;
    }

    .wb-hero-trust {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }

    .wb-trust-line {

        display:
            none;
    }

    .wb-hero-visual {

        min-height:
            300px;
    }

    .wb-browser-body {

        min-height:
            220px;
    }

    .wb-demo-hero {

        min-height:
            150px;
    }

    .wb-demo-navlinks {

        display:
            none;
    }

    .wb-demo-copy h3 {

        font-size:
            17px;
    }

    .wb-demo-copy p {

        font-size:
            7px;
    }

    .wb-demo-circle {

        width:
            90px;

        height:
            90px;
    }

    .wb-demo-card-one {

        right:
            -5px;
    }

    .wb-demo-card-two {

        left:
            -5px;
    }

    .wb-floating-card {

        display:
            none;
    }

    .wb-process-grid {

        grid-template-columns:
            1fr;
    }

    .wb-footer-grid {

        grid-template-columns:
            1fr;

    }

    .wb-footer-grid > div:first-child {

        grid-column:
            auto;
    }

    .wb-floating-wa {

        padding:
            12px;

    }

    .wb-wa-text {

        display:
            none;
    }

}