/*==================================================
LEVEL2 AGENCY WEB
RESET + DESIGN SYSTEM
Versão 1.0
==================================================*/


/*==================================================
GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');


/*==================================================
ROOT
==================================================*/

:root{

    /* Primary */

    --primary:#2563EB;
    --primary-dark:#1D4ED8;
    --primary-light:#60A5FA;

    /* Secondary */

    --secondary:#6D28D9;
    --secondary-light:#8B5CF6;

    /* Success */

    --success:#10B981;

    /* Warning */

    --warning:#F59E0B;

    /* Danger */

    --danger:#EF4444;

    /* Dark */

    --dark:#0F172A;
    --dark-2:#111827;
    --dark-3:#1E293B;

    /* Gray */

    --gray:#64748B;
    --gray-light:#CBD5E1;
    --gray-100:#F8FAFC;
    --gray-200:#F1F5F9;

    /* White */

    --white:#FFFFFF;

    /* Border */

    --border:#E2E8F0;

    /* Gradient */

    --gradient:linear-gradient(
        135deg,
        #2563EB,
        #6D28D9
    );

    /* Radius */

    --radius-sm:8px;
    --radius:16px;
    --radius-lg:24px;
    --radius-xl:40px;

    /* Shadow */

    --shadow-sm:0 5px 15px rgba(15,23,42,.05);

    --shadow:

        0 10px 40px rgba(15,23,42,.08);

    --shadow-lg:

        0 25px 60px rgba(15,23,42,.12);

    /* Transition */

    --transition:.35s ease;

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Plus Jakarta Sans',sans-serif;

    background:#fff;

    color:var(--dark);

    overflow-x:hidden;

    line-height:1.7;

    font-size:16px;

}


/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F8FAFC;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}


/*==================================================
IMAGES
==================================================*/

img{

    max-width:100%;

    display:block;

}


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

a{

    text-decoration:none;

    transition:var(--transition);

    color:inherit;

}

a:hover{

    color:var(--primary);

}


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

ul{

    list-style:none;

    padding:0;

    margin:0;

}


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

section{

    position:relative;

}

.section-padding{

    padding:120px 0;

}


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

.container{

    max-width:1280px;

}


/*==================================================
TYPOGRAPHY
==================================================*/

h1{

    font-size:62px;

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:800;

    margin-bottom:25px;

}

h2{

    font-size:54px;

    line-height:1.15;

    letter-spacing:-1px;

    font-weight:800;

    margin-bottom:20px;

}

h3{

    font-size:36px;

    font-weight:700;

}

h4{

    font-size:26px;

    font-weight:700;

}

h5{

    font-size:20px;

    font-weight:700;

}

h6{

    font-size:18px;

    font-weight:700;

}

p{

    color:var(--gray);

    font-size:18px;

}


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

.section-mini{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    background:#EEF4FF;

    border-radius:50px;

    color:var(--primary);

    font-weight:700;

    font-size:14px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.section-title{

    max-width:900px;

    margin:auto;

}

.section-description{

    max-width:700px;

    margin:auto;

}


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

.btn{

    border:none;

    border-radius:14px;

    padding:18px 36px;

    font-weight:700;

    transition:.35s;

}

.btn-primary{

    background:var(--gradient);

    color:#fff;

    position:relative;

    overflow:hidden;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:

    0 20px 45px rgba(37,99,235,.30);

}

.btn-outline{

    border:2px solid #E2E8F0;

    background:#fff;

    color:var(--dark);

}

.btn-outline:hover{

    background:#F8FAFC;

    transform:translateY(-5px);

}


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

.card-premium{

    background:#fff;

    border-radius:24px;

    padding:40px;

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

    box-shadow:var(--shadow);

    transition:.4s;

}

.card-premium:hover{

    transform:translateY(-10px);

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

}


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

.icon-circle{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient);

    color:#fff;

    font-size:28px;

}


/*==================================================
BADGE
==================================================*/

.badge-premium{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#fff;

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

    padding:12px 22px;

    border-radius:50px;

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

}


/*==================================================
GRADIENT TEXT
==================================================*/

