/*==================================================
        InfluencePro v1.0
        Premium Influencer Marketing Website
    ==================================================*/

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

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

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

    :root{

        /* Brand Colors */

        --primary:#0074A0;
        --secondary:#00C2FF;
        --accent:#FF7A00;

        /* Background */

        --bg:#F7FAFC;
        --white:#ffffff;

        /* Text */

        --heading:#0F172A;
        --text:#64748B;

        /* Border */

        --border:#E2E8F0;

        /* Status */

        --success:#22C55E;
        --danger:#EF4444;
        --warning:#F59E0B;

        /* Radius */

        --radius-sm:12px;
        --radius-md:20px;
        --radius-lg:30px;
        --radius-xl:40px;
        --radius-pill:999px;

        /* Shadows */

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

        --shadow-md:0 18px 40px rgba(15,23,42,.08);

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

        /* Transition */

        --transition:.35s ease;

    }

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

    *{

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

    }

    html{

        scroll-behavior:smooth;

    }

    body{

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

        background:var(--bg);

        color:var(--heading);

        overflow-x:hidden;

        -webkit-font-smoothing:antialiased;

    }

    img{

        max-width:100%;

        display:block;

    }

    a{

        text-decoration:none;

        color:inherit;

    }

    ul{

        list-style:none;

        margin:0;

        padding:0;

    }

    button{

        border:none;

        background:none;

        cursor:pointer;

    }

    section{

        position:relative;

    }

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

    .container{

        max-width:1320px;

    }

    /*=========================================
    Typography
    =========================================*/

    h1,h2,h3,h4,h5,h6{

        color:var(--heading);

        font-weight:800;

        margin:0;

    }

    p{

        color:var(--text);

        line-height:1.8;

        margin:0;

    }

    /*=========================================
    Buttons
    =========================================*/

    .imp-btn{

        display:inline-flex;

        align-items:center;

        justify-content:center;

        gap:10px;

        height:40px;

        padding:0 14px;

        border-radius:999px;

        color:#fff;

        font-weight:700;

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

        transition:var(--transition);

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

    }

    .imp-btn:hover{

        transform:translateY(-4px);

        color:#fff;

    }

    .imp-btn-outline{

        display:inline-flex;

        align-items:center;

        justify-content:center;

        gap:10px;

        height:58px;

        padding:0 34px;

        border-radius:999px;

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

        background:#fff;

        font-weight:700;

        transition:var(--transition);

    }

    .imp-btn-outline:hover{

        border-color:var(--primary);

        color:var(--primary);

        transform:translateY(-4px);

    }

    /*=========================================
    Glass Card
    =========================================*/

    .imp-glass{

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

        backdrop-filter:blur(18px);

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

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

    }

    /*=========================================
    Utility Classes
    =========================================*/

    .imp-section{

        padding:120px 0;

    }

    .imp-title{

        font-size:54px;

        line-height:1.15;

    }

    .imp-subtitle{

        font-size:18px;

        max-width:700px;

        margin:auto;

    }

    .text-gradient{

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

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;

    }

    .shadow-lg{

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

    }

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

    ::-webkit-scrollbar{

        width:10px;

    }

    ::-webkit-scrollbar-track{

        background:#EDF2F7;

    }

    ::-webkit-scrollbar-thumb{

        background:var(--primary);

        border-radius:20px;

    }

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

    ::selection{

        background:var(--primary);

        color:#fff;

    }










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

    .imp-loader{

        position:fixed;

        inset:0;

        background:#ffffff;

        z-index:999999;

        display:flex;

        justify-content:center;

        align-items:center;

        transition:1s;

    }

    /* Hide */

    .imp-loader.hide{

        opacity:0;

        visibility:hidden;

    }

    /* Wrapper */

    .imp-loader-wrapper{

        width:360px;

        text-align:center;

    }

    /* Logo */

    .imp-loader-logo{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:18px;

        margin-bottom:35px;

    }

    /* Icon */

    .imp-loader-icon{

        width:72px;

        height:72px;

        border-radius:22px;

        display:flex;

        justify-content:center;

        align-items:center;

        color:#fff;

        font-size:30px;

        background:linear-gradient(
            135deg,
            #0074A0,
            #00C2FF
        );

        animation:loaderRotate 2s linear infinite;

    }

    /* Logo */

    .imp-loader-logo h2{

        font-size:38px;

        font-weight:800;

        color:#111827;

    }

    .imp-loader-logo span{

        color:#0074A0;

    }

    /* Text */

    .imp-loader-text{

        color:#64748B;

        margin-bottom:25px;

    }

    /* Progress */

    .imp-loader-progress{

        width:100%;

        height:8px;

        border-radius:30px;

        background:#EEF2FF;

        overflow:hidden;

    }

    .imp-loader-progress span{

        display:block;

        width:0;

        height:100%;

        border-radius:30px;

        background:linear-gradient(
            90deg,
            #0074A0,
            #00C2FF
        );

        animation:loaderProgress 2.2s ease forwards;

    }

    /*====================================
    Animations
    =====================================*/

    @keyframes loaderRotate{

        from{

            transform:rotate(0deg);

        }

        to{

            transform:rotate(360deg);

        }

    }

    @keyframes loaderProgress{

        from{

            width:0;

        }

        to{

            width:100%;

        }

    }

    /*====================================
    Responsive
    =====================================*/

    @media(max-width:576px){

        .imp-loader-wrapper{

            width:90%;

        }

        .imp-loader-logo h2{

            font-size:30px;

        }

        .imp-loader-icon{

            width:60px;

            height:60px;

            font-size:24px;

        }

    }










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

    #imp-header{

        position:fixed;

        top:48px;

        left:0;

        width:100%;

        z-index:999;

        padding:20px 0;

        transition:.4s;

    }

    body.imp-scroll #imp-header{

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

        backdrop-filter:blur(20px);

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

        padding:14px 0;
        top:0;

    }

    .imp-navbar{

        display:flex;

        justify-content:space-between;

        align-items:center;
        padding: 5px ;

    }

    /* Logo */

    .imp-logo{

        display:flex;

        align-items:center;

        gap:14px;
        width: 10%;

    }

    .imp-logo-icon{

        width:52px;

        height:52px;

        border-radius:16px;

        display:flex;

        justify-content:center;

        align-items:center;

        background:linear-gradient(135deg,#0074A0,#00C2FF);

        color:#fff;

        font-size:20px;

    }

    .imp-logo-text{

        font-size:30px;

        font-weight:800;

        color:#111827;

    }

    .imp-logo-text span{

        color:#0074A0;

    }
    .imp-logo img{


    background-color: #0074A0;
    border-radius: 10px;
    }

    /* Menu */

    .imp-menu{

        display:flex;

        align-items:center;

        gap:20px;

    }

    .imp-menu li{

        list-style:none;

    }

    .imp-menu a{

        position:relative;

        font-weight:600;

        color:#111827;

        transition:.3s;

    }

    .imp-menu a::after{

        content:"";

        position:absolute;

        left:0;

        bottom:-8px;

        width:0;

        height:3px;

        border-radius:30px;

        background:#0074A0;

        transition:.3s;

    }

    .imp-menu a:hover,

    .imp-menu a.active{

        color:#0074A0;

    }

    .imp-menu a:hover::after,

    .imp-menu a.active::after{

        width:100%;

    }



    /* Right */

    .imp-nav-right{

        display:flex;

        align-items:center;

        gap:18px;

    }

    .imp-search{

        width:50px;

        height:50px;

        border-radius:50%;

        background:#fff;

        border:1px solid #E5E7EB;

        transition:.3s;

    }

    .imp-search:hover{

        background:#0074A0;

        color:#fff;

    }

    /* Toggle */

    .imp-toggle{

        display:none;

        width:48px;

        height:48px;

        flex-direction:column;

        justify-content:center;

        gap:6px;

    }

    .imp-toggle span{

        width:28px;

        height:3px;

        border-radius:30px;

        background:#111827;

        transition:.3s;

    }

    /* Mobile */

    .imp-mobile-menu{

        position:fixed;

        top:0;

        right:-100%;

        width:320px;

        height:100vh;

        background:#fff;

        box-shadow:-10px 0 40px rgba(0,0,0,.08);

        padding:120px 30px;

        transition:.4s;

        z-index:998;

    }

    .imp-mobile-menu.active{

        right:0;

    }

    

    .imp-mobile-menu a{

        font-size:18px;

        font-weight:600;

    }

    @media(max-width:992px){

        .imp-menu{

            display:none;

        }

        .imp-search{

            display:none;

        }

        .imp-toggle{

            display:flex;

        }

    }



















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

    #hero{
        position: relative;
        overflow: hidden;
        padding: 0px 0 30px;
        background: linear-gradient(180deg,#ffffff 0%,#f6fbff 100%);
    }

    /*==============================
    Background Glow
    ==============================*/

    #hero::before{
        content:"";
        position:absolute;
        width:650px;
        height:650px;
        right:-250px;
        top:-220px;
        border-radius:50%;
        background:#DBEAFE;
        filter:blur(120px);
        opacity:.75;
    }

    #hero::after{
        content:"";
        position:absolute;
        width:520px;
        height:520px;
        left:-180px;
        bottom:-180px;
        border-radius:50%;
        background:#CFFAFE;
        filter:blur(110px);
        opacity:.65;
    }

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

    .hero-left{
        position:relative;
        z-index:5;
    }

    /*==============================
    Badge
    ==============================*/

    .hero-badge{

        display:inline-flex;

        align-items:center;

        gap:12px;

        padding:12px 22px;

        border-radius:999px;

        background:#EFF6FF;

        border:1px solid #DBEAFE;

        color:#0074A0;

        font-size:14px;

        font-weight:700;

        margin-bottom:28px;

    }

    .hero-badge-dot{

        width:10px;

        height:10px;

        border-radius:50%;

        background:#22C55E;

        animation:pulse 2s infinite;

    }

    @keyframes pulse{

        0%{

            transform:scale(1);

        }

        50%{

            transform:scale(1.5);

        }

        100%{

            transform:scale(1);

        }

    }

    /*==============================
    Heading
    ==============================*/

    .hero-title{

        /* font-size:76px; */

        font-weight:800;

        line-height:1.05;

        letter-spacing:-2px;

        color:#111827;

        margin-bottom:28px;

    }

    .hero-title span{

        display:block;

        margin-top:8px;

        background:linear-gradient(
            90deg,
            #0074A0,
            #00C2FF
        );

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;

        background-clip:text;

    }

    /*==============================
    Paragraph
    ==============================*/

    .hero-text{

        max-width:580px;

        font-size:18px;

        line-height:34px;

        color:#6B7280;

        margin-bottom:px;

    }

    /*==============================
    Buttons
    ==============================*/

    .hero-buttons{

        display:flex;

        align-items:center;

        gap:18px;

        flex-wrap:wrap;

        /* margin-bottom:55px; */

    }

    /*==============================
    Stats
    ==============================*/

    .hero-stats{

        display:flex;

        gap:50px;

        margin-bottom:55px;

    }

    .hero-stat{

        display:flex;

        flex-direction:column;

    }

    .hero-stat h3{

        font-size:42px;

        font-weight:800;

        color:#111827;

        margin-bottom:5px;

    }

    .hero-stat span{

        color:#64748B;

        font-size:15px;

    }

    /*==============================
    Trusted Brands
    ==============================*/

    .hero-brands{

        margin-top:10px;

    }

    .hero-brands p{

        color:#64748B;

        font-weight:600;

        margin-bottom:22px;

    }

    .brand-logos{

        display:flex;

        align-items:center;

        gap:38px;

        flex-wrap:wrap;

        width: 100%;

    }

    .brand-logos img{

        height:38px;

        /* opacity:.6; */

        transition:.35s;

        /* filter:grayscale(100%); */

    }

    .brand-logos img:hover{

        opacity:1;

        filter:grayscale(0);

        transform:translateY(-4px);

    }

    /*==============================
    Hero Right Base
    ==============================*/

    .hero-right{

        position:relative;

        min-height:760px;

    }

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

    .hero-glow{

        position:absolute;

        border-radius:50%;

        filter:blur(80px);

    }

    .hero-glow-one{

        width:260px;

        height:260px;

        background:#DBEAFE;

        top:40px;

        right:40px;

    }

    .hero-glow-two{

        width:180px;

        height:180px;

        background:#CFFAFE;

        bottom:40px;

        left:40px;

    }






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

    /*==================================
    Video Card
    ==================================*/

    .hero-video-card{

        position:absolute;

        top:20px;

        right:0;

        width:520px;

        height:310px;

        border-radius:34px;

        overflow:hidden;

        background:#fff;

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

        backdrop-filter:blur(20px);

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

        z-index:3;

    }

    .hero-video-card::before{

        content:"";

        position:absolute;

        inset:0;

        background:linear-gradient(
            to top,
            rgba(0,0,0,.25),
            transparent
        );

        z-index:2;

    }

    .hero-video-card video{

        width:100%;

        height:100%;

        object-fit:cover;

    }

    /*==================================
    Creator Image
    ==================================*/

    .hero-image-card{

        position:absolute;

        left:40px;

        bottom:0;

        width:360px;

        border-radius:30px;

        overflow:hidden;

        background:#fff;

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

        z-index:4;

    }

    .hero-image-card img{

        width:100%;

        display:block;

        object-fit:cover;

    }

    /*==================================
    Floating Cards
    ==================================*/

    .hero-card{

        position:absolute;

        display:flex;

        align-items:center;

        gap:16px;

        min-width:230px;

        padding:18px;

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

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

        backdrop-filter:blur(18px);

        border-radius:24px;

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

        transition:.35s;

        z-index:6;

    }

    .hero-card:hover{

        transform:translateY(-8px);

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

    }

    /*==================================
    Card Icon
    ==================================*/

    .hero-card-icon{

        width:58px;

        height:58px;

        display:flex;

        justify-content:center;

        align-items:center;

        border-radius:18px;

        font-size:22px;

        color:#fff;

        background:linear-gradient(
            135deg,
            #0074A0,
            #00C2FF
        );

        flex-shrink:0;

    }

    .hero-card h4{

        margin:0;

        font-size:24px;

        font-weight:800;

        color:#111827;

    }

    .hero-card span{

        display:block;

        font-size:14px;

        color:#64748B;

    }

    /*==================================
    Followers
    ==================================*/

    .followers-card{

        top:70px;

        left:-30px;

    }

    /*==================================
    Revenue
    ==================================*/

    .revenue-card{

        right:-40px;

        bottom:120px;

    }

    /*==================================
    Engagement
    ==================================*/

    .engagement-card{

        top:360px;

        right:-60px;

    }

    /*==================================
    Live
    ==================================*/

    .live-card{

        left:20px;

        bottom:130px;

    }

    /*==================================
    Dashboard
    ==================================*/

    .hero-dashboard{

        position:absolute;

        bottom:-20px;

        right:20px;

        width:320px;

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

        backdrop-filter:blur(20px);

        border-radius:28px;

        padding:24px;

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

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

        z-index:5;

    }

    /* Dashboard Top */

    .dashboard-top{

        display:flex;

        justify-content:space-between;

        align-items:center;

        margin-bottom:25px;

    }

    .dashboard-top h5{

        margin:0;

        font-weight:700;

        color:#111827;

    }

    .dashboard-top span{

        padding:6px 12px;

        border-radius:999px;

        background:#DCFCE7;

        color:#16A34A;

        font-size:12px;

        font-weight:700;

    }

    /*==================================
    Chart
    ==================================*/

    .dashboard-chart{

        display:flex;

        justify-content:space-between;

        align-items:flex-end;

        height:120px;

        margin-bottom:22px;

    }

    .dashboard-chart .bar{

        width:24px;

        border-radius:20px 20px 6px 6px;

        background:linear-gradient(
            180deg,
            #00C2FF,
            #0074A0
        );

    }

    .bar1{

        height:35px;

    }

    .bar2{

        height:55px;

    }

    .bar3{

        height:70px;

    }

    .bar4{

        height:100px;

    }

    .bar5{

        height:82px;

    }

    .bar6{

        height:115px;

    }

    /*==================================
    Dashboard Bottom
    ==================================*/

    .dashboard-bottom{

        font-size:15px;

        color:#64748B;

    }

    .dashboard-bottom strong{

        display:block;

        font-size:34px;

        color:#111827;

        margin-bottom:6px;

    }

    /*==================================
    Glass Reflection
    ==================================*/

    .hero-dashboard::before{

        content:"";

        position:absolute;

        width:130px;

        height:130px;

        top:-70px;

        right:-70px;

        border-radius:50%;

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

        filter:blur(25px);

    }







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

    /* Floating Animation */

    @keyframes heroFloat{

        0%{

            transform:translateY(0px);

        }

        50%{

            transform:translateY(-12px);

        }

        100%{

            transform:translateY(0px);

        }

    }

    .hero-video-card{

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

    }

    .hero-image-card{

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

    }

    .followers-card{

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

    }

    .revenue-card{

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

    }

    .engagement-card{

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

    }

    .live-card{

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

    }

    .hero-dashboard{

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

    }

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

    .hero-video-card{

        transition:.4s ease;

    }

    .hero-video-card:hover{

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

    }

    .hero-image-card{

        transition:.4s ease;

    }

    .hero-image-card:hover{

        transform:translateY(-10px);

    }

    .hero-card-icon{

        transition:.35s;

    }

    .hero-card:hover .hero-card-icon{

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

    }

    .hero-dashboard{

        transition:.4s;

    }

    .hero-dashboard:hover{

        transform:translateY(-10px);

    }

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

    @media(max-width:1400px){

        .hero-title{

            font-size:68px;

        }

    }

    @media(max-width:1200px){

        .hero-title{

            font-size:58px;

        }

        .hero-video-card{

            width:460px;

            height:280px;

        }

        .hero-image-card{

            width:320px;

        }

    }

    @media(max-width:992px){

        #hero{

            padding:140px 0 80px;

        }

        .hero-left{

            text-align:center;

            margin-bottom:60px;

        }

        .hero-text{

            margin-left:auto;

            margin-right:auto;

        }

        .hero-buttons{

            justify-content:center;

        }

        .hero-stats{

            justify-content:center;

            flex-wrap:wrap;

        }

        .hero-brands{

            text-align:center;

        }

        .brand-logos{

            justify-content:center;

        }

        .hero-right{

            min-height:760px;

        }

        .hero-video-card{

            position:relative;

            width:100%;

            max-width:520px;

            height:300px;

            margin:auto;

            right:auto;

            top:auto;

        }

        .hero-image-card{

            left:20px;

            bottom:40px;

        }

    }

    @media(max-width:768px){

        .hero-title{

            font-size:42px;

            line-height:1.15;

            letter-spacing:-1px;

        }

        .hero-text{

            font-size:16px;

            line-height:30px;

        }

        .hero-buttons{

            flex-direction:column;

        }

        .hero-buttons .imp-btn,

        .hero-buttons .imp-btn-outline{

            width:100%;

        }

        .imp-btn{
            display: none;
        }

        .hero-stats{

            gap:25px;

        }

        .hero-stat h3{

            font-size:30px;

        }

        .hero-video-card{

            height:230px;

        }

        .hero-image-card{

            width:240px;

            left:0;

        }

        .hero-card{

            min-width:180px;

            padding:14px;

        }

        .hero-card h4{

            font-size:18px;

        }

        .hero-card-icon{

            width:46px;

            height:46px;

            font-size:18px;

        }

        .hero-dashboard{

            width:260px;

            right:0;

        }

    }

    @media(max-width:576px){

        .hero-title{

            font-size:34px;

        }

        .hero-badge{

            font-size:12px;

        }

        .hero-right{

            display:flex;

            flex-direction:column;

            align-items:center;

            min-height:auto;

            gap:20px;

        }

        .hero-video-card,

        .hero-image-card,

        .hero-card,

        .hero-dashboard{

            position:relative;

            top:auto;

            right:auto;

            bottom:auto;

            left:auto;

            width:100%;

            max-width:340px;

            margin:0 auto;

        }

        .hero-image-card{

            width:260px;

        }

        .followers-card,

        .revenue-card,

        .engagement-card,

        .live-card{

            width:100%;

        }

        .dashboard-chart{

            height:90px;

        }

        .dashboard-chart .bar{

            width:18px;

        }

    }

    /*==========================================================
            SMOOTH TRANSITIONS
    ==========================================================*/

    .hero-left>*{

        transition:.35s ease;

    }

    .hero-right>*{

        transition:.35s ease;

    }










    .hero-buttons a{

        position:relative;

        overflow:hidden;

    }

    .hero-ripple{

        position:absolute;

        width:20px;

        height:20px;

        border-radius:50%;

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

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

        animation:ripple .6s linear;

    }

    @keyframes ripple{

        to{

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

            opacity:0;

        }

    }


















    /*==========================================================
            FEATURED CAMPAIGN SECTION
    ==========================================================*/

    .featured-campaign{

        position:relative;

        padding:80px 0;

        background:#ffffff;

        overflow:hidden;

    }

    .featured-campaign::before{

        content:"";

        position:absolute;

        width:550px;

        height:550px;

        right:-180px;

        top:-220px;

        background:#EEF7FF;

        border-radius:50%;

        filter:blur(120px);

        opacity:.9;

    }

    .featured-campaign::after{

        content:"";

        position:absolute;

        width:450px;

        height:450px;

        left:-150px;

        bottom:-180px;

        background:#E0F7FA;

        border-radius:50%;

        filter:blur(100px);

    }


    .section-heading{

        position:relative;

        z-index:2;

        margin-bottom:0px;

    }

    .section-badge{

        display:inline-block;

        padding:12px 26px;

        background:#EEF5FF;

        color:#0074A0;

        font-size:14px;

        font-weight:700;

        border-radius:999px;

        margin-bottom:18px;

    }

    .section-heading h2{

        font-size:50px;

        font-weight:800;

        color:#111827;

        margin-bottom:20px;

    }

    .section-heading h2 span{

        background:linear-gradient(90deg,#0074A0,#00C2FF);

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;

    }

    .section-heading p{

        max-width:760px;

        margin:auto;

        color:#64748B;

        font-size:14px;

        line-height:34px;

        margin-bottom: 40px;

    }

    /*===============================
    Brand Slider
    ================================*/

    .brand-slider{

        overflow:hidden;

        margin-bottom:80px;

        position:relative;

    }

    .brand-track{

        display:flex;

        align-items:center;

        gap:80px;

        animation:brandSlide 20s linear infinite;

        width:max-content;

    }

    .brand-track img{

        height:80px;

        

        transition:.35s;

        /* filter:grayscale(100%); */

    }

    .brand-track img:hover{

        /* opacity:1; */

        transform:scale(1.1);

        /* filter:none; */

    }

    @keyframes brandSlide{

        from{

            transform:translateX(0);

        }

        to{

            transform:translateX(-50%);

        }

    }

    /*===============================
    Campaign Video
    ================================*/

    .campaign-video{

        position:relative;

        overflow:hidden;

        border-radius:32px;

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

    }

    .campaign-video video{

        width:100%;

        height:500px;

        display:block;

        object-fit:cover;

        transition:.5s;

    }

    .campaign-video:hover video{

        transform:scale(1.06);

    }

    /* Play Overlay */

    .campaign-video::after{

        content:"▶";

        position:absolute;

        top:50%;

        left:50%;

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

        width:90px;

        height:90px;

        border-radius:50%;

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

        color:#0074A0;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:28px;

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

    }

    /*===============================
    Campaign Content
    ================================*/

    .campaign-content{

        background:#fff;

        padding:50px;

        border-radius:32px;

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

        height:100%;

        display:flex;

        flex-direction:column;

        justify-content:center;
        text-align: center;

    }

    .campaign-tag{

        display:inline-block;

        background:#DCFCE7;

        color:#16A34A;

        padding:10px 18px;

        border-radius:999px;

        font-size:13px;

        font-weight:700;

        margin-bottom:25px;

    }

    .campaign-content h3{

        font-size:30px;

        font-weight:800;

        color:#111827;

        margin-bottom:20px;
        

    }

    .campaign-content p{

        color:#64748B;

        line-height:34px;

        margin-bottom:0px;

    }

    /*===============================
    Stats
    ================================*/

    .campaign-stats{

        display:grid;

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

        gap:20px;
        margin-top: 10px;

    }

    .campaign-stats div{

        background:#F8FAFC;

        border-radius:22px;

        padding:25px;

        text-align:center;

        transition:.35s;

    }

    .campaign-stats div:hover{

        background:#0074A0;

        transform:translateY(-8px);

    }

    .campaign-stats div:hover h4,

    .campaign-stats div:hover span{

        color:#fff;

    }

    .campaign-stats h4{

        font-size:34px;

        font-weight:800;

        color:#111827;

        margin-bottom:10px;

    }

    .campaign-stats span{

        color:#64748B;

    }

    /*===============================
    Responsive
    ================================*/

    @media(max-width:991px){

        .section-heading h2{

            font-size:42px;

        }

        .campaign-content{

            margin-top:30px;

        }

    }

    @media(max-width:767px){

        .section-heading h2{

            font-size:34px;

        }

        .campaign-content{

            padding:30px;

        }

        .campaign-content h3{

            font-size:30px;

        }

        .campaign-stats{

            grid-template-columns:1fr;

        }

        .brand-track{

            gap:45px;

        }

        .brand-track img{

            height:30px;

        }

    }











    /*==================================================
            FEATURED CREATOR SHOWCASE
    ==================================================*/

    .featured-creator{

        position:relative;

        padding:50px 0;

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

        overflow:hidden;

    }

    /*==============================
    Background Glow
    ==============================*/

    .featured-creator::before{

        content:"";

        position:absolute;

        width:520px;

        height:520px;

        background:#DBEAFE;

        top:-180px;

        right:-180px;

        border-radius:50%;

        filter:blur(120px);

        opacity:.65;

    }

    .featured-creator::after{

        content:"";

        position:absolute;

        width:420px;

        height:420px;

        background:#CFFAFE;

        bottom:-180px;

        left:-180px;

        border-radius:50%;

        filter:blur(100px);

        opacity:.6;

    }

    /*==================================================
    VIDEO
    ==================================================*/

    .creator-video-wrapper{

        position:relative;

        overflow:hidden;

        border-radius:34px;

        height:540px;

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

        transition:.45s;

    }

    .creator-video-wrapper:hover{

        transform:translateY(-10px);

    }

    .creator-video-wrapper video{

        width:100%;

        height:100%;

        object-fit:cover;

        transition:.5s;

    }

    .creator-video-wrapper:hover video{

        transform:scale(1.08);

    }

    /* Dark Overlay */

    .creator-video-wrapper::before{

        content:"";

        position:absolute;

        inset:0;

        background:linear-gradient(

            to top,

            rgba(0,0,0,.65),

            rgba(0,0,0,.15)

        );

        z-index:1;

    }

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

    .creator-play-btn{

        position:absolute;

        top:50%;

        left:50%;

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

        width:90px;

        height:90px;

        border-radius:50%;

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

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:28px;

        color:#0074A0;

        cursor:pointer;

        z-index:3;

        transition:.35s;

    }

    .creator-play-btn:hover{

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

    }

    /*==================================================
    Overlay Content
    ==================================================*/

    .creator-video-overlay{

        position:absolute;

        left:40px;

        bottom:40px;

        color:#fff;

        z-index:2;

    }

    .creator-video-overlay span{

        display:inline-block;

        padding:10px 18px;

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

        backdrop-filter:blur(20px);

        border-radius:999px;

        margin-bottom:18px;

    }

    .creator-video-overlay h3{

        font-size:42px;

        margin-bottom:8px;

        color:#fff;

    }

    .creator-video-overlay p{

        color:#fff;

        opacity:.85;

    }

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

    .creator-info{

        padding-right:60px;

    }

    .creator-label{

        display:inline-block;

        padding:12px 22px;

        background:#EEF5FF;

        color:#0074A0;

        border-radius:999px;

        font-weight:700;

        margin-bottom:28px;

    }

    .creator-info h2{

        font-size:45px;

        line-height:1.15;

        margin-bottom:25px;

    }

    .creator-info h2 span{

        display:block;

        background:linear-gradient(

            90deg,

            #0074A0,

            #00C2FF

        );

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;

    }

    .creator-info p{

        color:#64748B;

        font-size:15px;

        line-height:25px;

        margin-bottom:40px;

    }

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

    .creator-stats{

        display:grid;

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

        gap:22px;

        margin-bottom:40px;

    }

    .creator-stat-card{

        background:#fff;

        padding:30px;

        border-radius:26px;

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

        transition:.35s;

    }

    .creator-stat-card:hover{

        background:#0074A0;

        transform:translateY(-8px);

    }

    .creator-stat-card:hover h3,

    .creator-stat-card:hover span{

        color:#fff;

    }

    .creator-stat-card h3{

        font-size:34px;

        margin-bottom:10px;

    }

    .creator-stat-card span{

        color:#64748B;

    }

    /*==================================================
    BRAND TAGS
    ==================================================*/

    .creator-brands{

        display:flex;

        flex-wrap:wrap;

        gap:15px;

        margin-bottom:35px;

    }

    .creator-brands span{

        padding:12px 22px;

        border-radius:999px;

        background:#fff;

        border:1px solid #E5E7EB;

        font-weight:700;

        transition:.35s;

    }

    .creator-brands span:hover{

        background:#0074A0;

        color:#fff;

        border-color:#0074A0;

    }

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

    @media(max-width:1200px){

        .creator-info{

            padding-left:20px;

        }

        .creator-info h2{

            font-size:48px;

        }

    }

    @media(max-width:991px){

        .creator-video-wrapper{

            height:520px;

            margin-bottom:50px;

        }

        .creator-info{

            padding-left:0;

            text-align:center;

        }

        .creator-stats{

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

        }

        .creator-brands{

            justify-content:center;

        }

    }

    @media(max-width:767px){

        .featured-creator{

            padding:90px 0;

        }

        .creator-video-wrapper{

            height:420px;

        }

        .creator-video-overlay{

            left:20px;

            bottom:20px;

        }

        .creator-video-overlay h3{

            font-size:30px;

        }

        .creator-info h2{

            font-size:36px;

        }

        .creator-info p{

            font-size:16px;

            line-height:30px;

        }

        .creator-stats{

            grid-template-columns:1fr;

        }

        .creator-play-btn{

            width:70px;

            height:70px;

            font-size:22px;

        }

    }

    @media(max-width:576px){

        .creator-video-wrapper{

            height:340px;

            border-radius:24px;

        }

        .creator-label{

            font-size:12px;

        }

        .creator-info h2{

            font-size:30px;

        }

    }







    .creator-video-wrapper,
    .creator-info{

        transition:.4s ease;

    }

















    /*==================================================
            TRENDING CREATORS
    ==================================================*/

    .trending-creators{

        position:relative;

        padding:60px 0;

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

        overflow:hidden;

    }

    /*==============================
    Category Filter
    ==============================*/

    .creator-filter{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:15px;

        margin-bottom:60px;

    }

    .creator-filter button{

        border:none;

        background:#fff;

        padding:14px 26px;

        border-radius:999px;

        font-size:15px;

        font-weight:700;

        color:#64748B;

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

        transition:.35s;

    }

    .creator-filter button:hover,

    .creator-filter button.active{

        background:linear-gradient(135deg,#0074A0,#00C2FF);

        color:#fff;

        transform:translateY(-4px);

    }

    /*==============================
    Creator Card
    ==============================*/

    .creator-card{

        position:relative;

        background:#fff;

        border-radius:28px;

        overflow:hidden;

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

        transition:.4s;

        height:100%;

    }

    .creator-card:hover{

        transform:translateY(-12px);

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

    }

    /*==============================
    Image
    ==============================*/

    .creator-image{

        position:relative;

        overflow:hidden;

        height:340px;

    }

    .creator-image img{

        width:100%;

        height:100%;

        object-fit:cover;

        transition:.5s;

    }

    .creator-card:hover .creator-image img{

        transform:scale(1.08);

    }

    /* Dark Overlay */

    .creator-image::after{

        content:"";

        position:absolute;

        inset:0;

        background:linear-gradient(

            to top,

            rgba(0,0,0,.35),

            transparent

        );

    }

    /*==============================
    Verified Badge
    ==============================*/

    .verified{

        position:absolute;

        top:18px;

        right:18px;

        width:44px;

        height:44px;

        border-radius:50%;

        background:#fff;

        display:flex;

        justify-content:center;

        align-items:center;

        color:#0074A0;

        font-size:18px;

        z-index:2;

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

    }

    /*==============================
    Creator Body
    ==============================*/

    .creator-body{

        padding:30px;

    }

    .creator-body h4{

        font-size:24px;

        font-weight:800;

        margin-bottom:8px;

        color:#111827;

    }

    .creator-body p{

        color:#64748B;

        margin-bottom:22px;

    }

    /*==============================
    Meta
    ==============================*/

    .creator-meta{

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:14px 0;

        border-top:1px solid #EEF2F7;

        border-bottom:1px solid #EEF2F7;

        margin-bottom:20px;

    }

    .creator-meta span{

        font-size:15px;

        font-weight:700;

        color:#475569;

    }

    .creator-meta i{

        color:#0074A0;

        margin-right:6px;

    }

    /*==============================
    Button
    ==============================*/

    .creator-body .imp-btn{

        width:100%;

        justify-content:center;

    }

    /*==============================
    Floating Glow
    ==============================*/

    .creator-card::before{

        content:"";

        position:absolute;

        width:200px;

        height:200px;

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

        border-radius:50%;

        top:-100px;

        right:-100px;

        transition:.5s;

    }

    .creator-card:hover::before{

        transform:scale(1.3);

    }

    /*==============================
    Responsive
    ==============================*/

    @media(max-width:991px){

        .creator-image{

            height:300px;

        }

    }

    @media(max-width:767px){

        .trending-creators{

            padding:90px 0;

        }

        .creator-filter{

            gap:10px;

        }

        .creator-filter button{

            padding:12px 20px;

            font-size:14px;

        }

        .creator-image{

            height:260px;

        }

        .creator-body{

            padding:22px;

        }

        .creator-body h4{

            font-size:21px;

        }

    }











    /*==================================================
            FEATURED CAMPAIGN PORTFOLIO
    ==================================================*/

    .campaign-portfolio{
        position:relative;
        padding:50px 0;
        background:#F8FBFF;
        overflow:hidden;
    }

    .campaign-portfolio::before{
        content:"";
        position:absolute;
        width:500px;
        height:500px;
        top:-260px;
        right:-220px;
        border-radius:50%;
        background:#DBEAFE;
        filter:blur(130px);
        opacity:.65;
    }

    .campaign-portfolio::after{
        content:"";
        position:absolute;
        width:450px;
        height:450px;
        bottom:-180px;
        left:-150px;
        border-radius:50%;
        background:#CFFAFE;
        filter:blur(120px);
        opacity:.6;
    }

    /*====================================
    Bento Grid
    ====================================*/

    .campaign-grid{

        position:relative;

        z-index:2;

        display:grid;

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

        gap:28px;

    }

    /*====================================
    Boxes
    ====================================*/

    .campaign-box{

        position:relative;

        overflow:hidden;

        border-radius:32px;

        background:#fff;

        max-height:300px;

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

        transition:.45s;

    }

    .campaign-box:hover{

        transform:translateY(-10px);

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

    }

    /*====================================
    Large Video
    ====================================*/

    .campaign-large{

        grid-row:span 2;

        min-height:620px;

    }

    .campaign-large video{

        width:100%;

        height:100%;

        object-fit:cover;

        transition:.5s;

    }

    .campaign-large:hover video{

        transform:scale(1.08);

    }

    /*====================================
    Images
    ====================================*/

    .campaign-box img{

        width:100%;

        height:100%;

        object-fit:cover;

        transition:.5s;

    }

    .campaign-box:hover img{

        transform:scale(1.08);

    }

    /*====================================
    Overlay
    ====================================*/

    .campaign-overlay{

        position:absolute;

        left:30px;

        right:30px;

        bottom:30px;

        color:#fff;

        z-index:2;

    }

    .campaign-overlay span{

        display:inline-block;

        padding:10px 18px;

        border-radius:999px;

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

        backdrop-filter:blur(15px);

        margin-bottom:15px;

        font-size:13px;

        font-weight:700;

    }

    .campaign-overlay h3{

        font-size:34px;

        margin:0;

        color:#fff;

    }

    .campaign-overlay h4{

        font-size:24px;

        margin:0;

        color:#fff;

    }

    /* Dark Overlay */

    .campaign-box::after{

        content:"";

        

        inset:0;

        background:linear-gradient(

            to top,

            rgba(0,0,0,.65),

            rgba(0,0,0,.05)

        );

    }

    /*====================================
    Analytics Card
    ====================================*/

    .analytics-box{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        padding:10px;

    }

    .analytics-box::after{

        display:none;

    }

    .analytics-box h5{

        font-size:22px;

        margin-bottom:30px;

    }

    .campaign-chart{

        width:100%;

        display:flex;

        justify-content:space-between;

        align-items:flex-end;

        height:130px;

        margin-bottom:30px;

    }

    .campaign-chart span{

        width:28px;

        border-radius:30px;

        background:linear-gradient(

            180deg,

            #00C2FF,

            #0074A0

        );

    }

    .analytics-box strong{

        font-size:42px;

        color:#0074A0;

    }

    .analytics-box small{

        color:#64748B;

        font-size:15px;

    }

    /*====================================
    ROI Card
    ====================================*/

    .roi-box{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        text-align:center;

        padding:40px;

        background:linear-gradient(
            135deg,
            #0074A0,
            #00C2FF
        );

    }

    .roi-box::after{

        display:none;

    }

    .roi-icon{

        width:90px;

        height:90px;

        border-radius:24px;

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

        display:flex;

        justify-content:center;

        align-items:center;

        color:#fff;

        font-size:36px;

        margin-bottom:25px;

    }

    .roi-box h3{

        color:#fff;

        font-size:44px;

        margin-bottom:15px;

    }

    .roi-box p{

        color:#fff;

        opacity:.9;

    }

    /*====================================
    Responsive
    ====================================*/

    @media(max-width:1200px){

        .campaign-grid{

            grid-template-columns:1fr 1fr;

        }

        .campaign-large{

            grid-column:span 2;

            min-height:520px;

        }

    }

    @media(max-width:768px){

        .campaign-portfolio{

            padding:90px 0;

        }

        .campaign-grid{

            grid-template-columns:1fr;

        }

        .campaign-large{

            grid-column:auto;

            min-height:380px;

        }

        .campaign-box{

            min-height:260px;

        }

        .campaign-overlay{

            left:20px;

            right:20px;

            bottom:20px;

        }

        .campaign-overlay h3{

            font-size:26px;

        }

        .campaign-overlay h4{

            font-size:20px;

        }

        .analytics-box{

            padding:30px;

        }

        .roi-box{

            padding:30px;

        }

    }   








    /*==================================================
            HOW WE WORK
    ==================================================*/

    .how-we-work{

        position:relative;

        padding:50px 0;

        background:#ffffff;

        overflow:hidden;

    }

    /*==============================
    Background Glow
    ==============================*/

    .how-we-work::before{

        content:"";

        position:absolute;

        width:650px;

        height:650px;

        top:-250px;

        right:-220px;

        background:#EAF4FF;

        border-radius:50%;

        filter:blur(140px);

        opacity:.8;

    }

    .how-we-work::after{

        content:"";

        position:absolute;

        width:500px;

        height:500px;

        left:-180px;

        bottom:-180px;

        background:#DDF7FF;

        border-radius:50%;

        filter:blur(120px);

        opacity:.7;

    }

    /*==============================
    Wrapper
    ==============================*/

    .process-wrapper{

        position:relative;

        margin-top:80px;

    }

    /*==============================
    Center Line
    ==============================*/

    .process-line{

        position:absolute;

        left:50%;

        top:0;

        transform:translateX(-50%);

        width:4px;

        height:100%;

        background:linear-gradient(

            to bottom,

            #0074A0,

            #00C2FF

        );

        border-radius:20px;

    }

    /*==============================
    Item
    ==============================*/

    .process-item{

        display:flex;

        justify-content:space-between;

        align-items:center;

        margin-bottom:90px;

        position:relative;

    }

    .process-item:last-child{

        margin-bottom:0;

    }

    /* Alternate */

    .process-item:nth-child(even){

        flex-direction:row-reverse;

    }

    /*==============================
    Number
    ==============================*/

    .process-number{

        width:90px;

        height:90px;

        border-radius:50%;

        background:linear-gradient(

            135deg,

            #0074A0,

            #00C2FF

        );

        color:#fff;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:28px;

        font-weight:800;

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

        position:relative;

        z-index:2;

    }

    /*==============================
    Card
    ==============================*/

    .process-card{

        width:42%;

        background:#fff;

        padding:40px;

        border-radius:28px;

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

        transition:.35s;

    }

    .process-card:hover{

        transform:translateY(-10px);

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

    }

    .process-icon{

        width:80px;

        height:80px;

        border-radius:22px;

        background:linear-gradient(

            135deg,

            #0074A0,

            #00C2FF

        );

        display:flex;

        justify-content:center;

        align-items:center;

        color:#fff;

        font-size:30px;

        margin-bottom:25px;

    }

    .process-card h3{

        font-size:32px;

        font-weight:800;

        color:#111827;

        margin-bottom:18px;

    }

    .process-card p{

        color:#64748B;

        line-height:32px;

        margin-bottom:0;

    }

    /*==============================
    Image
    ==============================*/

    .process-image{

        width:42%;

        border-radius:30px;

        overflow:hidden;

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

    }

    .process-image img{

        width:100%;

        display:block;

        transition:.5s;

    }

    .process-image:hover img{

        transform:scale(1.08);

    }

    /*==============================
    Responsive
    ==============================*/

    @media(max-width:991px){

        .process-line{

            display:none;

        }

        .process-item,

        .process-item:nth-child(even){

            flex-direction:column;

            gap:35px;

            text-align:center;

        }

        .process-card,

        .process-image{

            width:100%;

        }

    }

    @media(max-width:767px){

        .how-we-work{

            padding:90px 0;

        }

        .process-card{

            padding:30px;

        }

        .process-number{

            width:70px;

            height:70px;

            font-size:22px;

        }

        .process-icon{

            width:65px;

            height:65px;

            font-size:24px;

            margin:0 auto 20px;

        }

        .process-card h3{

            font-size:26px;

        }

    }











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

    .success-metrics{

        position:relative;

        padding:5   0px 0;

        background:linear-gradient(180deg,#F8FBFF,#FFFFFF);

        overflow:hidden;


    }

    /*==================================
    Background Glow
    ==================================*/

    .success-metrics::before{

        content:"";

        position:absolute;

        width:650px;

        height:650px;

        top:-250px;

        left:-220px;

        border-radius:50%;

        background:#DBEAFE;

        filter:blur(140px);

        opacity:.7;

    }

    .success-metrics::after{

        content:"";

        position:absolute;

        width:550px;

        height:550px;

        bottom:-220px;

        right:-200px;

        border-radius:50%;

        background:#CFFAFE;

        filter:blur(120px);

        opacity:.65;

    }

    /*==================================
    Dashboard
    ==================================*/

    .metrics-dashboard{

        position:relative;

        z-index:2;

        display:grid;

        grid-template-columns:420px 1fr;

        gap:35px;

        

    }

    /*==================================
    Growth Card
    ==================================*/

    .growth-card{

        background:linear-gradient(135deg,#0074A0,#00C2FF);

        border-radius:34px;

        padding:45px;

        color:#fff;

        min-height:100%;

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

    }

    .growth-tag{

        display:inline-block;

        padding:10px 18px;

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

        border-radius:999px;

        backdrop-filter:blur(15px);

        margin-bottom:15px;

        font-size:13px;

        font-weight:700;

    }

    .growth-card h2{

        font-size:70px;

        font-weight:800;

        color:#fff;

        margin-bottom:15px;

    }

    .growth-card p{

        color:#fff;

        opacity:.92;

        font-size:18px;

        margin-bottom:35px;

    }

    /*==================================
    Chart
    ==================================*/

    .growth-chart{

        display:flex;

        align-items:flex-end;

        justify-content:space-between;

        height:180px;

    }

    .growth-chart span{

        width:34px;

        border-radius:30px;

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

        transition:.35s;

    }

    .growth-chart span:hover{

        background:#fff;

        transform:scaleY(1.08);

    }

    /*==================================
    Metric Grid
    ==================================*/

    .dashboard-right{

        display:grid;

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

        gap:25px;

    }

    .metric-card{

        background:#fff;

        border-radius:28px;

        padding:35px;

        text-align:center;

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

        transition:.35s;

        position:relative;

        overflow:hidden;

    }

    .metric-card::before{

        content:"";

        position:absolute;

        width:180px;

        height:180px;

        border-radius:50%;

        background:rgba(37,99,235,.06);

        right:-90px;

        top:-90px;

    }

    .metric-card:hover{

        transform:translateY(-10px);

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

    }

    .metric-card h3{

        font-size:42px;

        font-weight:800;

        color:#0074A0;

        margin-bottom:12px;

    }

    .metric-card p{

        color:#64748B;

        margin:0;

    }

    /*==================================
    Awards
    ==================================*/

    .metrics-bottom{

        display:grid;

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

        gap:25px;

        margin-top:30px;
        margin-bottom: 20px;

    }

    .award-card{

        display:flex;

        align-items:center;

        gap:20px;

        background:#fff;

        border-radius:26px;

        padding:30px;

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

        transition:.35s;

    }

    .award-card:hover{

        transform:translateY(-8px);

    }

    .award-card i{

        width:72px;

        height:72px;

        border-radius:20px;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:28px;

        color:#fff;

        background:linear-gradient(135deg,#0074A0,#00C2FF);

    }

    .award-card h4{

        font-size:22px;

        margin-bottom:8px;

    }

    .award-card span{

        color:#64748B;

        font-size:15px;

    }

    /*==================================
    Responsive
    ==================================*/

    @media(max-width:1200px){

        .metrics-dashboard{

            grid-template-columns:1fr;

        }

    }

    @media(max-width:991px){

        .dashboard-right{

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

        }

        .metrics-bottom{

            grid-template-columns:1fr;

        }

    }

    @media(max-width:768px){

        .success-metrics{

            padding:90px 0;

        }

        .growth-card{

            padding:35px;

        }

        .growth-card h2{

            font-size:54px;

        }

        .growth-chart{

            height:130px;

        }

        .growth-chart span{

            width:22px;

        }

        .dashboard-right{

            grid-template-columns:1fr;

        }

        .metric-card{

            padding:28px;

        }

        .metric-card h3{

            font-size:34px;

        }

    }

















    /*=========================================================
    SKORA MEDIA
    WHY BRANDS SECTION
    PART 2A
    =========================================================*/

    .skm-brand-choose-section{

        position:relative;
        overflow:hidden;

        padding:50px 0;

        background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #ffffff 100%
        );

    }

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

    .skm-brand-bg-circle{

        position:absolute;

        border-radius:50%;

        filter:blur(90px);

        z-index:0;

        pointer-events:none;

    }

    .skm-brand-bg-circle-one{

        width:420px;

        height:420px;

        background:#65d8ff40;

        top:-120px;

        left:-120px;

    }

    .skm-brand-bg-circle-two{

        width:500px;

        height:500px;

        background:#7c3aed20;

        right:-160px;

        bottom:-180px;

    }

    .skm-brand-bg-pattern{

        position:absolute;

        inset:0;

        opacity:.05;

        background-image:

        radial-gradient(circle,#00b7ff 1px,transparent 1px);

        background-size:28px 28px;

    }

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

    .skm-brand-choose-section .container{

        position:relative;

        z-index:2;

    }

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

    .skm-brand-heading{

        max-width:900px;

        margin:auto auto 40px;

    }

    .skm-brand-badge{

        display:inline-flex;

        align-items:center;

        justify-content:center;

        padding:10px 22px;

        border-radius:60px;

        background:#ecf9ff;

        color:#00a8f0;

        font-weight:700;

        font-size:14px;

        margin-bottom:20px;

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

    }

    .skm-brand-title{

        font-size:38px;

        line-height:1.08;

        font-weight:800;

        color:#121826;

        margin-bottom:22px;

    }

    .skm-brand-title span{

        display:block;

        background:
        linear-gradient(
            90deg,
            #00b6ff,
            #0078ff,
            #00c7ff
        );

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;

    }

    .skm-brand-description{

        max-width:720px;

        margin:auto;

        color:#6d7588;

        line-height:1.9;

        font-size:17px;

    }

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

    .skm-brand-card{

        position:relative;

        overflow:hidden;

        background:#fff;

        border-radius:24px;

        border:2px solid #0aa8ff;

        transition:.45s;

        height:100%;

        box-shadow:

        0 20px 60px rgba(0,0,0,.05);

    }

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

    .skm-brand-card-number{

        position:absolute;

        top:18px;

        right:18px;

        width:52px;

        height:52px;

        border-radius:50%;

        background:#0aa8ff;

        color:#fff;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:18px;

        font-weight:800;

        z-index:5;

        box-shadow:

        0 15px 30px rgba(0,183,255,.25);

    }

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

    .skm-brand-image-box{

        position:relative;

        overflow:hidden;

        height:240px;

    }

    .skm-brand-image-box img{

        width:100%;

        height:100%;

        object-fit:cover;

        transition:.7s;

    }

    .skm-brand-image-overlay{

        position:absolute;

        inset:0;

        background:

        linear-gradient(

        to top,

        rgba(0,0,0,.45),

        rgba(0,0,0,0)

        );

    }

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

    .skm-brand-card-content{

        padding:25px;

    }

    .skm-brand-card-content h3{

        font-size:18px;

        font-weight:800;

        color:#121826;

        margin-bottom:18px;

    }

    .skm-brand-card-content p{

        color:#6b7280;

        line-height:1.9;

        margin-bottom:25px;

    }

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

    .skm-brand-card-content ul{

        margin:0;

        padding:0;

        list-style:none;

    }

    .skm-brand-card-content ul li{

        display:flex;

        align-items:center;

        gap:12px;

        margin-bottom:10px;

        font-weight:600;

        color:#283044;

    }

    .skm-brand-card-content ul li i{

        width:28px;

        height:28px;

        border-radius:50%;

        background:#00b6ff;

        color:#fff;

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:12px;

    }

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

    .skm-brand-readmore{

        display:inline-flex;

        align-items:center;

        gap:10px;

        margin-top:18px;

        text-decoration:none;

        font-weight:700;

        color:#0099ff;

        transition:.4s;

    }

    .skm-brand-readmore i{

        transition:.4s;

    }


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

    .skm-brand-card:hover{

        transform:translateY(-18px);

        border-color:#00c8ff;

        box-shadow:
        0 35px 80px rgba(0,183,255,.18),
        0 12px 30px rgba(124,58,237,.12);

    }

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

    .skm-brand-card:hover
    .skm-brand-image-box img{

        transform:scale(1.12);

    }

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

    .skm-brand-image-box::before{

        content:"";

        position:absolute;

        top:0;

        left:-120%;

        width:70%;

        height:100%;

        z-index:2;

        transform:skewX(-25deg);

        background:

        linear-gradient(

            to right,

            rgba(255,255,255,0),

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

            rgba(255,255,255,0)

        );

        transition:1s;

    }

    .skm-brand-card:hover
    .skm-brand-image-box::before{

        left:150%;

    }

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

    .skm-brand-card:hover
    .skm-brand-card-number{

        transform:rotate(360deg) scale(1.12);

        background:

        linear-gradient(
            135deg,
            #00b8ff,
            #007bff
        );

    }

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

    .skm-brand-card-content ul li{

        transition:.35s;

    }

    .skm-brand-card-content ul li:hover{

        transform:translateX(8px);

        color:#0097ff;

    }

    .skm-brand-card-content ul li i{

        transition:.4s;

    }

    .skm-brand-card-content ul li:hover i{

        transform:rotate(360deg);

        background:#7c3aed;

    }

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

    .skm-brand-card:hover
    .skm-brand-readmore{

        color:#7c3aed;

    }

    .skm-brand-card:hover
    .skm-brand-readmore i{

        transform:translateX(8px);

    }

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

    .skm-brand-card::after{

        content:"";

        position:absolute;

        inset:0;

        border-radius:24px;

        padding:2px;

        background:

        linear-gradient(
            135deg,
            rgba(0,183,255,.9),
            rgba(124,58,237,.8)
        );

        -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

        -webkit-mask-composite:xor;

                mask-composite:exclude;

        opacity:0;

        transition:.5s;

    }

    .skm-brand-card:hover::after{

        opacity:1;

    }

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

    .skm-brand-title span{

        background-size:250%;

        animation:skmGradientMove 5s linear infinite;

    }

    @keyframes skmGradientMove{

        0%{

            background-position:left;

        }

        100%{

            background-position:right;

        }

    }

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

    .skm-brand-card{

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

    }

    .skm-brand-card:nth-child(2){

        animation-delay:.6s;

    }

    .skm-brand-card:nth-child(3){

        animation-delay:1.2s;

    }

    @keyframes skmFloating{

        0%{

            transform:translateY(0);

        }

        50%{

            transform:translateY(-8px);

        }

        100%{

            transform:translateY(0);

        }

    }

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

    .skm-brand-bg-circle{

        animation:skmBlob 12s linear infinite alternate;

    }

    @keyframes skmBlob{

        from{

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

        }

        to{

            transform:translate(60px,-40px) scale(1.15);

        }

    }

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

    @media(max-width:1200px){

    .skm-brand-title{

    font-size:48px;

    }

    }

    @media(max-width:992px){

    .skm-brand-title{

    font-size:40px;

    }

    .skm-brand-card-content{

    padding:28px;

    }

    .skm-brand-image-box{

    height:220px;

    }

    }

    @media(max-width:768px){

    .skm-brand-choose-section{

    padding:90px 0;

    }

    .skm-brand-title{

    font-size:34px;

    }

    .skm-brand-description{

    font-size:15px;

    }

    .skm-brand-card{

    border-radius:20px;

    }

    }

    @media(max-width:576px){

    .skm-brand-title{

    font-size:28px;

    line-height:1.3;

    }

    .skm-brand-card-content{

    padding:22px;

    }

    .skm-brand-image-box{

    height:200px;

    }

    .skm-brand-card-number{

    width:44px;

    height:44px;

    font-size:15px;

    }

    .skm-brand-card-content h3{

    font-size:21px;

    }

    }















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

    .skm-brand-card{

        isolation:isolate;

    }

    .skm-brand-card::before{

        content:"";

        position:absolute;

        top:-180px;

        left:-120px;

        width:220px;

        height:520px;

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

        transform:rotate(25deg);

        filter:blur(10px);

        opacity:0;

        transition:.8s;

        z-index:3;

    }

    .skm-brand-card:hover::before{

        left:150%;

        opacity:.8;

    }


    .skm-brand-card{

        transition:.55s cubic-bezier(.22,.61,.36,1);

    }

    .skm-brand-card:hover{

        transform:

        translateY(-22px)

        scale(1.02);

        box-shadow:

        0 60px 100px rgba(0,0,0,.18),

        0 30px 70px rgba(0,183,255,.18),

        0 0 45px rgba(124,58,237,.18);

    }




    .skm-brand-card{

        border:2px solid transparent;

        background:

        linear-gradient(#fff,#fff) padding-box,

        linear-gradient(

        140deg,

        #00b7ff,

        #7c3aed,

        #00d2ff,

        #7c3aed

        ) border-box;

        background-size:300%;

    }

    .skm-brand-card:hover{

        animation:skmBorderMove 5s linear infinite;

    }

    @keyframes skmBorderMove{

    0%{

    background-position:0%;

    }

    100%{

    background-position:300%;

    }

    }











    .skm-brand-card-number{

    animation:

    skmBadgeFloat 3s ease-in-out infinite;

    }

    @keyframes skmBadgeFloat{

    0%{

    transform:translateY(0);

    }

    50%{

    transform:translateY(-8px);

    }

    100%{

    transform:translateY(0);

    }

    }




    .skm-brand-card{

    overflow:hidden;

    }

    .skm-brand-card::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:

    radial-gradient(

    rgba(0,183,255,.30),

    transparent 70%

    );

    top:var(--y);

    left:var(--x);

    transform:

    translate(-50%,-50%);

    opacity:0;

    transition:.35s;

    pointer-events:none;

    }

    .skm-brand-card:hover::after{

    opacity:1;

    }








    /*==================================================
            CLIENT SUCCESS STORIES
    ==================================================*/

    .client-success{

        position:relative;

        padding:50px 0;

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

        overflow:hidden;

    }

    .client-success::before{

        content:"";

        position:absolute;

        width:650px;

        height:650px;

        top:-260px;

        right:-220px;

        border-radius:50%;

        background:#DBEAFE;

        filter:blur(140px);

        opacity:.75;

    }

    .client-success::after{

        content:"";

        position:absolute;

        width:500px;

        height:500px;

        bottom:-180px;

        left:-180px;

        border-radius:50%;

        background:#CFFAFE;

        filter:blur(120px);

        opacity:.6;

    }

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

    .success-grid{

        position:relative;

        z-index:2;

        display:grid;

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

        gap:50px;

        align-items:center;

        margin-top:20px;

    }

    /*===============================
    VIDEO
    ================================*/

    .success-video{

        position:relative;

        overflow:hidden;

        border-radius:34px;

        height:520px;

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

    }

    .success-video video{

        width:100%;

        height:100%;

        object-fit:cover;

        transition:.6s;

    }

    .success-video:hover video{

        transform:scale(1.08);

    }

    .success-video::before{

        content:"";

        position:absolute;

        inset:0;

        background:linear-gradient(

            to top,

            rgba(0,0,0,.65),

            transparent

        );

        z-index:1;

    }

    /*===============================
    Overlay
    ================================*/

    .success-overlay{

        position:absolute;

        left:40px;

        bottom:40px;

        color:#fff;

        z-index:2;

        max-height: 400px;

    }

    .success-overlay span{

        display:inline-block;

        padding:10px 20px;

        border-radius:999px;

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

        backdrop-filter:blur(15px);

        margin-bottom:18px;

        font-weight:700;

    }

    .success-overlay h3{

        font-size:42px;

        margin-bottom:10px;

        color:#fff;

    }

    .success-overlay p{

        color:#fff;

        opacity:.85;

    }

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

    .success-content{

        display:flex;

        flex-direction:column;

        gap:30px;

    }

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

    .success-stats{

        display:grid;

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

        gap:20px;

    }

    .success-card{

        background:#fff;

        padding:10px;

        border-radius:28px;

        text-align:center;

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

        transition:.35s;

    }

    .success-card:hover{

        transform:translateY(-8px);

        background:linear-gradient(135deg,#0074A0,#00C2FF);

    }

    .success-card:hover h3,

    .success-card:hover p{

        color:#fff;

    }

    .success-card h3{

        font-size:40px;

        color:#0074A0;

        margin-bottom:10px;

        font-weight:800;

    }

    .success-card p{

        color:#64748B;

        margin:0;

    }

    /*===============================
    REVIEW
    ================================*/

    .client-review{

        background:#fff;

        padding:15px;

        border-radius:30px;

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

    }

    .review-top{

        display:flex;

        align-items:center;

        gap:18px;

        margin-bottom:25px;

    }

    .review-top img{

        width:70px;

        height:70px;

        border-radius:50%;

        object-fit:cover;

    }

    .review-top h4{

        margin-bottom:4px;

        font-size:22px;

    }

    .review-top span{

        color:#64748B;

        font-size:15px;

    }

    .client-review p{

        color:#64748B;

        line-height:32px;

        margin-bottom:0px;

    }

    .review-stars{

        color:#F59E0B;

        font-size:22px;

        letter-spacing:4px;

    }

    /*===============================
    BEFORE AFTER
    ================================*/

    .before-after{

        display:flex;

        justify-content:space-between;

        align-items:center;

        background:#fff;

        padding:15px;

        border-radius:28px;

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

    }

    .before-after div{

        text-align:center;

    }

    .before-after small{

        color:#64748B;

    }

    .before-after h3{

        font-size:38px;

        color:#0074A0;

        margin:12px 0;

        font-weight:800;

    }

    .before-after span{

        color:#64748B;

    }

    .before-after i{

        font-size:36px;

        color:#0074A0;

    }

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

    @media(max-width:1200px){

        .success-grid{

            grid-template-columns:1fr;

        }

    }

    @media(max-width:768px){

        .client-success{

            padding:90px 0;

        }

        .success-video{

            height:420px;

        }

        .success-stats{

            grid-template-columns:1fr;

        }

        .success-overlay{

            left:25px;

            bottom:25px;

        }

        .success-overlay h3{

            font-size:28px;

        }

        .before-after{

            

            gap:20px;

        }

    }



















    /*==================================================
            TRUSTED BY GLOBAL BRANDS
    ==================================================*/

    .trusted-brands{

        position:relative;

        padding:50px 0;

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

        overflow:hidden;

    }

    .trusted-brands::before{

        content:"";

        position:absolute;

        width:650px;

        height:650px;

        top:-250px;

        left:-220px;

        border-radius:50%;

        background:#DBEAFE;

        filter:blur(140px);

        opacity:.7;

    }

    .trusted-brands::after{

        content:"";

        position:absolute;

        width:450px;

        height:450px;

        bottom:-180px;

        right:-180px;

        border-radius:50%;

        background:#CFFAFE;

        filter:blur(120px);

        opacity:.6;

    }

    /*====================================
    Logo Marquee
    ====================================*/

    .brand-marquee{

        position:relative;

        overflow:hidden;

        margin-top:0px;

        padding:20px 0;

    }

    .brand-marquee::before,

    .brand-marquee::after{

        content:"";

        position:absolute;

        top:0;

        width:140px;

        height:100%;

        z-index:2;

    }

    .brand-marquee::before{

        left:0;

        background:linear-gradient(to right,#F7FBFF,transparent);

    }

    .brand-marquee::after{

        right:0;

        background:linear-gradient(to left,#F7FBFF,transparent);

    }

    .brand-track{

        display:flex;

        align-items:center;

        gap:100px;

        width:max-content;

        animation:brandScroll 28s linear infinite;

    }

    .brand-marquee:hover .brand-track{

        animation-play-state:paused;

    }

    @keyframes brandScroll{

        from{

            transform:translateX(0);

        }

        to{

            transform:translateX(-50%);

        }

    }

    /*====================================
    Logo Cards
    ====================================*/

    .brand-item{

        width:220px;

        height:120px;

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

        backdrop-filter:blur(18px);

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

        border-radius:26px;

        display:flex;

        justify-content:center;

        align-items:center;

        transition:.4s;

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

    }

    .brand-item:hover{

        transform:translateY(-8px);

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

        border-color:#0074A0;

    }

    .brand-item img{

        max-width:130px;

        max-height:48px;

        object-fit:contain;

        /* opacity:.65;

        filter:grayscale(100%); */

        transition:.20s;

    }

    .brand-item:hover img{

        opacity:1;

        filter:none;

        transform:scale(1.05);

    }

    /*====================================
    Trust Cards
    ====================================*/

    .trust-card{

        position:relative;

        height:100%;

        background:#fff;

        border-radius:30px;

        padding:20px 18px;

        text-align:center;

        overflow:hidden;

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

        transition:.4s;

    }

    .trust-card::before{

        content:"";

        position:absolute;

        width:220px;

        height:220px;

        border-radius:50%;

        background:rgba(37,99,235,.05);

        top:-120px;

        right:-120px;

        transition:.5s;

    }

    .trust-card:hover::before{

        transform:scale(1.4);

    }

    .trust-card:hover{

        transform:translateY(-12px);

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

    }

    /*====================================
    Icons
    ====================================*/

    .trust-icon{

        width:90px;

        height:90px;

        border-radius:24px;

        margin:0 auto 28px;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:34px;

        color:#fff;

        background:linear-gradient(

            135deg,

            #0074A0,

            #00C2FF

        );

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

    }

    .trust-card h3{

        font-size:28px;

        font-weight:800;

        color:#111827;

        margin-bottom:18px;

    }

    .trust-card p{

        color:#64748B;

        line-height:32px;

        margin:0;

    }

    /*====================================
    Responsive
    ====================================*/

    @media(max-width:992px){

        .brand-item{

            width:180px;

            height:100px;

        }

        .brand-item img{

            max-width:110px;

        }

    }

    @media(max-width:768px){

        .trusted-brands{

            padding:90px 0;

        }

        .brand-track{

            gap:18px;

        }

        .brand-item{

            width:150px;

            height:85px;

            border-radius:18px;

        }

        .brand-item img{

            max-width:90px;

            max-height:35px;

        }

        .trust-card{

            padding:30px 25px;

        }

        .trust-icon{

            width:70px;

            height:70px;

            font-size:26px;

            border-radius:18px;

        }

        .trust-card h3{

            font-size:22px;

        }

        .trust-card p{

            font-size:15px;

            line-height:28px;

        }

    }




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

    .video-testimonials{

        position:relative;

        padding:50px 0;

        background:linear-gradient(180deg,#F8FBFF,#FFFFFF);

        overflow:hidden;

    }

    .video-testimonials::before{

        content:"";

        position:absolute;

        width:650px;

        height:650px;

        top:-250px;

        right:-220px;

        border-radius:50%;

        background:#DBEAFE;

        filter:blur(140px);

        opacity:.65;

    }

    .video-testimonials::after{

        content:"";

        position:absolute;

        width:500px;

        height:500px;

        bottom:-200px;

        left:-180px;

        border-radius:50%;

        background:#CFFAFE;

        filter:blur(120px);

        opacity:.6;

    }

    /*==================================
    Slider
    ==================================*/

    .testimonial-slider{

        position:relative;

        z-index:2;

        display:grid;

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

        gap:30px;

        margin-top:80px;

    }

    /*==================================
    Card
    ==================================*/

    .testimonial-card{

        background:#fff;

        border-radius:30px;

        overflow:hidden;

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

        transition:.45s;

        height:100%;

    }

    .testimonial-card:hover{

        transform:translateY(-12px);

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

    }

    /*==================================
    Video
    ==================================*/

    .testimonial-video{

        position:relative;

        overflow:hidden;

        height:280px;

    }

    .testimonial-video video{

        width:100%;

        height:100%;

        object-fit:cover;

        transition:.5s;

    }

    .testimonial-card:hover video{

        transform:scale(1.08);

    }

    .testimonial-video::before{

        content:"";

        position:absolute;

        inset:0;

        background:linear-gradient(

            to top,

            rgba(0,0,0,.35),

            transparent

        );

        z-index:1;

    }

    /*==================================
    Play Button
    ==================================*/

    .play-btn{

        position:absolute;

        left:50%;

        top:50%;

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

        width:82px;

        height:82px;

        border-radius:50%;

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

        display:flex;

        justify-content:center;

        align-items:center;

        color:#0074A0;

        font-size:26px;

        z-index:2;

        transition:.35s;

        cursor:pointer;

    }

    .play-btn:hover{

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

    }

    /*==================================
    Content
    ==================================*/

    .testimonial-content{

        padding:32px;

    }

    /*==================================
    Client Info
    ==================================*/

    .client-info{

        display:flex;

        align-items:center;

        gap:16px;

        margin-bottom:25px;

    }

    .client-info img{

        width:70px;

        height:70px;

        border-radius:50%;

        object-fit:cover;

    }

    .client-info h4{

        margin-bottom:5px;

        font-size:22px;

        font-weight:700;

    }

    .client-info span{

        color:#64748B;

        font-size:14px;

    }

    /*==================================
    Review
    ==================================*/

    .testimonial-content p{

        color:#64748B;

        line-height:32px;

        margin-bottom:24px;

        min-height:95px;

    }

    /*==================================
    Stars
    ==================================*/

    .stars{

        color:#F59E0B;

        font-size:22px;

        letter-spacing:5px;

    }

    /*==================================
    Hover Border
    ==================================*/

    .testimonial-card::before{

        content:"";

        position:absolute;

        left:0;

        top:0;

        width:100%;

        height:5px;

        background:linear-gradient(

            90deg,

            #0074A0,

            #00C2FF

        );

        transform:scaleX(0);

        transform-origin:left;

        transition:.4s;

    }

    .testimonial-card:hover::before{

        transform:scaleX(1);

    }

    /*==================================
    Responsive
    ==================================*/

    @media(max-width:1200px){

        .testimonial-slider{

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

        }

    }

    @media(max-width:768px){

        .video-testimonials{

            padding:90px 0;

        }

        .testimonial-slider{

            grid-template-columns:1fr;

            gap:25px;

        }

        .testimonial-video{

            height:230px;

        }

        .testimonial-content{

            padding:25px;

        }

        .client-info img{

            width:60px;

            height:60px;

        }

        .client-info h4{

            font-size:20px;

        }

        .play-btn{

            width:68px;

            height:68px;

            font-size:22px;

        }

    }
















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

    .faq-section{

        position:relative;

        padding:50px 0;

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

        overflow:hidden;

    }

    /*==================================
    Background Glow
    ==================================*/

    .faq-section::before{

        content:"";

        position:absolute;

        width:650px;

        height:650px;

        left:-250px;

        top:-250px;

        background:#DBEAFE;

        border-radius:50%;

        filter:blur(150px);

        opacity:.7;

    }

    .faq-section::after{

        content:"";

        position:absolute;

        width:500px;

        height:500px;

        right:-180px;

        bottom:-180px;

        background:#CFFAFE;

        border-radius:50%;

        filter:blur(120px);

        opacity:.6;

    }

    /*==================================
    Search
    ==================================*/

    .faq-search{

        position:relative;

        max-width:700px;

        margin:70px auto 60px;
        

    }

    .faq-search i{

        position:absolute;

        left:28px;

        top:50%;

        transform:translateY(-50%);

        color:#0074A0;

        font-size:18px;

    }

    .faq-search input{

        width:100%;

        height:72px;

        border:none;

        outline:none;

        border-radius:999px;

        padding:0 30px 0 65px;

        font-size:17px;

        background:#fff;

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

        transition:.35s;
         
        gap: 30px;

    }

    .faq-search input:focus{

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

    }

    /*==================================
    Accordion
    ==================================*/

    .faq-wrapper{

        position:relative;

        z-index:2;

        max-width:1200px;

        margin:auto;

        display:flex;

        columns: 2;

    }

    /*==================================
    Item
    ==================================*/

    .faq-item{

        background:#fff;

        border-radius:26px;

        margin-bottom:22px;

        overflow:hidden;

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

        transition:.35s;
        flex-direction: column;

        gap: 50px;

        width: 70%;

    }

    .faq-item:hover{

        transform:translateY(-5px);

    }

    .faq-item.active{

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

    }

    /*==================================
    Question
    ==================================*/

    .faq-question{

        width:100%;

        background:none;

        border:none;

        padding:15px 20px;

        display:flex;

        justify-content:space-between;

        align-items:center;

        cursor:pointer;

        font-size:20px;

        font-weight:700;

        color:#111827;

        text-align:left;

    }

    .faq-question i{

        width:46px;

        height:46px;

        border-radius:50%;

        display:flex;

        justify-content:center;

        align-items:center;

        background:#EEF5FF;

        color:#0074A0;

        transition:.35s;

    }

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

        transform:rotate(45deg);

        background:#0074A0;

        color:#fff;

    }

    /*==================================
    Answer
    ==================================*/

    .faq-answer{

        max-height:0;

        overflow:hidden;

        transition:max-height .45s ease;

    }

    .faq-answer p{

        padding:0 35px 30px;

        color:#64748B;

        line-height:22px;

        font-size:17px;

        margin:0;

    }

    /*==================================
    Responsive
    ==================================*/

    @media(max-width:991px){

        .faq-question{

            font-size:18px;

            padding:24px;

        }

    }

    @media(max-width:768px){

        .faq-section{

            padding:90px 0;

        }

        .faq-search{

            margin:50px auto 40px;

        }

        .faq-search input{

            height:60px;

            font-size:15px;

            padding-left:55px;

        }

        .faq-search i{

            left:22px;

            font-size:16px;

        }

        .faq-question{

            font-size:16px;

            padding:22px;

        }

        .faq-question i{

            width:38px;

            height:38px;

            font-size:14px;

        }

        .faq-answer p{

            padding:0 22px 22px;

            font-size:15px;

            line-height:28px;

        }

    }



    .faq-item{

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

    }

    .faq-answer{

        transition:
            max-height .45s ease,
            opacity .35s ease;

    }

    .faq-item.active{

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

    }























    /*==================================================
            PREMIUM CTA BANNER
    ==================================================*/

    .premium-cta{

        position:relative;

        

        display:flex;

        align-items:center;

        overflow:hidden;

        border-radius:0;

        width: 90%; 
        margin: auto;

        border-radius: 50px;

        padding: 30px;

        margin-bottom: 30px;

    }


    /*==================================
    Background Video
    ==================================*/

    .cta-video{

        position:absolute;

        inset:0;

        width:100%;

        height:100%;

        object-fit:cover;

        z-index:0;

    }


    /*==================================
    Overlay
    ==================================*/

    .cta-overlay{

        position:absolute;

        inset:0;

        background:
        linear-gradient(
            135deg,
            rgba(15,23,42,.88),
            rgba(37,99,235,.65)
        );

        z-index:1;

    }


    /*==================================
    Content
    ==================================*/

    .premium-cta .container{

        position:relative;

        z-index:2;

    }


    .cta-content{

        max-width:900px;

        margin:auto;

        text-align:center;

        color:#fff;

    }


    /*==================================
    Badge
    ==================================*/

    .cta-badge{

        display:inline-flex;

        align-items:center;

        gap:10px;

        padding:12px 24px;

        border-radius:999px;

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

        backdrop-filter:blur(20px);

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

        font-size:14px;

        font-weight:700;

        margin-bottom:30px;

    }


    /*==================================
    Heading
    ==================================*/

    .cta-content h2{

        font-size:45px;

        line-height:1.1;

        font-weight:800;

        margin-bottom:25px;

        color:#fff;

    }


    .cta-content h2 span{

        display:block;

        background:linear-gradient(

            90deg,

            #ffffff,

            #7DD3FC

        );

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;

    }


    /*==================================
    Paragraph
    ==================================*/

    .cta-content p{

        max-width:700px;

        margin:0 auto 45px;

        font-size:16px;

        line-height:34px;

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

    }


    /*==================================
    Buttons
    ==================================*/

    .cta-buttons{

        display:flex;

        justify-content:center;

        gap:20px;

        flex-wrap:wrap;

        margin-bottom:70px;

    }


    .cta-primary,
    .cta-secondary{

        display:inline-flex;

        align-items:center;

        gap:12px;

        padding:18px 34px;

        border-radius:999px;

        font-size:16px;

        font-weight:700;

        text-decoration:none;

        transition:.35s;

    }


    /* Primary */

    .cta-primary{

        background:#fff;

        color:#0074A0;

    }


    .cta-primary:hover{

        transform:translateY(-5px);

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

    }


    /* Secondary */

    .cta-secondary{

        color:#fff;

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

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

        backdrop-filter:blur(15px);

    }


    .cta-secondary:hover{

        background:#fff;

        color:#0074A0;

        transform:translateY(-5px);

    }


    /*==================================
    Stats
    ==================================*/

    .cta-stats{

        display:flex;

        justify-content:center;

        gap:25px;

        flex-wrap:wrap;

    }


    .cta-stat-card{

        min-width:190px;

        padding:15px 25px;

        border-radius:28px;

        background:

        rgba(255,255,255,.14);

        border:

        1px solid rgba(255,255,255,.25);

        backdrop-filter:blur(20px);

        transition:.35s;

    }


    .cta-stat-card:hover{

        transform:translateY(-10px);

        background:

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

    }


    .cta-stat-card h3{

        font-size:42px;

        font-weight:800;

        color:#fff;

        margin-bottom:8px;

    }


    .cta-stat-card span{

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

        font-size:15px;

    }


    /*==================================
    Floating Animation
    ==================================*/

    .cta-stat-card{

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

    }


    .cta-stat-card:nth-child(2){

        animation-delay:.5s;

    }


    .cta-stat-card:nth-child(3){

        animation-delay:1s;

    }


    @keyframes ctaFloat{


        0%{

            transform:translateY(0);

        }


        50%{

            transform:translateY(-12px);

        }


        100%{

            transform:translateY(0);

        }

    }


    /*==================================
    Responsive
    ==================================*/


    @media(max-width:1200px){


        .cta-content h2{

            font-size:55px;

        }


    }


    @media(max-width:768px){


        .premium-cta{

            min-height:650px;

            padding:90px 0;

        }


        .cta-content h2{

            font-size:38px;

        }


        .cta-content p{

            font-size:16px;

            line-height:30px;

        }


        .cta-buttons{

            flex-direction:column;

            align-items:center;

        }


        .cta-primary,
        .cta-secondary{

            width:100%;

            justify-content:center;

        }


        .cta-stat-card{

            width:100%;

            min-width:auto;

        }


    }

























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

    .premium-footer{

        position:relative;

        background:
        linear-gradient(
            135deg,
            #020617,
            #0F172A
        );

        padding:30px 0 30px;

        overflow:hidden;

        color:#fff;

    }


    /*==================================
    Background Glow
    ==================================*/

    .premium-footer::before{

        content:"";

        position:absolute;

        width:600px;

        height:600px;

        top:-250px;

        right:-200px;

        background:#0074A0;

        border-radius:50%;

        filter:blur(150px);

        opacity:.25;

    }


    .premium-footer::after{

        content:"";

        position:absolute;

        width:500px;

        height:500px;

        bottom:-200px;

        left:-200px;

        background:#00C2FF;

        border-radius:50%;

        filter:blur(150px);

        opacity:.15;

    }


    /*==================================
    Newsletter
    ==================================*/

    .footer-newsletter{

        position:relative;

        z-index:2;

        margin: auto;

        justify-content:space-between;

        align-items:center;

        gap:40px;

        padding:30px;

        border-radius:35px;

        background:

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

        border:

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

        backdrop-filter:blur(20px);

        margin-bottom:80px;



    }


    .newsletter-content span{

        display:inline-block;

        color:#38BDF8;

        font-weight:700;

        margin-bottom:15px;

    }


    .newsletter-content h2{

        font-size:42px;

        font-weight:800;

        color:#fff;

        line-height:1.2;

    }


    .newsletter-content strong{

        display:block;

        background:linear-gradient(
            90deg,
            #38BDF8,
            #fff
        );

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;

    }


    .newsletter-content p{

        color:#CBD5E1;

        margin-top:15px;

        max-width:500px;

        margin-bottom: 20px;

    }


    /*==================================
    Newsletter Form
    ==================================*/

    .newsletter-form{

        display:flex;

        background:#fff;

        padding:8px;

        border-radius:999px;

        min-width:430px;

    }


    .newsletter-form input{

        flex:1;

        border:none;

        outline:none;

        padding:0 25px;

        font-size:15px;

        border-radius:999px;

    }


    .newsletter-form button{

        border:none;

        padding:16px 28px;

        border-radius:999px;

        background:

        linear-gradient(
            135deg,
            #0074A0,
            #00C2FF
        );

        color:#fff;

        font-weight:700;

        display:flex;

        gap:10px;

        align-items:center;

        cursor:pointer;

        transition:.35s;

    }


    .newsletter-form button:hover{

        transform:translateX(5px);

    }


    /*==================================
    Footer Main
    ==================================*/

    .footer-main{

        position:relative;

        z-index:2;

        display:grid;

        grid-template-columns:

        1.5fr 1fr 1fr 1fr;

        gap:50px;

        margin-bottom: 0px;

    }


    /*==================================
    Brand
    ==================================*/

    .footer-logo{

        font-size:38px;

        font-weight:900;

        text-decoration:none;

        color:#fff;

        width: 50%;

    }
    .footer-logo img{
        width: 50%;

    }


    .footer-logo span{

        color:#38BDF8;

    }


    .footer-brand p{

        margin:15px 0;

        color:#94A3B8;

        line-height:32px;

        max-width:300px;

    }


    /*==================================
    Social
    ==================================*/

    .footer-social{

        display:flex;

        gap:12px;

    }


    .footer-social a{

        width:45px;

        height:45px;

        border-radius:50%;

        display:flex;

        align-items:center;

        justify-content:center;

        background:

        rgba(255,255,255,.1);

        color:#fff;

        text-decoration:none;

        transition:.35s;

    }


    .footer-social a:hover{

        background:#0074A0;

        transform:translateY(-5px);

    }


    /*==================================
    Links
    ==================================*/

    .footer-links h4,
    .footer-instagram h4{

        font-size:20px;

        margin-bottom:25px;
        color: #FFFFFF;

    }


    .footer-links ul{

        list-style:none;

        padding:0;

    }


    .footer-links li{

        margin-bottom:15px;

    }


    .footer-links a{

        text-decoration:none;

        color:#94A3B8;

        transition:.3s;

    }


    .footer-links a:hover{

        color:#38BDF8;

        padding-left:5px;

    }


    /*==================================
    Instagram Grid
    ==================================*/

    .instagram-grid{

        display:grid;

        grid-template-columns:repeat(3,70px);

        gap:12px;

    }


    .instagram-grid img{

        width:70px;

        height:70px;

        object-fit:cover;

        border-radius:15px;

        transition:.4s;

    }


    .instagram-grid img:hover{

        transform:scale(1.12);

    }


    /*==================================
    Bottom
    ==================================*/

    .footer-bottom{

        position:relative;

        z-index:2;

        border-top:

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

        margin-top:70px;

        padding-top:30px;

        display:flex;

        justify-content:space-between;

        align-items:center;

    }


    .footer-bottom p{

        color:#94A3B8;

        margin:0;

    }


    .footer-bottom a{

        color:#94A3B8;

        text-decoration:none;

        margin-left:25px;

    }


    .footer-bottom a:hover{

        color:#38BDF8;

    }


    /*==================================
    Responsive
    ==================================*/

    @media(max-width:1100px){

        .footer-main{

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

        }


        .footer-newsletter{

            flex-direction:column;

            align-items:flex-start;

        }

    }


    @media(max-width:768px){

        .premium-footer{

            padding:70px 0 25px;

        }


        .footer-newsletter{

            padding:30px;

            border-radius:25px;

        }


        .newsletter-content h2{

            font-size:30px;

        }


        .newsletter-form{

            width:100%;

            min-width:auto;

            flex-direction:column;

            background:transparent;

            gap:12px;

            padding:0;

        }


        .newsletter-form input{

            height:55px;

            background:#fff;

        }


        .newsletter-form button{

            justify-content:center;

        }


        .footer-main{

            grid-template-columns:1fr;

            gap:40px;

        }


        .footer-bottom{

            flex-direction:column;

            gap:20px;

            text-align:center;

        }


        .footer-bottom a{

            margin:0 10px;

        }






    }









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

.imp-dropdown{
    position:relative;
}

.imp-dropdown>a{
    display:flex;
    align-items:center;
    gap:8px;
}

.imp-dropdown>a i{
    font-size:12px;
    transition:.3s;
}

.imp-dropdown:hover>a i{
    transform:rotate(180deg);
}

.imp-dropdown-menu{

    position:absolute;
    top:130%;
    left:0;

    width:260px;

    background:#fff;

    border-radius:18px;

    padding:12px 0;

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

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    z-index:999;

}

.imp-dropdown:hover .imp-dropdown-menu{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

.imp-dropdown-menu li{

    width:100%;

}

.imp-dropdown-menu a{

    display:block;

    padding:14px 22px;

    font-size:15px;

    color:#111827;

    transition:.3s;

}

.imp-dropdown-menu a:hover{

    background:#F5FAFF;

    color:#0074A0;

    padding-left:30px;

}

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

.imp-mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;

    max-width:90%;

    height:100vh;

    background:#fff;

    padding:90px 25px;

    overflow-y:auto;

    transition:.4s;

    z-index:9999;

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

}

.imp-mobile-menu.active{

    right:0;

}

.imp-mobile-menu > ul{

    display:flex;
    flex-direction:column;
    gap:5px;

}
.imp-mobile-menu li{

    list-style:none;

}

.imp-mobile-menu a{

    display:block;

    padding:14px 0;

    font-weight:600;

    color:#111827;

    border-bottom:1px solid #eee;

}

.imp-mobile-menu .imp-btn{

    width:100%;
    margin-top:20px;
}

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

.imp-mobile-dropdown-btn{

    width:100%;

    border:none;

    background:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}

.imp-mobile-dropdown-btn i{

    transition:.3s;

}

.imp-mobile-dropdown.active
.imp-mobile-dropdown-btn i{

    transform:rotate(180deg);

}

.imp-mobile-submenu{

     display:none !important;

    padding-left:15px;

    margin-top:10px;


}

.imp-mobile-dropdown.active > .imp-mobile-submenu{

    display:block !important;

}

.imp-mobile-submenu a{

    font-size:14px;

    padding:12px 0;

}

/*=========================================
        OVERLAY
=========================================*/

.imp-menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.imp-menu-overlay.active{

    opacity:1;

    visibility:visible;

}

/*=========================================
        TOGGLE
=========================================*/

.imp-toggle{

    width:45px;

    height:45px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    border-radius:12px;

    background:#fff;

    border:1px solid #E5E7EB;

}

.imp-toggle span{

    width:24px;

    height:3px;

    background:#111827;

    border-radius:30px;

    transition:.3s;

}

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

@media(max-width:992px){

.imp-menu{

    display:none;

}

.imp-btn{

    display:none;

}

.imp-search{

    display:none;

}

.imp-toggle{

    display:flex;

}

}

@media(max-width:576px){

.imp-mobile-menu{

    width:280px;

}

.imp-logo img{

    max-width:120px;

}

}



.cta-container{
    display: flex;
    gap: 10%;
}





/* Mobile View Dropdown Hover */

@media (max-width: 992px) {

    .imp-dropdown{
        position: relative;
    }

    .imp-dropdown-menu{
        display: none;
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding-left: 15px;
        margin-top: 10px;
    }

    .imp-dropdown:hover .imp-dropdown-menu{
        display: block;
    }

    .imp-dropdown:hover > a i{
        transform: rotate(180deg);
    }

}
@media (max-width: 768px) {

    .creator-info{
        padding: 0%;
    }

    .featured-creator {
        padding: 0px 0;
    }

    .trending-creators {
        padding: 10px 0;
    }


        .how-we-work {
        padding: 10px 0;
    }


        .before-after {
        
        gap: 20px;
    }

        .client-success {
        padding: 10px 0;
    }

        .video-testimonials {
        padding: 10px 0;
    }

    .footer-main{
        align-items: center;
    }

    
.cta-container{
    flex-direction: column;
    gap: 10%;
}


.footer-newsletter{

        margin-bottom:20px;
    }

    #navbar-button{
        padding: 10%;
    }


}

















@media (max-width:992px){

    .imp-dropdown{
        position:relative;
    }

    .imp-dropdown-menu{

        display:none;
        position:static;
        width:100%;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        background:transparent;
        padding-left:15px;
        margin-top:10px;

    }

    .imp-dropdown.active .imp-dropdown-menu{

        display:block;

    }

}
    
    
    /*=========================================
        PREMIUM TOPBAR
=========================================*/

.imp-topbar{
    background:linear-gradient(90deg,#0074A0,#00C2FF);
    color:#fff;
    font-size:14px;
    position:relative;
    z-index:1000;
}

.imp-topbar-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:48px;
}

.imp-topbar-left{
    display:flex;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}

.imp-topbar-left a,
.imp-topbar-left span{
    color:#fff;
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
    transition:.3s;
}

.imp-topbar-left a:hover{
    color:#FFE082;
}

.imp-topbar-left i{
    font-size:14px;
}

.imp-topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.imp-topbar-right a{
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    transition:.35s;
}

.imp-topbar-right a:hover{
    background:#fff;
    color:#0074A0;
    transform:translateY(-3px) rotate(360deg);
}

@media(max-width:991px){

    .imp-topbar-wrapper{
        /*flex-direction:column;*/
        gap:10px;
        padding:10px 0;
    }

    .imp-topbar-left{
        justify-content:center;
        gap:15px;
        text-align:center;
    }

}

@media(max-width:576px){

    .imp-topbar-left{
        flex-direction:column;
        gap:8px;
    }

    .imp-topbar-right{
        margin-top:5px;
    }

}
/*====================================
        MOBILE TOPBAR
====================================*/
@media (max-width:850px){

    .imp-topbar{
        padding:0;
    }

    .imp-topbar-wrapper{
        height:40px;
        min-height:40px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:0 12px;
        flex-direction:row;
    }

    /* Email & Address Hide */
    .imp-topbar-left a:nth-child(2),
    .imp-topbar-left span{
        display:none;
    }

    .imp-topbar-left{
        display:flex;
        align-items:center;
        gap:0;
    }

    .imp-topbar-left a{
        font-size:13px;
        font-weight:600;
    }

    .imp-topbar-left i{
        font-size:12px;
    }

    .imp-topbar-right{
        gap:6px;
    }

    .imp-topbar-right a{
        width:28px;
        height:28px;
        font-size:12px;
        margin:0;
    }

    /* Header Top */
    #imp-header{
        top:40px;
        padding:10px 0;
    }

    body.imp-scroll #imp-header{
        top:0;
    }

}

.imp-mobile-menu{
    position: fixed;
    top:0;
    right:-100%;
    width:320px;
    height:100%;
    background:#fff;
    transition:.4s;
    z-index:9999;
    overflow-y:auto;
}

.imp-mobile-menu.active{
    right:0;
}

.imp-menu-close{

    position:absolute;
    top:18px;
    right:18px;

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:#0074A0;
    color:#fff;

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

    font-size:20px;

    cursor:pointer;

    transition:.3s;

}

.imp-menu-close:hover{

    background:#00C2FF;
    transform:rotate(90deg);

}