/* ==========================================================
   ACCOUNTING SERVICES
   Luxury Premium UI
   Part 1
==========================================================*/

/*==========================
Google Font
==========================*/

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

/*==========================
Root Variables
==========================*/

:root{

    --bg-1:#04111F;
    --bg-2:#071C2F;
    --bg-3:#0B3138;
    --bg-4:#0E5049;

    --primary:#00E4B8;
    --secondary:#00C8FF;

    --white:#ffffff;

    --text:#EAF6FF;
    --text-light:#B9C8D8;

    --glass:rgba(255,255,255,.06);

    --glass-border:rgba(255,255,255,.08);

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

    --radius:28px;

    --transition:.45s ease;

}


/*==========================
Reset
==========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:
    radial-gradient(circle at top left,#0D5D56 0%,transparent 35%),
    radial-gradient(circle at bottom right,#06254B 0%,transparent 35%),
    linear-gradient(135deg,var(--bg-1),var(--bg-2),var(--bg-3));

    color:var(--white);

    overflow-x:hidden;

    position:relative;

    min-height:100vh;

}


/*==========================
Selection
==========================*/

::selection{

    background:var(--primary);

    color:#000;

}


/*==========================
Scrollbar
==========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#07121D;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(var(--primary),var(--secondary));

    border-radius:50px;

}


/*==========================
Container
==========================*/

.container{

    width:min(1320px,92%);

    margin:auto;

    position:relative;

    z-index:5;

}


/*=================================================
Hero
=================================================*/

.accounting-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:120px 0;

}


/*=================================================
Hero Grid
=================================================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.45;

    animation:gridMove 25s linear infinite;

}


/*=================================================
Aurora Glow
=================================================*/

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.55;

    animation:floatGlow 12s ease-in-out infinite;

}

.glow-one{

    width:420px;

    height:420px;

    background:#00ffc6;

    top:-140px;

    left:-100px;

}

.glow-two{

    width:500px;

    height:500px;

    background:#00bfff;

    right:-180px;

    bottom:-180px;

}


/*=================================================
Floating Circles
=================================================*/

.hero-circle{

    position:absolute;

    border-radius:50%;

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

    backdrop-filter:blur(15px);

    animation:circleFloat 10s ease-in-out infinite;

}

.circle-one{

    width:180px;

    height:180px;

    left:7%;

    top:18%;

}

.circle-two{

    width:110px;

    height:110px;

    right:14%;

    top:12%;

    animation-delay:2s;

}

.circle-three{

    width:240px;

    height:240px;

    right:6%;

    bottom:8%;

    animation-delay:4s;

}


/*=================================================
Hero Layout
=================================================*/

.accounting-hero .container{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:90px;

}


/*=================================================
Animated Background Layer
=================================================*/

.accounting-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(120deg,

    rgba(0,255,198,.08),

    transparent,

    rgba(0,174,255,.08));

    animation:bgShift 14s linear infinite;

    mix-blend-mode:screen;

}

.accounting-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(255,255,255,.03),

    transparent 70%);

}


/*=================================================
Keyframes
=================================================*/

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(60px);

    }

}

@keyframes floatGlow{

    0%,100%{

        transform:translateY(0) scale(1);

    }

    50%{

        transform:translateY(-35px) scale(1.08);

    }

}

@keyframes circleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

}

@keyframes bgShift{

    0%{

        transform:translateX(-10%);

    }

    50%{

        transform:translateX(10%);

    }

    100%{

        transform:translateX(-10%);

    }

}

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

.hero-left{

    position: relative;
    z-index: 10;

}


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

.hero-badge{

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

    padding: 12px 22px;

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

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

    backdrop-filter: blur(18px);

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

    border-radius: 60px;

    color: var(--primary);

    font-size: .95rem;

    font-weight: 600;

    letter-spacing: .4px;

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

    margin-bottom: 30px;

    position: relative;

    overflow: hidden;

}

.hero-badge::before{

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.20),
        transparent
    );

    transform: translateX(-100%);

    animation: badgeShine 5s linear infinite;

}

.hero-badge::after{

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--primary);

    box-shadow:
    0 0 10px var(--primary),
    0 0 25px var(--primary);

}


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

.hero-left h1{

    font-size: clamp(3rem,6vw,5.5rem);

    line-height: 1.08;

    font-weight: 800;

    color: #fff;

    margin-bottom: 28px;

    letter-spacing: -.04em;

}

.hero-left h1 span{

    display: inline-block;

    background: linear-gradient(
        90deg,
        #00ffd5,
        #00cfff,
        #68ffb9
    );

    background-size: 300%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: gradientText 6s linear infinite;

    text-shadow:
    0 0 25px rgba(0,255,210,.35);

}


/*=========================================================
 PARAGRAPH
=========================================================*/

.hero-left p{

    max-width: 650px;

    color: var(--text-light);

    font-size: 1.08rem;

    line-height: 1.9;

    margin-bottom: 42px;

}


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

.hero-buttons{

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 55px;

}


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

.btn-primary{

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 17px 34px;

    border-radius: 60px;

    text-decoration: none;

    font-weight: 700;

    color: #021018;

    background: linear-gradient(
        135deg,
        var(--primary),
        #6affcf
    );

    overflow: hidden;

    transition: var(--transition);

    box-shadow:
    0 0 25px rgba(0,255,200,.30),
    0 15px 40px rgba(0,255,200,.18);

}

.btn-primary::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:translateX(-120%);

    transition:1s;

}

.btn-primary:hover::before{

    transform:translateX(120%);

}

.btn-primary:hover{

    transform:translateY(-8px);

    box-shadow:
    0 0 45px rgba(0,255,200,.45),
    0 25px 55px rgba(0,255,200,.25);

}


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

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    color:#fff;

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

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

    backdrop-filter:blur(16px);

    transition:var(--transition);

}

.btn-secondary:hover{

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

    border-color:var(--primary);

    color:var(--primary);

    transform:translateY(-8px);

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

}


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

.hero-stats{

    display:flex;

    gap:24px;

    flex-wrap:wrap;

}


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

.stat-card{

    position:relative;

    flex:1;

    min-width:170px;

    padding:28px;

    border-radius:24px;

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

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

    backdrop-filter:blur(22px);

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

    overflow:hidden;

    transition:var(--transition);

    box-shadow:0 18px 45px rgba(0,0,0,.22);

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,200,.08),
        transparent,
        rgba(0,180,255,.08)
    );

    opacity:0;

    transition:.5s;

}

.stat-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

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

    border-radius:50%;

    top:-80px;

    right:-80px;

}

.stat-card:hover{

    transform:
    translateY(-12px)
    rotateX(6deg);

    border-color:rgba(0,255,210,.35);

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

}

.stat-card:hover::before{

    opacity:1;

}

.stat-card h3{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:10px;

    font-weight:700;

}

.stat-card p{

    margin:0;

    color:var(--text-light);

    font-size:.95rem;

    line-height:1.6;

}


/*=========================================================
 ANIMATIONS
=========================================================*/

@keyframes badgeShine{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(220%);

    }

}

@keyframes gradientText{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}

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

.hero-right{

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 5;

}


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

.dashboard-card{

    position: relative;

    width: 100%;

    max-width: 540px;

    border-radius: 34px;

    padding: 28px;

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

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

    backdrop-filter: blur(28px);

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

    box-shadow:
    0 30px 80px rgba(0,0,0,.35),
    inset 0 1px rgba(255,255,255,.08);

    overflow: hidden;

    transform-style: preserve-3d;

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

}

.dashboard-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    135deg,
    rgba(0,255,200,.08),
    transparent,
    rgba(0,180,255,.08));

    pointer-events:none;

}

.dashboard-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    filter:blur(80px);

    top:-120px;

    right:-120px;

}


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

.dashboard-header{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

}

.dashboard-header span{

    width:14px;

    height:14px;

    border-radius:50%;

}

.dashboard-header span:nth-child(1){

    background:#ff5f57;

}

.dashboard-header span:nth-child(2){

    background:#febc2e;

}

.dashboard-header span:nth-child(3){

    background:#28c840;

}


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

.dashboard-content{

    position:relative;

    z-index:2;

}


/*=========================================================
 BALANCE BOX
=========================================================*/

.balance-box{

    position:relative;

    padding:26px;

    border-radius:24px;

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

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

    margin-bottom:28px;

    overflow:hidden;

}

.balance-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.12),
    transparent);

    animation:shineMove 4s linear infinite;

}

.balance-box small{

    display:block;

    color:var(--text-light);

    font-size:.9rem;

    margin-bottom:10px;

}

.balance-box h2{

    font-size:2.4rem;

    color:var(--primary);

    font-weight:700;

}


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

.graph-line{

    position:relative;

    height:140px;

    margin-bottom:30px;

    border-radius:20px;

    overflow:hidden;

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

    background-size:40px 40px;

}

.graph-line::before{

    content:"";

    position:absolute;

    left:0;

    bottom:35px;

    width:100%;

    height:4px;

    border-radius:20px;

    background:
    linear-gradient(90deg,
    transparent,
    #00ffd5,
    #00aaff,
    #00ffd5,
    transparent);

    animation:graphMove 3.8s ease-in-out infinite;

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

}

.graph-line::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#00ffd5;

    bottom:28px;

    left:0;

    box-shadow:
    0 0 25px #00ffd5;

    animation:graphDot 3.8s ease-in-out infinite;

}


/*=========================================================
 PROGRESS
=========================================================*/

.progress-box{

    margin-bottom:30px;

}

.progress-title{

    display:flex;

    justify-content:space-between;

    margin-bottom:12px;

    font-size:.95rem;

    color:#fff;

}

.progress-title span{

    color:var(--primary);

    font-weight:700;

}

.progress-bar{

    width:100%;

    height:14px;

    border-radius:30px;

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

    overflow:hidden;

}

