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

.hero-section{
    position:relative;
    min-height:calc(100vh - 118px);
    overflow:hidden;

    display:flex;
    align-items:center;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(108,92,231,.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(0,212,255,.10),
            transparent 28%
        ),
        #080b18;

    color:#fff;
}


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

.hero-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.hero-grid{

    position:absolute;
    inset:-100px;

    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:50px 50px;

    transform:perspective(500px)
              rotateX(55deg)
              scale(1.5);

    transform-origin:center bottom;

    opacity:.5;

    animation:gridMove 12s linear infinite;
}

@keyframes gridMove{

    0%{
        transform:
        perspective(500px)
        rotateX(55deg)
        translateY(0)
        scale(1.5);
    }

    100%{
        transform:
        perspective(500px)
        rotateX(55deg)
        translateY(50px)
        scale(1.5);
    }

}


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

.hero-orb{
    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.35;

    animation:orbFloat 8s ease-in-out infinite;
}

.orb-1{
    width:350px;
    height:350px;

    background:#6c5ce7;

    left:-120px;
    top:20%;
}

.orb-2{
    width:300px;
    height:300px;

    background:#00d4ff;

    right:-80px;
    bottom:5%;

    animation-delay:2s;
}

.orb-3{
    width:180px;
    height:180px;

    background:#8e7dff;

    right:35%;
    top:10%;

    animation-delay:4s;
}

@keyframes orbFloat{

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

    50%{
        transform:translate(30px,-35px);
    }

}


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

.hero-content{
    position:relative;
    z-index:5;
    max-width:720px;
}


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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:8px 15px;

    margin-bottom:22px;

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

    border-radius:50px;

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

    backdrop-filter:blur(15px);

    color:#cbd0e6;

    font-size:12px;

    font-weight:600;

    letter-spacing:.3px;

}

.badge-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#00d4ff;

    box-shadow:
        0 0 0 5px rgba(0,212,255,.10),
        0 0 15px #00d4ff;

    animation:badgePulse 2s infinite;
}

@keyframes badgePulse{

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

    50%{
        transform:scale(1.25);
    }

}


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

.hero-title{

    margin:0;

    font-size:clamp(42px,5.5vw,76px);

    line-height:1.08;

    letter-spacing:-3px;

    font-weight:800;

    color:#fff;
}

.gradient-text{

    display:inline-block;

    background:
        linear-gradient(
            90deg,
            #8e7dff,
            #00d4ff,
            #8e7dff
        );

    background-size:200% auto;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:gradientMove 4s linear infinite;
}

@keyframes gradientMove{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:200% center;
    }

}


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

.typing-text{

    color:#00d4ff;

    border-right:3px solid #00d4ff;

    padding-right:6px;

    animation:
        cursorBlink .7s infinite,
        textGlow 2s ease-in-out infinite alternate;
}

@keyframes cursorBlink{

    0%,45%{
        border-color:#00d4ff;
    }

    46%,100%{
        border-color:transparent;
    }

}

@keyframes textGlow{

    from{
        text-shadow:
            0 0 5px rgba(0,212,255,.2);
    }

    to{
        text-shadow:
            0 0 25px rgba(0,212,255,.5);
    }

}


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

.hero-description{

    max-width:650px;

    margin:25px 0 30px;

    color:#aeb5cb;

    font-size:16px;

    line-height:1.8;

}


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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:13px;

    flex-wrap:wrap;
}

.hero-btn{

    display:inline-flex;

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

    gap:10px;

    padding:14px 22px;

    border-radius:12px;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    transition:.35s;

}

.primary-btn{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        );

    box-shadow:
        0 15px 35px rgba(108,92,231,.30);
}

.primary-btn:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(108,92,231,.45);
}

.primary-btn i{

    transition:.3s;
}

.primary-btn:hover i{

    transform:translateX(5px);
}


.outline-btn{

    color:#fff;

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

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

    backdrop-filter:blur(10px);
}

.outline-btn:hover{

    color:#fff;

    border-color:#00d4ff;

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

    transform:translateY(-4px);
}


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

.hero-trust{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:42px;
}

.trust-item{

    display:flex;

    flex-direction:column;

    gap:3px;
}

.trust-item strong{

    font-size:20px;

    font-weight:800;

    color:#fff;
}

.trust-item span{

    font-size:10px;

    color:#7f879f;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.trust-line{

    width:1px;

    height:35px;

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


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

.hero-visual{

    position:relative;

    height:560px;

    display:flex;

    align-items:center;

    justify-content:center;
}


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

.hero-circle{

    position:relative;

    width:330px;
    height:330px;

    display:flex;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(108,92,231,.30),
            rgba(8,11,24,.95) 65%
        );

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

    box-shadow:
        0 0 80px rgba(108,92,231,.20),
        inset 0 0 60px rgba(0,212,255,.08);
}

.circle-inner{

    width:210px;
    height:210px;

    display:flex;

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

    flex-direction:column;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            rgba(108,92,231,.20),
            rgba(0,212,255,.08)
        );

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

    box-shadow:
        inset 0 0 40px rgba(255,255,255,.03);
}

.code-icon{

    width:58px;
    height:58px;

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

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );

    font-size:25px;

    box-shadow:
        0 10px 35px rgba(0,212,255,.25);

    margin-bottom:15px;

    animation:iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat{

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

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

}

.circle-title{

    font-size:19px;

    font-weight:800;

    letter-spacing:1px;
}

.circle-subtitle{

    margin-top:5px;

    font-size:8px;

    letter-spacing:2px;

    color:#7f879f;
}


/* ==================================================
   ROTATING RINGS
================================================== */

.circle-ring{

    position:absolute;

    border-radius:50%;

    border:1px dashed rgba(0,212,255,.35);

}

.ring-one{

    inset:-20px;

    animation:
        ringRotate 15s linear infinite;
}

.ring-two{

    inset:-45px;

    border-color:rgba(142,125,255,.20);

    animation:
        ringRotateReverse 20s linear infinite;
}

@keyframes ringRotate{

    from{
        transform:rotate(0);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes ringRotateReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0);
    }

}


/* ==================================================
   FLOATING CARDS
================================================== */

.floating-card{

    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;

    gap:11px;

    padding:12px 15px;

    border-radius:14px;

    background:
        rgba(17,22,42,.80);

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

    backdrop-filter:blur(18px);

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

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

.floating-card strong{

    display:block;

    color:#fff;

    font-size:11px;
}

.floating-card small{

    display:block;

    margin-top:3px;

    color:#777f98;

    font-size:9px;
}

.floating-icon{

    width:38px;
    height:38px;

    display:flex;

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

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );

}

.card-one{

    top:85px;

    left:-5px;
}

.card-two{

    right:-10px;

    bottom:105px;

    animation-delay:1.5s;
}

.card-three{

    right:30px;

    top:75px;

    padding:10px 14px;

    animation-delay:2.5s;

    color:#00d4ff;

    font-size:20px;
}

.card-three span{

    font-size:9px;

    line-height:1.5;

    color:#aeb5cb;

}

@keyframes cardFloat{

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

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

}


/* ==================================================
   TEXT ENTRANCE ANIMATION
================================================== */

.hero-animate{

    opacity:0;

    transform:translateY(35px);

    animation:
        heroReveal 1s cubic-bezier(.16,1,.3,1)
        forwards;
}

.hero-badge{
    animation-delay:.15s;
}

.hero-title{
    animation-delay:.3s;
}

.hero-description{
    animation-delay:.5s;
}

.hero-buttons{
    animation-delay:.7s;
}

.hero-trust{
    animation-delay:.9s;
}

.hero-visual{
    animation-delay:.45s;
}

@keyframes heroReveal{

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


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

@media(max-width:991px){

    .hero-section{

        min-height:auto;

        padding:70px 0 80px;
    }

    .hero-title{

        font-size:
            clamp(40px,8vw,62px);

        letter-spacing:-2px;
    }

    .hero-description{

        font-size:14px;
    }

    .hero-visual{

        height:470px;

        margin-top:30px;
    }

    .hero-circle{

        width:280px;
        height:280px;
    }

    .circle-inner{

        width:180px;
        height:180px;
    }

    .card-one{

        left:0;
    }

    .card-two{

        right:0;
    }

}


@media(max-width:575px){

    .hero-section{

        padding:
            55px 0 65px;
    }

    .hero-title{

        font-size:38px;

        letter-spacing:-1.5px;
    }

    .hero-description{

        font-size:13px;

        line-height:1.7;
    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

        align-items:stretch;
    }

    .hero-btn{

        width:100%;
    }

    .hero-trust{

        gap:12px;

        justify-content:space-between;
    }

    .trust-item strong{

        font-size:16px;
    }

    .trust-item span{

        font-size:8px;
    }

    .hero-visual{

        height:400px;
    }

    .hero-circle{

        width:230px;
        height:230px;
    }

    .circle-inner{

        width:150px;
        height:150px;
    }

    .circle-title{

        font-size:14px;
    }

    .code-icon{

        width:45px;
        height:45px;

        font-size:19px;

        margin-bottom:8px;
    }

    .ring-one{

        inset:-12px;
    }

    .ring-two{

        inset:-28px;
    }

    .floating-card{

        padding:9px 10px;
    }

    .floating-card strong{

        font-size:9px;
    }

    .floating-card small{

        font-size:7px;
    }

    .floating-icon{

        width:30px;
        height:30px;

        font-size:11px;
    }

    .card-one{

        top:40px;
        left:-5px;
    }

    .card-two{

        right:-5px;
        bottom:45px;
    }

    .card-three{

        right:0;
        top:35px;
    }

}

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

.about-section{

    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:#fff;

    color:#171b2d;
}


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

.about-bg-circle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(80px);

    opacity:.35;
}

.about-circle-1{

    width:280px;
    height:280px;

    background:rgba(108,92,231,.10);

    left:-150px;
    top:15%;
}

.about-circle-2{

    width:250px;
    height:250px;

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

    right:-120px;
    bottom:5%;
}


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

.section-label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

    color:#6c5ce7;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.8px;
}

.section-label span{

    width:32px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            #6c5ce7,
            #00d4ff
        );

    border-radius:10px;
}


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

.about-title{

    max-width:600px;

    margin:0 0 20px;

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

    line-height:1.12;

    letter-spacing:-2px;

    font-weight:800;

    color:#11152a;
}

.about-title span{

    background:
        linear-gradient(
            90deg,
            #6c5ce7,
            #00bfe8
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;
}


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

.about-text{

    max-width:620px;

    margin-bottom:13px;

    color:#70778d;

    font-size:14px;

    line-height:1.8;
}


/* ==================================================
   ABOUT VISUAL
================================================== */

.about-visual{

    position:relative;

    min-height:510px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;
}


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

.about-image-box{

    position:relative;

    width:430px;

    height:450px;

    overflow:hidden;

    border-radius:30px;

    transform:rotate(-2deg);

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );

    padding:6px;

    box-shadow:
        0 30px 70px rgba(30,35,80,.16);

    transition:.5s;
}

.about-image-box:hover{

    transform:
        rotate(0deg)
        translateY(-8px);

    box-shadow:
        0 40px 80px rgba(30,35,80,.20);
}

.about-image{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:25px;

    background:#11162a;
}

.image-overlay{

    position:absolute;

    inset:6px;

    border-radius:25px;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(8,11,24,.55)
        );

    pointer-events:none;
}


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

.experience-card{

    position:absolute;

    left:-25px;

    bottom:35px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 20px;

    border-radius:16px;

    background:#fff;

    border:1px solid rgba(20,25,50,.07);

    box-shadow:
        0 20px 50px rgba(20,25,60,.15);

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

.experience-number{

    font-size:35px;

    line-height:1;

    font-weight:800;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;
}

.experience-text{

    color:#777e93;

    font-size:10px;

    line-height:1.4;
}

.experience-text strong{

    color:#20253a;

    font-size:12px;
}


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

.about-floating-card{

    position:absolute;

    right:0;

    top:65px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:11px;

    padding:13px 17px;

    border-radius:15px;

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

    border:1px solid rgba(20,25,50,.07);

    box-shadow:
        0 20px 50px rgba(20,25,60,.14);

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

    animation-delay:1s;
}

.about-float-icon{

    width:40px;
    height:40px;

    display:flex;

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

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );

    box-shadow:
        0 8px 20px rgba(108,92,231,.22);
}

.about-floating-card strong{

    display:block;

    color:#24293d;

    font-size:11px;
}

.about-floating-card small{

    display:block;

    margin-top:3px;

    color:#8b91a6;

    font-size:9px;
}


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

.about-mini-circle{

    position:absolute;

    right:35px;

    bottom:40px;

    width:62px;
    height:62px;

    display:flex;

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

    border-radius:50%;

    color:#fff;

    font-size:20px;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        );

    border:6px solid #fff;

    box-shadow:
        0 15px 35px rgba(108,92,231,.30);

    animation:
        aboutSpin 8s linear infinite;
}

@keyframes aboutSpin{

    0%{
        transform:rotate(0);
    }

    100%{
        transform:rotate(360deg);
    }

}

@keyframes aboutFloat{

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

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

}


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

.about-features{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:15px;
}

.about-feature{

    display:flex;

    align-items:flex-start;

    gap:12px;
}

.feature-check{

    flex-shrink:0;

    width:25px;
    height:25px;

    display:flex;

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

    border-radius:50%;

    color:#6c5ce7;

    background:
        rgba(108,92,231,.10);

    font-size:10px;

    margin-top:1px;
}

.about-feature strong{

    display:block;

    color:#252a3e;

    font-size:12px;

    margin-bottom:3px;
}

.about-feature span{

    display:block;

    color:#858b9f;

    font-size:11px;

    line-height:1.5;
}


/* ==================================================
   ACTIONS
================================================== */

.about-actions{

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:30px;

    flex-wrap:wrap;
}

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:13px 20px;

    color:#fff;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        );

    box-shadow:
        0 12px 30px rgba(108,92,231,.22);

    transition:.3s;
}

.about-btn:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(108,92,231,.32);
}

.about-btn i{

    transition:.3s;
}

.about-btn:hover i{

    transform:translateX(4px);
}


/* ==================================================
   SUPPORT
================================================== */

.about-support{

    display:flex;

    align-items:center;

    gap:9px;
}

.support-icon{

    width:38px;
    height:38px;

    display:flex;

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

    border-radius:50%;

    color:#6c5ce7;

    background:
        rgba(108,92,231,.09);

    font-size:14px;
}

.about-support small{

    display:block;

    color:#9096a8;

    font-size:9px;
}

.about-support strong{

    display:block;

    margin-top:2px;

    color:#252a3d;

    font-size:11px;
}


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

.about-stats{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:90px;

    padding:25px 30px;

    border-radius:20px;

    background:#f8f8fc;

    border:1px solid rgba(20,25,50,.06);

    box-shadow:
        0 15px 40px rgba(20,25,60,.05);
}

.about-stat{

    display:flex;

    align-items:center;

    gap:11px;
}

.stat-icon{

    width:42px;
    height:42px;

    display:flex;

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

    border-radius:12px;

    color:#6c5ce7;

    background:
        rgba(108,92,231,.09);
}

.about-stat strong{

    display:block;

    color:#20253a;

    font-size:18px;

    font-weight:800;
}

.about-stat span{

    display:block;

    margin-top:2px;

    color:#858b9f;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.stat-divider{

    width:1px;

    height:38px;

    background:#e3e5ed;
}


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

@media(max-width:991px){

    .about-section{

        padding:80px 0;
    }

    .about-visual{

        min-height:470px;

        margin-bottom:20px;
    }

    .about-image-box{

        width:390px;

        height:410px;
    }

    .about-stats{

        margin-top:60px;

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:25px;
    }

    .stat-divider{

        display:none;
    }

}


@media(max-width:575px){

    .about-section{

        padding:65px 0;
    }

    .about-title{

        font-size:34px;

        letter-spacing:-1.5px;
    }

    .about-text{

        font-size:13px;
    }

    .about-visual{

        min-height:390px;

        padding:15px;
    }

    .about-image-box{

        width:290px;

        height:330px;

        border-radius:23px;
    }

    .experience-card{

        left:-5px;

        bottom:20px;

        padding:11px 13px;
    }

    .experience-number{

        font-size:27px;
    }

    .about-floating-card{

        right:-5px;

        top:35px;

        padding:10px;
    }

    .about-float-icon{

        width:34px;
        height:34px;
    }

    .about-mini-circle{

        width:48px;
        height:48px;

        right:15px;

        bottom:20px;

        font-size:15px;
    }

    .about-actions{

        align-items:flex-start;

        flex-direction:column;

        gap:18px;
    }

    .about-stats{

        grid-template-columns:1fr;

        padding:20px;
    }

}
/* ==================================================
   ABOUT SECTION
================================================== */

.about-section{

    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:#fff;

    color:#171b2d;
}


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

.about-bg-circle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(80px);

    opacity:.35;
}