.gradient-text{

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/*==================================================
BACKGROUND
==================================================*/

.bg-light{

    background:#F8FAFC!important;

}

.bg-gradient{

    background:var(--gradient);

}

.bg-dark{

    background:var(--dark);

}


/*==================================================
HELPERS
==================================================*/

.mt-120{

    margin-top:120px;

}

.mb-120{

    margin-bottom:120px;

}

.py-120{

    padding:120px 0;

}

.radius{

    border-radius:24px;

}

.shadow{

    box-shadow:var(--shadow);

}


/*==================================================
ANIMATION
==================================================*/

.transition{

    transition:.35s;

}

.rotate:hover{

    transform:rotate(3deg);

}

.scale:hover{

    transform:scale(1.03);

}

.lift:hover{

    transform:translateY(-8px);

}


/*==================================================
KEYFRAMES
==================================================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes rotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}


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

@media(max-width:1200px){

h1{

font-size:60px;

}

h2{

font-size:46px;

}

}

@media(max-width:992px){

.section-padding{

padding:90px 0;

}

h1{

font-size:48px;

text-align:center;

}

h2{

font-size:38px;

text-align:center;

}

p{

text-align:center;

}

}

@media(max-width:768px){

h1{

font-size:40px;

}

h2{

font-size:32px;

}

.section-padding{

padding:70px 0;

}

.btn{

width:100%;

margin-bottom:15px;

}

}

@media(max-width:576px){

h1{

font-size:34px;

}

h2{

font-size:28px;

}

p{

font-size:16px;

}

}

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

.navbar-area{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:.45s ease;

    padding:24px 0;

    background:transparent;

}

/*===========================*/

.navbar-area.scrolled{

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

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(226,232,240,.8);

    box-shadow:

        0 12px 35px rgba(15,23,42,.06);

    padding:16px 0;

}

/*==================================================
SCROLLED
==================================================*/

.navbar-area.scrolled{

    padding:14px 0;

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

    backdrop-filter:blur(22px);

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

    border-bottom:1px solid rgba(226,232,240,.8);

    box-shadow:

    0 15px 45px rgba(15,23,42,.05);

}

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

.navbar-brand{

    display:flex;

    align-items:center;

}

.navbar-brand img{

    height:52px;

    transition:.35s;

}

.navbar-area.scrolled .navbar-brand img{

    height:46px;

}

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

.navbar-nav{

    align-items:center;

    gap:14px;

}

.navbar-nav .nav-item{

    position:relative;

}

.navbar-nav .nav-link{

    position:relative;

    font-size:15px;

    font-weight:700;

    color:var(--dark);

    padding:10px 16px;

    transition:.35s;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

/*==================================================
UNDERLINE
==================================================*/

.navbar-nav .nav-link:after{

    content:"";

    position:absolute;

    left:50%;

    bottom:2px;

    width:0;

    height:2px;

    border-radius:20px;

    transform:translateX(-50%);

    background:var(--gradient);

    transition:.35s;

}

.navbar-nav .nav-link:hover:after{

    width:65%;

}

/*==================================================
ACTIVE
==================================================*/

.navbar-nav .nav-link.active{

    color:var(--primary);

}

.navbar-nav .nav-link.active:after{

    width:65%;

}

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

.navbar-cta{

    margin-left:18px;

}

.navbar-cta .btn{

    padding:15px 28px;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

}

/*==================================================
BUTTON SHINE
==================================================*/

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary:before{

    content:"";

    position:absolute;

    top:0;

    left:-140px;

    width:80px;

    height:100%;

    background:

    rgba(255,255,255,.25);

    transform:skewX(-25deg);

    transition:.8s;

}

.btn-primary:hover:before{

    left:130%;

}

/*==================================================
TOGGLER
==================================================*/

.navbar-toggler{

    border:none;

    box-shadow:none!important;

    padding:0;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler i{

    font-size:34px;

    color:var(--dark);

}

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

@media(max-width:991px){

.navbar-collapse{

    background:#fff;

    border-radius:24px;

    padding:25px;

    box-shadow:

    0 25px 60px rgba(15,23,42,.08);

}

.navbar-nav{

    gap:8px;

}

.navbar-nav .nav-link{

    display:block;

    padding:15px;

    border-radius:12px;

}

.navbar-nav .nav-link:hover{

    background:#F8FAFC;

}

.navbar-cta{

    margin-top:18px;

    margin-left:0;

}

.navbar-cta .btn{

    width:100%;

}

}

/*==================================================
DESKTOP SPACING
==================================================*/

@media(min-width:992px){

.navbar-nav{

    margin-left:auto;

}

}

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

@media(min-width:992px){

.navbar-nav .nav-link{

    overflow:hidden;

}

.navbar-nav .nav-link span{

    position:relative;

    z-index:2;

}

.navbar-nav .nav-link:before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:0;

    height:0;

    background:#EEF4FF;

    border-radius:12px;

    transform:translate(-50%,-50%);

    transition:.35s;

    z-index:1;

}

.navbar-nav .nav-link:hover:before{

    width:100%;

    height:100%;

}

}

/*==================================================
SOCIAL MINI
==================================================*/

.nav-social{

    display:flex;

    align-items:center;

    gap:10px;

    margin-left:18px;

}

.nav-social a{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:var(--gray);

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

    transition:.35s;

}

.nav-social a:hover{

    background:var(--gradient);

    color:#fff;

    transform:translateY(-4px);

}

/*==================================================
TOP BADGE
==================================================*/

.top-badge{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:6px 16px;

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

    backdrop-filter:blur(15px);

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

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    color:var(--primary);

}

/*==================================================
NAV ANIMATION
==================================================*/

@keyframes navbarFade{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.navbar-area{

    animation:navbarFade .7s ease;

}

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

@media(max-width:768px){

.navbar-area{

    padding:16px 0;

}

.navbar-brand img{

    height:44px;

}

.navbar-area.scrolled{

    padding:12px 0;

}

}


/*==================================================
LEVEL2 AGENCY WEB
HERO PREMIUM
==================================================*/

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    overflow:hidden;

    padding-top:10px;
    padding-bottom:40px;

    background:

    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 100%
    );

}


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

.hero .container{

    position:relative;

    z-index:10;

}


/*===============================
ROW
================================*/

.hero .row{

    min-height:700px;

    align-items:center;

}


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

.hero-content{

    position:relative;

    z-index:20;

}


/*===============================
BADGE
================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:#fff;

    border:1px solid rgba(37,99,235,.10);

    box-shadow:

    0 15px 35px rgba(15,23,42,.05);

    margin-bottom:35px;

    font-size:14px;

    font-weight:700;

    color:var(--primary);

}

.hero-badge i{

    color:#F59E0B;

}


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

.hero-title{

    font-size:74px;

    font-weight:800;

    line-height:1.05;

    letter-spacing:-2.5px;

    color:var(--dark);

    margin-bottom:28px;

    max-width:760px;

}

.hero-title span{

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


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

.hero-description{

    max-width:640px;

    font-size:22px;

    line-height:1.9;

    color:var(--gray);

    margin-bottom:45px;

}


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

.hero-buttons{

    display:flex;

    gap:18px;

    align-items:center;

    flex-wrap:wrap;

}


/*===============================
PRIMARY BUTTON
================================*/

.hero-buttons .btn-primary{

    min-width:220px;

    height:62px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    font-weight:700;

}


/*===============================
OUTLINE BUTTON
================================*/

.hero-buttons .btn-outline{

    min-width:220px;

    height:62px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

}


/*===============================
METRICS
================================*/

.hero-metrics{

    margin-top:70px;

    display:flex;

    gap:45px;

    flex-wrap:wrap;

}

.metric{

    display:flex;

    flex-direction:column;

}

.metric h3{

    font-size:42px;

    font-weight:800;

    color:var(--dark);

    margin-bottom:6px;

}

.metric p{

    margin:0;

    font-size:15px;

    color:var(--gray);

}


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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.browser{

    width:720px;

    max-width:100%;

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    border:1px solid #E2E8F0;

    box-shadow:

    0 45px 90px rgba(15,23,42,.12);

}


/*===============================
TOP BAR
================================*/

.browser-top{

    height:54px;

    background:#F8FAFC;

    border-bottom:1px solid #E2E8F0;

    display:flex;

    align-items:center;

    padding:0 22px;

}


/*===============================
DOTS
================================*/

.browser-dots{

    display:flex;

    gap:8px;

}

.browser-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

}

.browser-dots span:nth-child(1){

    background:#EF4444;

}

.browser-dots span:nth-child(2){

    background:#F59E0B;

}

.browser-dots span:nth-child(3){

    background:#22C55E;

}


/*===============================
ADDRESS BAR
================================*/

.browser-address{

    flex:1;

    margin-left:22px;

    height:34px;

    border-radius:999px;

    background:#fff;

    border:1px solid #E2E8F0;

    display:flex;

    align-items:center;

    padding:0 18px;

    color:#64748B;

    font-size:14px;

}


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

.browser-content{

    padding:45px;

}


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

.mockup-header{

    width:70%;

    height:22px;

    border-radius:12px;

    background:#E2E8F0;

    margin-bottom:28px;

}

.mockup-sub{

    width:50%;

    height:16px;

    border-radius:10px;

    background:#EDF2F7;

    margin-bottom:45px;

}


/*===============================
IMAGE PLACEHOLDER
================================*/

.mockup-image{

    width:100%;

    height:320px;

    border-radius:22px;

    background:

    linear-gradient(
        135deg,
        #2563EB,
        #6D28D9
    );

}


/*===============================
FLOAT
================================*/

.browser{

    animation:heroFloat 8s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}


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

@media(max-width:1200px){

.hero-title{

font-size:62px;

}

.browser{

width:620px;

}

}

@media(max-width:991px){

.hero{

text-align:center;

padding-top:70px;

}

.hero-buttons{

justify-content:center;

}

.hero-description{

margin:auto auto 45px;

}

.hero-metrics{

justify-content:center;

margin-bottom:70px;

}

.browser{

margin:auto;

}

}

@media(max-width:768px){

.hero{

min-height:auto;

}

.hero-title{

font-size:44px;

letter-spacing:-1px;

}

.hero-description{

font-size:18px;

}

.browser-content{

padding:25px;

}

.mockup-image{

height:200px;

}

.hero-buttons .btn{

width:100%;

}

}

@media(max-width:576px){

.hero-title{

font-size:36px;

}

.hero-badge{

font-size:12px;

}

.metric{

width:45%;

text-align:center;

}

}

/*==================================================
LEVEL2 AGENCY WEB
AURORA BACKGROUND
Inspired by Stripe / Linear / Vercel
==================================================*/

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

.hero{
    isolation:isolate;
}

/*==================================================
BACKGROUND LAYER
==================================================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 18% 22%,
        rgba(37,99,235,.16),
        transparent 32%),

        radial-gradient(circle at 82% 18%,
        rgba(109,40,217,.18),
        transparent 34%),

        radial-gradient(circle at 50% 82%,
        rgba(96,165,250,.14),
        transparent 30%);

    z-index:-3;

}

/*==================================================
AURORA 01
==================================================*/