.progress-bar span{

    display:block;

    width:98%;

    height:100%;

    border-radius:30px;

    background:
    linear-gradient(
    90deg,
    #00ffd5,
    #00aaff);

    background-size:250%;

    animation:
    progressFill 3s ease,
    progressGlow 5s linear infinite;

}


/*=========================================================
 MINI CARDS
=========================================================*/

.mini-cards{

    display:grid;

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

    gap:18px;

}

.mini-card{

    padding:22px;

    border-radius:20px;

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

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

    transition:.45s;

}

.mini-card:hover{

    transform:translateY(-10px);

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

    box-shadow:
    0 18px 35px rgba(0,255,200,.15);

}

.mini-card h4{

    color:var(--text-light);

    font-size:.95rem;

    margin-bottom:12px;

    font-weight:500;

}

.mini-card strong{

    font-size:1.6rem;

    color:var(--primary);

}

/*=========================================================
 FLOATING 3D CUBES
=========================================================*/

.floating-cube{

    position:absolute;

    border-radius:18px;

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

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

    backdrop-filter:blur(20px);

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

    box-shadow:
    0 20px 45px rgba(0,0,0,.30),
    inset 0 1px rgba(255,255,255,.08);

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

    transform-style:preserve-3d;

}

.cube-one{

    width:90px;
    height:90px;

    top:8%;
    right:8%;

    animation-delay:0s;

}

.cube-two{

    width:65px;
    height:65px;

    bottom:18%;
    left:52%;

    animation-delay:2s;

}

.cube-three{

    width:120px;
    height:120px;

    right:18%;
    bottom:5%;

    animation-delay:4s;

}


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

.dashboard-card{

    transition:
    transform .55s ease,
    box-shadow .55s ease;

}

.dashboard-card:hover{

    transform:
    perspective(1400px)
    rotateX(6deg)
    rotateY(-6deg)
    translateY(-12px);

    box-shadow:
    0 40px 90px rgba(0,0,0,.45),
    0 0 50px rgba(0,255,200,.15);

}


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

@keyframes dashboardFloat{

    0%,100%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-16px);

    }

}

@keyframes cubeFloat{

    0%{

        transform:
        translateY(0)
        rotate(0deg);

    }

    50%{

        transform:
        translateY(-25px)
        rotate(180deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(360deg);

    }

}

@keyframes shineMove{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(220%);

    }

}

@keyframes graphMove{

    0%{

        transform:scaleX(.25);

        transform-origin:left;

    }

    50%{

        transform:scaleX(1);

    }

    100%{

        transform:scaleX(.25);

        transform-origin:right;

    }

}

@keyframes graphDot{

    0%{

        left:0;

    }

    50%{

        left:96%;

    }

    100%{

        left:0;

    }

}

@keyframes progressFill{

    from{

        width:0;

    }

    to{

        width:98%;

    }

}

@keyframes progressGlow{

    0%{

        background-position:0%;

    }

    100%{

        background-position:250%;

    }

}


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

@media(max-width:1200px){

    .accounting-hero .container{

        gap:60px;

    }

}

@media(max-width:992px){

    .accounting-hero{

        padding:100px 0;

    }

    .accounting-hero .container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-left p{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-right{

        margin-top:60px;

    }

    .cube-two{

        left:10%;

    }

}

@media(max-width:768px){

    .accounting-hero{

        min-height:auto;

        padding:80px 0;

    }

    .hero-left h1{

        font-size:2.8rem;

    }

    .hero-left p{

        font-size:1rem;

    }

    .dashboard-card{

        padding:22px;

    }

    .balance-box h2{

        font-size:2rem;

    }

    .mini-cards{

        grid-template-columns:1fr;

    }

    .hero-stats{

        gap:16px;

    }

    .stat-card{

        min-width:100%;

    }

    .hero-circle{

        display:none;

    }

}

@media(max-width:576px){

    .hero-badge{

        font-size:.8rem;

        padding:10px 18px;

    }

    .hero-left h1{

        font-size:2.2rem;

        line-height:1.2;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

    }

    .dashboard-card{

        border-radius:24px;

        padding:18px;

    }

    .graph-line{

        height:110px;

    }

    .balance-box{

        padding:20px;

    }

    .floating-cube{

        display:none;

    }

}

/*=========================================================
 TRUSTED BUSINESS SECTION
=========================================================*/

.trusted-business-section{

    position: relative;

    padding: 130px 0;

    overflow: hidden;

}


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

.section-glow{

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .20;

    pointer-events: none;

}

.glow-left{

    top: -120px;

    left: -150px;

    background: #00ffc8;

}

.glow-right{

    right: -180px;

    bottom: -150px;

    background: #00aaff;

}


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

.section-heading{

    position: relative;

    z-index: 2;

    max-width: 820px;

    margin: auto;

    text-align: center;

    margin-bottom: 70px;

}

.section-heading .section-badge{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 24px;

    margin-bottom: 24px;

    border-radius: 50px;

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

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

    color: var(--primary);

    font-weight: 600;

    backdrop-filter: blur(18px);

}

.section-heading h2{

    font-size: clamp(2.3rem,5vw,4rem);

    line-height: 1.15;

    font-weight: 800;

    margin-bottom: 22px;

    color: #fff;

}

.section-heading h2 span{

    background: linear-gradient(
    90deg,
    #00ffd5,
    #00bfff,
    #63ffc7);

    background-size: 300%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: gradientText 6s linear infinite;

}

.section-heading p{

    font-size: 1.05rem;

    color: var(--text-light);

    line-height: 1.9;

}


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

.trust-stats{

    display: grid;

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

    gap: 28px;

    margin-bottom: 80px;

}

.trust-card{

    position: relative;

    padding: 35px 20px;

    text-align: center;

    border-radius: 26px;

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

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

    backdrop-filter: blur(22px);

    overflow: hidden;

    transition: .45s;

}

.trust-card::before{

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
    135deg,
    rgba(0,255,210,.08),
    transparent,
    rgba(0,170,255,.08));

    opacity: 0;

    transition: .45s;

}

.trust-card::after{

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

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

    top: -90px;

    right: -90px;

}

.trust-card:hover{

    transform: translateY(-12px);

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

    box-shadow:
    0 25px 45px rgba(0,0,0,.35),
    0 0 30px rgba(0,255,200,.15);

}

.trust-card:hover::before{

    opacity: 1;

}

.trust-card h3{

    position: relative;

    z-index: 2;

    font-size: 2.2rem;

    color: var(--primary);

    margin-bottom: 10px;

    font-weight: 700;

}

.trust-card p{

    position: relative;

    z-index: 2;

    color: var(--text-light);

    font-size: .95rem;

    line-height: 1.7;

}


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

.logo-slider{

    position: relative;

    overflow: hidden;

    margin-bottom: 90px;

    padding: 18px 0;

    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 10%,
        #000 90%,
        transparent
    );

}

.logo-track{

    display: flex;

    align-items: center;

    width: max-content;

    gap: 35px;

    animation: logoMarquee 30s linear infinite;

}

.logo-slider:hover .logo-track{

    animation-play-state: paused;

}

.logo-item{

    width: 190px;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

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

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

    backdrop-filter: blur(18px);

    transition: .45s;

}

.logo-item:hover{

    transform: translateY(-8px);

    border-color: rgba(0,255,200,.25);

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

}

.logo-item img{

    max-width: 110px;

    max-height: 48px;

    object-fit: contain;

    opacity: .75;

    filter: grayscale(100%);

    transition: .45s;

}

.logo-item:hover img{

    filter: grayscale(0);

    opacity: 1;

    transform: scale(1.08);

}


/*=========================================================
 KEYFRAME
=========================================================*/

@keyframes logoMarquee{

    from{

        transform: translateX(0);

    }

    to{

        transform: translateX(-50%);

    }

}

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

.trust-badges{

    display:grid;

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

    gap:30px;

    position:relative;

    z-index:2;

}


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

.badge-card{

    position:relative;

    padding:38px 30px;

    text-align:center;

    border-radius:28px;

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

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

    backdrop-filter:blur(22px);

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

    overflow:hidden;

    transition:all .45s ease;

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

}

.badge-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,210,.08),
    transparent,
    rgba(0,170,255,.08));

    opacity:0;

    transition:.45s;

}

.badge-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    top:-120px;

    right:-120px;

}

.badge-card:hover{

    transform:
    translateY(-12px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
    0 30px 55px rgba(0,0,0,.35),
    0 0 40px rgba(0,255,210,.12);

}

.badge-card:hover::before{

    opacity:1;

}


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

.badge-icon{

    width:82px;

    height:82px;

    margin:auto auto 26px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,210,.18),
    rgba(0,170,255,.12));

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

    position:relative;

    z-index:2;

    transition:.45s;

}

.badge-icon i{

    font-size:2rem;

    color:var(--primary);

    transition:.45s;

}

.badge-card:hover .badge-icon{

    transform:
    rotate(10deg)
    scale(1.08);

    box-shadow:
    0 0 30px rgba(0,255,210,.22);

}

.badge-card:hover .badge-icon i{

    transform:scale(1.15);

}


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

.badge-card h4{

    position:relative;

    z-index:2;

    font-size:1.35rem;

    font-weight:700;

    color:#fff;

    margin-bottom:16px;

}

.badge-card p{

    position:relative;

    z-index:2;

    color:var(--text-light);

    line-height:1.8;

    font-size:.97rem;

}


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

.trust-card:nth-child(1){

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

}

.trust-card:nth-child(2){

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

    animation-delay:.8s;

}

.trust-card:nth-child(3){

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

    animation-delay:1.6s;

}

.trust-card:nth-child(4){

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

    animation-delay:2.4s;

}

.badge-card:nth-child(2){

    margin-top:22px;

}