.about-circle-1{

    width:280px;
    height:280px;

    background:rgba(108,92,231,.10);

    left:-150px;
    top:15%;
}

.about-circle-2{

    width:250px;
    height:250px;

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

    right:-120px;
    bottom:5%;
}


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

.section-label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

    color:#6c5ce7;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.8px;
}

.section-label span{

    width:32px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            #6c5ce7,
            #00d4ff
        );

    border-radius:10px;
}


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

.about-title{

    max-width:600px;

    margin:0 0 20px;

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

    line-height:1.12;

    letter-spacing:-2px;

    font-weight:800;

    color:#11152a;
}

.about-title span{

    background:
        linear-gradient(
            90deg,
            #6c5ce7,
            #00bfe8
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;
}


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

.about-text{

    max-width:620px;

    margin-bottom:13px;

    color:#70778d;

    font-size:14px;

    line-height:1.8;
}


/* ==================================================
   ABOUT VISUAL
================================================== */

.about-visual{

    position:relative;

    min-height:510px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;
}


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

.about-image-box{

    position:relative;

    width:430px;

    height:450px;

    overflow:hidden;

    border-radius:30px;

    transform:rotate(-2deg);

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );

    padding:6px;

    box-shadow:
        0 30px 70px rgba(30,35,80,.16);

    transition:.5s;
}

.about-image-box:hover{

    transform:
        rotate(0deg)
        translateY(-8px);

    box-shadow:
        0 40px 80px rgba(30,35,80,.20);
}

.about-image{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:25px;

    background:#11162a;
}

.image-overlay{

    position:absolute;

    inset:6px;

    border-radius:25px;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(8,11,24,.55)
        );

    pointer-events:none;
}


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

.experience-card{

    position:absolute;

    left:-25px;

    bottom:35px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 20px;

    border-radius:16px;

    background:#fff;

    border:1px solid rgba(20,25,50,.07);

    box-shadow:
        0 20px 50px rgba(20,25,60,.15);

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

.experience-number{

    font-size:35px;

    line-height:1;

    font-weight:800;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;
}

.experience-text{

    color:#777e93;

    font-size:10px;

    line-height:1.4;
}

.experience-text strong{

    color:#20253a;

    font-size:12px;
}


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

.about-floating-card{

    position:absolute;

    right:0;

    top:65px;

    z-index:5;

    display:flex;

    align-items:center;

    gap:11px;

    padding:13px 17px;

    border-radius:15px;

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

    border:1px solid rgba(20,25,50,.07);

    box-shadow:
        0 20px 50px rgba(20,25,60,.14);

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

    animation-delay:1s;
}

.about-float-icon{

    width:40px;
    height:40px;

    display:flex;

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

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );

    box-shadow:
        0 8px 20px rgba(108,92,231,.22);
}

.about-floating-card strong{

    display:block;

    color:#24293d;

    font-size:11px;
}

.about-floating-card small{

    display:block;

    margin-top:3px;

    color:#8b91a6;

    font-size:9px;
}


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

.about-mini-circle{

    position:absolute;

    right:35px;

    bottom:40px;

    width:62px;
    height:62px;

    display:flex;

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

    border-radius:50%;

    color:#fff;

    font-size:20px;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        );

    border:6px solid #fff;

    box-shadow:
        0 15px 35px rgba(108,92,231,.30);

    animation:
        aboutSpin 8s linear infinite;
}

@keyframes aboutSpin{

    0%{
        transform:rotate(0);
    }

    100%{
        transform:rotate(360deg);
    }

}

@keyframes aboutFloat{

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

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

}


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

.about-features{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:15px;
}

.about-feature{

    display:flex;

    align-items:flex-start;

    gap:12px;
}

.feature-check{

    flex-shrink:0;

    width:25px;
    height:25px;

    display:flex;

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

    border-radius:50%;

    color:#6c5ce7;

    background:
        rgba(108,92,231,.10);

    font-size:10px;

    margin-top:1px;
}

.about-feature strong{

    display:block;

    color:#252a3e;

    font-size:12px;

    margin-bottom:3px;
}

.about-feature span{

    display:block;

    color:#858b9f;

    font-size:11px;

    line-height:1.5;
}


/* ==================================================
   ACTIONS
================================================== */

.about-actions{

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:30px;

    flex-wrap:wrap;
}

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:13px 20px;

    color:#fff;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        );

    box-shadow:
        0 12px 30px rgba(108,92,231,.22);

    transition:.3s;
}

.about-btn:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(108,92,231,.32);
}

.about-btn i{

    transition:.3s;
}

.about-btn:hover i{

    transform:translateX(4px);
}


/* ==================================================
   SUPPORT
================================================== */

.about-support{

    display:flex;

    align-items:center;

    gap:9px;
}

.support-icon{

    width:38px;
    height:38px;

    display:flex;

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

    border-radius:50%;

    color:#6c5ce7;

    background:
        rgba(108,92,231,.09);

    font-size:14px;
}

.about-support small{

    display:block;

    color:#9096a8;

    font-size:9px;
}

.about-support strong{

    display:block;

    margin-top:2px;

    color:#252a3d;

    font-size:11px;
}


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

.about-stats{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:90px;

    padding:25px 30px;

    border-radius:20px;

    background:#f8f8fc;

    border:1px solid rgba(20,25,50,.06);

    box-shadow:
        0 15px 40px rgba(20,25,60,.05);
}

.about-stat{

    display:flex;

    align-items:center;

    gap:11px;
}

.stat-icon{

    width:42px;
    height:42px;

    display:flex;

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

    border-radius:12px;

    color:#6c5ce7;

    background:
        rgba(108,92,231,.09);
}

.about-stat strong{

    display:block;

    color:#20253a;

    font-size:18px;

    font-weight:800;
}

.about-stat span{

    display:block;

    margin-top:2px;

    color:#858b9f;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.stat-divider{

    width:1px;

    height:38px;

    background:#e3e5ed;
}


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

@media(max-width:991px){

    .about-section{

        padding:80px 0;
    }

    .about-visual{

        min-height:470px;

        margin-bottom:20px;
    }

    .about-image-box{

        width:390px;

        height:410px;
    }

    .about-stats{

        margin-top:60px;

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:25px;
    }

    .stat-divider{

        display:none;
    }

}


@media(max-width:575px){

    .about-section{

        padding:65px 0;
    }

    .about-title{

        font-size:34px;

        letter-spacing:-1.5px;
    }

    .about-text{

        font-size:13px;
    }

    .about-visual{

        min-height:390px;

        padding:15px;
    }

    .about-image-box{

        width:290px;

        height:330px;

        border-radius:23px;
    }

    .experience-card{

        left:-5px;

        bottom:20px;

        padding:11px 13px;
    }

    .experience-number{

        font-size:27px;
    }

    .about-floating-card{

        right:-5px;

        top:35px;

        padding:10px;
    }

    .about-float-icon{

        width:34px;
        height:34px;
    }

    .about-mini-circle{

        width:48px;
        height:48px;

        right:15px;

        bottom:20px;

        font-size:15px;
    }

    .about-actions{

        align-items:flex-start;

        flex-direction:column;

        gap:18px;
    }

    .about-stats{

        grid-template-columns:1fr;

        padding:20px;
    }

}
/* ==================================================
   PURE CSS ABOUT VISUAL
================================================== */

.about-visual-css{
    position:relative;
    width:100%;
    max-width:570px;
    height:520px;
    margin:auto;
    overflow:hidden;
    border-radius:35px;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(108,92,231,.16),
            transparent 28%),
        radial-gradient(circle at 80% 20%,
            rgba(0,212,255,.12),
            transparent 25%),
        linear-gradient(145deg,#f8f8ff,#ffffff);

    border:1px solid rgba(108,92,231,.08);
    box-shadow:
        0 30px 80px rgba(30,35,80,.10);
}


/* GRID */

.about-visual-css::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(108,92,231,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(108,92,231,.045) 1px,transparent 1px);

    background-size:35px 35px;

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


/* GLOW */

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

.css-glow-1{
    width:190px;
    height:190px;
    left:60px;
    top:80px;
    background:rgba(108,92,231,.16);
    animation:glowMove 7s ease-in-out infinite;
}

.css-glow-2{
    width:170px;
    height:170px;
    right:50px;
    bottom:60px;
    background:rgba(0,212,255,.13);
    animation:glowMove 8s ease-in-out infinite reverse;
}

@keyframes glowMove{

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

    50%{
        transform:translate(25px,-20px);
    }

}


/* ==================================================
   ORBITS
================================================== */

.orbit{
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid rgba(108,92,231,.16);
    border-radius:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

.orbit-1{
    width:280px;
    height:280px;
    animation:orbitRotate 18s linear infinite;
}

.orbit-2{
    width:370px;
    height:370px;
    border-color:rgba(0,212,255,.12);
    animation:orbitRotate 25s linear infinite reverse;
}

.orbit-3{
    width:460px;
    height:460px;
    border-style:dashed;
    border-color:rgba(108,92,231,.08);
    animation:orbitRotate 35s linear infinite;
}

@keyframes orbitRotate{

    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }

    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }

}


/* ==================================================
   CENTRAL DIGITAL CORE
================================================== */

.digital-core{
    position:absolute;
    left:50%;
    top:50%;

    width:150px;
    height:150px;

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

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #f3f0ff 55%,
            #e8e5ff 100%
        );

    border:1px solid rgba(108,92,231,.18);

    box-shadow:
        0 0 0 12px rgba(108,92,231,.035),
        0 0 0 28px rgba(108,92,231,.025),
        0 25px 60px rgba(108,92,231,.20);

    z-index:5;

    animation:coreFloat 5s ease-in-out infinite;
}

@keyframes coreFloat{

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

    50%{
        transform:translate(-50%,-50%) translateY(-8px);
    }

}


.core-ring{
    position:absolute;
    inset:8px;

    border-radius:50%;

    border:1px dashed rgba(108,92,231,.35);

    animation:coreSpin 8s linear infinite;
}

@keyframes coreSpin{

    from{
        transform:rotate(0);
    }

    to{
        transform:rotate(360deg);
    }

}


.core-content{
    position:relative;
    text-align:center;
    z-index:2;
}

.core-small{
    display:block;

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

    background:linear-gradient(
        135deg,
        #6c5ce7,
        #00bfe8
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.core-content strong{
    display:block;

    margin-top:2px;

    font-size:17px;
    font-weight:900;

    letter-spacing:1px;

    color:#171b2d;
}

.core-content small{
    display:block;

    margin-top:5px;

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

    letter-spacing:1.4px;

    color:#8a90a4;
}


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

.orbit-icon{
    position:absolute;

    width:48px;
    height:48px;

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

    border-radius:14px;

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

    border:1px solid rgba(108,92,231,.10);

    color:#6c5ce7;

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

    z-index:6;

    font-size:16px;

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

.orbit-icon-1{
    top:80px;
    left:105px;
}

.orbit-icon-2{
    top:75px;
    right:90px;
    color:#00a9ce;
    animation-delay:1s;
}

.orbit-icon-3{
    bottom:80px;
    left:90px;
    color:#8e7dff;
    animation-delay:2s;
}

.orbit-icon-4{
    bottom:65px;
    right:105px;
    color:#00a9ce;
    animation-delay:3s;
}

@keyframes iconFloat{

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

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

}


/* ==================================================
   FLOATING CARDS
================================================== */

.css-floating-card{
    position:absolute;

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

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

    border:1px solid rgba(30,35,80,.07);

    border-radius:16px;

    box-shadow:
        0 20px 45px rgba(30,35,80,.12);

    z-index:10;
}


/* PROJECT CARD */

.card-projects{
    left:28px;
    top:28px;

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

    padding:11px 15px;

    animation:cardFloat 5s ease-in-out infinite;
}

.floating-icon{
    width:38px;
    height:38px;

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

    border-radius:11px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #6c5ce7,
        #8e7dff
    );

    font-size:14px;
}

.card-projects span{
    display:block;

    font-size:9px;
    color:#8b91a5;
}

.card-projects strong{
    display:block;

    margin-top:2px;

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

    color:#20253a;
}


/* GROWTH CARD */

.card-growth{
    right:25px;
    top:150px;

    width:150px;

    padding:14px;

    animation:cardFloat 5s ease-in-out infinite;
    animation-delay:1.5s;
}

.growth-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    font-size:8px;
    color:#858b9f;
}

.growth-top i{
    color:#18b77a;
}

.growth-value{
    margin-top:7px;

    font-size:21px;
    font-weight:900;

    color:#24283b;
}

.growth-line{
    height:4px;

    margin-top:9px;

    overflow:hidden;

    border-radius:20px;

    background:#ececf5;
}

.growth-line span{
    display:block;

    width:82%;
    height:100%;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #6c5ce7,
        #00d4ff
    );

    animation:growthProgress 3s ease-in-out infinite alternate;
}

@keyframes growthProgress{

    from{
        width:65%;
    }

    to{
        width:90%;
    }

}


/* ==================================================
   CODE WINDOW
================================================== */

.code-window{
    position:absolute;

    left:30px;
    bottom:30px;

    width:190px;

    overflow:hidden;

    border-radius:15px;

    background:#11162a;

    box-shadow:
        0 25px 50px rgba(10,15,40,.22);

    z-index:8;

    transform:rotate(-2deg);

    animation:codeFloat 6s ease-in-out infinite;
}

@keyframes codeFloat{

    0%,100%{
        transform:rotate(-2deg) translateY(0);
    }

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

}

.code-header{
    display:flex;
    align-items:center;
    gap:9px;

    padding:9px 11px;

    background:#181e35;

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

.code-dots{
    display:flex;
    gap:4px;
}

.code-dots span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#555d75;
}

.code-header small{
    color:#858ca4;
    font-size:7px;
}

.code-body{
    padding:14px;

    font-family:monospace;
    font-size:10px;
    line-height:2;

    color:#aeb5ce;
}

.code-body b{
    color:#8e7dff;
}

.code-body span{
    color:#00d4ff;
}

.code-body em{
    color:#72e6a9;
    font-style:normal;
}

.code-indent{
    padding-left:15px;
}


/* ==================================================
   EXPERIENCE
================================================== */

.css-experience{
    position:absolute;

    right:35px;
    bottom:35px;

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

    padding:12px 16px;

    border-radius:15px;

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

    border:1px solid rgba(30,35,80,.07);

    box-shadow:
        0 18px 45px rgba(30,35,80,.13);

    z-index:10;

    animation:cardFloat 5s ease-in-out infinite;
    animation-delay:2s;
}