.hero::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-180px;
    top:-220px;

    border-radius:50%;

    background:#2563EB;

    filter:blur(140px);

    opacity:.20;

    animation:auroraOne 18s ease-in-out infinite alternate;

    z-index:-2;

}

/*==================================================
SECOND ORB
==================================================*/

.hero .aurora-one{

    position:absolute;

    width:600px;
    height:600px;

    left:-180px;
    bottom:-180px;

    border-radius:50%;

    background:#6D28D9;

    opacity:.16;

    filter:blur(140px);

    animation:auroraTwo 22s ease-in-out infinite alternate;

    z-index:-2;

}

/*==================================================
THIRD ORB
==================================================*/

.hero .aurora-two{

    position:absolute;

    width:420px;
    height:420px;

    top:45%;

    left:42%;

    border-radius:50%;

    background:#60A5FA;

    opacity:.10;

    filter:blur(120px);

    animation:auroraThree 26s linear infinite;

    z-index:-2;

}

/*==================================================
LIGHT EFFECT
==================================================*/

.hero .light-glow{

    position:absolute;

    width:900px;
    height:900px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.65),
    transparent 70%);

    opacity:.28;

    z-index:-1;

}

/*==================================================
GRID
==================================================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),

        linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);

    background-size:80px 80px;

    mask-image:linear-gradient(
        to bottom,
        rgba(0,0,0,.7),
        transparent 95%
    );

    z-index:-1;

    pointer-events:none;

}

/*==================================================
GRADIENT NOISE
==================================================*/

.hero-noise{

    position:absolute;

    inset:0;

    opacity:.025;

    mix-blend-mode:soft-light;

    background-image:url("../img/backgrounds/noise.png");

    background-size:250px;

    z-index:1;

    pointer-events:none;

}

/*==================================================
TOP LIGHT
==================================================*/

.hero-top-light{

    position:absolute;

    width:900px;

    height:260px;

    left:50%;

    transform:translateX(-50%);

    top:-140px;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.95),
    transparent 70%);

    filter:blur(40px);

    z-index:-1;

}

/*==================================================
BOTTOM SHADOW
==================================================*/

.hero-bottom-shadow{

    position:absolute;

    left:0;

    right:0;

    bottom:-180px;

    height:350px;

    background:

    radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 70%);

    filter:blur(60px);

    z-index:-1;

}

/*==================================================
FLOATING DOTS
==================================================*/

.hero-particle{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

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

    box-shadow:

    0 0 18px rgba(255,255,255,.7);

    animation:particleFloat 16s linear infinite;

}

.hero-particle:nth-child(1){

    left:12%;
    top:18%;

}

.hero-particle:nth-child(2){

    left:80%;
    top:30%;

}

.hero-particle:nth-child(3){

    left:65%;
    bottom:20%;

}

.hero-particle:nth-child(4){

    left:30%;
    bottom:12%;

}

.hero-particle:nth-child(5){

    left:48%;
    top:12%;

}

/*==================================================
GRADIENT LINE
==================================================*/

.hero-gradient-line{

    position:absolute;

    width:1px;

    height:180px;

    background:

    linear-gradient(

        transparent,

        rgba(37,99,235,.35),

        transparent

    );

    right:14%;

    top:25%;

    animation:pulseLine 5s infinite;

}

/*==================================================
KEYFRAMES
==================================================*/

@keyframes auroraOne{

    0%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(-40px,30px) scale(1.08);

    }

    100%{

        transform:translate(-90px,70px) scale(.95);

    }

}

@keyframes auroraTwo{

    0%{

        transform:translate(0,0);

    }

    100%{

        transform:translate(120px,-80px);

    }

}

@keyframes auroraThree{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}

@keyframes particleFloat{

    0%{

        transform:translateY(0);

        opacity:.15;

    }

    50%{

        transform:translateY(-40px);

        opacity:1;

    }

    100%{

        transform:translateY(-80px);

        opacity:.15;

    }

}

@keyframes pulseLine{

    0%{

        opacity:.15;

        transform:scaleY(.6);

    }

    50%{

        opacity:.9;

        transform:scaleY(1);

    }

    100%{

        opacity:.15;

        transform:scaleY(.6);

    }

}

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

@media(max-width:991px){

.hero::after{

    width:520px;
    height:520px;

}

.hero .aurora-one{

    width:450px;
    height:450px;

}

.hero .aurora-two{

    width:320px;
    height:320px;

}

.hero-grid{

    background-size:55px 55px;

}

}

@media(max-width:768px){

.hero-grid{

    display:none;

}

.hero::after{

    opacity:.15;

}

.hero .aurora-one{

    opacity:.12;

}

.hero .aurora-two{

    display:none;

}

.hero-top-light{

    display:none;

}

.hero-bottom-shadow{

    display:none;

}

.hero-particle{

    display:none;

}

}


/*==================================================
LEVEL2 AGENCY WEB
BROWSER MOCKUP
PART 01
==================================================*/

/*==================================================
WRAPPER
==================================================*/

.hero-preview{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1800px;

    z-index:5;

}


/*==================================================
BROWSER
==================================================*/

.browser{

    position:relative;

    width:760px;

    max-width:100%;

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

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

    transform:

        rotateX(8deg)

        rotateY(-10deg)

        rotateZ(1deg);

    transform-style:preserve-3d;

    transition:.60s ease;

    box-shadow:

        0 8px 20px rgba(15,23,42,.05),

        0 25px 60px rgba(15,23,42,.08),

        0 60px 120px rgba(15,23,42,.12),

        0 120px 220px rgba(15,23,42,.18);

}


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

.hero-preview:hover .browser{

    transform:

        rotateX(0deg)

        rotateY(0deg)

        translateY(-12px);

}


/*==================================================
REFLECTION
==================================================*/

.browser:before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        120deg,

        rgba(255,255,255,.60),

        rgba(255,255,255,0),

        rgba(255,255,255,.20)

    );

    pointer-events:none;

    z-index:20;

}


/*==================================================
SHINE
==================================================*/

.browser:after{

    content:"";

    position:absolute;

    top:-150px;

    left:-250px;

    width:240px;

    height:700px;

    background:

    rgba(255,255,255,.22);

    transform:rotate(25deg);

    transition:1.2s;

    z-index:30;

}

.hero-preview:hover .browser:after{

    left:980px;

}


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

.browser-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:58px;

    padding:0 22px;

    background:#F8FAFC;

    border-bottom:1px solid #E2E8F0;

}


/*==================================================
DOTS
==================================================*/

.browser-left{

    display:flex;

    align-items:center;

    gap:8px;

}

.browser-dot{

    width:12px;

    height:12px;

    border-radius:50%;

}

.browser-dot.red{

    background:#FF5F57;

}

.browser-dot.yellow{

    background:#FEBC2E;

}

.browser-dot.green{

    background:#28C840;

}


/*==================================================
ADDRESS
==================================================*/

.browser-address{

    width:340px;

    max-width:100%;

    height:36px;

    background:#ffffff;

    border:1px solid #E2E8F0;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#64748B;

    font-size:13px;

    font-weight:600;

}


/*==================================================
RIGHT ICONS
==================================================*/

.browser-actions{

    display:flex;

    gap:12px;

}

.browser-actions span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#CBD5E1;

}


/*==================================================
BODY
==================================================*/

.browser-body{

    position:relative;

    background:#ffffff;

    padding:45px;

}