.badge-card:nth-child(3){

    margin-top:44px;

}


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

@keyframes trustFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}


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

@media(max-width:1200px){

    .trust-stats{

        gap:22px;

    }

    .trust-badges{

        gap:22px;

    }

}

@media(max-width:992px){

    .trust-stats{

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

    }

    .trust-badges{

        grid-template-columns:1fr;

    }

    .badge-card:nth-child(2),
    .badge-card:nth-child(3){

        margin-top:0;

    }

}

@media(max-width:768px){

    .trusted-business-section{

        padding:90px 0;

    }

    .section-heading{

        margin-bottom:55px;

    }

    .trust-stats{

        grid-template-columns:1fr;

    }

    .logo-item{

        width:160px;

        height:90px;

    }

    .logo-item img{

        max-width:95px;

    }

    .badge-card{

        padding:30px 24px;

    }

}

@media(max-width:576px){

    .section-heading h2{

        font-size:2rem;

    }

    .section-heading p{

        font-size:.95rem;

    }

    .section-heading .section-badge{

        padding:10px 18px;

        font-size:.85rem;

    }

    .logo-track{

        gap:22px;

    }

    .logo-item{

        width:140px;

        height:80px;

    }

    .badge-icon{

        width:68px;

        height:68px;

    }

    .badge-icon i{

        font-size:1.6rem;

    }

}

/*=========================================================
  ACCOUNTING SERVICES SECTION
=========================================================*/

.accounting-services-section{

    position: relative;

    padding: 130px 0;

    overflow: hidden;

}


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

.services-glow{

    position: absolute;

    width: 480px;

    height: 480px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: .18;

    pointer-events: none;

}

.services-glow.glow-left{

    top: -180px;

    left: -180px;

    background: #00ffc8;

}

.services-glow.glow-right{

    bottom: -180px;

    right: -180px;

    background: #00aaff;

}


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

.services-grid{

    display: grid;

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

    gap: 35px;

    margin-top: 70px;

    position: relative;

    z-index: 2;

}


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

.service-card{

    position: relative;

    padding: 35px;

    border-radius: 30px;

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

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

    backdrop-filter: blur(24px);

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

    overflow: hidden;

    transition: all .45s ease;

    box-shadow:
    0 20px 45px rgba(0,0,0,.28);

    transform-style: preserve-3d;

}

.service-card::before{

    content: "";

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,210,.08),
    transparent,
    rgba(0,170,255,.08));

    opacity: 0;

    transition: .45s;

}

.service-card::after{

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    border-radius: 50%;

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

    top: -130px;

    right: -130px;

}


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

.service-card.featured{

    border-color: rgba(0,255,210,.35);

    transform: translateY(-20px);

    box-shadow:
    0 35px 70px rgba(0,255,210,.12),
    0 25px 55px rgba(0,0,0,.35);

}

.popular-tag{

    position: absolute;

    top: 22px;

    right: -38px;

    padding: 10px 50px;

    background: linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color: #04111F;

    font-size: .8rem;

    font-weight: 700;

    transform: rotate(45deg);

    letter-spacing: .5px;

    box-shadow:
    0 10px 30px rgba(0,255,210,.30);

}


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

.service-icon{

    position: relative;

    width: 90px;

    height: 90px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,210,.18),
    rgba(0,170,255,.12));

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

    transition: .45s;

    z-index: 2;

}

.service-icon::before{

    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

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

    animation: servicePulse 3s linear infinite;

}

.service-icon i{

    font-size: 2.2rem;

    color: var(--primary);

    transition: .45s;

}


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

.service-card h3{

    position: relative;

    z-index: 2;

    font-size: 1.55rem;

    color: #fff;

    margin-bottom: 18px;

    font-weight: 700;

}

.service-card p{

    position: relative;

    z-index: 2;

    color: var(--text-light);

    line-height: 1.9;

    margin-bottom: 25px;

}

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

.service-card ul{

    list-style:none;

    margin:0 0 30px;

    padding:0;

    position:relative;

    z-index:2;

}

.service-card ul li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--text-light);

    margin-bottom:14px;

    font-size:.96rem;

    transition:.35s ease;

}

.service-card ul li::before{

    content:"✓";

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#04111F;

    font-size:.75rem;

    font-weight:700;

    flex-shrink:0;

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

}

.service-card:hover ul li{

    color:#fff;

    transform:translateX(4px);

}


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

.service-card a{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--primary);

    font-weight:600;

    transition:.35s ease;

}

.service-card a i{

    transition:.35s ease;

}

.service-card:hover a{

    color:#fff;

}

.service-card:hover a i{

    transform:translateX(8px);

}


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

.service-card:hover{

    transform:
        perspective(1200px)
        rotateX(6deg)
        rotateY(-6deg)
        translateY(-14px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 35px 70px rgba(0,0,0,.40),
        0 0 40px rgba(0,255,210,.15);

}

.service-card:hover::before{

    opacity:1;

}

.service-card:hover .service-icon{

    transform:
        scale(1.08)
        rotate(10deg);

    box-shadow:
        0 0 35px rgba(0,255,210,.22);

}

.service-card:hover .service-icon i{

    transform:scale(1.12);

}


/*=========================================================
 FEATURED CARD EXTRA GLOW
=========================================================*/

.service-card.featured::after{

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

    filter:blur(8px);

}


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

@keyframes servicePulse{

    0%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.15);

        opacity:.25;

    }

    100%{

        transform:scale(1);

        opacity:.8;

    }

}


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

@media(max-width:1200px){

    .services-grid{

        gap:28px;

    }

}

@media(max-width:992px){

    .services-grid{

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

    }

    .service-card.featured{

        transform:none;

    }

}

@media(max-width:768px){

    .accounting-services-section{

        padding:90px 0;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .service-card{

        padding:30px;

    }

    .service-icon{

        width:78px;

        height:78px;

    }

    .service-icon i{

        font-size:1.9rem;

    }

}

@media(max-width:576px){

    .service-card{

        padding:24px;

        border-radius:22px;

    }

    .service-card h3{

        font-size:1.35rem;

    }

    .service-card p{

        font-size:.95rem;

    }

    .service-card ul li{

        font-size:.9rem;

    }

    .popular-tag{

        top:18px;

        right:-42px;

        padding:8px 48px;

        font-size:.68rem;

    }

}

/*=========================================================
 WHY CHOOSE SECTION
=========================================================*/

.why-choose-section{

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}


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

.why-bg-glow{

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    filter: blur(140px);

    opacity: .18;

    pointer-events: none;

}

.why-bg-glow.glow-one{

    top: -180px;

    left: -180px;

    background: #00ffd5;

}

.why-bg-glow.glow-two{

    right: -180px;

    bottom: -180px;

    background: #00aaff;

}


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

.why-grid{

    display: grid;

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

    grid-auto-rows: 220px;

    gap: 28px;

    margin-top: 70px;

    position: relative;

    z-index: 2;

}


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

.why-card{

    position: relative;

    padding: 35px;

    border-radius: 30px;

    overflow: hidden;

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

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

    backdrop-filter: blur(24px);

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

    transition: all .45s ease;

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

}

.why-card::before{

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08));

    opacity: 0;

    transition: .45s;

}

.why-card::after{

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

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

    top: -110px;

    right: -110px;

}


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

.large-card{

    grid-column: span 6;

    grid-row: span 2;

}

.wide-card{

    grid-column: span 6;

}

.stats-card{

    grid-column: span 3;

}

.map-card{

    grid-column: span 3;

}

.why-card:not(.large-card):not(.wide-card):not(.stats-card):not(.map-card){

    grid-column: span 3;

}


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

.card-icon{

    width: 82px;

    height: 82px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 28px;

    background:
        linear-gradient(
        135deg,
        rgba(0,255,210,.18),
        rgba(0,170,255,.12));

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

    position: relative;

    z-index: 2;

}

.card-icon::before{

    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

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

    animation: whyPulse 3s linear infinite;

}

.card-icon i{

    font-size: 2rem;

    color: var(--primary);

}


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

.why-card h3{

    position: relative;

    z-index: 2;

    font-size: 1.6rem;

    color: #fff;

    margin-bottom: 18px;

    font-weight: 700;

}

.why-card p{

    position: relative;

    z-index: 2;

    color: var(--text-light);

    line-height: 1.9;

}


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

.card-number{

    position: absolute;

    right: 35px;

    bottom: 28px;

    font-size: 4rem;

    font-weight: 800;

    line-height: 1;

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

    user-select: none;

}


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

.card-content{

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    height: 100%;

}

.support-circle{

    width: 120px;

    height: 120px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

    color: #04111F;

    font-size: 2rem;

    font-weight: 700;

    flex-shrink: 0;

    box-shadow:
        0 0 30px rgba(0,255,210,.25);

}

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

.stats-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.stats-card h4{

    color:#fff;

    font-size:1.2rem;

    margin-bottom:22px;

    font-weight:700;

}

.progress-circle{

    width:150px;

    height:150px;

    border-radius:50%;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:22px;

    background:
    conic-gradient(
        var(--primary) 0deg,
        var(--primary) 356deg,
        rgba(255,255,255,.08) 356deg);

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

}

.progress-circle::before{

    content:"";

    position:absolute;

    width:118px;

    height:118px;

    border-radius:50%;

    background:#071826;

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

}

.progress-circle span{

    position:relative;

    z-index:2;

    font-size:2rem;

    color:var(--primary);

    font-weight:700;

}


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

.map-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.india-map{

    margin-top:30px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    border-radius:18px;

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

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

}

.india-map i{

    font-size:2rem;

    color:var(--primary);

    animation:mapPulse 2.5s infinite;

}

.india-map span{

    color:#fff;

    font-weight:600;

}


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