.css-experience strong{
    font-size:26px;
    line-height:1;

    background:linear-gradient(
        135deg,
        #6c5ce7,
        #00c7ec
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.css-experience span{
    font-size:8px;
    line-height:1.4;
    color:#858b9f;
}

@keyframes cardFloat{

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

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

}


/* ==================================================
   PARTICLES
================================================== */

.particle{
    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#6c5ce7;

    box-shadow:
        0 0 12px rgba(108,92,231,.55);

    animation:particlePulse 3s ease-in-out infinite;
}

.particle-1{
    left:50px;
    top:220px;
}

.particle-2{
    right:45px;
    top:80px;
    background:#00d4ff;
    animation-delay:1s;
}

.particle-3{
    left:280px;
    top:40px;
    animation-delay:1.5s;
}

.particle-4{
    right:210px;
    bottom:40px;
    background:#00d4ff;
    animation-delay:2s;
}

@keyframes particlePulse{

    0%,100%{
        opacity:.3;
        transform:scale(.7);
    }

    50%{
        opacity:1;
        transform:scale(1.5);
    }

}


/* ==================================================
   DARK MODE
================================================== */

body.dark-mode .about-visual-css{
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(108,92,231,.20),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0d1225,
            #080b18
        );

    border-color:#252b45;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);
}

body.dark-mode .about-visual-css::before{
    background-image:
        linear-gradient(
            rgba(142,125,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(142,125,255,.045) 1px,
            transparent 1px
        );
}

body.dark-mode .orbit{
    border-color:rgba(142,125,255,.16);
}

body.dark-mode .orbit-2{
    border-color:rgba(0,212,255,.13);
}

body.dark-mode .orbit-icon{
    background:#11162a;
    border-color:#272d45;
}

body.dark-mode .digital-core{
    background:
        radial-gradient(
            circle,
            #171d34,
            #11162a
        );

    border-color:#303754;
}

body.dark-mode .core-content strong{
    color:#fff;
}

body.dark-mode .css-floating-card,
body.dark-mode .css-experience{
    background:rgba(17,22,42,.94);
    border-color:#292f48;
}

body.dark-mode .card-projects strong,
body.dark-mode .growth-value{
    color:#e8ebf5;
}

body.dark-mode .card-projects span,
body.dark-mode .growth-top,
body.dark-mode .css-experience span{
    color:#858ca4;
}

body.dark-mode .growth-line{
    background:#292f48;
}


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

@media(max-width:575px){

    .about-visual-css{
        height:410px;
        border-radius:25px;
    }

    .orbit-1{
        width:210px;
        height:210px;
    }

    .orbit-2{
        width:285px;
        height:285px;
    }

    .orbit-3{
        width:360px;
        height:360px;
    }

    .digital-core{
        width:120px;
        height:120px;
    }

    .core-content strong{
        font-size:13px;
    }

    .core-content small{
        font-size:5px;
    }

    .orbit-icon{
        width:38px;
        height:38px;
        font-size:13px;
    }

    .orbit-icon-1{
        left:45px;
        top:70px;
    }

    .orbit-icon-2{
        right:45px;
        top:65px;
    }

    .orbit-icon-3{
        left:40px;
        bottom:70px;
    }

    .orbit-icon-4{
        right:45px;
        bottom:55px;
    }

    .card-projects{
        left:12px;
        top:15px;
        transform:scale(.85);
    }

    .card-growth{
        right:10px;
        top:125px;
        transform:scale(.85);
    }

    .code-window{
        left:15px;
        bottom:20px;
        transform:scale(.82) rotate(-2deg);
        transform-origin:left bottom;
    }

    .css-experience{
        right:15px;
        bottom:18px;
        transform:scale(.85);
        transform-origin:right bottom;
    }

}
/* ==================================================
   SERVICES SECTION
================================================== */

.services-section{
    position:relative;
    padding:110px 0;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(108,92,231,.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(0,212,255,.06),
            transparent 28%
        ),
        #f9f9fd;

    color:#171b2d;
}


/* BACKGROUND */

.service-bg{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    pointer-events:none;
}

.service-bg-1{
    width:260px;
    height:260px;
    left:-140px;
    top:15%;
    background:rgba(108,92,231,.10);
}

.service-bg-2{
    width:220px;
    height:220px;
    right:-100px;
    bottom:10%;
    background:rgba(0,212,255,.09);
}


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

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

.service-label{
    justify-content:center;
}

.services-title{
    margin:0;

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

    line-height:1.12;

    letter-spacing:-2px;

    font-weight:800;

    color:#11152a;
}

.services-title span{
    display:block;

    background:
        linear-gradient(
            90deg,
            #6c5ce7,
            #00bfe8
        );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.services-subtitle{
    max-width:650px;

    margin:18px auto 0;

    color:#70778d;

    font-size:14px;

    line-height:1.8;
}


/* ==================================================
   OWL SLIDER
================================================== */

.services-slider{
    position:relative;
    padding:10px 5px 35px;
}

.services-slider .owl-stage{
    display:flex;
}

.services-slider .owl-item{
    display:flex;
    height:auto;
}

.service-item{
    width:100%;
    display:flex;
    padding:12px;
}


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

.service-card{
    position:relative;

    width:100%;
    min-height:355px;

    padding:32px 28px;

    overflow:hidden;

    border-radius:24px;

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

    border:1px solid rgba(30,35,80,.07);

    box-shadow:
        0 18px 50px rgba(30,35,80,.07);

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

    z-index:1;
}

.service-card:hover{
    transform:translateY(-10px);

    border-color:
        rgba(108,92,231,.22);

    box-shadow:
        0 30px 70px rgba(30,35,80,.14);
}


/* TOP NUMBER */

.service-number{
    position:absolute;

    right:24px;
    top:20px;

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

    letter-spacing:1px;

    color:#c5c8d5;

    transition:.3s;
}

.service-card:hover .service-number{
    color:#6c5ce7;
}


/* ICON */

.service-icon{
    width:65px;
    height:65px;

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

    margin-bottom:28px;

    border-radius:18px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        );

    box-shadow:
        0 14px 30px rgba(108,92,231,.22);

    font-size:24px;

    transition:.4s;
}

.service-card:hover .service-icon{
    transform:
        translateY(-4px)
        rotate(-5deg);

    box-shadow:
        0 18px 35px rgba(108,92,231,.32);
}


/* CONTENT */

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

.service-content h3{
    margin:0 0 13px;

    font-size:20px;

    font-weight:800;

    color:#20253a;

    letter-spacing:-.4px;
}

.service-content p{
    min-height:72px;

    margin:0;

    color:#7a8195;

    font-size:12px;

    line-height:1.75;
}


/* LINK */

.service-link{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:23px;

    color:#6c5ce7;

    font-size:11px;

    font-weight:800;

    text-decoration:none;

    transition:.3s;
}

.service-link i{
    font-size:10px;

    transition:.3s;
}

.service-link:hover{
    color:#00aaca;
}

.service-link:hover i{
    transform:translateX(5px);
}


/* DECORATIVE SHAPE */

.service-shape{
    position:absolute;

    width:150px;
    height:150px;

    right:-70px;
    bottom:-75px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            rgba(108,92,231,.07),
            rgba(0,212,255,.08)
        );

    transition:.5s;

    z-index:0;
}

.service-card:hover .service-shape{
    transform:scale(1.5);
}


/* ==================================================
   OWL NAV
================================================== */

.services-slider .owl-nav{
    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:8px;
}

.services-slider .owl-nav button{
    width:43px !important;
    height:43px !important;

    margin:0 !important;

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

    border-radius:50% !important;

    background:#fff !important;

    border:1px solid #e5e6ed !important;

    color:#6c5ce7 !important;

    box-shadow:
        0 8px 25px rgba(30,35,80,.08);

    transition:.3s;
}

.services-slider .owl-nav button:hover{
    color:#fff !important;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        ) !important;

    border-color:transparent !important;

    transform:translateY(-2px);
}

.services-slider .owl-nav button span{
    font-size:25px;
    line-height:1;
}


/* DOTS */

.services-slider .owl-dots{
    margin-top:18px;
}

.services-slider .owl-dot span{
    width:7px !important;
    height:7px !important;

    margin:4px !important;

    background:#d8d9e4 !important;

    transition:.3s;
}

.services-slider .owl-dot.active span{
    width:25px !important;

    border-radius:10px !important;

    background:
        linear-gradient(
            90deg,
            #6c5ce7,
            #00d4ff
        ) !important;
}


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

.services-bottom{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:15px;

    margin-top:25px;

    font-size:12px;

    color:#7b8194;
}

.services-bottom a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#6c5ce7;

    font-weight:800;

    text-decoration:none;

    transition:.3s;
}

.services-bottom a i{
    transition:.3s;
}

.services-bottom a:hover{
    color:#00aaca;
}

.services-bottom a:hover i{
    transform:translateX(5px);
}


/* ==================================================
   DARK MODE
================================================== */

body.dark-mode .services-section{
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(108,92,231,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(0,212,255,.07),
            transparent 28%
        ),
        #080b18;

    color:#fff;
}

body.dark-mode .services-title{
    color:#fff;
}

body.dark-mode .services-subtitle{
    color:#858ca4;
}

body.dark-mode .service-card{
    background:
        linear-gradient(
            145deg,
            rgba(17,22,42,.96),
            rgba(13,18,36,.96)
        );

    border-color:#252b45;

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

body.dark-mode .service-card:hover{
    border-color:#3b4263;

    box-shadow:
        0 30px 70px rgba(0,0,0,.35);
}

body.dark-mode .service-content h3{
    color:#e8ebf5;
}

body.dark-mode .service-content p{
    color:#858ca4;
}

body.dark-mode .service-number{
    color:#3d4359;
}

body.dark-mode .service-card:hover .service-number{
    color:#8e7dff;
}

body.dark-mode .service-shape{
    background:
        linear-gradient(
            135deg,
            rgba(108,92,231,.10),
            rgba(0,212,255,.07)
        );
}

body.dark-mode .services-slider .owl-nav button{
    background:#11162a !important;
    border-color:#292f48 !important;
    color:#8e7dff !important;
}

body.dark-mode .services-slider .owl-nav button:hover{
    color:#fff !important;
}

body.dark-mode .services-slider .owl-dot span{
    background:#30364d !important;
}

body.dark-mode .services-bottom{
    color:#858ca4;
}


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

@media(max-width:991px){

    .services-section{
        padding:85px 0;
    }

    .services-heading{
        margin-bottom:40px;
    }

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

}


@media(max-width:575px){

    .services-section{
        padding:70px 0;
    }

    .services-title{
        font-size:34px;
        letter-spacing:-1.5px;
    }

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

    .service-item{
        padding:8px;
    }

    .service-card{
        min-height:340px;
        padding:27px 23px;
        border-radius:21px;
    }

    .service-icon{
        width:58px;
        height:58px;

        margin-bottom:23px;

        border-radius:16px;

        font-size:21px;
    }

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

    .service-content p{
        font-size:11px;
    }

    .services-bottom{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }

}
/* ==================================================
   SOLUTIONS SECTION
================================================== */

.solutions-section{
    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:#fff;

    color:#171b2d;
}


/* BACKGROUND */

.solution-bg{
    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    pointer-events:none;
}

.solution-bg-1{
    width:300px;
    height:300px;

    left:-170px;
    top:10%;

    background:rgba(108,92,231,.08);
}

.solution-bg-2{
    width:280px;
    height:280px;

    right:-150px;
    bottom:0;

    background:rgba(0,212,255,.07);
}


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

.solutions-content{
    position:relative;

    z-index:3;
}

.solution-label{
    margin-bottom:17px;
}

.solutions-title{
    max-width:600px;

    margin:0 0 20px;

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

    line-height:1.12;

    letter-spacing:-2px;

    font-weight:800;

    color:#11152a;
}

.solutions-title span{
    display:block;

    background:
        linear-gradient(
            90deg,
            #6c5ce7,
            #00bfe8
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}

.solutions-description{
    max-width:590px;

    margin-bottom:28px;

    color:#70778d;

    font-size:14px;

    line-height:1.8;
}


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

.solution-list{
    display:flex;

    flex-direction:column;

    gap:10px;

    max-width:600px;
}

.solution-item{
    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 17px;

    border-radius:15px;

    background:#fafaff;

    border:1px solid transparent;

    cursor:pointer;

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

.solution-item:hover,
.solution-item.active{
    transform:translateX(6px);

    background:#fff;

    border-color:
        rgba(108,92,231,.12);

    box-shadow:
        0 12px 35px rgba(30,35,80,.07);
}


/* ICON */

.solution-item-icon{
    flex-shrink:0;

    width:46px;
    height:46px;

    display:flex;

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

    border-radius:13px;

    color:#6c5ce7;

    background:
        rgba(108,92,231,.09);

    font-size:16px;

    transition:.3s;
}

.solution-item:hover .solution-item-icon,
.solution-item.active .solution-item-icon{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        );

    box-shadow:
        0 8px 20px rgba(108,92,231,.22);
}


/* TEXT */

.solution-item-content{
    flex:1;
}

.solution-item-content h3{
    margin:0 0 4px;

    color:#252a3d;

    font-size:13px;

    font-weight:800;
}

.solution-item-content p{
    margin:0;

    color:#858b9f;

    font-size:10px;

    line-height:1.5;
}


/* ARROW */

.solution-arrow{
    color:#b3b7c5;

    font-size:10px;

    transition:.3s;
}

.solution-item:hover .solution-arrow,
.solution-item.active .solution-arrow{
    color:#6c5ce7;

    transform:translateX(4px);
}


/* BUTTON */

.solutions-btn{
    display:inline-flex;

    align-items:center;

    gap:9px;

    margin-top:28px;

    padding:13px 20px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #8e7dff
        );

    border-radius:11px;

    text-decoration:none;

    font-size:11px;

    font-weight:800;

    box-shadow:
        0 12px 30px rgba(108,92,231,.22);

    transition:.3s;
}

.solutions-btn:hover{
    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(108,92,231,.30);
}

.solutions-btn i{
    transition:.3s;
}

.solutions-btn:hover i{
    transform:translateX(5px);
}


/* ==================================================
   SOLUTION VISUAL
================================================== */

.solution-visual{
    position:relative;

    min-height:540px;

    display:flex;

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

    overflow:hidden;

    border-radius:35px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(108,92,231,.13),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #f8f8ff,
            #ffffff
        );

    border:1px solid rgba(108,92,231,.08);

    box-shadow:
        0 30px 80px rgba(30,35,80,.09);
}


/* GRID */

.solution-grid{
    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(108,92,231,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(108,92,231,.045) 1px,
            transparent 1px
        );

    background-size:32px 32px;

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


/* GLOW */

.solution-glow{
    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    background:
        rgba(108,92,231,.13);

    filter:blur(80px);

    animation:
        solutionGlow 6s ease-in-out infinite;
}

@keyframes solutionGlow{

    0%,100%{
        transform:scale(1);
        opacity:.7;
    }

    50%{
        transform:scale(1.2);
        opacity:1;
    }

}


/* ==================================================
   DASHBOARD
================================================== */

.solution-dashboard{
    position:relative;

    width:410px;

    min-height:410px;

    padding:20px;

    border-radius:22px;

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

    border:1px solid
        rgba(108,92,231,.13);

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

    backdrop-filter:blur(15px);

    z-index:5;

    animation:
        dashboardFloat 6s ease-in-out infinite;
}

@keyframes dashboardFloat{

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

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

}


/* HEADER */

.dashboard-header{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:17px;

    border-bottom:
        1px solid #ececf3;
}

.dashboard-brand{
    display:flex;

    align-items:center;

    gap:9px;
}

.dashboard-logo{
    width:34px;
    height:34px;

    display:flex;

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

    border-radius:10px;

    color:#fff;

    font-size:10px;

    font-weight:900;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00d4ff
        );
}

.dashboard-brand strong{
    display:block;

    font-size:10px;

    color:#252a3e;

    letter-spacing:.8px;
}

.dashboard-brand small{
    display:block;

    margin-top:2px;

    font-size:7px;

    color:#8b91a5;
}

.dashboard-status{
    display:flex;

    align-items:center;

    gap:5px;

    font-size:7px;

    color:#18a873;
}

.dashboard-status span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#25c88c;

    box-shadow:
        0 0 10px rgba(37,200,140,.6);

    animation:
        statusPulse 2s infinite;
}

@keyframes statusPulse{

    0%,100%{
        opacity:.5;
    }

    50%{
        opacity:1;
    }

}


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

.dashboard-stats{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:15px;
}

.dashboard-stat{
    display:flex;

    align-items:center;

    gap:9px;

    padding:12px;

    border-radius:12px;

    background:#f8f8fc;

    border:1px solid #eeeeF4;
}

.dashboard-stat-icon{
    width:32px;
    height:32px;

    display:flex;

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

    border-radius:9px;

    font-size:11px;
}

.dashboard-stat-icon.purple{
    color:#6c5ce7;

    background:
        rgba(108,92,231,.10);
}

.dashboard-stat-icon.cyan{
    color:#00aaca;

    background:
        rgba(0,212,255,.10);
}

.dashboard-stat small{
    display:block;

    color:#8b91a4;

    font-size:7px;
}

.dashboard-stat strong{
    display:block;

    margin-top:2px;

    color:#252a3e;

    font-size:14px;
}


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

.dashboard-chart{
    margin-top:14px;

    padding:15px;

    border-radius:13px;

    background:#fafaff;

    border:1px solid #eeeeF4;
}

.chart-title{
    display:flex;

    justify-content:space-between;

    color:#858b9f;

    font-size:7px;
}

.chart-title strong{
    color:#6c5ce7;
}


/* CHART AREA */

.chart-area{
    position:relative;

    height:125px;

    margin-top:12px;

    overflow:hidden;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 30px,
            rgba(108,92,231,.055) 31px
        );
}


/* GRAPH */

.chart-line{
    position:absolute;

    left:0;
    right:0;

    top:62px;

    height:65px;

    background:
        linear-gradient(
            145deg,
            transparent 0%,
            transparent 8%,
            rgba(108,92,231,.18) 9%,
            rgba(108,92,231,.35) 10%,
            rgba(108,92,231,.18) 28%,
            rgba(0,212,255,.32) 45%,
            rgba(108,92,231,.35) 65%,
            rgba(0,212,255,.30) 80%,
            transparent 81%
        );

    clip-path:
        polygon(
            0 70%,
            15% 62%,
            28% 72%,
            40% 42%,
            53% 55%,
            65% 30%,
            78% 42%,
            90% 10%,
            100% 25%,
            100% 100%,
            0 100%
        );

    opacity:.5;
}


/* DOTS */

.chart-dot{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#6c5ce7;

    border:2px solid #fff;

    box-shadow:
        0 0 0 3px rgba(108,92,231,.10);

    animation:
        chartPulse 2.5s ease-in-out infinite;
}

.dot-1{
    left:15%;
    top:60%;
}

.dot-2{
    left:40%;
    top:40%;
    animation-delay:.4s;
}

.dot-3{
    left:65%;
    top:28%;
    animation-delay:.8s;
}

.dot-4{
    left:78%;
    top:40%;
    animation-delay:1.2s;
}

.dot-5{
    right:2%;
    top:10%;
    animation-delay:1.6s;
}