/*==================================================
NAV INSIDE
==================================================*/

.mock-nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.mock-logo{

    width:120px;

    height:18px;

    border-radius:20px;

    background:linear-gradient(90deg,#2563EB,#6D28D9);

}

.mock-menu{

    display:flex;

    gap:16px;

}

.mock-menu span{

    width:70px;

    height:10px;

    background:#E2E8F0;

    border-radius:10px;

}


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

.mock-title{

    width:72%;

    height:22px;

    border-radius:16px;

    background:#CBD5E1;

    margin-bottom:18px;

}

.mock-title.small{

    width:52%;

}


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

.mock-text{

    width:95%;

    height:12px;

    border-radius:12px;

    background:#E2E8F0;

    margin-bottom:12px;

}

.mock-text.medium{

    width:82%;

}

.mock-text.short{

    width:55%;

}


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

.mock-button{

    width:180px;

    height:46px;

    border-radius:14px;

    margin-top:35px;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #6D28D9

    );

}


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

.mock-image{

    margin-top:50px;

    width:100%;

    height:340px;

    border-radius:22px;

    overflow:hidden;

    position:relative;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #6D28D9

    );

}


/*==================================================
GRID
==================================================*/

.mock-image:before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(

        rgba(255,255,255,.12) 1px,

        transparent 1px

    ),

    linear-gradient(

        90deg,

        rgba(255,255,255,.12) 1px,

        transparent 1px

    );

    background-size:45px 45px;

}


/*==================================================
CIRCLE
==================================================*/

.mock-image:after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:

    rgba(255,255,255,.15);

    filter:blur(5px);

    right:-80px;

    bottom:-80px;

}


/*==================================================
SHADOW BASE
==================================================*/

.browser-shadow{

    position:absolute;

    width:78%;

    height:55px;

    background:

    rgba(37,99,235,.15);

    filter:blur(35px);

    bottom:-30px;

    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    z-index:-1;

}


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

@media(max-width:1200px){

.browser{

    width:650px;

}

}

@media(max-width:991px){

.hero-preview{

    margin-top:70px;

}

.browser{

    transform:none;

}

.hero-preview:hover .browser{

    transform:translateY(-6px);

}

}

@media(max-width:768px){

.browser-body{

    padding:28px;

}

.mock-image{

    height:220px;

}

.browser-address{

    width:170px;

    font-size:11px;

}

.mock-menu{

    display:none;

}

}

@media(max-width:576px){

.browser-top{

    padding:0 12px;

}

.browser-body{

    padding:18px;

}

.mock-title{

    width:100%;

}

.mock-title.small{

    width:75%;

}

.mock-button{

    width:140px;

}

.mock-image{

    height:170px;

}

}


/*==================================================
LEVEL2 AGENCY WEB
DASHBOARD MOCKUP
==================================================*/


/*==================================================
LAYOUT
==================================================*/

.dashboard{

    display:grid;

    grid-template-columns:240px 1fr;

    min-height:620px;

    background:#ffffff;

}


/*==================================================
SIDEBAR
==================================================*/

.dashboard-sidebar{

    background:#F8FAFC;

    border-right:1px solid #E2E8F0;

    padding:28px;

}


.dashboard-logo{

    width:120px;

    height:18px;

    border-radius:20px;

    margin-bottom:40px;

    background:linear-gradient(
        90deg,
        #2563EB,
        #6D28D9
    );

}


.dashboard-menu{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.dashboard-menu div{

    height:16px;

    border-radius:12px;

    background:#E2E8F0;

}


.dashboard-menu div:nth-child(1){

    width:100%;

}

.dashboard-menu div:nth-child(2){

    width:80%;

}

.dashboard-menu div:nth-child(3){

    width:92%;

}

.dashboard-menu div:nth-child(4){

    width:70%;

}

.dashboard-menu div:nth-child(5){

    width:95%;

}

.dashboard-menu div:nth-child(6){

    width:82%;

}


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

.dashboard-content{

    padding:35px;

}


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

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}


.dashboard-title{

    width:260px;

    height:22px;

    border-radius:12px;

    background:#CBD5E1;

}


.dashboard-search{

    width:220px;

    height:42px;

    border-radius:999px;

    background:#F1F5F9;

}


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

.dashboard-stats{

    display:grid;

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

    gap:18px;

    margin-bottom:35px;

}


.stat-card{

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:18px;

    padding:24px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}


.stat-card:hover{

    transform:translateY(-6px);

}


.stat-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #2563EB,
        #6D28D9
    );

    margin-bottom:18px;

}


.stat-number{

    width:70px;

    height:24px;

    border-radius:12px;

    background:#CBD5E1;

    margin-bottom:12px;

}


.stat-text{

    width:100px;

    height:12px;

    border-radius:10px;

    background:#E2E8F0;

}


/*==================================================
BODY
==================================================*/

.dashboard-body{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

}


/*==================================================
GRAPH
==================================================*/

.graph-card{

    background:#fff;

    border-radius:22px;

    border:1px solid #E2E8F0;

    padding:25px;

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

}


.graph-title{

    width:180px;

    height:18px;

    border-radius:10px;

    background:#CBD5E1;

    margin-bottom:30px;

}


/*==================================================
GRAPH SVG
==================================================*/

.chart{

    position:relative;

    height:240px;

    border-radius:18px;

    overflow:hidden;

    background:

        repeating-linear-gradient(

            to top,

            #F8FAFC 0,

            #F8FAFC 39px,

            #E2E8F0 40px

        );

}


.chart svg{

    position:absolute;

    inset:0;

}


/*==================================================
SIDECARDS
==================================================*/

.side-column{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/*==================================================
NEWS
==================================================*/

.news-card{

    border:1px solid #E2E8F0;

    border-radius:20px;

    padding:22px;

    background:#fff;

}


.news-item{

    display:flex;

    gap:14px;

    margin-bottom:18px;

}


.news-thumb{

    width:60px;

    height:60px;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #2563EB,
        #6D28D9
    );

}


.news-info{

    flex:1;

}


.news-title{

    width:100%;

    height:14px;

    border-radius:10px;

    background:#CBD5E1;

    margin-bottom:10px;

}


.news-line{

    width:70%;

    height:10px;

    border-radius:10px;

    background:#E2E8F0;

}


/*==================================================
SOCIAL
==================================================*/

.social-card{

    border-radius:20px;

    border:1px solid #E2E8F0;

    padding:22px;

    background:#fff;

}


.instagram-preview{

    width:100%;

    height:180px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #7C3AED,
        #EC4899
    );

    margin-bottom:18px;

}


.social-line{

    width:80%;

    height:12px;

    border-radius:10px;

    background:#CBD5E1;

    margin-bottom:10px;

}


.social-small{

    width:55%;

    height:10px;

    border-radius:10px;

    background:#E2E8F0;

}


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

.whatsapp-widget{

    position:absolute;

    bottom:40px;

    right:-50px;

    width:240px;

    background:#fff;

    border-radius:22px;

    padding:20px;

    box-shadow:

        0 30px 60px rgba(15,23,42,.18);

    border:1px solid #E2E8F0;

    animation:floatWidget 5s ease-in-out infinite;

}


.whatsapp-top{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}


.whatsapp-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#22C55E;

}


.whatsapp-name{

    width:120px;

    height:12px;

    border-radius:10px;

    background:#CBD5E1;

}