.why-card:hover{

    transform:
    perspective(1400px)
    rotateX(6deg)
    rotateY(-6deg)
    translateY(-12px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
    0 35px 70px rgba(0,0,0,.40),
    0 0 40px rgba(0,255,210,.14);

}

.why-card:hover::before{

    opacity:1;

}

.why-card:hover .card-icon{

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

    box-shadow:
    0 0 35px rgba(0,255,210,.22);

}

.why-card:hover .card-icon i{

    transform:scale(1.12);

}

.why-card:hover .support-circle{

    transform:scale(1.06);

}


/*=========================================================
 ANIMATIONS
=========================================================*/

@keyframes whyPulse{

    0%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.15);

        opacity:.25;

    }

    100%{

        transform:scale(1);

        opacity:.8;

    }

}

@keyframes mapPulse{

    0%,100%{

        transform:scale(1);

        text-shadow:0 0 0 rgba(0,255,210,.25);

    }

    50%{

        transform:scale(1.15);

        text-shadow:0 0 20px rgba(0,255,210,.45);

    }

}


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

@media(max-width:1200px){

    .why-grid{

        gap:22px;

    }

}

@media(max-width:992px){

    .why-grid{

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

        grid-auto-rows:auto;

    }

    .large-card,
    .wide-card,
    .stats-card,
    .map-card,
    .why-card{

        grid-column:span 1;

        grid-row:auto;

    }

    .card-content{

        flex-direction:column;

        text-align:center;

    }

}

@media(max-width:768px){

    .why-choose-section{

        padding:90px 0;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .why-card{

        padding:28px;

    }

    .card-icon{

        width:72px;

        height:72px;

    }

    .card-icon i{

        font-size:1.7rem;

    }

    .progress-circle{

        width:130px;

        height:130px;

    }

    .progress-circle::before{

        width:102px;

        height:102px;

    }

}

@media(max-width:576px){

    .why-card{

        border-radius:22px;

        padding:24px;

    }

    .why-card h3{

        font-size:1.35rem;

    }

    .support-circle{

        width:90px;

        height:90px;

        font-size:1.4rem;

    }

    .card-number{

        font-size:3rem;

    }

    .india-map{

        padding:15px 18px;

    }

}

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

.process-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}


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

.process-glow{

    position:absolute;

    width:460px;

    height:460px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.18;

    pointer-events:none;

}

.process-glow.glow-left{

    top:-180px;

    left:-180px;

    background:#00ffd5;

}

.process-glow.glow-right{

    right:-180px;

    bottom:-180px;

    background:#00aaff;

}


/*=========================================================
  TIMELINE
=========================================================*/

.process-timeline{

    position:relative;

    margin-top:90px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:22px;

}


/*=========================================================
  CENTER LINE
=========================================================*/

.timeline-line{

    position:absolute;

    top:42px;

    left:5%;

    right:5%;

    height:4px;

    border-radius:30px;

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

    overflow:hidden;

}

.timeline-line::before{

    content:"";

    position:absolute;

    inset:0;

    width:35%;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:30px;

}


/*=========================================================
  STEP
=========================================================*/

.process-step{

    position:relative;

    flex:1;

    z-index:2;

    text-align:center;

}


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

.step-number{

    width:84px;

    height:84px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    font-weight:700;

    color:#04111F;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
        0 0 30px rgba(0,255,210,.25);

    position:relative;

}

.step-number::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

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

    animation:stepPulse 3s linear infinite;

}


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

.step-card{

    position:relative;

    padding:30px 25px;

    border-radius:28px;

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

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

    backdrop-filter:blur(22px);

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

    overflow:hidden;

    transition:.45s ease;

    min-height:290px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

}

.step-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

    opacity:0;

    transition:.45s;

}

.step-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

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

    top:-120px;

    right:-120px;

}


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

.step-card h3{

    position:relative;

    z-index:2;

    font-size:1.4rem;

    font-weight:700;

    color:#fff;

    margin:22px 0 16px;

}

.step-card p{

    position:relative;

    z-index:2;

    color:var(--text-light);

    line-height:1.9;

    font-size:.96rem;

}

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

.step-icon{

    position:relative;

    width:72px;

    height:72px;

    margin:0 auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.18),
        rgba(0,170,255,.12)
    );

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

    z-index:2;

    transition:all .45s ease;

}

.step-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

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

    animation:stepIconPulse 3s linear infinite;

}

.step-icon i{

    font-size:1.8rem;

    color:var(--primary);

    transition:all .45s ease;

}


/*=========================================================
 STEP CARD HOVER
=========================================================*/

.step-card:hover{

    transform:
        perspective(1200px)
        rotateX(6deg)
        rotateY(-6deg)
        translateY(-12px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 30px 65px rgba(0,0,0,.38),
        0 0 40px rgba(0,255,210,.16);

}

.step-card:hover::before{

    opacity:1;

}

.step-card:hover .step-icon{

    transform:
        rotate(10deg)
        scale(1.08);

    box-shadow:
        0 0 30px rgba(0,255,210,.22);

}

.step-card:hover .step-icon i{

    transform:scale(1.15);

}

.process-step:hover .step-number{

    transform:scale(1.08);

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

}


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

.timeline-line::before{

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

}


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

@keyframes stepPulse{

    0%,100%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.15);

        opacity:.2;

    }

}

@keyframes stepIconPulse{

    0%,100%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.18);

        opacity:.25;

    }

}

@keyframes timelineProgress{

    0%{

        width:0;

    }

    50%{

        width:100%;

    }

    100%{

        width:0;

    }

}


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

@media(max-width:1100px){

    .process-timeline{

        gap:18px;

    }

    .step-card{

        padding:26px 20px;

    }

}

@media(max-width:992px){

    .process-timeline{

        flex-direction:column;

        gap:35px;

        margin-top:70px;

    }

    .timeline-line{

        width:4px;

        height:100%;

        left:42px;

        top:0;

        right:auto;

    }

    .timeline-line::before{

        width:100%;

        height:35%;

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

    }

    .process-step{

        display:flex;

        align-items:flex-start;

        gap:25px;

        text-align:left;

    }

    .step-number{

        flex-shrink:0;

        margin:0;

    }

    .step-card{

        min-height:auto;

        width:100%;

    }

}

@media(max-width:768px){

    .process-section{

        padding:90px 0;

    }

    .process-step{

        gap:20px;

    }

    .step-number{

        width:70px;

        height:70px;

        font-size:1.2rem;

    }

    .step-icon{

        width:64px;

        height:64px;

    }

    .step-icon i{

        font-size:1.5rem;

    }

    .step-card{

        padding:24px;

        border-radius:22px;

    }

    .step-card h3{

        font-size:1.25rem;

    }

}

@media(max-width:576px){

    .process-step{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .timeline-line{

        display:none;

    }

    .step-number{

        margin-bottom:18px;

    }

    .step-card{

        width:100%;

    }

}

@keyframes timelineVertical{

    0%{

        height:0;

    }

    50%{

        height:100%;

    }

    100%{

        height:0;

    }

}

/*=========================================================
  BUSINESS PERFORMANCE DASHBOARD
=========================================================*/

.performance-dashboard-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}


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

.dashboard-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    filter:blur(150px);

    opacity:.18;

    pointer-events:none;

}

.dashboard-glow.glow-left{

    top:-220px;

    left:-180px;

    background:#00ffd5;

}

.dashboard-glow.glow-right{

    right:-220px;

    bottom:-220px;

    background:#008cff;

}


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

.performance-dashboard{

    display:grid;

    grid-template-columns:1.35fr .95fr;

    gap:35px;

    margin-top:80px;

    position:relative;

    z-index:2;

}


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

.overview-card{

    position:relative;

    padding:35px;

    border-radius:30px;

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

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

    backdrop-filter:blur(24px);

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

    overflow:hidden;

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

}

.overview-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08));

    opacity:.9;

}

.overview-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    top:-140px;

    right:-140px;

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

}


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

.overview-header{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.overview-header h3{

    color:#fff;

    font-size:1.7rem;

    font-weight:700;

}

.overview-header span{

    padding:10px 18px;

    border-radius:30px;

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

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

    color:var(--primary);

    font-size:.82rem;

    font-weight:600;

}


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

.analytics-chart{

    position:relative;

    z-index:2;

    height:280px;

    display:flex;

    align-items:flex-end;

}

.chart-bars{

    width:100%;

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:18px;

}

.chart-bars span{

    flex:1;

    border-radius:18px 18px 0 0;

    background:
        linear-gradient(
        180deg,
        var(--primary),
        var(--secondary));

    position:relative;

    animation:barFloat 3s ease-in-out infinite;

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

}

.chart-bars span:nth-child(2){

    animation-delay:.3s;

}

.chart-bars span:nth-child(3){

    animation-delay:.6s;

}

.chart-bars span:nth-child(4){

    animation-delay:.9s;

}

.chart-bars span:nth-child(5){

    animation-delay:1.2s;

}

.chart-bars span:nth-child(6){

    animation-delay:1.5s;

}

.chart-bars span:nth-child(7){

    animation-delay:1.8s;

}


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

.analytics-footer{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:20px;

    margin-top:35px;

}

.analytics-footer div{

    text-align:center;

    padding:20px;

    border-radius:18px;

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

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

}

.analytics-footer strong{

    display:block;

    color:#fff;

    font-size:1.6rem;

    margin-bottom:8px;

}

.analytics-footer small{

    color:var(--text-light);

}


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

.dashboard-metrics{

    display:grid;

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

    gap:24px;

}


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

.metric-card{

    position:relative;

    padding:30px;

    border-radius:26px;

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

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

    backdrop-filter:blur(20px);

    overflow:hidden;

    transition:.45s ease;

    text-align:center;

}

.metric-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08));

    opacity:0;

    transition:.4s;

}


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