@keyframes chartPulse{

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

    50%{
        transform:scale(1.5);
    }

}


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

.dashboard-services{
    display:grid;

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

    gap:8px;

    margin-top:12px;
}

.dashboard-services div{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    padding:10px 4px;

    border-radius:10px;

    background:#f8f8fc;

    color:#858b9f;

    font-size:6px;

    transition:.3s;
}

.dashboard-services div:hover{
    color:#6c5ce7;

    transform:translateY(-3px);
}

.dashboard-services i{
    font-size:11px;

    color:#6c5ce7;
}


/* ==================================================
   FLOATING CARDS
================================================== */

.solution-float{
    position:absolute;

    display:flex;

    align-items:center;

    gap:9px;

    padding:11px 14px;

    border-radius:14px;

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

    border:1px solid
        rgba(30,35,80,.07);

    box-shadow:
        0 20px 45px rgba(30,35,80,.14);

    z-index:10;

    animation:
        floatSolution 5s ease-in-out infinite;
}

.float-one{
    left:22px;
    top:80px;
}

.float-two{
    right:20px;
    bottom:75px;

    animation-delay:1.5s;
}

.float-check{
    width:32px;
    height:32px;

    display:flex;

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

    border-radius:9px;

    color:#fff;

    background:#18b77a;

    font-size:11px;
}

.float-two > i{
    width:32px;
    height:32px;

    display:flex;

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

    border-radius:9px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #6c5ce7,
            #00bfe8
        );

    font-size:11px;
}

.solution-float strong{
    display:block;

    color:#252a3e;

    font-size:9px;
}

.solution-float small{
    display:block;

    margin-top:2px;

    color:#8b91a5;

    font-size:7px;
}

@keyframes floatSolution{

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

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

}


/* ORBS */

.solution-orb{
    position:absolute;

    border-radius:50%;

    animation:
        orbFloat 5s ease-in-out infinite;
}

.orb-one{
    width:7px;
    height:7px;

    left:70px;
    bottom:120px;

    background:#6c5ce7;

    box-shadow:
        0 0 15px rgba(108,92,231,.6);
}

.orb-two{
    width:6px;
    height:6px;

    right:70px;
    top:70px;

    background:#00d4ff;

    box-shadow:
        0 0 15px rgba(0,212,255,.6);

    animation-delay:1.5s;
}

@keyframes orbFloat{

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

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

}


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

.solution-trust{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:45px;

    margin-top:75px;

    padding:22px 25px;

    border-radius:17px;

    background:#f8f8fc;

    border:1px solid rgba(30,35,80,.06);
}

.solution-trust div{
    display:flex;

    align-items:center;

    gap:8px;

    color:#70778d;

    font-size:10px;

    font-weight:700;
}

.solution-trust i{
    color:#6c5ce7;

    font-size:13px;
}


/* ==================================================
   DARK MODE
================================================== */

body.dark-mode .solutions-section{
    background:#080b18;

    color:#fff;
}

body.dark-mode .solutions-title{
    color:#fff;
}

body.dark-mode .solutions-description{
    color:#858ca4;
}

body.dark-mode .solution-item{
    background:#0e1325;

    border-color:transparent;
}

body.dark-mode .solution-item:hover,
body.dark-mode .solution-item.active{
    background:#11162a;

    border-color:#292f48;

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

body.dark-mode .solution-item-content h3{
    color:#e5e8f3;
}

body.dark-mode .solution-item-content p{
    color:#858ca4;
}

body.dark-mode .solution-item-icon{
    background:rgba(108,92,231,.12);
}

body.dark-mode .solution-visual{
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(108,92,231,.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #0d1225,
            #080b18
        );

    border-color:#252b45;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);
}

body.dark-mode .solution-dashboard{
    background:
        rgba(17,22,42,.95);

    border-color:#2b3150;
}

body.dark-mode .dashboard-header{
    border-color:#292f48;
}

body.dark-mode .dashboard-brand strong{
    color:#e5e8f3;
}

body.dark-mode .dashboard-stat,
body.dark-mode .dashboard-chart,
body.dark-mode .dashboard-services div{
    background:#0d1225;

    border-color:#252b45;
}

body.dark-mode .dashboard-stat strong{
    color:#e5e8f3;
}

body.dark-mode .dashboard-stat small,
body.dark-mode .chart-title,
body.dark-mode .dashboard-services div{
    color:#858ca4;
}

body.dark-mode .solution-float{
    background:#11162a;

    border-color:#292f48;
}

body.dark-mode .solution-float strong{
    color:#e5e8f3;
}

body.dark-mode .solution-float small{
    color:#858ca4;
}

body.dark-mode .solution-trust{
    background:#11162a;

    border-color:#292f48;
}

body.dark-mode .solution-trust div{
    color:#858ca4;
}


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

@media(max-width:991px){

    .solutions-section{
        padding:85px 0;
    }

    .solution-visual{
        min-height:500px;

        margin-top:10px;
    }

    .solution-trust{
        gap:25px;

        flex-wrap:wrap;
    }

}


@media(max-width:575px){

    .solutions-section{
        padding:70px 0;
    }

    .solutions-title{
        font-size:34px;

        letter-spacing:-1.5px;
    }

    .solutions-description{
        font-size:13px;
    }

    .solution-item{
        padding:12px;
    }

    .solution-item-content p{
        font-size:9px;
    }

    .solution-visual{
        min-height:410px;

        border-radius:25px;
    }

    .solution-dashboard{
        width:290px;

        min-height:320px;

        padding:14px;

        border-radius:17px;
    }

    .dashboard-chart{
        padding:10px;
    }

    .chart-area{
        height:85px;
    }

    .float-one{
        left:5px;
        top:55px;

        transform:scale(.8);
        transform-origin:left;
    }

    .float-two{
        right:5px;
        bottom:55px;

        transform:scale(.8);
        transform-origin:right;
    }

    .solution-trust{
        margin-top:50px;

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:17px;

        padding:18px;
    }

    .solution-trust div{
        font-size:8px;
    }

}
/* =========================
   PORTFOLIO SECTION
========================= */

.portfolio-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(108,92,231,.10), transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(0,212,255,.08), transparent 30%),
        #f8f9ff;
}

.portfolio-bg{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    pointer-events:none;
    opacity:.35;
}

.portfolio-bg-1{
    width:300px;
    height:300px;
    background:#8e7dff;
    top:50px;
    left:-180px;
}

.portfolio-bg-2{
    width:280px;
    height:280px;
    background:#00d4ff;
    bottom:20px;
    right:-150px;
}


/* HEADING */

.portfolio-heading{
    max-width:760px;
    margin:0 auto 45px;
}

.portfolio-label{
    justify-content:center;
}

.section-label{
    display:flex;
    align-items:center;
    gap:10px;
    color:#6c5ce7;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:18px;
}

.section-label span{
    width:32px;
    height:2px;
    background:linear-gradient(
        90deg,
        #6c5ce7,
        #00d4ff
    );
}

.portfolio-title{
    margin:0;
    font-size:clamp(36px,5vw,58px);
    line-height:1.08;
    font-weight:900;
    color:#171b2d;
}

.portfolio-title span{
    display:block;
    background:linear-gradient(
        90deg,
        #6c5ce7,
        #8e7dff,
        #00bfe9
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.portfolio-description{
    max-width:650px;
    margin:20px auto 0;
    color:#70778d;
    font-size:16px;
    line-height:1.8;
}


/* FILTER */

.portfolio-filter{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:42px;
}

.portfolio-filter-btn{
    border:1px solid rgba(108,92,231,.15);
    background:#fff;
    color:#555d74;
    padding:11px 22px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.3s ease;
}

.portfolio-filter-btn:hover,
.portfolio-filter-btn.active{
    color:#fff;
    border-color:#6c5ce7;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #8e7dff
    );
    box-shadow:0 10px 25px rgba(108,92,231,.25);
    transform:translateY(-2px);
}


/* PORTFOLIO CARD */

.portfolio-card{
    height:100%;
    background:#fff;
    border:1px solid rgba(108,92,231,.10);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(25,30,60,.07);
    transition:.4s ease;
}

.portfolio-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 25px 65px rgba(25,30,60,.13),
        0 0 0 1px rgba(108,92,231,.10);
}


/* PREVIEW */

.portfolio-preview{
    position:relative;
    height:285px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.preview-purple{
    background:
        linear-gradient(
            135deg,
            #241c59,
            #5e4ed0
        );
}

.preview-cyan{
    background:
        linear-gradient(
            135deg,
            #092c3a,
            #087f9b
        );
}

.preview-orange{
    background:
        linear-gradient(
            135deg,
            #40200c,
            #b96820
        );
}

.preview-pink{
    background:
        linear-gradient(
            135deg,
            #35102d,
            #a52f76
        );
}

.preview-green{
    background:
        linear-gradient(
            135deg,
            #082e2a,
            #087e70
        );
}

.preview-dark{
    background:
        linear-gradient(
            135deg,
            #080b18,
            #202a4c
        );
}

.preview-glow{
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    filter:blur(50px);
    animation:portfolioGlow 5s ease-in-out infinite;
}

@keyframes portfolioGlow{
    0%,100%{
        transform:scale(.9);
        opacity:.5;
    }

    50%{
        transform:scale(1.2);
        opacity:1;
    }
}

.portfolio-project-number{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.20);
    color:#fff;
    font-size:12px;
    font-weight:800;
    backdrop-filter:blur(10px);
}


/* BROWSER */

.browser-window{
    width:78%;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 25px 50px rgba(0,0,0,.25);
    transform:perspective(1000px) rotateX(5deg);
    transition:.5s ease;
}

.portfolio-card:hover .browser-window{
    transform:
        perspective(1000px)
        rotateX(0deg)
        translateY(-8px)
        scale(1.03);
}

.browser-top{
    height:28px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 10px;
    background:#f0f1f6;
}

.browser-dots{
    display:flex;
    gap:4px;
}

.browser-dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#b8bdca;
}

.browser-address{
    flex:1;
    height:15px;
    border-radius:20px;
    background:#fff;
    color:#8b91a2;
    font-size:7px;
    display:flex;
    align-items:center;
    padding-left:8px;
}

.website-preview{
    min-height:180px;
    padding:15px;
    background:#fff;
}

.preview-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.preview-nav strong{
    color:#6c5ce7;
    font-size:12px;
}

.preview-nav-lines{
    display:flex;
    gap:5px;
}

.preview-nav-lines span{
    width:22px;
    height:3px;
    background:#d8dbe5;
    border-radius:10px;
}

.preview-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:28px;
}

.preview-text small{
    display:block;
    color:#8d94a8;
    font-size:7px;
    letter-spacing:1px;
}

.preview-text strong{
    display:block;
    color:#20243a;
    font-size:19px;
    line-height:1.1;
    margin-top:5px;
}

.preview-button{
    width:55px;
    height:12px;
    border-radius:10px;
    margin-top:12px;
    background:#6c5ce7;
}

.preview-circle{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #00d4ff
    );
    color:#fff;
    font-size:24px;
}

.preview-bottom{
    display:flex;
    gap:7px;
    margin-top:18px;
}

.preview-bottom span{
    height:5px;
    border-radius:5px;
    background:#e7e9f0;
    flex:1;
}


/* SOFTWARE */

.software-preview{
    width:82%;
    height:205px;
    display:flex;
    border-radius:12px;
    overflow:hidden;
    background:#f7fbfc;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
    transform:rotate(-2deg);
    transition:.5s ease;
}

.portfolio-card:hover .software-preview{
    transform:rotate(0) translateY(-7px);
}

.software-sidebar{
    width:52px;
    padding:12px 8px;
    background:#122a36;
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:16px;
}

.software-logo{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#00d4ff;
    color:#fff;
    font-size:10px;
    font-weight:900;
    margin-bottom:8px;
}

.software-sidebar span{
    width:16px;
    height:4px;
    border-radius:5px;
    background:rgba(255,255,255,.25);
}

.software-main{
    flex:1;
    padding:15px;
}

.software-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.software-header small{
    display:block;
    color:#8996a2;
    font-size:7px;
}

.software-header strong{
    display:block;
    color:#26313a;
    font-size:11px;
}

.software-user{
    width:25px;
    height:25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#d8f5fa;
    color:#08a6c3;
    font-size:10px;
}

.software-stats{
    display:flex;
    gap:8px;
    margin-top:15px;
}

.software-stats div{
    flex:1;
    padding:9px;
    border-radius:7px;
    background:#fff;
}

.software-stats small{
    display:block;
    color:#98a0aa;
    font-size:6px;
}

.software-stats strong{
    display:block;
    color:#168da4;
    font-size:13px;
    margin-top:3px;
}

.software-chart{
    height:70px;
    margin-top:12px;
    border-radius:7px;
    background:#fff;
    padding:12px;
}

.chart-bars{
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:space-around;
    gap:7px;
}

.chart-bars span{
    width:11%;
    border-radius:4px 4px 0 0;
    background:linear-gradient(
        to top,
        #00d4ff,
        #75eaff
    );
}


/* MARKETING */

.marketing-preview{
    width:80%;
    min-height:200px;
    padding:22px;
    border-radius:16px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(12px);
    color:#fff;
    box-shadow:0 25px 50px rgba(0,0,0,.20);
}

.marketing-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.marketing-header small{
    display:block;
    font-size:7px;
    opacity:.65;
}

.marketing-header strong{
    display:block;
    font-size:13px;
    margin-top:4px;
}

.marketing-header i{
    font-size:22px;
}

.growth-number{
    font-size:34px;
    font-weight:900;
    margin-top:16px;
}

.growth-label{
    font-size:8px;
    opacity:.65;
}

.growth-line{
    margin-top:8px;
    height:70px;
    color:#fff;
}

.growth-line svg{
    width:100%;
    height:100%;
    overflow:visible;
}


/* CREATIVE */

.creative-preview{
    width:210px;
    height:210px;
    position:relative;
}

.creative-shape{
    position:absolute;
    border-radius:35%;
    transform:rotate(25deg);
}

.shape-one{
    width:130px;
    height:130px;
    top:25px;
    left:30px;
    background:rgba(255,255,255,.16);
    animation:creativeFloat 4s ease-in-out infinite;
}

.shape-two{
    width:90px;
    height:90px;
    top:70px;
    right:15px;
    background:rgba(255,255,255,.12);
    animation:creativeFloat 5s ease-in-out infinite reverse;
}

.shape-three{
    width:70px;
    height:70px;
    bottom:10px;
    left:10px;
    background:rgba(255,255,255,.20);
}

.creative-center{
    position:absolute;
    width:70px;
    height:70px;
    border-radius:50%;
    left:70px;
    top:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#a52f76;
    font-size:25px;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    z-index:2;
}

.creative-text{
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    text-align:center;
    color:#fff;
    font-size:9px;
    letter-spacing:3px;
}

.creative-text strong{
    display:block;
    font-size:18px;
    letter-spacing:4px;
}

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

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


/* MOBILE PREVIEW */

.mobile-preview{
    height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mobile-phone{
    width:135px;
    height:235px;
    padding:7px;
    border-radius:25px;
    background:#111;
    box-shadow:0 25px 50px rgba(0,0,0,.35);
    transform:rotate(-5deg);
    transition:.5s ease;
}

.portfolio-card:hover .mobile-phone{
    transform:rotate(0) translateY(-7px);
}

.mobile-speaker{
    width:35px;
    height:4px;
    border-radius:10px;
    background:#333;
    margin:2px auto 6px;
}

.mobile-screen{
    height:215px;
    border-radius:18px;
    padding:12px;
    overflow:hidden;
    background:#f4fffd;
}

.mobile-header{
    display:flex;
    justify-content:space-between;
    color:#087e70;
    font-size:10px;
}

.mobile-banner{
    margin-top:15px;
    padding:14px 10px;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(
        135deg,
        #087e70,
        #00bba6
    );
}

.mobile-banner small{
    display:block;
    font-size:6px;
    opacity:.7;
}

.mobile-banner strong{
    display:block;
    margin-top:5px;
    font-size:13px;
    line-height:1.2;
}

.mobile-cards{
    display:flex;
    gap:6px;
    margin-top:10px;
}

.mobile-cards div{
    flex:1;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#fff;
    color:#08a58f;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    font-size:12px;
}


/* SECURITY */

.security-preview{
    text-align:center;
}

.security-radar{
    position:relative;
    width:180px;
    height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.radar-ring{
    position:absolute;
    border:1px solid rgba(0,212,255,.30);
    border-radius:50%;
}

.ring-a{
    width:180px;
    height:180px;
}

.ring-b{
    width:130px;
    height:130px;
}

.ring-c{
    width:80px;
    height:80px;
}

.radar-scan{
    position:absolute;
    width:90px;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        #00d4ff
    );
    transform-origin:left center;
    animation:radarScan 3s linear infinite;
}

.radar-center{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,212,255,.12);
    border:1px solid rgba(0,212,255,.45);
    color:#00d4ff;
    font-size:22px;
    box-shadow:0 0 30px rgba(0,212,255,.25);
}