.chat{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.chat div{

    height:12px;

    border-radius:10px;

    background:#E2E8F0;

}


.chat div:nth-child(1){

    width:85%;

}

.chat div:nth-child(2){

    width:70%;

}

.chat div:nth-child(3){

    width:90%;

}


/*==================================================
ANIMATION
==================================================*/

@keyframes floatWidget{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media(max-width:1200px){

.dashboard-stats{

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

}

.dashboard-body{

grid-template-columns:1fr;

}

.whatsapp-widget{

display:none;

}

}

@media(max-width:768px){

.dashboard{

grid-template-columns:1fr;

}

.dashboard-sidebar{

display:none;

}

.dashboard-stats{

grid-template-columns:1fr;

}

.dashboard-header{

flex-direction:column;

gap:20px;

align-items:flex-start;

}

}

/*==================================================
LEVEL2 AGENCY WEB
DASHBOARD PREMIUM ANIMATIONS
==================================================*/


/*==================================================
DEFAULT TRANSITIONS
==================================================*/

.browser,
.browser *,
.stat-card,
.graph-card,
.news-card,
.social-card,
.whatsapp-widget{

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s ease,
        border-color .35s ease,
        background-color .35s ease,
        opacity .35s ease;

}


/*==================================================
3D
==================================================*/

.hero-preview{

    perspective:1800px;

    transform-style:preserve-3d;

}

.browser{

    will-change:transform;

}


/*==================================================
PARALLAX DEPTH
==================================================*/

.browser-top{

    transform:translateZ(35px);

}

.dashboard{

    transform:translateZ(25px);

}

.stat-card{

    transform:translateZ(45px);

}

.graph-card{

    transform:translateZ(60px);

}

.social-card{

    transform:translateZ(40px);

}

.news-card{

    transform:translateZ(35px);

}


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

.hero-preview:hover .graph-card{

    transform:

        translateY(-10px)

        translateZ(60px);

}

.hero-preview:hover .stat-card{

    transform:

        translateY(-6px)

        translateZ(45px);

}

.hero-preview:hover .social-card{

    transform:

        translateY(-10px);

}

.hero-preview:hover .news-card{

    transform:

        translateY(-10px);

}


/*==================================================
GLASS SHINE
==================================================*/

.stat-card,
.graph-card,
.news-card,
.social-card{

    position:relative;

    overflow:hidden;

}

.stat-card:before,
.graph-card:before,
.news-card:before,
.social-card:before{

    content:"";

    position:absolute;

    top:-200px;

    left:-180px;

    width:90px;

    height:500px;

    background:

    linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.55),

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    transition:1.2s;

}

.hero-preview:hover .stat-card:before,
.hero-preview:hover .graph-card:before,
.hero-preview:hover .news-card:before,
.hero-preview:hover .social-card:before{

    left:120%;

}


/*==================================================
BORDER GLOW
==================================================*/

.stat-card:hover{

    border-color:#2563EB;

    box-shadow:

        0 15px 40px rgba(37,99,235,.15);

}

.graph-card:hover{

    border-color:#6D28D9;

}

.news-card:hover{

    border-color:#2563EB;

}

.social-card:hover{

    border-color:#EC4899;

}


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

.stat-icon{

    position:relative;

}

.stat-icon:after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:22px;

    background:

    radial-gradient(

        rgba(37,99,235,.25),

        transparent 70%

    );

    opacity:0;

    transition:.4s;

}

.stat-card:hover .stat-icon:after{

    opacity:1;

}


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

.stat-number{

    position:relative;

    overflow:hidden;

}

.stat-number:after{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.75),

        transparent

    );

    animation:numberGlow 4s infinite;

}


/*==================================================
CHART
==================================================*/

.chart{

    overflow:hidden;

}

.chart svg{

    animation:chartMove 5s ease-in-out infinite;

}


/*==================================================
INSTAGRAM
==================================================*/

.instagram-preview{

    position:relative;

    overflow:hidden;

}

.instagram-preview:before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        rgba(255,255,255,.28),

        transparent 60%

    );

}


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

.whatsapp-widget{

    animation:

        floatWidget 6s ease-in-out infinite,

        pulseShadow 4s infinite;

}


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

.dashboard-menu div{

    position:relative;

    overflow:hidden;

}

.dashboard-menu div:after{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    animation:menuShine 5s infinite;

}


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

.dashboard-title{

    animation:fadeBar 4s infinite;

}

.mock-title{

    animation:fadeBar 4s infinite;

}

.mock-text{

    animation:fadeBar 4s infinite;

}


/*==================================================
KEYFRAMES
==================================================*/

@keyframes chartMove{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes fadeBar{

    0%{

        opacity:.65;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.65;

    }

}

@keyframes menuShine{

    0%{

        left:-100%;

    }

    60%{

        left:130%;

    }

    100%{

        left:130%;

    }

}

@keyframes pulseShadow{

    0%{

        box-shadow:

        0 20px 40px rgba(34,197,94,.15);

    }

    50%{

        box-shadow:

        0 35px 70px rgba(34,197,94,.28);

    }

    100%{

        box-shadow:

        0 20px 40px rgba(34,197,94,.15);

    }

}

@keyframes numberGlow{

    0%{

        left:-120%;

    }

    50%{

        left:120%;

    }

    100%{

        left:120%;

    }

}


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

.loading-bar{

    position:absolute;

    bottom:0;

    left:0;

    height:3px;

    width:100%;

    overflow:hidden;

}

.loading-bar:after{

    content:"";

    position:absolute;

    left:-30%;

    width:30%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        #2563EB,

        #6D28D9

    );

    animation:loader 3s infinite;

}

@keyframes loader{

    from{

        left:-30%;

    }

    to{

        left:130%;

    }

}


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

.browser-scroll{

    position:absolute;

    right:12px;

    top:80px;

    width:6px;

    height:160px;

    background:#F1F5F9;

    border-radius:10px;

}

.browser-scroll:after{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:42px;

    border-radius:10px;

    background:#CBD5E1;

    animation:scrollMove 6s infinite;

}

@keyframes scrollMove{

    0%{

        top:0;

    }

    50%{

        top:110px;

    }

    100%{

        top:0;

    }

}


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

@media(max-width:991px){

.browser{

    transform:none !important;

}

.hero-preview:hover .browser{

    transform:translateY(-5px);

}

}



/*==================================================
LEVEL2 AGENCY WEB
SERVICES - BENTO GRID
Inspired by Apple • Stripe • Framer
==================================================*/

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

.services{

    position:relative;

    padding:140px 0;

    overflow:hidden;

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

}


/*==================================================
BACKGROUND
==================================================*/

.services:before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-250px;

    top:-250px;

    border-radius:50%;

    background:#2563EB;

    filter:blur(180px);

    opacity:.08;

}

.services:after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-220px;

    bottom:-250px;

    border-radius:50%;

    background:#6D28D9;

    filter:blur(180px);

    opacity:.08;

}


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

.services .section-title{

    max-width:820px;

    margin:auto;

    margin-bottom:20px;

}

.services .section-description{

    max-width:720px;

    margin:auto;

}


/*==================================================
GRID
==================================================*/

.bento-grid{

    margin-top:80px;

    display:grid;

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

    gap:24px;

}


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

.bento-card{

    position:relative;

    overflow:hidden;

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

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    padding:38px;

    transition:.45s;

    box-shadow:

        0 12px 40px rgba(15,23,42,.06);

}


/*==================================================
SHINE
==================================================*/

.bento-card:before{

    content:"";

    position:absolute;

    top:-200px;

    left:-180px;

    width:90px;

    height:520px;

    background:

    linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.55),

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    transition:1s;

}

.bento-card:hover:before{

    left:130%;

}


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