.metric-icon{

    width:78px;

    height:78px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
        135deg,
        rgba(0,255,210,.18),
        rgba(0,170,255,.12));

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

    position:relative;

    z-index:2;

}

.metric-icon i{

    font-size:1.8rem;

    color:var(--primary);

}

.metric-card h3{

    position:relative;

    z-index:2;

    color:#fff;

    font-size:2rem;

    margin-bottom:10px;

    font-weight:700;

}

.metric-card p{

    position:relative;

    z-index:2;

    color:var(--text-light);

    line-height:1.7;

}

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

.kpi-wrapper{

    display:grid;

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

    gap:24px;

    margin-top:40px;

    position:relative;

    z-index:2;

}


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

.kpi-card{

    position:relative;

    padding:28px;

    border-radius:24px;

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

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

    backdrop-filter:blur(20px);

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

    overflow:hidden;

    transition:all .45s ease;

    box-shadow:
        0 18px 45px rgba(0,0,0,.25);

}

.kpi-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

    opacity:0;

    transition:.45s;

}

.kpi-card h4{

    position:relative;

    z-index:2;

    color:#fff;

    font-size:1.15rem;

    margin-bottom:18px;

    font-weight:600;

}


/*=========================================================
 KPI PROGRESS
=========================================================*/

.kpi-progress{

    position:relative;

    width:100%;

    height:10px;

    border-radius:30px;

    overflow:hidden;

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

    margin-bottom:18px;

}

.kpi-progress span{

    position:absolute;

    left:0;

    top:0;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
        0 0 18px rgba(0,255,210,.28);

    animation:kpiGlow 3s ease-in-out infinite;

}

.kpi-card strong{

    position:relative;

    z-index:2;

    display:block;

    color:var(--primary);

    font-size:1.8rem;

    font-weight:700;

}


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

.metric-card:hover,
.kpi-card:hover,
.overview-card:hover{

    transform:
        perspective(1200px)
        rotateX(5deg)
        rotateY(-5deg)
        translateY(-12px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 35px 70px rgba(0,0,0,.40),
        0 0 40px rgba(0,255,210,.15);

}

.metric-card:hover::before,
.kpi-card:hover::before{

    opacity:1;

}

.metric-card:hover .metric-icon{

    transform:
        scale(1.08)
        rotate(10deg);

    box-shadow:
        0 0 30px rgba(0,255,210,.22);

}

.metric-card:hover .metric-icon i{

    transform:scale(1.15);

}


/*=========================================================
 ANIMATIONS
=========================================================*/

@keyframes barFloat{

    0%,100%{

        transform:scaleY(1);

    }

    50%{

        transform:scaleY(1.08);

    }

}

@keyframes kpiGlow{

    0%,100%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.35);

    }

}


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

@media(max-width:1200px){

    .performance-dashboard{

        gap:28px;

    }

    .kpi-wrapper{

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

    }

}

@media(max-width:992px){

    .performance-dashboard{

        grid-template-columns:1fr;

    }

    .dashboard-metrics{

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

    }

}

@media(max-width:768px){

    .performance-dashboard-section{

        padding:90px 0;

    }

    .dashboard-metrics{

        grid-template-columns:1fr;

    }

    .analytics-footer{

        grid-template-columns:1fr;

    }

    .overview-card{

        padding:28px;

    }

    .metric-card{

        padding:26px;

    }

    .kpi-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .overview-header{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }

    .analytics-chart{

        height:220px;

    }

    .chart-bars{

        gap:10px;

    }

    .metric-icon{

        width:68px;

        height:68px;

    }

    .metric-icon i{

        font-size:1.5rem;

    }

    .metric-card h3{

        font-size:1.7rem;

    }

    .kpi-card{

        padding:22px;

        border-radius:20px;

    }

    .kpi-card strong{

        font-size:1.55rem;

    }

}

/*=========================================================
  CLIENT SUCCESS SECTION
=========================================================*/

.client-success-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}


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

.testimonial-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    filter:blur(150px);

    opacity:.18;

    pointer-events:none;

}

.testimonial-glow.glow-left{

    top:-220px;

    left:-180px;

    background:#00ffd5;

}

.testimonial-glow.glow-right{

    right:-220px;

    bottom:-220px;

    background:#009dff;

}


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

.testimonial-showcase{

    position:relative;

    display:grid;

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

    gap:35px;

    align-items:center;

    margin-top:80px;

    z-index:2;

}


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

.testimonial-card{

    position:relative;

    padding:35px;

    border-radius:30px;

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

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

    backdrop-filter:blur(24px);

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

    overflow:hidden;

    transition:all .45s ease;

    box-shadow:
        0 22px 55px rgba(0,0,0,.30);

}

.testimonial-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

    opacity:0;

    transition:.45s;

}

.testimonial-card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    top:-120px;

    right:-120px;

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

}


/*=========================================================
  SIDE CARDS
=========================================================*/

.side-card{

    opacity:.75;

    transform:scale(.92);

    filter:blur(.3px);

}

.left-card{

    transform:
        perspective(1200px)
        rotateY(10deg)
        scale(.92);

}

.right-card{

    transform:
        perspective(1200px)
        rotateY(-10deg)
        scale(.92);

}


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

.featured-testimonial{

    transform:scale(1.05);

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

    box-shadow:
        0 35px 80px rgba(0,255,210,.12),
        0 25px 65px rgba(0,0,0,.38);

    z-index:5;

}


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

.growth-badge{

    position:absolute;

    top:22px;

    right:22px;

    padding:10px 18px;

    border-radius:40px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#04111F;

    font-size:.82rem;

    font-weight:700;

    box-shadow:
        0 0 25px rgba(0,255,210,.30);

}


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

.quote-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.18),
        rgba(0,170,255,.12)
    );

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

    position:relative;

    z-index:2;

}

.quote-icon i{

    font-size:1.8rem;

    color:var(--primary);

}


/*=========================================================
  RATING
=========================================================*/

.rating{

    display:flex;

    gap:8px;

    margin-bottom:25px;

    position:relative;

    z-index:2;

}

.rating i{

    color:#FFD54A;

    font-size:1rem;

}


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

.testimonial-card p{

    position:relative;

    z-index:2;

    color:var(--text-light);

    line-height:1.9;

    font-size:1rem;

    margin-bottom:30px;

}


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

.client-info{

    display:flex;

    align-items:center;

    gap:16px;

    position:relative;

    z-index:2;

}

.client-info img{

    width:64px;

    height:64px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(0,255,210,.25);

}

.client-info h4{

    color:#fff;

    font-size:1.1rem;

    margin-bottom:6px;

    font-weight:700;

}

.client-info span{

    color:var(--text-light);

    font-size:.9rem;

}


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

.testimonial-achievements{

    display:grid;

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

    gap:25px;

    margin-top:70px;

}

.achievement-card{

    padding:28px;

    text-align:center;

    border-radius:24px;

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

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

    backdrop-filter:blur(20px);

}

.achievement-card h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:10px;

    font-weight:700;

}

.achievement-card p{

    color:var(--text-light);

    margin:0;

}

/*=========================================================
  CARD HOVER EFFECTS
=========================================================*/

.testimonial-card:hover{

    transform:
        perspective(1400px)
        rotateX(5deg)
        rotateY(-5deg)
        translateY(-14px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 35px 75px rgba(0,0,0,.42),
        0 0 40px rgba(0,255,210,.18);

}

.testimonial-card:hover::before{

    opacity:1;

}

.featured-testimonial:hover{

    transform:
        perspective(1400px)
        rotateX(4deg)
        rotateY(-4deg)
        scale(1.08)
        translateY(-14px);

}


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

.client-info img{

    transition:all .45s ease;

}

.testimonial-card:hover .client-info img{

    transform:scale(1.08);

    box-shadow:
        0 0 25px rgba(0,255,210,.30);

}


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

.quote-icon{

    transition:all .45s ease;

}

.testimonial-card:hover .quote-icon{

    transform:
        rotate(10deg)
        scale(1.08);

    box-shadow:
        0 0 35px rgba(0,255,210,.22);

}


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

.rating i{

    animation:starGlow 2.4s ease-in-out infinite;

}

.rating i:nth-child(2){

    animation-delay:.15s;

}

.rating i:nth-child(3){

    animation-delay:.30s;

}

.rating i:nth-child(4){

    animation-delay:.45s;

}

.rating i:nth-child(5){

    animation-delay:.60s;

}


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

.growth-badge{

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

}


/*=========================================================
  SIDE FLOATING
=========================================================*/

.left-card{

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

}

.right-card{

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

    animation-delay:1.2s;

}

.featured-testimonial{

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

}


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

.achievement-card{

    transition:all .45s ease;

    position:relative;

    overflow:hidden;

}

.achievement-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

    opacity:0;

    transition:.45s;

}

.achievement-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,255,210,.25);

    box-shadow:
        0 22px 50px rgba(0,0,0,.35),
        0 0 30px rgba(0,255,210,.15);

}

.achievement-card:hover::before{

    opacity:1;

}


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

@keyframes leftFloat{

    0%,100%{

        transform:
            perspective(1200px)
            rotateY(10deg)
            translateY(0)
            scale(.92);

    }

    50%{

        transform:
            perspective(1200px)
            rotateY(10deg)
            translateY(-12px)
            scale(.94);

    }

}

@keyframes rightFloat{

    0%,100%{

        transform:
            perspective(1200px)
            rotateY(-10deg)
            translateY(0)
            scale(.92);

    }

    50%{

        transform:
            perspective(1200px)
            rotateY(-10deg)
            translateY(-12px)
            scale(.94);

    }

}

@keyframes centerFloat{

    0%,100%{

        transform:scale(1.05);

    }

    50%{

        transform:
            scale(1.08)
            translateY(-10px);

    }

}