@keyframes radarScan{
    from{
        transform:rotate(0deg);
    }

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

.security-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:#fff;
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.security-status span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#36e2a2;
    box-shadow:0 0 12px #36e2a2;
    animation:statusPulse 1.5s infinite;
}

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

    50%{
        opacity:.4;
        transform:scale(.7);
    }
}


/* INFO */

.portfolio-info{
    min-height:155px;
    padding:24px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
}

.portfolio-category{
    display:inline-block;
    color:#6c5ce7;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:7px;
}

.portfolio-info h3{
    margin:0;
    color:#171b2d;
    font-size:20px;
    font-weight:800;
}

.portfolio-info p{
    margin:9px 0 0;
    color:#70778d;
    font-size:13px;
    line-height:1.65;
}

.portfolio-arrow{
    flex:0 0 auto;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#6c5ce7;
    border:1px solid rgba(108,92,231,.15);
    text-decoration:none;
    transition:.3s ease;
}

.portfolio-arrow:hover{
    color:#fff;
    background:#6c5ce7;
    transform:rotate(45deg);
}


/* HIDE ANIMATION */

.portfolio-item.hide{
    display:none;
}


/* BOTTOM CTA */

.portfolio-bottom{
    margin-top:55px;
    padding:28px 32px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    background:
        linear-gradient(
            110deg,
            #11162a,
            #211b51
        );
    border:1px solid rgba(142,125,255,.18);
    box-shadow:0 20px 50px rgba(10,15,35,.15);
    position:relative;
    overflow:hidden;
}

.portfolio-bottom::after{
    content:"";
    position:absolute;
    width:200px;
    height:200px;
    border-radius:50%;
    background:#6c5ce7;
    opacity:.15;
    filter:blur(60px);
    right:10%;
    top:-100px;
}

.portfolio-bottom span{
    color:#8e7dff;
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.portfolio-bottom h3{
    margin:7px 0 0;
    color:#fff;
    font-size:25px;
    font-weight:800;
}

.portfolio-cta{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:14px 23px;
    border-radius:50px;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #8e7dff
    );
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
    transition:.3s ease;
}

.portfolio-cta:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(108,92,231,.35);
}

.portfolio-cta i{
    transition:.3s ease;
}

.portfolio-cta:hover i{
    transform:translateX(4px);
}


/* DARK MODE */

body.dark-mode .portfolio-section{
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(108,92,231,.12),
            transparent 30%
        ),
        #080b18;
}

body.dark-mode .portfolio-title{
    color:#fff;
}

body.dark-mode .portfolio-description{
    color:#9aa2b8;
}

body.dark-mode .portfolio-filter-btn{
    background:#11162a;
    color:#aeb5c9;
    border-color:rgba(255,255,255,.08);
}

body.dark-mode .portfolio-card{
    background:#11162a;
    border-color:rgba(255,255,255,.07);
}

body.dark-mode .portfolio-info h3{
    color:#fff;
}

body.dark-mode .portfolio-info p{
    color:#929ab0;
}

body.dark-mode .portfolio-arrow{
    border-color:rgba(255,255,255,.10);
    color:#8e7dff;
}


/* RESPONSIVE */

@media(max-width:991px){

    .portfolio-section{
        padding:85px 0;
    }

    .portfolio-preview{
        height:270px;
    }

    .portfolio-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media(max-width:575px){

    .portfolio-section{
        padding:70px 0;
    }

    .portfolio-heading{
        margin-bottom:30px;
    }

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

    .portfolio-filter{
        gap:7px;
    }

    .portfolio-filter-btn{
        padding:9px 15px;
        font-size:12px;
    }

    .portfolio-preview{
        height:255px;
    }

    .portfolio-info{
        padding:20px;
    }

    .portfolio-info h3{
        font-size:18px;
    }

    .portfolio-bottom{
        padding:25px 20px;
    }

    .portfolio-bottom h3{
        font-size:21px;
    }

    .portfolio-cta{
        width:100%;
        justify-content:center;
    }

}


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

.why-bg{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
}

.why-bg-1{
    width:330px;
    height:330px;
    top:-100px;
    left:-160px;
    background:rgba(108,92,231,.12);
}

.why-bg-2{
    width:300px;
    height:300px;
    bottom:-100px;
    right:-150px;
    background:rgba(0,212,255,.10);
}


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

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

.why-label{
    margin-bottom:18px;
}

.why-title{
    margin:0;
    font-size:clamp(36px,5vw,56px);
    line-height:1.08;
    font-weight:900;
    color:#171b2d;
}

.why-title span{
    display:block;
    background:linear-gradient(
        90deg,
        #6c5ce7,
        #8e7dff,
        #00c7ee
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.why-description{
    max-width:600px;
    margin:22px 0 30px;
    color:#70778d;
    font-size:15px;
    line-height:1.85;
}


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

.why-features{
    display:grid;
    gap:12px;
}

.why-feature{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:17px 20px;
    border:1px solid rgba(108,92,231,.10);
    border-radius:16px;
    background:rgba(255,255,255,.85);
    transition:.35s ease;
    overflow:hidden;
}

.why-feature::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:3px;
    height:100%;
    background:linear-gradient(
        to bottom,
        #6c5ce7,
        #00d4ff
    );
    transform:scaleY(0);
    transform-origin:bottom;
    transition:.35s ease;
}

.why-feature:hover{
    transform:translateX(7px);
    border-color:rgba(108,92,231,.22);
    box-shadow:0 12px 35px rgba(50,45,100,.08);
}

.why-feature:hover::before{
    transform:scaleY(1);
}

.why-feature-icon{
    flex:0 0 48px;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    color:#6c5ce7;
    background:rgba(108,92,231,.09);
    font-size:19px;
    transition:.35s ease;
}

.why-feature:hover .why-feature-icon{
    color:#fff;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #8e7dff
    );
    transform:rotate(-5deg) scale(1.08);
}

.why-feature-content{
    flex:1;
}

.why-feature-content h3{
    margin:0 0 4px;
    color:#171b2d;
    font-size:16px;
    font-weight:800;
}

.why-feature-content p{
    margin:0;
    color:#777e91;
    font-size:12px;
    line-height:1.55;
}

.why-feature-number{
    color:#dfe1eb;
    font-size:19px;
    font-weight:900;
}


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

.why-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:28px;
    padding:14px 24px;
    border-radius:50px;
    color:#fff;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #8e7dff
    );
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    box-shadow:0 12px 30px rgba(108,92,231,.22);
    transition:.35s ease;
}

.why-btn:hover{
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(108,92,231,.32);
}

.why-btn i{
    transition:.3s ease;
}

.why-btn:hover i{
    transform:translateX(5px);
}


/* =========================
   VISUAL
========================= */

.why-visual{
    position:relative;
    min-height:590px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.why-grid{
    position:absolute;
    width:100%;
    height:100%;
    opacity:.45;
    background-image:
        linear-gradient(
            rgba(108,92,231,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(108,92,231,.08) 1px,
            transparent 1px
        );
    background-size:38px 38px;
    mask-image:radial-gradient(
        circle,
        #000 20%,
        transparent 72%
    );
}

.why-main-glow{
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        rgba(108,92,231,.28),
        rgba(0,212,255,.18)
    );
    filter:blur(65px);
    animation:whyGlow 5s ease-in-out infinite;
}

@keyframes whyGlow{

    0%,100%{
        transform:scale(.85);
        opacity:.65;
    }

    50%{
        transform:scale(1.15);
        opacity:1;
    }

}


/* =========================
   CORE
========================= */

.why-core{
    position:relative;
    width:245px;
    height:245px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(
            circle,
            rgba(108,92,231,.22),
            rgba(8,11,24,.96) 68%
        );
    border:1px solid rgba(142,125,255,.45);
    box-shadow:
        0 0 70px rgba(108,92,231,.25),
        inset 0 0 50px rgba(0,212,255,.08);
    z-index:4;
    animation:coreFloat 5s ease-in-out infinite;
}

@keyframes coreFloat{

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

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

}

.why-core-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(142,125,255,.22);
}

.ring-one{
    width:215px;
    height:215px;
    border-top-color:#8e7dff;
    animation:ringRotate 9s linear infinite;
}

.ring-two{
    width:280px;
    height:280px;
    border-right-color:#00d4ff;
    animation:ringRotate 13s linear infinite reverse;
}

@keyframes ringRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.why-core-inner{
    text-align:center;
    color:#fff;
    z-index:3;
}

.why-core-logo{
    width:58px;
    height:58px;
    margin:0 auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #00d4ff
    );
    font-size:21px;
    font-weight:900;
    box-shadow:0 12px 30px rgba(108,92,231,.35);
}

.why-core-inner strong{
    display:block;
    font-size:22px;
    letter-spacing:3px;
}

.why-core-inner small{
    display:block;
    margin-top:5px;
    color:#9da5ba;
    font-size:8px;
    letter-spacing:3px;
}


/* =========================
   ORBITS
========================= */

.why-orbit{
    position:absolute;
    border-radius:50%;
    border:1px dashed rgba(108,92,231,.17);
}

.orbit-one{
    width:360px;
    height:360px;
    animation:orbitSpin 18s linear infinite;
}

.orbit-two{
    width:470px;
    height:470px;
    border-color:rgba(0,212,255,.12);
    animation:orbitSpin 25s linear infinite reverse;
}

.orbit-three{
    width:550px;
    height:550px;
    border-color:rgba(108,92,231,.08);
    animation:orbitSpin 35s linear infinite;
}

@keyframes orbitSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


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

.why-tech-icon{
    position:absolute;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    color:#fff;
    background:rgba(17,22,42,.90);
    border:1px solid rgba(142,125,255,.25);
    box-shadow:0 12px 30px rgba(10,12,30,.15);
    backdrop-filter:blur(10px);
    z-index:5;
}

.tech-one{
    top:70px;
    left:21%;
    color:#8e7dff;
    animation:techFloat 4s ease-in-out infinite;
}

.tech-two{
    top:38%;
    right:5%;
    color:#00d4ff;
    animation:techFloat 5s ease-in-out infinite .5s;
}

.tech-three{
    bottom:16%;
    left:13%;
    color:#ff73c8;
    animation:techFloat 4.5s ease-in-out infinite 1s;
}

.tech-four{
    bottom:7%;
    right:22%;
    color:#46e3a7;
    animation:techFloat 5s ease-in-out infinite 1.5s;
}

@keyframes techFloat{

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

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

}


/* =========================
   FLOATING CARDS
========================= */

.why-floating-card{
    position:absolute;
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 15px;
    border-radius:14px;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(108,92,231,.12);
    box-shadow:0 18px 40px rgba(25,30,60,.10);
    backdrop-filter:blur(12px);
    z-index:6;
}

.why-card-icon{
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #8e7dff
    );
}

.why-card-icon.cyan{
    background:linear-gradient(
        135deg,
        #00bddd,
        #00d4ff
    );
}

.why-floating-card strong{
    display:block;
    color:#171b2d;
    font-size:16px;
    font-weight:900;
}

.why-floating-card span{
    display:block;
    margin-top:1px;
    color:#777e91;
    font-size:9px;
}

.why-card-one{
    top:17%;
    right:0;
    animation:cardFloat 5s ease-in-out infinite;
}

.why-card-two{
    left:0;
    top:43%;
    animation:cardFloat 6s ease-in-out infinite 1s;
}

.why-card-three{
    right:5%;
    bottom:12%;
    animation:cardFloat 5.5s ease-in-out infinite 1.5s;
}

.why-card-three > i{
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#fff1c7;
    color:#e5a600;
}

@keyframes cardFloat{

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

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

}


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

.why-experience{
    position:absolute;
    left:8%;
    bottom:2%;
    width:115px;
    height:115px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #4f42bd
    );
    border:5px solid rgba(255,255,255,.7);
    box-shadow:
        0 18px 40px rgba(108,92,231,.30);
    z-index:7;
    animation:badgeFloat 4s ease-in-out infinite;
}

.why-experience strong{
    font-size:30px;
    line-height:1;
    font-weight:900;
}

.why-experience span{
    margin-top:5px;
    text-align:center;
    font-size:8px;
    line-height:1.3;
    letter-spacing:1px;
    text-transform:uppercase;
}

@keyframes badgeFloat{

    0%,100%{
        transform:translateY(0) rotate(-4deg);
    }

    50%{
        transform:translateY(-8px) rotate(4deg);
    }

}


/* =========================
   PARTICLES
========================= */

.why-particle{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#8e7dff;
    box-shadow:0 0 15px rgba(142,125,255,.7);
    animation:particleMove 4s ease-in-out infinite;
}

.particle-1{
    top:12%;
    right:27%;
}

.particle-2{
    top:52%;
    left:8%;
    animation-delay:1s;
}

.particle-3{
    bottom:15%;
    right:30%;
    animation-delay:2s;
}

.particle-4{
    top:25%;
    left:10%;
    animation-delay:1.5s;
}

.particle-5{
    bottom:30%;
    right:8%;
    animation-delay:2.5s;
}

@keyframes particleMove{

    0%,100%{
        transform:translateY(0) scale(1);
        opacity:.5;
    }

    50%{
        transform:translateY(-15px) scale(1.4);
        opacity:1;
    }

}


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

.why-trust{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    margin-top:75px;
    padding:20px;
    border-radius:20px;
    background:#11162a;
    box-shadow:0 20px 50px rgba(10,15,35,.12);
    overflow:hidden;
}

.why-trust::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(108,92,231,.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 50%,
            rgba(0,212,255,.12),
            transparent 25%
        );
    pointer-events:none;
}

.why-trust-item{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px;
    border-right:1px solid rgba(255,255,255,.07);
}

.why-trust-item:last-child{
    border-right:0;
}

.why-trust-item > i{
    color:#8e7dff;
    font-size:21px;
}

.why-trust-item strong{
    display:block;
    color:#fff;
    font-size:13px;
    font-weight:800;
}

.why-trust-item span{
    display:block;
    margin-top:2px;
    color:#7f879e;
    font-size:9px;
}


/* =========================
   DARK MODE
========================= */

body.dark-mode .why-section{
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(108,92,231,.08),
            transparent 30%
        ),
        #080b18;
}

body.dark-mode .why-title{
    color:#fff;
}

body.dark-mode .why-description{
    color:#969eb4;
}

body.dark-mode .why-feature{
    background:#11162a;
    border-color:rgba(255,255,255,.07);
}

body.dark-mode .why-feature-content h3{
    color:#fff;
}

body.dark-mode .why-feature-content p{
    color:#8d95aa;
}

body.dark-mode .why-feature-number{
    color:#2c3144;
}

body.dark-mode .why-floating-card{
    background:rgba(17,22,42,.92);
    border-color:rgba(255,255,255,.08);
}

body.dark-mode .why-floating-card strong{
    color:#fff;
}

body.dark-mode .why-floating-card span{
    color:#8991a8;
}

body.dark-mode .why-experience{
    border-color:#11162a;
}


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

@media(max-width:1199px){

    .why-visual{
        min-height:540px;
    }

    .why-core{
        width:220px;
        height:220px;
    }

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

    .orbit-two{
        width:420px;
        height:420px;
    }

    .orbit-three{
        width:500px;
        height:500px;
    }

    .why-card-one{
        right:-5px;
    }

    .why-card-two{
        left:-5px;
    }

}


@media(max-width:991px){

    .why-section{
        padding:85px 0;
    }

    .why-content{
        text-align:center;
    }

    .why-label{
        justify-content:center;
    }

    .why-description{
        margin-left:auto;
        margin-right:auto;
    }

    .why-feature{
        text-align:left;
    }

    .why-btn{
        margin-bottom:15px;
    }

    .why-visual{
        margin-top:25px;
        min-height:560px;
    }

    .why-trust{
        grid-template-columns:repeat(3,1fr);
    }

    .why-trust-item:nth-child(3){
        border-right:0;
    }

}