.bento-card:hover{

    transform:

        translateY(-10px);

    box-shadow:

        0 30px 70px rgba(15,23,42,.12);

}


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

.service-icon{

    width:74px;

    height:74px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
        135deg,
        #2563EB,
        #6D28D9
    );

    color:#fff;

    font-size:30px;

    margin-bottom:30px;

}


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

.bento-card h3{

    font-size:28px;

    font-weight:800;

    margin-bottom:18px;

}


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

.bento-card p{

    font-size:17px;

    line-height:1.8;

}


/*==================================================
LINK
==================================================*/

.service-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:35px;

    font-weight:700;

    color:var(--primary);

}

.service-link i{

    transition:.35s;

}

.service-link:hover i{

    transform:translateX(6px);

}


/*==================================================
BENTO SIZES
==================================================*/

.large{

    grid-column:span 6;

    min-height:420px;

}

.medium{

    grid-column:span 3;

    min-height:420px;

}

.wide{

    grid-column:span 8;

    min-height:280px;

}

.small{

    grid-column:span 4;

    min-height:280px;

}


/*==================================================
ILLUST
==================================================*/

.service-illustration{

    position:absolute;

    right:-20px;

    bottom:-20px;

    opacity:.08;

    font-size:220px;

}


/*==================================================
PLAN CARD
==================================================*/

.plan-card{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        #2563EB,
        #6D28D9
    );

    color:#fff;

}

.plan-card p{

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

}

.plan-card h3{

    color:#fff;

}

.plan-card .price{

    font-size:70px;

    font-weight:800;

    line-height:1;

    margin:30px 0;

}

.plan-card .price span{

    font-size:18px;

    font-weight:500;

}

.plan-card ul{

    margin-top:30px;

}

.plan-card li{

    margin-bottom:15px;

    display:flex;

    gap:12px;

    align-items:center;

}

.plan-card i{

    font-size:18px;

}


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

.plan-card:after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    right:-90px;

    bottom:-90px;

}


/*==================================================
BADGE
==================================================*/

.plan-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    border-radius:999px;

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

    font-size:13px;

    font-weight:700;

}


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

.plan-card .btn{

    margin-top:35px;

    width:100%;

    height:60px;

    background:#fff;

    color:#2563EB;

    border-radius:16px;

    font-weight:800;

}

.plan-card .btn:hover{

    transform:translateY(-4px);

}


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

@media(max-width:1200px){

.large{

grid-column:span 12;

}

.medium{

grid-column:span 6;

}

.wide{

grid-column:span 12;

}

.small{

grid-column:span 12;

}

}

@media(max-width:768px){

.bento-grid{

grid-template-columns:1fr;

}

.large,
.medium,
.small,
.wide{

grid-column:span 1;

min-height:auto;

}

.bento-card{

padding:30px;

}

.plan-card .price{

font-size:54px;

}

}

/*==================================================
LEVEL2 AGENCY WEB
VALUE COMPARISON
==================================================*/

.comparison{

    position:relative;

    padding:70px 0;

    background:#0F172A;

    overflow:hidden;

}

.comparison::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    top:-400px;

    right:-250px;

    border-radius:50%;

    background:#2563EB;

    filter:blur(180px);

    opacity:.12;

}

.comparison::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    bottom:-350px;

    left:-250px;

    border-radius:50%;

    background:#6D28D9;

    filter:blur(180px);

    opacity:.12;

}

.comparison .section-mini{

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

    color:#fff;

}

.comparison .section-title{

    color:#fff;

}

.comparison .section-description{

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

}
.comparison-list{

    margin-top:50px;

    padding:0;

}

.comparison-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 25px;

    margin-bottom:18px;

    border-radius:18px;

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

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

    transition:.35s;

}

.comparison-list li:hover{

    transform:translateX(8px);

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

}

.comparison-list span{

    color:#FFFFFF;

    font-size:18px;

    font-weight:600;

}

.comparison-list strong{

    color:#FBBF24;

    font-size:22px;

    font-weight:800;

}


.price-card{

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #6D28D9

    );

    color:#FFFFFF;

    padding:55px;

    border-radius:30px;

    box-shadow:

        0 35px 80px rgba(37,99,235,.28);

}

.price-card h3{

    color:#FFFFFF;

}

.price-card p{

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

}

.price{

    font-size:88px;

    font-weight:800;

    color:#FFFFFF;

    line-height:1;

}

.price small{

    font-size:22px;

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

}


.plan{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

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

    color:#FFFFFF;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.price-card ul{

    margin-top:35px;

    padding:0;

}

.price-card ul li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#FFFFFF;

    margin-bottom:16px;

}

.price-card ul li i{

    color:#34D399;

    font-size:20px;

}

.price-card .btn{

    height:60px;

    border-radius:18px;

    font-weight:700;

    background:#FFFFFF;

    color:#2563EB;

    transition:.35s;

}

.price-card .btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 40px rgba(255,255,255,.20);

}


/*==================================================
SERVICE ICON
==================================================*/

.service-icon{

    position:relative;

    width:95px;

    height:95px;

    margin-bottom:35px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==========================*/

.icon-bg{

    position:absolute;

    inset:0;

    border-radius:28px;

    background:

    linear-gradient(
        135deg,
        #2563EB,
        #6D28D9
    );

    box-shadow:

        0 18px 45px rgba(37,99,235,.25);

    transition:.45s;

}

/*==========================*/

.icon-bg:before{

    content:"";

    position:absolute;

    inset:2px;

    border-radius:26px;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.18),

        rgba(255,255,255,0)

    );

}

/*==========================*/

.service-icon i{

    position:relative;

    z-index:5;

    font-size:42px;

    color:#fff;

    transition:.35s;

}

/*==========================*/

.service-card:hover .icon-bg{

    transform:

        rotate(-8deg)

        scale(1.08);

}

.service-card:hover i{

    transform:scale(1.15);

}

.cta-benefits{

    margin-top:35px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.cta-benefits span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:999px;

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

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

    color:#fff;

    font-weight:600;

    backdrop-filter:blur(10px);

}

.cta-benefits{

    margin-top:40px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;

}

.cta-benefits span{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    border-radius:16px;

    background:#FFFFFF;

    color:#0F172A;

    font-weight:700;

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

    transition:.35s;

}

.cta-benefits span:hover{

    transform:translateY(-4px);

}

.cta-benefits i{

    color:#22C55E;

    font-size:20px;

}

footer{

    margin-top:90px;

    border-top-left-radius:40px;
    border-top-right-radius:40px;

    overflow:hidden;

}

/*==========================
GRID
==========================*/

.compare-grid{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:40px;

    margin-top:80px;

}


/*==================================================
LEVEL2 AGENCY WEB
WHATSAPP FLOAT BUTTON
==================================================*/

.whatsapp{

    position:fixed;

    right:30px;

    bottom:30px;

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #25D366,
        #128C7E
    );

    color:#FFFFFF;

    font-size:34px;

    text-decoration:none;

    z-index:9999;

    box-shadow:
        0 20px 45px rgba(37,211,102,.35);

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

    overflow:hidden;

}


/*==========================
GLASS SHINE
==========================*/

.whatsapp::before{

    content:"";

    position:absolute;

    top:-120px;

    left:-90px;

    width:70px;

    height:260px;

    transform:rotate(25deg);

    background:

        linear-gradient(

            rgba(255,255,255,0),

            rgba(255,255,255,.55),

            rgba(255,255,255,0)

        );

    transition:.9s;

}

.whatsapp:hover::before{

    left:140%;

}