@keyframes badgeFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

@keyframes starGlow{

    0%,100%{

        transform:scale(1);

        filter:brightness(1);

    }

    50%{

        transform:scale(1.2);

        filter:brightness(1.5);

    }

}


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

@media(max-width:1200px){

    .testimonial-showcase{

        gap:25px;

    }

}

@media(max-width:992px){

    .testimonial-showcase{

        grid-template-columns:1fr;

    }

    .side-card,
    .left-card,
    .right-card,
    .featured-testimonial{

        transform:none;

        opacity:1;

        animation:none;

    }

    .featured-testimonial{

        order:-1;

    }

    .testimonial-achievements{

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

    }

}

@media(max-width:768px){

    .client-success-section{

        padding:90px 0;

    }

    .testimonial-card{

        padding:28px;

        border-radius:24px;

    }

    .growth-badge{

        position:static;

        display:inline-block;

        margin-bottom:20px;

    }

    .testimonial-achievements{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .quote-icon{

        width:60px;

        height:60px;

    }

    .quote-icon i{

        font-size:1.5rem;

    }

    .client-info{

        flex-direction:column;

        text-align:center;

    }

    .testimonial-card{

        padding:24px;

    }

    .achievement-card{

        padding:22px;

    }

    .achievement-card h3{

        font-size:1.7rem;

    }

}

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

.industries-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}


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

.industries-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    filter:blur(150px);

    opacity:.18;

    pointer-events:none;

}

.industries-glow.glow-left{

    top:-220px;

    left:-180px;

    background:#00ffd5;

}

.industries-glow.glow-right{

    right:-220px;

    bottom:-220px;

    background:#008cff;

}


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

.industries-grid{

    position:relative;

    display:grid;

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

    gap:28px;

    margin-top:80px;

    z-index:2;

}


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

.industry-card{

    position:relative;

    padding:35px 30px;

    text-align:center;

    border-radius:30px;

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

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

    backdrop-filter:blur(22px);

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

    overflow:hidden;

    transition:all .45s ease;

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

}

.industry-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

    opacity:0;

    transition:.45s;

}

.industry-card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    top:-130px;

    right:-130px;

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

}


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

.industry-icon{

    position:relative;

    width:82px;

    height:82px;

    margin:0 auto 28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.18),
        rgba(0,170,255,.12)
    );

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

    z-index:2;

    transition:all .45s ease;

}

.industry-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

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

}

.industry-icon i{

    font-size:2rem;

    color:var(--primary);

    transition:all .45s ease;

}


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

.industry-card h3{

    position:relative;

    z-index:2;

    color:#fff;

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:16px;

}

.industry-card p{

    position:relative;

    z-index:2;

    color:var(--text-light);

    line-height:1.8;

    font-size:.95rem;

}


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

.industry-card span{

    position:absolute;

    top:20px;

    left:22px;

    font-size:3rem;

    font-weight:800;

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

    z-index:1;

    user-select:none;

}

/*=========================================================
  CARD HOVER EFFECT
=========================================================*/

.industry-card:hover{

    transform:
        perspective(1400px)
        rotateX(6deg)
        rotateY(-6deg)
        translateY(-14px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 35px 75px rgba(0,0,0,.42),
        0 0 40px rgba(0,255,210,.18);

}

.industry-card:hover::before{

    opacity:1;

}


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

.industry-card:hover .industry-icon{

    transform:
        rotate(12deg)
        scale(1.08);

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

}

.industry-card:hover .industry-icon::before{

    animation:industryPulse 2s linear infinite;

}

.industry-card:hover .industry-icon i{

    transform:scale(1.15);

}


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

.industry-card h3{

    transition:all .35s ease;

}

.industry-card:hover h3{

    color:var(--primary);

}


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

.industry-card span{

    transition:all .45s ease;

}

.industry-card:hover span{

    transform:scale(1.08);

    color:rgba(0,255,210,.08);

}


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

.industry-card{

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

}

.industry-card:nth-child(2){

    animation-delay:.35s;

}

.industry-card:nth-child(3){

    animation-delay:.7s;

}

.industry-card:nth-child(4){

    animation-delay:1.05s;

}

.industry-card:nth-child(5){

    animation-delay:1.4s;

}

.industry-card:nth-child(6){

    animation-delay:1.75s;

}

.industry-card:nth-child(7){

    animation-delay:2.1s;

}

.industry-card:nth-child(8){

    animation-delay:2.45s;

}


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

@keyframes industryPulse{

    0%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.18);

        opacity:.2;

    }

    100%{

        transform:scale(1);

        opacity:.8;

    }

}


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

@keyframes industryFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}


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

@media(max-width:1200px){

    .industries-grid{

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

        gap:24px;

    }

}

@media(max-width:992px){

    .industries-grid{

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

    }

}

@media(max-width:768px){

    .industries-section{

        padding:90px 0;

    }

    .industries-grid{

        gap:20px;

    }

    .industry-card{

        padding:28px 24px;

        border-radius:24px;

    }

    .industry-icon{

        width:72px;

        height:72px;

        margin-bottom:22px;

    }

    .industry-icon i{

        font-size:1.7rem;

    }

    .industry-card h3{

        font-size:1.2rem;

    }

}

@media(max-width:576px){

    .industries-grid{

        grid-template-columns:1fr;

    }

    .industry-card{

        padding:24px;

    }

    .industry-icon{

        width:66px;

        height:66px;

    }

    .industry-icon i{

        font-size:1.5rem;

    }

    .industry-card span{

        font-size:2.4rem;

    }

}

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

.faq-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}


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

.faq-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    filter:blur(150px);

    opacity:.18;

    pointer-events:none;

}

.faq-glow.glow-left{

    top:-220px;

    left:-180px;

    background:#00ffd5;

}

.faq-glow.glow-right{

    right:-220px;

    bottom:-220px;

    background:#008cff;

}


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

.faq-wrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:45px;

    margin-top:80px;

    position:relative;

    z-index:2;

}


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

.faq-highlight{

    position:sticky;

    top:120px;

    padding:38px;

    border-radius:30px;

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

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

    backdrop-filter:blur(24px);

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

    overflow:hidden;

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

}

.faq-highlight::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

}

.highlight-icon{

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    margin-bottom:28px;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.18),
        rgba(0,170,255,.14)
    );

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

    position:relative;

    z-index:2;

}

.highlight-icon i{

    font-size:2rem;

    color:var(--primary);

}

.faq-highlight h3{

    position:relative;

    z-index:2;

    color:#fff;

    font-size:1.7rem;

    margin-bottom:18px;

    font-weight:700;

}

.faq-highlight p{

    position:relative;

    z-index:2;

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:28px;

}

.faq-highlight ul{

    position:relative;

    z-index:2;

    list-style:none;

    margin:0;

    padding:0;

}

.faq-highlight li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#fff;

    font-weight:500;

}

.faq-highlight li:last-child{

    margin-bottom:0;

}

.faq-highlight li i{

    color:var(--primary);

    font-size:1rem;

}


/*=========================================================
  ACCORDION
=========================================================*/

.faq-accordion{

    display:flex;

    flex-direction:column;

    gap:22px;

}


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

.faq-item{

    position:relative;

    border-radius:24px;

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

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

    backdrop-filter:blur(22px);

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

    overflow:hidden;

    transition:all .4s ease;

}

.faq-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

    opacity:0;

    transition:.4s;

}


/*=========================================================
  QUESTION
=========================================================*/

.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:28px 30px;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

    position:relative;

    z-index:2;

}

.faq-question span{

    color:#fff;

    font-size:1.12rem;

    font-weight:600;

    line-height:1.6;

}

.faq-question i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--primary);

    font-size:1rem;

    flex-shrink:0;

}


/*=========================================================
  ANSWER
=========================================================*/

.faq-answer{

    display:none;

    padding:0 30px 28px;

    position:relative;

    z-index:2;

}

.faq-answer p{

    color:var(--text-light);

    line-height:1.9;

    margin:0;

}

/*=========================================================
  ACTIVE FAQ ITEM
=========================================================*/

.faq-item.active{

    border-color:rgba(0,255,210,.28);

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

}

.faq-item.active::before{

    opacity:1;

}

.faq-item.active .faq-answer{

    display:block;

    animation:faqFade .35s ease;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#04111F;

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

}


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

.faq-item:hover{

    transform:
        perspective(1200px)
        rotateX(3deg)
        translateY(-8px);

    border-color:rgba(0,255,210,.22);

}

.faq-item:hover::before{

    opacity:1;

}

.faq-question i{

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

}

.highlight-icon{

    transition:all .45s ease;

}

.faq-highlight:hover .highlight-icon{

    transform:
        rotate(10deg)
        scale(1.08);

    box-shadow:
        0 0 30px rgba(0,255,210,.25);

}

.faq-highlight{

    transition:all .45s ease;

}

.faq-highlight:hover{

    transform:
        perspective(1200px)
        rotateY(-4deg)
        translateY(-10px);

    border-color:rgba(0,255,210,.25);

    box-shadow:
        0 30px 70px rgba(0,0,0,.38),
        0 0 40px rgba(0,255,210,.15);

}


/*=========================================================
  LIST ICON ANIMATION
=========================================================*/

.faq-highlight li i{

    animation:checkPulse 2.5s ease-in-out infinite;

}

.faq-highlight li:nth-child(2) i{

    animation-delay:.25s;

}

.faq-highlight li:nth-child(3) i{

    animation-delay:.5s;

}

.faq-highlight li:nth-child(4) i{

    animation-delay:.75s;

}


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