@media(max-width:575px){

    .why-section{
        padding:70px 0;
    }

    .why-title{
        font-size:36px;
    }

    .why-feature{
        padding:14px;
        gap:11px;
    }

    .why-feature-icon{
        flex:0 0 42px;
        width:42px;
        height:42px;
        font-size:16px;
    }

    .why-feature-content h3{
        font-size:14px;
    }

    .why-feature-content p{
        font-size:11px;
    }

    .why-feature-number{
        display:none;
    }

    .why-visual{
        min-height:470px;
        transform:scale(.85);
        margin-top:-20px;
        margin-left:-30px;
        margin-right:-30px;
    }

    .why-core{
        width:185px;
        height:185px;
    }

    .why-core-logo{
        width:48px;
        height:48px;
        font-size:17px;
    }

    .why-core-inner strong{
        font-size:17px;
    }

    .why-core-inner small{
        font-size:6px;
    }

    .ring-one{
        width:165px;
        height:165px;
    }

    .ring-two{
        width:215px;
        height:215px;
    }

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

    .orbit-two{
        width:350px;
        height:350px;
    }

    .orbit-three{
        width:410px;
        height:410px;
    }

    .why-floating-card{
        padding:9px 11px;
    }

    .why-card-icon{
        width:31px;
        height:31px;
    }

    .why-floating-card strong{
        font-size:13px;
    }

    .why-floating-card span{
        font-size:7px;
    }

    .why-card-one{
        top:11%;
        right:2%;
    }

    .why-card-two{
        top:43%;
        left:2%;
    }

    .why-card-three{
        right:3%;
        bottom:10%;
    }

    .why-experience{
        width:90px;
        height:90px;
        left:5%;
    }

    .why-experience strong{
        font-size:24px;
    }

    .why-experience span{
        font-size:6px;
    }

    .why-tech-icon{
        width:38px;
        height:38px;
        font-size:14px;
    }

    .why-trust{
        grid-template-columns:repeat(2,1fr);
        margin-top:35px;
        padding:12px;
    }

    .why-trust-item{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.07);
        padding:12px 5px;
    }

    .why-trust-item:last-child{
        grid-column:1 / -1;
        border-bottom:0;
    }

}


.testimonials-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(108,92,231,.08),
            transparent 28%
        ),
        #f8f9ff;
}

.testimonial-bg{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
}

.testimonial-bg-1{
    width:300px;
    height:300px;
    left:-150px;
    top:10%;
    background:rgba(108,92,231,.13);
}

.testimonial-bg-2{
    width:280px;
    height:280px;
    right:-130px;
    bottom:5%;
    background:rgba(0,212,255,.10);
}


/* Heading */

.testimonial-heading{
    max-width:720px;
    margin:0 auto 50px;
}

.testimonial-label{
    justify-content:center;
}

.testimonial-title{
    margin:0;
    color:#171b2d;
    font-size:clamp(38px,5vw,56px);
    line-height:1.08;
    font-weight:900;
}

.testimonial-title span{
    display:block;
    background:linear-gradient(
        90deg,
        #6c5ce7,
        #8e7dff,
        #00c7ed
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.testimonial-description{
    margin:20px auto 0;
    max-width:650px;
    color:#70778d;
    font-size:15px;
    line-height:1.8;
}


/* Card */

.testimonial-card{
    position:relative;
    height:100%;
    padding:30px;
    border-radius:23px;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(108,92,231,.10);
    box-shadow:0 15px 45px rgba(25,30,60,.06);
    overflow:hidden;
    transition:.4s ease;
}

.testimonial-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(
        90deg,
        #6c5ce7,
        #8e7dff,
        #00d4ff
    );
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease;
}

.testimonial-card:hover{
    transform:translateY(-9px);
    box-shadow:
        0 25px 60px rgba(30,35,70,.12),
        0 0 0 1px rgba(108,92,231,.08);
}

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


/* Quote */

.quote-icon{
    position:absolute;
    top:24px;
    right:27px;
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    color:#6c5ce7;
    background:rgba(108,92,231,.08);
    font-size:17px;
    transition:.4s ease;
}

.testimonial-card:hover .quote-icon{
    color:#fff;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #8e7dff
    );
    transform:rotate(-8deg);
}


/* Stars */

.testimonial-stars{
    display:flex;
    gap:4px;
    margin-bottom:20px;
}

.testimonial-stars i{
    color:#ffb62e;
    font-size:12px;
}


/* Text */

.testimonial-text{
    min-height:125px;
    margin:0;
    color:#596176;
    font-size:14px;
    line-height:1.8;
}


/* Client */

.testimonial-client{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:22px;
    margin-top:20px;
    border-top:1px solid rgba(108,92,231,.08);
}

.client-avatar{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.avatar-purple{
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #9b8cff
    );
}

.avatar-cyan{
    background:linear-gradient(
        135deg,
        #00a9c9,
        #00d4ff
    );
}

.avatar-pink{
    background:linear-gradient(
        135deg,
        #d83c91,
        #ff70c2
    );
}

.avatar-green{
    background:linear-gradient(
        135deg,
        #0c9b78,
        #34d7ad
    );
}

.avatar-orange{
    background:linear-gradient(
        135deg,
        #e27820,
        #ffb13b
    );
}

.avatar-blue{
    background:linear-gradient(
        135deg,
        #3868d8,
        #5d8cff
    );
}

.client-info{
    flex:1;
}

.client-info strong{
    display:block;
    color:#171b2d;
    font-size:14px;
    font-weight:800;
}

.client-info span{
    display:block;
    margin-top:3px;
    color:#8a91a3;
    font-size:10px;
}

.client-verified{
    color:#36bff0;
    font-size:15px;
}


/* Featured */

.featured-testimonial{
    background:
        linear-gradient(
            145deg,
            #11162a,
            #211a4c
        );
    border-color:rgba(142,125,255,.18);
    transform:translateY(-8px);
}

.featured-testimonial:hover{
    transform:translateY(-17px);
}

.featured-testimonial .testimonial-text{
    color:#adb4c7;
}

.featured-testimonial .client-info strong{
    color:#fff;
}

.featured-testimonial .client-info span{
    color:#818aa2;
}

.featured-testimonial .testimonial-client{
    border-color:rgba(255,255,255,.08);
}

.featured-badge{
    position:absolute;
    right:25px;
    bottom:25px;
    display:flex;
    align-items:center;
    gap:5px;
    color:#8e7dff;
    font-size:9px;
    font-weight:800;
}

.featured-badge i{
    color:#ff668e;
}


/* Summary */

.testimonial-summary{
    margin-top:50px;
    padding:25px 30px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:20px;
    border-radius:20px;
    background:#11162a;
    box-shadow:0 20px 50px rgba(10,15,35,.12);
}

.summary-rating{
    display:flex;
    align-items:center;
    gap:14px;
}

.summary-rating > strong{
    color:#fff;
    font-size:35px;
    line-height:1;
    font-weight:900;
}

.summary-stars{
    display:flex;
    gap:3px;
}

.summary-stars i{
    color:#ffb62e;
    font-size:11px;
}

.summary-rating span{
    display:block;
    margin-top:5px;
    color:#818aa1;
    font-size:9px;
}

.summary-divider{
    width:1px;
    height:45px;
    background:rgba(255,255,255,.10);
}

.summary-item{
    text-align:center;
}

.summary-item strong{
    display:block;
    color:#fff;
    font-size:21px;
    font-weight:900;
}

.summary-item span{
    display:block;
    margin-top:3px;
    color:#818aa1;
    font-size:9px;
}


/* Dark */

body.dark-mode .testimonials-section{
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(108,92,231,.10),
            transparent 30%
        ),
        #080b18;
}

body.dark-mode .testimonial-title{
    color:#fff;
}

body.dark-mode .testimonial-description{
    color:#929ab0;
}

body.dark-mode .testimonial-card{
    background:#11162a;
    border-color:rgba(255,255,255,.07);
}

body.dark-mode .testimonial-text{
    color:#929ab0;
}

body.dark-mode .client-info strong{
    color:#fff;
}

body.dark-mode .testimonial-client{
    border-color:rgba(255,255,255,.07);
}


/* Responsive */

@media(max-width:991px){

    .testimonials-section{
        padding:85px 0;
    }

    .featured-testimonial{
        transform:none;
    }

    .featured-testimonial:hover{
        transform:translateY(-9px);
    }

    .testimonial-summary{
        flex-wrap:wrap;
    }

    .summary-divider{
        display:none;
    }

}

@media(max-width:575px){

    .testimonials-section{
        padding:70px 0;
    }

    .testimonial-title{
        font-size:36px;
    }

    .testimonial-card{
        padding:23px;
    }

    .testimonial-text{
        min-height:auto;
    }

    .testimonial-summary{
        padding:22px 15px;
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .summary-rating{
        grid-column:1 / -1;
        justify-content:center;
        padding-bottom:15px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

}


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

.final-cta-section{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:#080b18;
}

.cta-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    pointer-events:none;
}

.cta-orb-1{
    width:350px;
    height:350px;
    left:-150px;
    top:-120px;
    background:rgba(108,92,231,.25);
}

.cta-orb-2{
    width:320px;
    height:320px;
    right:-130px;
    bottom:-120px;
    background:rgba(0,212,255,.16);
}


/* Grid */

.cta-grid{
    position:absolute;
    inset:0;
    opacity:.25;
    background-image:
        linear-gradient(
            rgba(142,125,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(142,125,255,.08) 1px,
            transparent 1px
        );
    background-size:45px 45px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 20%,
        #000 80%,
        transparent
    );
}


/* Main Box */

.final-cta{
    position:relative;
    min-height:470px;
    padding:70px 65px;
    display:flex;
    align-items:center;
    border-radius:30px;
    overflow:hidden;
    background:
        linear-gradient(
            120deg,
            #11162a,
            #1b1740 50%,
            #101d35
        );
    border:1px solid rgba(142,125,255,.18);
    box-shadow:
        0 30px 80px rgba(0,0,0,.30),
        inset 0 0 80px rgba(108,92,231,.05);
}


/* Inner glow */

.final-cta::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    left:35%;
    top:50%;
    transform:translate(-50%,-50%);
    background:rgba(108,92,231,.10);
    filter:blur(80px);
}


/* Content */

.cta-content{
    position:relative;
    z-index:5;
    width:65%;
}

.cta-badge{
    display:flex;
    align-items:center;
    gap:9px;
    color:#8e7dff;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
}

.cta-badge span{
    width:28px;
    height:2px;
    background:linear-gradient(
        90deg,
        #6c5ce7,
        #00d4ff
    );
}

.cta-content h2{
    margin:18px 0 0;
    color:#fff;
    font-size:clamp(38px,5vw,60px);
    line-height:1.06;
    font-weight:900;
}