/*==========================
PULSE
==========================*/

.whatsapp::after{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:28px;

    border:2px solid rgba(37,211,102,.35);

    animation:whatsappPulse 2.5s infinite;

}


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

.whatsapp i{

    position:relative;

    z-index:2;

    transition:.35s;

}


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

.whatsapp:hover{

    transform:

        translateY(-6px)

        scale(1.08);

    color:#FFFFFF;

    box-shadow:

        0 30px 60px rgba(37,211,102,.45);

}

.whatsapp:hover i{

    transform:scale(1.15);

}


/*==========================
ANIMATION
==========================*/

@keyframes whatsappPulse{

    0%{

        transform:scale(.9);

        opacity:1;

    }

    70%{

        transform:scale(1.35);

        opacity:0;

    }

    100%{

        opacity:0;

    }

}


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

@media(max-width:768px){

.whatsapp{

right:18px;

bottom:18px;

width:62px;

height:62px;

font-size:28px;

}

}

.features-grid{

    margin-top:40px;

    display:grid;

    gap:22px;

}

.feature-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:24px;

    border-radius:22px;

    background:#FFFFFF;

    border:1px solid #EEF2F7;

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

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(15,23,42,.12);

}

.feature-icon{

    width:64px;

    height:64px;

    flex-shrink:0;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563EB,#6D28D9);

    color:#FFF;

    font-size:28px;

}

.feature-card h5{

    margin-bottom:8px;

    font-size:20px;

    font-weight:700;

}

.feature-card p{

    margin:0;

    color:#64748B;

    line-height:1.7;

}


.about-image{

    position:relative;

}

.about-image img{

    border-radius:28px;

    box-shadow:0 40px 80px rgba(15,23,42,.12);

}

.floating-card{

    position:absolute;

    background:#FFF;

    padding:18px 22px;

    border-radius:18px;

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

}

.floating-card.top{

    top:40px;

    left:-30px;

}

.floating-card.bottom{

    right:-30px;

    bottom:40px;

}

.floating-card strong{

    display:block;

    font-size:28px;

    color:#2563EB;

}

.floating-card span{

    color:#64748B;

    font-size:14px;

}


/*==================================================
WHY US PREMIUM
==================================================*/

.about-showcase{

    position:relative;

}

.about-photo{

    border-radius:30px;

    box-shadow:

        0 40px 80px rgba(15,23,42,.12);

}

/*=========================*/

.floating-card{

    position:absolute;

    width:170px;

    padding:18px;

    background:#fff;

    border-radius:22px;

    text-align:center;

    box-shadow:

        0 25px 60px rgba(15,23,42,.12);

    border:1px solid #EEF2F7;

    animation:floatCard 6s ease-in-out infinite;

}

.floating-card i{

    display:block;

    font-size:28px;

    color:#2563EB;

    margin-bottom:12px;

}

.floating-card strong{

    display:block;

    font-size:30px;

    color:#0F172A;

}

.floating-card span{

    font-size:14px;

    color:#64748B;

}

/*=========================*/

.card-top{

    top:-25px;

    left:35px;

}

.card-left{

    bottom:120px;

    left:-40px;

}

.card-right{

    top:120px;

    right:-40px;

}

.card-bottom{

    bottom:-25px;

    right:40px;

}

/*=========================*/

@keyframes floatCard{

    0%{transform:translateY(0);}

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

    100%{transform:translateY(0);}

}

/*=========================*/

.about-description{

    margin-top:28px;

    font-size:18px;

    line-height:1.9;

    color:#64748B;

}

/*=========================*/

.mini-feature{

    height:100%;

    padding:28px;

    border-radius:22px;

    background:#fff;

    border:1px solid #EEF2F7;

    box-shadow:

        0 15px 40px rgba(15,23,42,.06);

    transition:.35s;

}

.mini-feature:hover{

    transform:translateY(-6px);

}

.mini-feature i{

    font-size:34px;

    color:#2563EB;

    margin-bottom:18px;

}

.mini-feature h5{

    margin-bottom:12px;

    font-weight:700;

}

.mini-feature p{

    margin:0;

    color:#64748B;

    line-height:1.8;

}

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

.compare-left{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*==========================
ITEM
==========================*/

.compare-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

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

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

    border-radius:18px;

    transition:.35s;

}

.compare-item:hover{

    transform:translateX(8px);

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

}

.compare-title{

    display:flex;

    align-items:center;

    gap:16px;

}

.compare-icon{

    width:54px;

    height:54px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:22px;

}

.compare-name{

    color:#fff;

    font-size:18px;

    font-weight:700;

}

.compare-price{

    color:#FBBF24;

    font-size:24px;

    font-weight:800;

}


/*==========================
TOTAL
==========================*/

.compare-total{

    margin-top:24px;

    padding:30px;

    border-radius:22px;

    background:rgba(239,68,68,.12);

    border:1px solid rgba(239,68,68,.25);

}

.compare-total small{

    display:block;

    color:#CBD5E1;

    margin-bottom:10px;

}

.compare-total h3{

    color:#fff;

    font-size:46px;

    font-weight:800;

}

.compare-total span{

    color:#F87171;

}


/*==========================
RIGHT CARD
==========================*/

.compare-card{

    position:sticky;

    top:120px;

    border-radius:28px;

    padding:42px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #2563EB,
        #6D28D9
    );

    color:#fff;

    box-shadow:
        0 30px 80px rgba(37,99,235,.25);

}

.compare-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    top:-90px;

    right:-90px;

}

.compare-card h3{

    color:#fff;

    font-size:34px;

    margin-top:18px;

}

.compare-card .price{

    font-size:74px;

    font-weight:800;

    line-height:1;

    margin:28px 0;

}

.compare-card .price span{

    display:block;

    font-size:18px;

    font-weight:500;

    margin-top:8px;

}

.compare-card ul{

    margin-top:30px;

}

.compare-card li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

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

}

.compare-card i{

    color:#fff;

}

.compare-card .btn{

    margin-top:35px;

    width:100%;

    height:60px;

    border-radius:16px;

    background:#fff;

    color:#2563EB;

    font-weight:800;

    transition:.35s;

}

.compare-card .btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 40px rgba(255,255,255,.20);

}


/*==========================
ECONOMY
==========================*/

.saving{

    margin-top:24px;

    padding:18px;

    border-radius:16px;

    background:rgba(16,185,129,.12);

    border:1px solid rgba(16,185,129,.25);

    text-align:center;

}

.saving strong{

    display:block;

    color:#34D399;

    font-size:32px;

    font-weight:800;

}

.saving span{

    color:#D1FAE5;

}


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

@media(max-width:991px){

.compare-grid{

grid-template-columns:1fr;

}

.compare-card{

position:relative;

top:auto;

}

}

@media(max-width:576px){

.compare-item{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.compare-total h3{

font-size:34px;

}

.compare-card .price{

font-size:56px;

}

}


/*==================================================
LEVEL2 AGENCY WEB
METRICS
==================================================*/

.metrics{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}


/*==========================
BACKGROUND
==========================*/

.metrics::before{

    content:"";

    position:absolute;

    left:-250px;

    top:-250px;

    width:600px;

    height:600px;

    border-radius:50%;

    background:#2563EB;

    filter:blur(170px);

    opacity:.06;

}

.metrics::after{

    content:"";

    position:absolute;

    right:-250px;

    bottom:-250px;

    width:650px;

    height:650px;

    border-radius:50%;

    background:#6D28D9;

    filter:blur(170px);

    opacity:.06;

}


/*==========================
GRID
==========================*/

.metrics-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}


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