@keyframes faqFade{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes checkPulse{

    0%,100%{

        transform:scale(1);

        opacity:.9;

    }

    50%{

        transform:scale(1.2);

        opacity:1;

    }

}


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

@media(max-width:1200px){

    .faq-wrapper{

        grid-template-columns:360px 1fr;

        gap:32px;

    }

}

@media(max-width:992px){

    .faq-wrapper{

        grid-template-columns:1fr;

    }

    .faq-highlight{

        position:relative;

        top:0;

    }

}

@media(max-width:768px){

    .faq-section{

        padding:90px 0;

    }

    .faq-highlight{

        padding:30px;

        border-radius:24px;

    }

    .faq-question{

        padding:24px;

    }

    .faq-answer{

        padding:0 24px 24px;

    }

    .faq-question span{

        font-size:1.02rem;

    }

}

@media(max-width:576px){

    .highlight-icon{

        width:68px;

        height:68px;

    }

    .highlight-icon i{

        font-size:1.6rem;

    }

    .faq-highlight h3{

        font-size:1.45rem;

    }

    .faq-question{

        padding:20px;

        gap:14px;

    }

    .faq-answer{

        padding:0 20px 20px;

    }

    .faq-question i{

        width:38px;

        height:38px;

        font-size:.9rem;

    }

}

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

.consultation-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}


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

.consultation-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    filter:blur(150px);

    opacity:.18;

    pointer-events:none;

}

.consultation-glow.glow-left{

    top:-220px;

    left:-180px;

    background:#00ffd5;

}

.consultation-glow.glow-right{

    right:-220px;

    bottom:-220px;

    background:#008cff;

}


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

.consultation-wrapper{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:60px;

    align-items:center;

    margin-top:80px;

    position:relative;

    z-index:2;

}


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

.consultation-content h2{

    margin:24px 0;

}

.consultation-content p{

    color:var(--text-light);

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:40px;

}


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

.consultation-features{

    display:grid;

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

    gap:18px;

    margin-bottom:45px;

}

.consultation-feature{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

    border-radius:18px;

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

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

    backdrop-filter:blur(16px);

}

.consultation-feature i{

    color:var(--primary);

    font-size:1.1rem;

}

.consultation-feature span{

    color:#fff;

    font-weight:500;

}


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

.consultation-trust{

    display:grid;

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

    gap:20px;

}

.trust-box{

    padding:25px;

    text-align:center;

    border-radius:22px;

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

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

    backdrop-filter:blur(18px);

    transition:.4s ease;

}

.trust-box h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:10px;

    font-weight:700;

}

.trust-box span{

    color:var(--text-light);

    font-size:.95rem;

}


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

.consultation-form-card{

    position:relative;

    padding:40px;

    border-radius:32px;

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

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

    backdrop-filter:blur(24px);

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

    overflow:hidden;

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

}

.consultation-form-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

}


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

.form-header{

    position:relative;

    z-index:2;

    margin-bottom:30px;

}

.form-header h3{

    color:#fff;

    font-size:1.8rem;

    margin-bottom:10px;

    font-weight:700;

}

.form-header p{

    color:var(--text-light);

}


/*=========================================================
  FORM
=========================================================*/

.consultation-form{

    position:relative;

    z-index:2;

}

.form-group{

    margin-bottom:20px;

}


/*=========================================================
  INPUTS
=========================================================*/

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:18px 20px;

    border-radius:16px;

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

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

    color:#fff;

    font-size:.95rem;

    outline:none;

    transition:.35s ease;

    backdrop-filter:blur(10px);

}

.form-group textarea{

    resize:vertical;

    min-height:150px;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

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

}

.form-group select{

    cursor:pointer;

}

.form-group select option{

    background:#081b2d;

    color:#fff;

}


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

.consultation-btn{

    width:100%;

    justify-content:center;

    margin-top:10px;

}

/*=========================================================
  FORM CARD HOVER
=========================================================*/

.consultation-form-card{

    transition:all .45s ease;

}

.consultation-form-card:hover{

    transform:
        perspective(1400px)
        rotateX(4deg)
        rotateY(-4deg)
        translateY(-12px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 35px 80px rgba(0,0,0,.42),
        0 0 40px rgba(0,255,210,.18);

}


/*=========================================================
  FEATURE CARD HOVER
=========================================================*/

.consultation-feature{

    transition:all .4s ease;

}

.consultation-feature:hover{

    transform:translateY(-8px);

    border-color:rgba(0,255,210,.25);

    box-shadow:
        0 20px 45px rgba(0,0,0,.30),
        0 0 25px rgba(0,255,210,.15);

}

.consultation-feature:hover i{

    transform:scale(1.15);

}

.consultation-feature i{

    transition:all .35s ease;

}


/*=========================================================
  TRUST BOX HOVER
=========================================================*/

.trust-box{

    position:relative;

    overflow:hidden;

}

.trust-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,170,255,.08)
    );

    opacity:0;

    transition:.4s;

}

.trust-box:hover{

    transform:translateY(-10px);

    border-color:rgba(0,255,210,.25);

    box-shadow:
        0 24px 50px rgba(0,0,0,.34),
        0 0 30px rgba(0,255,210,.15);

}

.trust-box:hover::before{

    opacity:1;

}


/*=========================================================
  INPUT FOCUS
=========================================================*/

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:rgba(0,255,210,.35);

    box-shadow:
        0 0 0 4px rgba(0,255,210,.08),
        0 0 25px rgba(0,255,210,.12);

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

}


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

.consultation-btn{

    position:relative;

    overflow:hidden;

    transition:all .45s ease;

}

.consultation-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

}

.consultation-btn:hover::before{

    animation:buttonShine .8s ease;

}

.consultation-btn:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 45px rgba(0,255,210,.25);

}

.consultation-btn i{

    transition:transform .35s ease;

}

.consultation-btn:hover i{

    transform:translateX(8px);

}


/*=========================================================
  FLOATING ANIMATIONS
=========================================================*/

.consultation-form-card{

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

}

.trust-box:nth-child(1){

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

}

.trust-box:nth-child(2){

    animation:trustFloat 5s ease-in-out infinite .4s;

}

.trust-box:nth-child(3){

    animation:trustFloat 5s ease-in-out infinite .8s;

}


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

@keyframes formFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes trustFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes buttonShine{

    0%{

        left:-120%;

    }

    100%{

        left:130%;

    }

}


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

@media(max-width:1200px){

    .consultation-wrapper{

        gap:40px;

    }

}

@media(max-width:992px){

    .consultation-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .consultation-section{

        padding:90px 0;

    }

    .consultation-features{

        grid-template-columns:1fr;

    }

    .consultation-trust{

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

        gap:16px;

    }

    .consultation-form-card{

        padding:30px;

        border-radius:26px;

    }

}

@media(max-width:576px){

    .consultation-trust{

        grid-template-columns:1fr;

    }

    .trust-box{

        padding:22px;

    }

    .consultation-form-card{

        padding:24px;

    }

    .form-header h3{

        font-size:1.5rem;

    }

    .form-group input,
    .form-group select,
    .form-group textarea{

        padding:16px 18px;

    }

    .consultation-feature{

        padding:16px;

    }

}

/*=========================================
PREMIUM CONSULT BUTTON
=========================================*/

.premium-consult-btn{

    position:relative;

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    font-size:1.05rem;

    font-weight:700;

    letter-spacing:.4px;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #00D084 0%,
        #00E5B0 35%,
        #00B8FF 100%
    );

    box-shadow:
        0 12px 35px rgba(0,208,132,.28),
        inset 0 1px 1px rgba(255,255,255,.18);

    transition:.45s ease;

}


/* Shine */

.premium-consult-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70px;

    height:100%;

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

    transform:skewX(-25deg);

}

.premium-consult-btn:hover::before{

    animation:consultShine .8s linear;

}


/* Glow */

.premium-consult-btn::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

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

}


/* Text */

.premium-consult-btn span{

    position:relative;

    z-index:2;

}


/* Icon */

.premium-consult-btn i{

    position:relative;

    z-index:2;

    transition:.35s;

}


/* Hover */

.premium-consult-btn:hover{

    transform:
        translateY(-5px)
        scale(1.02);

    box-shadow:
        0 18px 50px rgba(0,208,132,.42),
        0 0 35px rgba(0,184,255,.28);

}

.premium-consult-btn:hover i{

    transform:translateX(8px);

}


/* Click */

.premium-consult-btn:active{

    transform:scale(.98);

}


/* Animation */

@keyframes consultShine{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}

/*=========================================================
  CONTACT LOCATION SECTION
=========================================================*/

.contact-location-section{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}


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

.contact-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    filter:blur(150px);

    opacity:.18;

    pointer-events:none;

}

.contact-glow.glow-left{

    top:-220px;

    left:-180px;

    background:#00ffd5;

}

.contact-glow.glow-right{

    right:-220px;

    bottom:-220px;

    background:#0095ff;

}


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

.contact-layout{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:45px;

    margin-top:80px;

    position:relative;

    z-index:2;

}


/*=========================================================
  CONTACT DETAILS
=========================================================*/

.contact-details{

    display:flex;

    flex-direction:column;

    gap:22px;

}


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

.contact-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:28px;

    border-radius:28px;

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

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

    backdrop-filter:blur(22px);

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

    overflow:hidden;

    transition:.45s ease;

    box-shadow:
        0 18px 50px rgba(0,0,0,.28);

}

.contact-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,149,255,.08)
    );

    opacity:0;

    transition:.4s;

}


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

.contact-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.18),
        rgba(0,149,255,.14)
    );

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

    position:relative;

    z-index:2;

}

.contact-icon i{

    color:var(--primary);

    font-size:1.8rem;

}


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

.contact-card h3{

    position:relative;

    z-index:2;

    color:#fff;

    font-size:1.25rem;

    margin-bottom:10px;

    font-weight:700;

}

.contact-card p{

    position:relative;

    z-index:2;

    color:var(--text-light);

    line-height:1.9;

    margin:0;

}


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