.cta-content h2 span{
    display:block;
    background:linear-gradient(
        90deg,
        #8e7dff,
        #00d4ff
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cta-content > p{
    max-width:650px;
    margin:20px 0 28px;
    color:#929ab1;
    font-size:14px;
    line-height:1.8;
}


/* Buttons */

.cta-buttons{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.cta-primary,
.cta-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 22px;
    border-radius:50px;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    transition:.35s ease;
}

.cta-primary{
    color:#fff;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #8e7dff
    );
    box-shadow:0 12px 30px rgba(108,92,231,.30);
}

.cta-primary:hover{
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(108,92,231,.42);
}

.cta-primary i{
    transition:.3s ease;
}

.cta-primary:hover i{
    transform:translateX(5px);
}

.cta-secondary{
    color:#d9dded;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.05);
}

.cta-secondary:hover{
    color:#fff;
    background:rgba(255,255,255,.10);
    transform:translateY(-4px);
}


/* Trust */

.cta-trust{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:25px;
}

.cta-trust div{
    display:flex;
    align-items:center;
    gap:6px;
    color:#858da5;
    font-size:10px;
}

.cta-trust i{
    color:#36dca5;
    font-size:12px;
}


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

.cta-visual{
    position:absolute;
    width:390px;
    height:390px;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
}


/* Main Circle */

.cta-main-circle{
    position:relative;
    width:205px;
    height:205px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(
            circle,
            #211c50,
            #0b1020 70%
        );
    border:1px solid rgba(142,125,255,.45);
    box-shadow:
        0 0 60px rgba(108,92,231,.25),
        inset 0 0 45px rgba(0,212,255,.08);
    z-index:5;
    animation:ctaCoreFloat 5s ease-in-out infinite;
}

@keyframes ctaCoreFloat{

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

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

}

.cta-circle-inner{
    text-align:center;
}

.cta-sp-logo{
    width:55px;
    height:55px;
    margin:0 auto 9px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:#fff;
    background:linear-gradient(
        135deg,
        #6c5ce7,
        #00d4ff
    );
    font-size:20px;
    font-weight:900;
    box-shadow:0 12px 30px rgba(108,92,231,.35);
}

.cta-circle-inner strong{
    display:block;
    color:#fff;
    font-size:20px;
    letter-spacing:3px;
}

.cta-circle-inner small{
    display:block;
    margin-top:5px;
    color:#858da5;
    font-size:7px;
    letter-spacing:2px;
}


/* Rings */

.cta-ring{
    position:absolute;
    border-radius:50%;
    border:1px dashed rgba(142,125,255,.22);
}

.cta-ring-1{
    width:250px;
    height:250px;
    border-top-color:#8e7dff;
    animation:ctaRotate 12s linear infinite;
}

.cta-ring-2{
    width:310px;
    height:310px;
    border-right-color:#00d4ff;
    animation:ctaRotate 18s linear infinite reverse;
}

.cta-ring-3{
    width:370px;
    height:370px;
    border-bottom-color:rgba(108,92,231,.35);
    animation:ctaRotate 25s linear infinite;
}

@keyframes ctaRotate{

    from{
        transform:rotate(0);
    }

    to{
        transform:rotate(360deg);
    }

}


/* Floating Icons */

.cta-icon{
    position:absolute;
    width:47px;
    height:47px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:rgba(17,22,42,.90);
    border:1px solid rgba(142,125,255,.25);
    backdrop-filter:blur(10px);
    box-shadow:0 15px 30px rgba(0,0,0,.20);
    z-index:8;
    font-size:17px;
}

.cta-icon-1{
    top:20px;
    left:70px;
    color:#8e7dff;
    animation:ctaIconFloat 4s ease-in-out infinite;
}

.cta-icon-2{
    top:100px;
    right:5px;
    color:#00d4ff;
    animation:ctaIconFloat 5s ease-in-out infinite .5s;
}

.cta-icon-3{
    bottom:35px;
    right:65px;
    color:#ff70c2;
    animation:ctaIconFloat 4.5s ease-in-out infinite 1s;
}

.cta-icon-4{
    bottom:75px;
    left:15px;
    color:#3edda8;
    animation:ctaIconFloat 5s ease-in-out infinite 1.5s;
}

@keyframes ctaIconFloat{

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

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

}


/* Responsive */

@media(max-width:1199px){

    .final-cta{
        padding:60px 45px;
    }

    .cta-content{
        width:62%;
    }

    .cta-visual{
        right:-20px;
        transform:translateY(-50%) scale(.85);
    }

}


@media(max-width:991px){

    .final-cta{
        min-height:auto;
        padding:60px 35px;
        text-align:center;
    }

    .cta-content{
        width:100%;
    }

    .cta-badge{
        justify-content:center;
    }

    .cta-content > p{
        margin-left:auto;
        margin-right:auto;
    }

    .cta-buttons{
        justify-content:center;
    }

    .cta-trust{
        justify-content:center;
    }

    .cta-visual{
        display:none;
    }

}


@media(max-width:575px){

    .final-cta-section{
        padding:70px 0;
    }

    .final-cta{
        padding:45px 22px;
        border-radius:23px;
    }

    .cta-content h2{
        font-size:37px;
    }

    .cta-content > p{
        font-size:13px;
    }

    .cta-buttons{
        flex-direction:column;
        width:100%;
    }

    .cta-primary,
    .cta-secondary{
        width:100%;
    }

    .cta-trust{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

}


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

    :root{
        --primary:#6c5ce7;
        --primary2:#8e7dff;
        --cyan:#00d4ff;

        --dark:#080b18;
        --dark2:#11162a;

        --text:#171b2d;
        --muted:#70778d;

        --white:#ffffff;
        --border:rgba(20,25,50,.09);

        --shadow:0 20px 60px rgba(20,25,60,.10);
    }


    *{
        box-sizing:border-box;
    }

    body{
        margin:0;
        font-family:'Inter',sans-serif;
        background:#fff;
        color:var(--text);
    }


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

    .topbar{
        background:#080b18;
        color:#fff;
        min-height:40px;
        font-size:12px;
        position:relative;
        overflow:hidden;
    }

    .topbar:before{
        content:"";
        position:absolute;
        width:300px;
        height:100px;
        background:rgba(108,92,231,.35);
        filter:blur(60px);
        left:20%;
        top:-70px;
    }

    .topbar-content{
        position:relative;
        z-index:2;
        min-height:40px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .top-contact{
        display:flex;
        align-items:center;
        gap:25px;
    }

    .top-contact a{
        color:#dce0f5;
        text-decoration:none;
        transition:.3s;
    }

    .top-contact a:hover{
        color:#00d4ff;
    }

    .top-contact i{
        color:#00d4ff;
        margin-right:6px;
    }


    .top-social{
        display:flex;
        align-items:center;
        gap:8px;
    }

    .top-social span{
        color:#9298ad;
        margin-right:7px;
    }

    .social{
        width:27px;
        height:27px;

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

        border:1px solid rgba(255,255,255,.12);
        border-radius:50%;

        color:#fff !important;

        text-decoration:none;

        transition:.3s;
    }

    .social:hover{
        background:linear-gradient(135deg,var(--primary),var(--cyan));
        border-color:transparent;
        transform:translateY(-3px);
        box-shadow:0 7px 20px rgba(108,92,231,.4);
    }


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

    .main-header{
        position:sticky;
        top:0;
        z-index:1000;

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

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

        border-bottom:1px solid rgba(0,0,0,.06);

        transition:.3s;
    }

    .main-header.scrolled{
        box-shadow:0 10px 40px rgba(0,0,0,.08);
    }


    .navbar{
        min-height:78px;
        padding:10px 0;
    }


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

    .brand{
        display:flex;
        align-items:center;
        gap:11px;

        text-decoration:none;
        color:#11152a;

        min-width:190px;
    }

    .brand:hover{
        color:#11152a;
    }

    .logo-icon{
        width:46px;
        height:46px;

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

        border-radius:14px;

        color:#fff;

        font-size:20px;

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

        box-shadow:
        0 10px 30px rgba(108,92,231,.30);

        position:relative;
        overflow:hidden;
    }

    .logo-icon:after{
        content:"";
        position:absolute;

        width:70px;
        height:15px;

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

        transform:rotate(-45deg);
        left:-50px;

        animation:logoShine 4s infinite;
    }

    @keyframes logoShine{

        0%{
            left:-70px;
        }

        40%{
            left:80px;
        }

        100%{
            left:80px;
        }

    }


    .brand-name{
        font-size:21px;
        font-weight:800;
        line-height:1;
        letter-spacing:-.5px;
    }

    .brand-name span{
        color:var(--primary);
    }

    .brand-tagline{
        display:block;

        font-size:8px;

        letter-spacing:2px;

        color:#8b91a6;

        margin-top:6px;
    }


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

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

.navbar-nav{
    gap:4px;
}

.navbar-nav .nav-item{
    position:relative;
}

.navbar-nav .nav-link{
    color:#30364b !important;
    font-size:13px;
    font-weight:600;

    padding:11px 14px 15px !important;

    border-radius:10px;

    position:relative;

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

    line-height:1.2;

    transition:.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
    color:#6c5ce7 !important;
    background:rgba(108,92,231,.07);
}


/* =========================================
   DROPDOWN ARROW BELOW TEXT
========================================= */

.navbar-nav .dropdown-toggle::after{

    display:block;

    margin:5px 0 0 0 !important;

    vertical-align:middle;

    border-top:4px solid currentColor;
    border-right:4px solid transparent;
    border-bottom:0;
    border-left:4px solid transparent;

    transition:.3s;

}


/* Arrow rotate when dropdown open */

.navbar-nav .dropdown.show > .dropdown-toggle::after{

    transform:rotate(180deg);

}


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

.navbar-nav .dropdown-menu{

    display:none;

    position:absolute;

    top:100%;
    left:0;

    margin:8px 0 0 0 !important;

    min-width:235px;

    padding:10px;

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

    border:1px solid rgba(20,25,50,.07);

    border-radius:16px;

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

    z-index:9999;

    animation:dropdownIn .25s ease;

}


/* Bootstrap opened state */

.navbar-nav .dropdown-menu.show{

    display:block;

}


@keyframes dropdownIn{

    from{
        opacity:0;
        transform:translateY(8px);
    }

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

}


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

.dropdown-menu .dropdown-item{

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 12px;

    border-radius:9px;

    font-size:13px;

    color:#34394d;

    transition:.25s;

}

.dropdown-menu .dropdown-item:hover{

    background:#f4f2ff;

    color:#6c5ce7;

    transform:translateX(3px);

}


/* =========================================
   NESTED DROPDOWN
========================================= */

.dropdown-submenu{
    position:relative;
}


.dropdown-submenu > .dropdown-menu{

    top:-10px;

    left:100%;

    margin:0 0 0 8px !important;

}


/* Nested arrow should remain on right */

.dropdown-submenu > .dropdown-item{

    justify-content:space-between;

}

.dropdown-submenu > .dropdown-item .arrow{

    margin-left:auto;

    font-size:9px;

}


/* Desktop nested dropdown */

@media(min-width:992px){

    .dropdown-submenu:hover > .dropdown-menu{

        display:block;

    }

}


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

.mega-dropdown{
    position:relative !important;
}

.mega-menu{

    width:760px !important;

    left:50% !important;

    top:100% !important;

    transform:translateX(-50%) !important;

    margin-top:8px !important;

}

.mega-menu.show{

    display:block !important;

}


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

@media(max-width:991px){

    .navbar-nav .nav-link{

        flex-direction:row;

        justify-content:space-between;

        padding:12px 14px !important;

    }


    .navbar-nav .dropdown-toggle::after{

        margin:0 0 0 8px !important;

    }


    .navbar-nav .dropdown-menu{

        position:static !important;

        width:100% !important;

        transform:none !important;

        margin:3px 0 !important;

        box-shadow:none;

        border:0;

        background:#f7f7fb;

    }


    .dropdown-submenu > .dropdown-menu{

        display:none;

        margin-left:12px !important;

        width:calc(100% - 12px) !important;

        border-left:2px solid #ddd8ff;

    }


    .dropdown-submenu.show > .dropdown-menu{

        display:block;

    }


    .mega-menu{

        width:100% !important;

    }

}

    /* =========================================
       NESTED DROPDOWN
    ========================================= */

    .dropdown-submenu{
        position:relative;
    }

    .dropdown-submenu > .dropdown-menu{
        top:-10px;
        left:100%;

        margin-left:9px !important;
        margin-top:0 !important;
    }

    .dropdown-submenu:hover > .dropdown-menu{
        display:block;
    }

    .submenu-link{
        justify-content:space-between;
    }

    .submenu-link .arrow{
        width:auto;
        font-size:9px;
        color:#8c92a7;
    }


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

    .mega-dropdown{
        position:static;
    }

    .mega-menu{
        width:760px;

        left:50% !important;

        transform:translateX(-50%) !important;

        padding:22px;

        border-radius:20px;
    }

    .mega-title{
        font-size:11px;

        text-transform:uppercase;

        letter-spacing:1.2px;

        font-weight:800;

        color:var(--primary);

        margin-bottom:10px;
    }

    .mega-description{
        font-size:12px;
        color:var(--muted);
        line-height:1.6;
    }

    .mega-link{
        display:flex;
        align-items:center;
        gap:12px;

        padding:11px;

        text-decoration:none;

        border-radius:12px;

        color:#292e42;

        transition:.3s;
    }

    .mega-link:hover{
        background:#f6f5ff;
        color:var(--primary);
        transform:translateX(4px);
    }

    .mega-icon{
        width:36px;
        height:36px;

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

        border-radius:10px;

        background:rgba(108,92,231,.09);

        color:var(--primary);
    }

    .mega-link strong{
        display:block;
        font-size:12px;
    }

    .mega-link small{
        color:#9298aa;
        font-size:10px;
    }


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

    .header-actions{
        display:flex;
        align-items:center;
        gap:8px;
    }

    .login-btn{
        display:inline-flex;
        align-items:center;
        gap:7px;

        padding:10px 15px;

        border:1px solid #e1e4ee;

        border-radius:11px;

        text-decoration:none;

        color:#33384c;

        font-size:12px;
        font-weight:700;

        transition:.3s;
    }

    .login-btn i{
        color:var(--primary);
    }

    .login-btn:hover{
        background:#f6f5ff;
        border-color:#d9d4ff;
        color:var(--primary);
    }


    .start-btn{
        display:inline-flex;
        align-items:center;
        gap:9px;

        padding:11px 17px;

        color:#fff;

        text-decoration:none;

        border-radius:11px;

        font-size:12px;
        font-weight:700;

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

        box-shadow:
        0 10px 25px rgba(108,92,231,.25);

        transition:.3s;
    }

    .start-btn:hover{
        color:#fff;

        transform:translateY(-2px);

        box-shadow:
        0 15px 35px rgba(108,92,231,.35);
    }

    .start-btn i{
        transition:.3s;
    }

    .start-btn:hover i{
        transform:translateX(4px);
    }


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

    .theme-btn{
        width:38px;
        height:38px;

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

        border:1px solid #e1e4ee;

        background:#fff;

        border-radius:10px;

        color:#454b61;

        cursor:pointer;

        transition:.3s;
    }

    .theme-btn:hover{
        color:var(--primary);
        border-color:#d8d3ff;
    }


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

    .navbar-toggler{
        border:0;
        outline:none !important;
        box-shadow:none !important;

        font-size:22px;

        color:#22283b;
    }


    @media(max-width:1199px){

        .navbar-nav{
            gap:0;
        }

        .nav-link{
            padding-left:9px !important;
            padding-right:9px !important;
        }

        .brand{
            min-width:auto;
        }

        .mega-menu{
            width:700px;
        }

    }


    @media(max-width:991px){

        .top-contact{
            justify-content:center;
            width:100%;
        }

        .top-social{
            display:none;
        }

        .topbar-content{
            justify-content:center;
        }

        .navbar-collapse{
            padding:15px 0 5px;
        }

        .navbar-nav{
            background:rgba(245,246,252,.7);
            padding:8px;
            border-radius:15px;
        }

        .nav-link{
            padding:12px 14px !important;
        }

        .header-actions{
            margin-top:15px;
            padding:5px;
        }

        .mega-menu{
            width:100%;
            transform:none !important;
            left:auto !important;
            position:static;
            box-shadow:none;
            background:#f8f9fd;
        }

        .dropdown-submenu > .dropdown-menu{
            position:static;
            margin-left:15px !important;
            border-left:2px solid #e7e4ff;
            box-shadow:none;
            animation:none;
        }

        .dropdown-submenu:hover > .dropdown-menu{
            display:none;
        }

        .dropdown-submenu.show > .dropdown-menu{
            display:block;
        }

    }


    @media(max-width:575px){

        .top-contact{
            gap:12px;
            font-size:10px;
        }

        .top-contact .working-hours{
            display:none;
        }

        .brand-name{
            font-size:18px;
        }

        .brand-tagline{
            font-size:7px;
        }

        .logo-icon{
            width:40px;
            height:40px;
            border-radius:12px;
        }

        .header-actions{
            flex-wrap:wrap;
        }

        .theme-btn{
            display:none;
        }

    }
/* =========================================
   MOBILE NAVBAR TOGGLE
========================================= */

.navbar-toggler{
    width:44px;
    height:44px;

    padding:0;

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

    border:1px solid #e2e5ef !important;
    border-radius:12px;

    background:#fff;

    color:#252a3d;

    box-shadow:none !important;
}

.navbar-toggler:focus{
    box-shadow:0 0 0 3px rgba(108,92,231,.12) !important;
}

.navbar-toggler-icon{
    width:20px;
    height:20px;

    background-image:none !important;

    position:relative;
}

.navbar-toggler-icon:before,
.navbar-toggler-icon:after{
    content:"";
    position:absolute;

    left:0;

    width:20px;
    height:2px;

    background:#30364b;

    border-radius:10px;

    transition:.3s;
}

.navbar-toggler-icon:before{
    top:6px;
}

.navbar-toggler-icon:after{
    top:13px;
}


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

@media(max-width:991px){

    .navbar{
        position:relative;
    }

    .navbar-collapse{
        width:100%;

        margin-top:15px;

        padding:12px;

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

        border:1px solid #eceef5;

        border-radius:18px;

        box-shadow:0 20px 50px rgba(20,25,60,.12);
    }

    .navbar-collapse.show{
        display:block !important;
    }

    .navbar-nav{
        width:100%;

        display:block;

        background:transparent !important;

        padding:0 !important;
    }

    .navbar-nav .nav-item{
        width:100%;
    }

    .navbar-nav .nav-link{
        width:100%;

        display:flex;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        padding:13px 14px !important;

        border-radius:10px;
    }

    /* Mobile arrow right side */
    .navbar-nav .dropdown-toggle::after{
        margin:0 0 0 10px !important;
    }


    /* Dropdown mobile */
    .navbar-nav .dropdown-menu{
        position:static !important;

        display:none;

        width:100% !important;

        min-width:100% !important;

        margin:3px 0 8px !important;

        padding:7px;

        transform:none !important;

        box-shadow:none !important;

        border:1px solid #eeeef5;

        border-radius:12px;

        background:#f8f8fc;
    }

    .navbar-nav .dropdown-menu.show{
        display:block !important;
    }


    /* Nested menu */
    .dropdown-submenu > .dropdown-menu{
        display:none !important;

        margin-left:10px !important;

        width:calc(100% - 10px) !important;

        border-left:2px solid #6c5ce7;
    }

    .dropdown-submenu.show > .dropdown-menu{
        display:block !important;
    }


    /* Mega menu */
    .mega-menu{
        width:100% !important;

        position:static !important;

        left:auto !important;

        transform:none !important;
    }


    /* Header buttons */
    .header-actions{
        width:100%;

        display:flex;

        margin-top:15px;

        padding-top:12px;

        border-top:1px solid #eee;

        gap:8px;
    }

    .header-actions .login-btn,
    .header-actions .start-btn{
        flex:1;

        justify-content:center;

        text-align:center;
    }

    .theme-btn{
        display:flex !important;
    }

}

    /* =========================================
       DARK MODE
    ========================================= */

    body.dark-mode{
        background:#080b18;
        color:#fff;
    }

    body.dark-mode .main-header{
        background:rgba(8,11,24,.82);
        border-color:rgba(255,255,255,.07);
    }

    body.dark-mode .brand{
        color:#fff;
    }

    body.dark-mode .brand:hover{
        color:#fff;
    }

    body.dark-mode .nav-link{
        color:#d8dcf0 !important;
    }

    body.dark-mode .nav-link:hover,
    body.dark-mode .nav-link.active{
        color:#a99dff !important;
        background:rgba(108,92,231,.13);
    }

    body.dark-mode .theme-btn{
        background:#11162a;
        border-color:#272d45;
        color:#fff;
    }

    body.dark-mode .login-btn{
        background:#11162a;
        border-color:#272d45;
        color:#e5e8f5;
    }

    body.dark-mode .login-btn:hover{
        background:#181e34;
        color:#a99dff;
    }

    body.dark-mode .dropdown-menu{
        background:#11162a;
    }

    body.dark-mode .dropdown-item{
        color:#d9dced;
    }

    body.dark-mode .dropdown-item:hover{
        background:#181e35;
        color:#a99dff;
    }

    body.dark-mode .mega-link{
        color:#e1e4f3;
    }

    body.dark-mode .mega-link:hover{
        background:#181e35;
    }

    body.dark-mode .mega-description,
    body.dark-mode .mega-link small{
        color:#858ca4;
    }

    body.dark-mode .navbar-toggler{
        color:#fff;
    }



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

.contact-page-hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(
      circle at 15% 25%,
      rgba(108,92,231,.20),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 70%,
      rgba(0,212,255,.12),
      transparent 30%
    ),
    #080b18;
}

.contact-hero-grid{
  position:absolute;
  inset:0;
  opacity:.14;
  background-image:
    linear-gradient(
      rgba(255,255,255,.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.07) 1px,
      transparent 1px
    );
  background-size:45px 45px;
}

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

.contact-hero-glow-1{
  width:350px;
  height:350px;
  background:#6c5ce7;
  left:-180px;
  top:80px;
  opacity:.22;
}

.contact-hero-glow-2{
  width:300px;
  height:300px;
  background:#00d4ff;
  right:-150px;
  bottom:-120px;
  opacity:.15;
}

.contact-hero-content{
  position:relative;
  z-index:2;
  padding:80px 0;
  max-width:900px;
}

.contact-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px;
  color:#7f879d;
  font-size:13px;
}

.contact-breadcrumb a{
  color:#aeb5ca;
  text-decoration:none;
}

.contact-breadcrumb i{
  color:#6c5ce7;
  font-size:9px;
}

.contact-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border:1px solid rgba(142,125,255,.25);
  border-radius:30px;
  background:rgba(108,92,231,.10);
  color:#bdb5ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.7px;
}

.contact-hero-badge i{
  color:#00d4ff;
}

.contact-hero-content h1{
  max-width:800px;
  margin:20px 0 18px;
  font-size:clamp(40px,6vw,70px);
  line-height:1.06;
  letter-spacing:-2.5px;
  font-weight:800;
}

.contact-hero-content h1 span{
  display:block;
  background:linear-gradient(
    90deg,
    #8e7dff,
    #00d4ff
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.contact-hero-content > p{
  max-width:680px;
  margin:0;
  color:#aeb5ca;
  font-size:16px;
  line-height:1.85;
}

.contact-hero-mini{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:28px;
}

.contact-hero-mini div{
  display:flex;
  align-items:center;
  gap:7px;
  color:#c4c9d8;
  font-size:12px;
}

.contact-hero-mini i{
  color:#00d4ff;
}


/* =========================
   CONTACT MAIN
========================= */

.contact-main-section{
  position:relative;
  padding:110px 0;
  background:#f7f8fc;
  overflow:hidden;
}

.contact-bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}

.contact-bg-orb-1{
  width:300px;
  height:300px;
  background:rgba(108,92,231,.09);
  left:-150px;
  top:120px;
}

.contact-bg-orb-2{
  width:280px;
  height:280px;
  background:rgba(0,212,255,.07);
  right:-130px;
  bottom:100px;
}

.contact-main-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:65px;
  align-items:start;
}


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