.metric-card{

    position:relative;

    overflow:hidden;

    padding:45px 35px;

    text-align:center;

    border-radius:28px;

    background:#ffffff;

    border:1px solid #E2E8F0;

    transition:.4s;

    box-shadow:

    0 18px 45px rgba(15,23,42,.05);

}

.metric-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 80px rgba(15,23,42,.10);

}


/*==========================
SHINE
==========================*/

.metric-card::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-170px;

    width:80px;

    height:520px;

    transform:rotate(25deg);

    background:

    linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.65),

        rgba(255,255,255,0)

    );

    transition:1s;

}

.metric-card:hover::before{

    left:130%;

}


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

.metric-icon{

    width:78px;

    height:78px;

    margin:auto;

    margin-bottom:28px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:32px;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #6D28D9

    );

}


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

.metric-number{

    font-size:58px;

    font-weight:800;

    color:var(--dark);

    line-height:1;

    margin-bottom:15px;

}


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

.metric-card h4{

    font-size:22px;

    margin-bottom:10px;

}

.metric-card p{

    font-size:16px;

    line-height:1.8;

}


/*==========================
BOTTOM
==========================*/

.metrics-bottom{

    margin-top:90px;

    text-align:center;

}

.metrics-bottom p{

    max-width:780px;

    margin:auto;

    font-size:20px;

}

.metrics-bottom strong{

    color:var(--primary);

}


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

@media(max-width:1200px){

.metrics-grid{

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

}

}

@media(max-width:768px){

.metrics-grid{

grid-template-columns:1fr;

}

.metric-number{

font-size:46px;

}

}

/*==================================================
KPI STRIP
==================================================*/

.kpi-strip{

    margin-top:-70px;

    position:relative;

    z-index:30;

}

.kpi-wrapper{

    background:#ffffff;

    border-radius:30px;

    padding:45px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:

        0 35px 80px rgba(15,23,42,.08);

    border:1px solid rgba(226,232,240,.7);

}


/*===========================*/

.kpi-item{

    flex:1;

    text-align:center;

}


/*===========================*/

.kpi-number{

    font-size:56px;

    font-weight:800;

    color:#0F172A;

    line-height:1;

    margin-bottom:10px;

    letter-spacing:-2px;

}


/*===========================*/

.kpi-text{

    color:#64748B;

    font-size:16px;

    font-weight:600;

}


/*===========================*/

.kpi-divider{

    width:1px;

    height:70px;

    background:#E2E8F0;

}


/*===========================*/

.kpi-item:hover .kpi-number{

    color:#2563EB;

}


/*===========================*/

.kpi-item{

    transition:.35s;

}

.kpi-item:hover{

    transform:translateY(-5px);

}


/*===========================*/

@media(max-width:991px){

.kpi-wrapper{

flex-wrap:wrap;

gap:40px;

}

.kpi-divider{

display:none;

}

.kpi-item{

width:45%;

flex:none;

}

}


@media(max-width:768px){

.kpi-wrapper{

padding:35px;

}

.kpi-item{

width:100%;

}

.kpi-number{

font-size:44px;

}

}

/*==================================================
PREMIUM KPI
==================================================*/

.premium-kpi{

    position:relative;

    margin-top:-90px;

    z-index:50;

}


.premium-kpi-wrapper{

    display:grid;

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

    gap:28px;

}



/*========================*/

.kpi-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:28px;

    background:

    rgba(255,255,255,.75);

    backdrop-filter:blur(25px);

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

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

    box-shadow:

        0 15px 40px rgba(15,23,42,.05),

        0 35px 80px rgba(15,23,42,.08);

    transition:.45s cubic-bezier(.2,.8,.2,1);

}



/*========================*/

.kpi-card:hover{

    transform:

        translateY(-14px)

        rotateX(5deg);

    box-shadow:

        0 40px 90px rgba(15,23,42,.14);

}



/*========================*/

.kpi-card:before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    right:-120px;

    top:-120px;

    background:

    radial-gradient(

        rgba(37,99,235,.20),

        transparent 70%

    );

}



/*========================*/

.kpi-card:after{

    content:"";

    position:absolute;

    top:-220px;

    left:-160px;

    width:90px;

    height:520px;

    transform:rotate(25deg);

    background:

    linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.7),

        rgba(255,255,255,0)

    );

    transition:1.2s;

}

.kpi-card:hover:after{

    left:130%;

}



/*========================*/

.kpi-icon{

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:

    linear-gradient(

        135deg,

        #2563EB,

        #6D28D9

    );

    color:#fff;

    font-size:30px;

    margin-bottom:32px;

}



/*========================*/

.kpi-value{

    font-size:62px;

    font-weight:800;

    line-height:1;

    margin-bottom:18px;

    color:#0F172A;

    letter-spacing:-2px;

}



/*========================*/

.kpi-card h4{

    font-size:24px;

    margin-bottom:15px;

}



/*========================*/

.kpi-card p{

    color:#64748B;

    font-size:16px;

    line-height:1.8;

}



/*========================*/

.kpi-card:hover .kpi-icon{

    transform:rotate(-8deg) scale(1.08);

}



/*========================*/

.kpi-card:hover .kpi-value{

    color:#2563EB;

}



/*========================*/

@media(max-width:1200px){

.premium-kpi-wrapper{

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

}

}



@media(max-width:768px){

.premium-kpi{

margin-top:-50px;

}

.premium-kpi-wrapper{

grid-template-columns:1fr;

}

.kpi-card{

padding:32px;

}

.kpi-value{

font-size:48px;

}

}

.logo-dark{

display:none;

}

.navbar-area.scrolled .logo-white{

display:none;

}

.navbar-area.scrolled .logo-dark{

display:block;

}


/*==================================================
CLIENTS PREMIUM
==================================================*/

.clients{

    padding:70px 0px 160px 0px;

    background:#F8FAFC;

}


/*========================*/

.clients-grid{

    display:grid;

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

    gap:30px;

}


/*========================*/

.client-card{

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:30px;

    background:#FFFFFF;

    border:1px solid #EEF2F7;

    transition:.45s cubic-bezier(.2,.8,.2,1);

    box-shadow:

        0 18px 45px rgba(15,23,42,.05);

}


/*========================*/

.client-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:

        linear-gradient(

            90deg,

            #2563EB,

            #6D28D9

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.client-card:hover::before{

    transform:scaleX(1);

}


/*========================*/

.client-card:hover{

    transform:

        translateY(-10px);

    box-shadow:

        0 35px 70px rgba(15,23,42,.12);

}


/*========================*/

.client-logo{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}

.client-logo img{

    max-width:170px;

    max-height:60px;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.65;

    transition:.45s;

}

.client-card:hover img{

    filter:none;

    opacity:1;

    transform:scale(1.05);

}


/*========================*/

.client-info h5{

    font-size:22px;

    margin-bottom:8px;

}

.client-info span{

    color:#64748B;

}


/*========================*/

.client-tag{

    display:inline-flex;

    align-items:center;

    margin-top:25px;

    padding:10px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    color:#2563EB;

    background:

        rgba(37,99,235,.08);

}


/*========================*/

.client-card::after{

    content:"★★★★★";

    position:absolute;

    right:25px;

    top:25px;

    color:#FBBF24;

    font-size:14px;

    letter-spacing:2px;

    opacity:.85;

}


/*========================*/

@media(max-width:1200px){

.clients-grid{

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

}

}

@media(max-width:768px){

.clients-grid{

grid-template-columns:1fr;

}

}