.office-trust-card{

    position:relative;

    padding:35px;

    border-radius:30px;

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

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

    backdrop-filter:blur(24px);

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

    overflow:hidden;

    box-shadow:
        0 22px 55px rgba(0,0,0,.32);

}

.office-trust-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,149,255,.08)
    );

}

.office-trust-card h3{

    position:relative;

    z-index:2;

    color:#fff;

    margin-bottom:24px;

    font-size:1.5rem;

}

.office-trust-card ul{

    position:relative;

    z-index:2;

    list-style:none;

    margin:0;

    padding:0;

}

.office-trust-card li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    color:#fff;

}

.office-trust-card li:last-child{

    margin-bottom:0;

}

.office-trust-card li i{

    color:var(--primary);

}


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

.map-wrapper{

    position:relative;

    padding:35px;

    border-radius:32px;

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

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

    backdrop-filter:blur(24px);

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

    overflow:hidden;

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

}

.map-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,149,255,.08)
    );

}


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

.map-header{

    position:relative;

    z-index:2;

    margin-bottom:25px;

}

.map-header h3{

    color:#fff;

    font-size:1.8rem;

    margin-bottom:8px;

}

.map-header span{

    color:var(--text-light);

}


/*=========================================================
  MAP BOX
=========================================================*/

.map-box{

    position:relative;

    z-index:2;

    border-radius:24px;

    overflow:hidden;

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

}

.map-box iframe{

    width:100%;

    height:480px;

    border:none;

    display:block;

}


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

.map-footer{

    position:relative;

    z-index:2;

    margin-top:28px;

    display:grid;

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

    gap:18px;

}

.map-info{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px;

    border-radius:18px;

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

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

}

.map-info i{

    color:var(--primary);

}

.map-info span{

    color:#fff;

    font-size:.92rem;

}

/*=========================================================
  CONTACT CARD HOVER
=========================================================*/

.contact-card:hover{

    transform:
        perspective(1400px)
        rotateY(-5deg)
        translateY(-10px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 30px 70px rgba(0,0,0,.38),
        0 0 35px rgba(0,255,210,.15);

}

.contact-card:hover::before{

    opacity:1;

}

.contact-icon{

    transition:all .45s ease;

}

.contact-card:hover .contact-icon{

    transform:
        rotate(10deg)
        scale(1.08);

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

}

.contact-icon i{

    transition:all .35s ease;

}

.contact-card:hover .contact-icon i{

    transform:scale(1.15);

}


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

.office-trust-card{

    transition:all .45s ease;

}

.office-trust-card:hover{

    transform:
        perspective(1400px)
        rotateY(-4deg)
        translateY(-12px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 35px 80px rgba(0,0,0,.40),
        0 0 40px rgba(0,255,210,.18);

}

.office-trust-card li i{

    animation:trustCheck 2.5s ease-in-out infinite;

}

.office-trust-card li:nth-child(2) i{

    animation-delay:.25s;

}

.office-trust-card li:nth-child(3) i{

    animation-delay:.5s;

}

.office-trust-card li:nth-child(4) i{

    animation-delay:.75s;

}


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

.map-wrapper{

    transition:all .45s ease;

}

.map-wrapper:hover{

    transform:
        perspective(1400px)
        rotateY(4deg)
        translateY(-12px);

    border-color:rgba(0,255,210,.28);

    box-shadow:
        0 35px 80px rgba(0,0,0,.42),
        0 0 40px rgba(0,255,210,.18);

}


/*=========================================================
  MAP
=========================================================*/

.map-box{

    transition:all .4s ease;

}

.map-wrapper:hover .map-box{

    box-shadow:
        0 0 35px rgba(0,255,210,.15);

}

.map-box iframe{

    transition:transform .6s ease;

}

.map-wrapper:hover iframe{

    transform:scale(1.02);

}


/*=========================================================
  MAP INFO
=========================================================*/

.map-info{

    transition:all .4s ease;

    position:relative;

    overflow:hidden;

}

.map-info::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,255,210,.08),
        transparent,
        rgba(0,149,255,.08)
    );

    opacity:0;

    transition:.4s;

}

.map-info:hover{

    transform:translateY(-8px);

    border-color:rgba(0,255,210,.25);

    box-shadow:
        0 20px 45px rgba(0,0,0,.30),
        0 0 25px rgba(0,255,210,.15);

}

.map-info:hover::before{

    opacity:1;

}

.map-info:hover i{

    transform:scale(1.15);

}

.map-info i{

    transition:all .35s ease;

}


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

.contact-card{

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

}

.contact-card:nth-child(2){

    animation-delay:.35s;

}

.contact-card:nth-child(3){

    animation-delay:.7s;

}

.contact-card:nth-child(4){

    animation-delay:1.05s;

}

.office-trust-card{

    animation:trustFloat 6s ease-in-out infinite 1.4s;

}


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

@keyframes contactFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes trustFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes trustCheck{

    0%,100%{

        transform:scale(1);

        opacity:.9;

    }

    50%{

        transform:scale(1.2);

        opacity:1;

    }

}


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

@media(max-width:1200px){

    .contact-layout{

        grid-template-columns:360px 1fr;

        gap:35px;

    }

}

@media(max-width:992px){

    .contact-layout{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contact-location-section{

        padding:90px 0;

    }

    .map-wrapper{

        padding:28px;

        border-radius:24px;

    }

    .map-footer{

        grid-template-columns:1fr;

    }

    .map-box iframe{

        height:360px;

    }

}

@media(max-width:576px){

    .contact-card{

        padding:22px;

        gap:16px;

    }

    .contact-icon{

        width:60px;

        height:60px;

        min-width:60px;

    }

    .contact-icon i{

        font-size:1.5rem;

    }

    .office-trust-card{

        padding:28px;

    }

    .map-wrapper{

        padding:22px;

    }

    .map-header h3{

        font-size:1.5rem;

    }

    .map-box iframe{

        height:300px;

    }

    .map-info{

        justify-content:flex-start;

        padding:16px;

    }

}

/* Scroll Progress */

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    height:3px;

    width:0;

    z-index:99999;

    background:linear-gradient(
        90deg,
        #00ffd5,
        #00aaff
    );

    box-shadow:
        0 0 15px #00ffd5;

}

/* Cursor */

.cursor-dot{

    position:fixed;

    width:8px;

    height:8px;

    background:#00ffd5;

    border-radius:50%;

    pointer-events:none;

    z-index:99999;

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

}

.cursor-outline{

    position:fixed;

    width:34px;

    height:34px;

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

    border-radius:50%;

    pointer-events:none;

    z-index:99998;

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

    transition:width .2s,height .2s;

}

.mouse-glow{

    position:fixed;

    width:380px;

    height:380px;

    border-radius:50%;

    pointer-events:none;

    filter:blur(90px);

    background:radial-gradient(

        rgba(0,255,210,.18),

        transparent 70%

    );

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

    z-index:-1;

}

.page-loading{

    overflow:hidden;

}

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

.reveal-element{

    opacity:0;

    transform:
        translateY(80px)
        scale(.95);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal-element.revealed{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

}



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

.nav-links a.active{

    color:var(--primary);

}

.nav-links a.active::after{

    width:100%;

}



/*=========================================
TILT PERFORMANCE
=========================================*/

.service-card,

.feature-card,

.industry-card,

.contact-card,

.testimonial-card,

.trust-box{

    transform-style:preserve-3d;

    will-change:transform;

}



/*=========================================
FLOATING SHAPES
=========================================*/

.floating-shape{

    position:absolute;

    pointer-events:none;

    will-change:transform;

}

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

.premium-btn,

.premium-consult-btn{

    position:relative;

    overflow:hidden;

}

.btn-ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

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

    animation:ripple .65s linear;

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}



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

.premium-btn,

.premium-consult-btn{

    transition:

        transform .25s ease,

        box-shadow .35s ease;

}



/*=========================================
COUNTER
=========================================*/

[data-count]{

    display:inline-block;

    min-width:40px;

}



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

.faq-answer{

    overflow:hidden;

}



/*=========================================
CURSOR
=========================================*/

.cursor-outline{

    transition:

        width .25s,

        height .25s,

        border-color .25s;

}

/*=========================================
BACK TO TOP
=========================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:999;

    color:#fff;

    background:linear-gradient(
        135deg,
        #00D084,
        #00B7FF
    );

    box-shadow:
        0 12px 30px rgba(0,208,132,.30);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0,208,132,.45);

}



/*=========================================
INPUT ERROR
=========================================*/

.input-error{

    border-color:#ff4b5c !important;

    box-shadow:

        0 0 0 4px

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

}



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

.premium-btn.success,

.premium-consult-btn.success{

    background:linear-gradient(

        135deg,

        #00C26F,

        #00E5A4

    );

}



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

.animations-ready{

    overflow-x:hidden;

}

/*=========================================
MAP BOX
=========================================*/

.map-box{

    position:relative;

    overflow:hidden;

    border-radius:24px;

}


/*=========================================
MAP
=========================================*/

.map-box iframe{

    width:100%;

    height:420px;

    border:none;

    display:block;

}


/*=========================================
CLICKABLE MAP
=========================================*/

.map-overlay{

    position:absolute;

    inset:0;

    z-index:2;

}


/*=========================================
GOOGLE MAP BUTTON
=========================================*/

.map-link{

    position:absolute;

    left:25px;

    bottom:25px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    border-radius:14px;

    background:rgba(8,20,35,.75);

    backdrop-filter:blur(18px);

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

    transition:.35s;

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

}

.map-link i{

    color:#00ffd5;

}

.map-link:hover{

    transform:translateY(-4px);

    background:linear-gradient(

        135deg,

        #00D084,

        #00B8FF

    );

    color:#fff;

    box-shadow:

        0 20px 40px rgba(0,208,132,.35);

}