.contact-section-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#6c5ce7;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.8px;
}

.contact-section-label > span:first-child{
  width:25px;
  height:2px;
  border-radius:10px;
  background:linear-gradient(
    90deg,
    #6c5ce7,
    #00d4ff
  );
}

.contact-info h2{
  margin:17px 0 15px;
  color:#171b2d;
  font-size:clamp(32px,4vw,46px);
  line-height:1.12;
  letter-spacing:-1.5px;
  font-weight:800;
}

.contact-info h2 span{
  color:#6c5ce7;
}

.contact-intro{
  max-width:500px;
  margin:0 0 30px;
  color:#70778d;
  font-size:14px;
  line-height:1.85;
}


/* Info Cards */

.contact-info-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:13px;
  padding:17px;
  border:1px solid #e7e9f0;
  border-radius:16px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:.35s ease;
  overflow:hidden;
}

.contact-info-card:hover{
  color:inherit;
  border-color:rgba(108,92,231,.22);
  transform:translateX(5px);
  box-shadow:0 15px 35px rgba(30,30,65,.07);
}

.contact-info-icon{
  width:47px;
  height:47px;
  flex:0 0 47px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  color:#6c5ce7;
  background:rgba(108,92,231,.08);
}

.contact-info-card > div:nth-child(2){
  min-width:0;
}

.contact-info-card small{
  display:block;
  margin-bottom:3px;
  color:#9096a8;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
}

.contact-info-card strong{
  display:block;
  color:#171b2d;
  font-size:14px;
  word-break:break-word;
}

.contact-info-card span{
  display:block;
  margin-top:3px;
  color:#8a90a1;
  font-size:10px;
}

.contact-card-arrow{
  margin-left:auto;
  color:#b2b7c5;
  font-size:11px;
  transition:.3s ease;
}

.contact-info-card:hover .contact-card-arrow{
  color:#6c5ce7;
  transform:translateX(4px);
}


/* Working */

.contact-working-box{
  display:flex;
  gap:14px;
  margin-top:25px;
  padding:20px;
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      rgba(108,92,231,.07),
      rgba(0,212,255,.035)
    );
  border:1px solid rgba(108,92,231,.10);
}

.working-icon{
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:#6c5ce7;
  background:#fff;
}

.contact-working-box h4{
  margin:0 0 10px;
  color:#171b2d;
  font-size:14px;
}

.working-row{
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-bottom:5px;
}

.working-row span,
.working-row strong{
  font-size:10px;
}

.working-row span{
  color:#7d8496;
}

.working-row strong{
  color:#4d5365;
}


/* Social */

.contact-social-area{
  margin-top:28px;
}

.contact-social-area > span{
  display:block;
  margin-bottom:12px;
  color:#9096a8;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.5px;
}

.contact-socials{
  display:flex;
  gap:8px;
}

.contact-socials a{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#70778d;
  background:#fff;
  border:1px solid #e7e9f0;
  text-decoration:none;
  transition:.3s ease;
}

.contact-socials a:hover{
  color:#fff;
  background:linear-gradient(
    135deg,
    #6c5ce7,
    #8e7dff
  );
  border-color:#6c5ce7;
  transform:translateY(-4px);
}


/* =========================
   CONTACT FORM
========================= */

.contact-form-wrapper{
  position:relative;
  padding:35px;
  border-radius:25px;
  background:#fff;
  border:1px solid #e6e8ef;
  box-shadow:0 25px 70px rgba(27,28,60,.08);
  overflow:hidden;
}

.contact-form-glow{
  position:absolute;
  width:250px;
  height:250px;
  border-radius:50%;
  right:-140px;
  top:-130px;
  background:#6c5ce7;
  filter:blur(90px);
  opacity:.08;
}

.contact-form-header{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
}

.form-label{
  color:#6c5ce7;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.7px;
}

.contact-form-header h3{
  margin:8px 0 7px;
  color:#171b2d;
  font-size:25px;
  font-weight:800;
}

.contact-form-header h3 span{
  color:#6c5ce7;
}

.contact-form-header p{
  margin:0;
  color:#858b9d;
  font-size:11px;
  line-height:1.6;
}

.form-header-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(
    135deg,
    #6c5ce7,
    #8e7dff
  );
  box-shadow:0 10px 25px rgba(108,92,231,.20);
}


/* Form Row */

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

.contact-field{
  position:relative;
  z-index:2;
  margin-bottom:17px;
}

.contact-field label{
  display:block;
  margin-bottom:7px;
  color:#4c5264;
  font-size:11px;
  font-weight:700;
}

.contact-input,
.contact-textarea{
  position:relative;
}

.contact-input > i:first-child,
.contact-textarea > i{
  position:absolute;
  left:14px;
  top:50%;
  z-index:2;
  color:#999fb0;
  font-size:12px;
  transform:translateY(-50%);
  pointer-events:none;
}

.contact-textarea > i{
  top:17px;
  transform:none;
}

.contact-input input,
.contact-input select,
.contact-textarea textarea{
  width:100%;
  border:1px solid #e4e6ed;
  outline:none;
  border-radius:10px;
  background:#fafbfc;
  color:#252a3b;
  font-family:inherit;
  font-size:12px;
  transition:.3s ease;
}

.contact-input input,
.contact-input select{
  height:46px;
  padding:0 40px;
}

.contact-textarea textarea{
  min-height:125px;
  resize:vertical;
  padding:14px 40px;
  line-height:1.6;
}

.contact-input select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.select-arrow{
  position:absolute;
  right:14px;
  top:50%;
  color:#8d93a4;
  font-size:10px;
  transform:translateY(-50%);
  pointer-events:none;
}

.contact-input input:focus,
.contact-input select:focus,
.contact-textarea textarea:focus{
  border-color:#8e7dff;
  background:#fff;
  box-shadow:0 0 0 3px rgba(108,92,231,.07);
}

.contact-input input:focus + i{
  color:#6c5ce7;
}


/* Submit */

.contact-submit-btn{
  position:relative;
  z-index:2;
  width:100%;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(
    135deg,
    #6c5ce7,
    #8e7dff
  );
  box-shadow:0 12px 28px rgba(108,92,231,.22);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.35s ease;
}

.contact-submit-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 35px rgba(108,92,231,.30);
}

.contact-submit-btn i{
  transition:.3s ease;
}

.contact-submit-btn:hover i{
  transform:translateX(4px);
}

.contact-form-note{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:13px;
  color:#989eae;
  font-size:9px;
  text-align:center;
}

.contact-form-note i{
  color:#6c5ce7;
}


/* Success */

.contact-success-message{
  display:none;
  align-items:center;
  gap:12px;
  margin-top:15px;
  padding:14px;
  border-radius:10px;
  color:#22613b;
  background:#eefaf2;
  border:1px solid #d4f0dc;
}

.contact-success-message.show{
  display:flex;
}

.contact-success-message > i{
  font-size:20px;
}

.contact-success-message strong,
.contact-success-message span{
  display:block;
}

.contact-success-message strong{
  font-size:12px;
}

.contact-success-message span{
  margin-top:3px;
  font-size:10px;
}


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

.contact-services-section{
  padding:105px 0;
  background:#fff;
}

.contact-heading-center{
  max-width:680px;
  margin:0 auto 50px;
  text-align:center;
}

.center-label{
  justify-content:center;
}

.contact-heading-center h2{
  margin:16px 0;
  color:#171b2d;
  font-size:clamp(31px,4vw,45px);
  line-height:1.15;
  letter-spacing:-1.5px;
  font-weight:800;
}

.contact-heading-center h2 span{
  color:#6c5ce7;
}

.contact-heading-center p{
  margin:0;
  color:#70778d;
  font-size:13px;
  line-height:1.8;
}

.contact-services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.contact-service-card{
  display:grid;
  grid-template-columns:50px 1fr 30px;
  align-items:center;
  gap:16px;
  padding:22px;
  border:1px solid #e9eaf0;
  border-radius:17px;
  color:inherit;
  text-decoration:none;
  transition:.35s ease;
}

.contact-service-card:hover{
  color:inherit;
  transform:translateY(-5px);
  border-color:rgba(108,92,231,.20);
  box-shadow:0 20px 45px rgba(30,30,65,.07);
}

.service-card-icon{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#6c5ce7;
  background:rgba(108,92,231,.08);
  transition:.35s ease;
}

.contact-service-card:hover .service-card-icon{
  color:#fff;
  background:linear-gradient(
    135deg,
    #6c5ce7,
    #8e7dff
  );
  transform:rotate(-5deg);
}

.contact-service-card h3{
  margin:0 0 5px;
  color:#171b2d;
  font-size:15px;
}

.contact-service-card p{
  margin:0;
  color:#7c8293;
  font-size:11px;
  line-height:1.6;
}

.service-arrow{
  color:#a6abb9;
  font-size:11px;
  transition:.3s ease;
}

.contact-service-card:hover .service-arrow{
  color:#6c5ce7;
  transform:translateX(4px);
}


/* =========================
   PROMISE
========================= */

.contact-promise-section{
  padding:100px 0;
  background:#f7f8fc;
}

.contact-promise-box{
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  align-items:center;
  gap:75px;
  padding:60px;
  border-radius:28px;
  background:#fff;
  border:1px solid #e7e9ef;
  box-shadow:0 25px 70px rgba(25,27,60,.06);
}

.promise-visual{
  position:relative;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.promise-ring{
  position:absolute;
  border:1px solid rgba(108,92,231,.18);
  border-radius:50%;
}

.promise-ring-1{
  width:245px;
  height:245px;
  animation:contactRotate 18s linear infinite;
}

.promise-ring-2{
  width:175px;
  height:175px;
  border-color:rgba(0,212,255,.20);
  border-style:dashed;
  animation:contactRotateReverse 13s linear infinite;
}

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

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

.promise-core{
  position:relative;
  z-index:3;
  width:110px;
  height:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(
    135deg,
    #6c5ce7,
    #272056
  );
  box-shadow:0 0 50px rgba(108,92,231,.30);
}

.promise-core i{
  color:#00d4ff;
  font-size:17px;
  margin-bottom:4px;
}

.promise-core strong{
  font-size:25px;
  line-height:1;
}

.promise-core span{
  margin-top:3px;
  color:#c2c6d5;
  font-size:8px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.promise-floating{
  position:absolute;
  z-index:4;
  width:43px;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#11162a;
  border:1px solid rgba(108,92,231,.25);
  color:#9d92ff;
  animation:contactFloat 4s ease-in-out infinite;
}

.promise-float-1{
  top:25px;
  right:20px;
}

.promise-float-2{
  left:15px;
  bottom:20px;
  color:#00d4ff;
  animation-delay:1s;
}

@keyframes contactFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-10px);
  }
}

.promise-content h2{
  margin:17px 0;
  color:#171b2d;
  font-size:clamp(30px,4vw,44px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-1.5px;
}

.promise-content h2 span{
  color:#6c5ce7;
}

.promise-content > p{
  max-width:600px;
  color:#70778d;
  font-size:14px;
  line-height:1.85;
}

.promise-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:23px;
}

.promise-list div{
  display:flex;
  align-items:center;
  gap:8px;
  color:#555b6d;
  font-size:11px;
}

.promise-list i{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#6c5ce7;
  background:rgba(108,92,231,.08);
  font-size:8px;
}


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

.contact-final-cta{
  position:relative;
  padding:100px 0;
  overflow:hidden;
  text-align:center;
  color:#fff;
  background:#080b18;
}

.contact-final-grid{
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(
      rgba(255,255,255,.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.07) 1px,
      transparent 1px
    );
  background-size:45px 45px;
}

.contact-final-glow{
  position:absolute;
  width:450px;
  height:450px;
  border-radius:50%;
  background:#6c5ce7;
  filter:blur(120px);
  opacity:.15;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.contact-final-content{
  position:relative;
  z-index:2;
  max-width:800px;
  margin:auto;
}

.contact-final-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#9d92ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.7px;
}

.contact-final-badge i{
  color:#00d4ff;
}

.contact-final-content h2{
  margin:18px 0;
  font-size:clamp(35px,5vw,58px);
  line-height:1.08;
  letter-spacing:-2px;
  font-weight:800;
}

.contact-final-content h2 span{
  display:block;
  background:linear-gradient(
    90deg,
    #8e7dff,
    #00d4ff
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.contact-final-content p{
  max-width:650px;
  margin:0 auto;
  color:#8e96ad;
  font-size:14px;
  line-height:1.8;
}

.contact-final-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.contact-final-btn,
.contact-final-call{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:47px;
  padding:0 21px;
  border-radius:10px;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  transition:.35s ease;
}

.contact-final-btn{
  color:#fff;
  background:linear-gradient(
    135deg,
    #6c5ce7,
    #8e7dff
  );
  box-shadow:0 12px 28px rgba(108,92,231,.25);
}

.contact-final-btn:hover{
  color:#fff;
  transform:translateY(-3px);
}

.contact-final-call{
  color:#dce0ec;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.contact-final-call:hover{
  color:#fff;
  border-color:#6c5ce7;
  transform:translateY(-3px);
}


/* =========================
   DARK MODE
========================= */

body.dark-mode .contact-main-section,
body.dark-mode .contact-promise-section{
  background:#0c1020;
}

body.dark-mode .contact-info h2,
body.dark-mode .contact-heading-center h2,
body.dark-mode .promise-content h2{
  color:#fff;
}

body.dark-mode .contact-info-card,
body.dark-mode .contact-form-wrapper,
body.dark-mode .contact-service-card,
body.dark-mode .contact-promise-box{
  background:#11162a;
  border-color:rgba(255,255,255,.07);
}

body.dark-mode .contact-info-card strong,
body.dark-mode .contact-working-box h4,
body.dark-mode .contact-service-card h3,
body.dark-mode .contact-form-header h3,
body.dark-mode .contact-field label{
  color:#fff;
}

body.dark-mode .contact-info-card span,
body.dark-mode .contact-intro,
body.dark-mode .contact-heading-center p,
body.dark-mode .promise-content > p,
body.dark-mode .contact-service-card p{
  color:#8e96ad;
}

body.dark-mode .contact-working-box{
  border-color:rgba(255,255,255,.08);
}

body.dark-mode .working-icon{
  background:#171c31;
}

body.dark-mode .working-row strong{
  color:#b7bdce;
}

body.dark-mode .contact-socials a{
  background:#11162a;
  border-color:rgba(255,255,255,.08);
}

body.dark-mode .contact-input input,
body.dark-mode .contact-input select,
body.dark-mode .contact-textarea textarea{
  background:#0c1020;
  color:#e9ebf4;
  border-color:rgba(255,255,255,.09);
}

body.dark-mode .contact-input input:focus,
body.dark-mode .contact-input select:focus,
body.dark-mode .contact-textarea textarea:focus{
  background:#0c1020;
}

body.dark-mode .contact-form-note{
  color:#70778d;
}

body.dark-mode .promise-list div{
  color:#aeb5ca;
}


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

@media(max-width:991px){

  .contact-main-grid{
    grid-template-columns:1fr;
    gap:55px;
  }

  .contact-info{
    max-width:700px;
  }

  .contact-promise-box{
    grid-template-columns:1fr;
    gap:30px;
  }

  .promise-visual{
    display:none;
  }

}


@media(max-width:767px){

  .contact-hero-content{
    padding:70px 0;
  }

  .contact-hero-content h1{
    letter-spacing:-1.5px;
  }

  .contact-hero-mini{
    flex-direction:column;
    gap:10px;
  }

  .contact-main-section,
  .contact-services-section,
  .contact-promise-section,
  .contact-final-cta{
    padding:75px 0;
  }

  .contact-form-wrapper{
    padding:25px 20px;
  }

  .contact-form-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .contact-services-grid{
    grid-template-columns:1fr;
  }

  .contact-promise-box{
    padding:35px 25px;
  }

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

}


@media(max-width:480px){

  .contact-hero-content h1{
    font-size:39px;
  }

  .contact-info-card{
    padding:14px;
  }

  .contact-info-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .contact-form-header{
    align-items:center;
  }

  .form-header-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .contact-form-header h3{
    font-size:21px;
  }

  .contact-service-card{
    grid-template-columns:45px 1fr 20px;
    gap:12px;
    padding:17px;
  }

  .service-card-icon{
    width:45px;
    height:45px;
  }

}


/* =========================
   FORM ERROR
========================= */

.contact-field.error input,
.contact-field.error select,
.contact-field.error textarea{
  border-color:#e85d75;
}

.contact-field.error::after{
  content:"Please fill this field";
  display:block;
  margin-top:4px;
  color:#e85d75;
  font-size:9px;
}