{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
    }

  .modern-hero{
    background:#090909;
    padding:90px 0;
    position:relative;
    overflow:hidden;
}


/* Glow */

.hero-glow{
    position:absolute;
    width:450px;
    height:450px;
    background:#ff5a00;
    filter:blur(160px);
    opacity:.18;
    border-radius:50%;
}

.glow-one{
    top:-150px;
    left:-150px;
}

.glow-two{
    right:-150px;
    bottom:-150px;
}



/* Container */

.hero-container{

    width:90%;
    max-width:1190px;
    margin:auto;

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

    gap:70px;
    align-items:center;

    position:relative;
    z-index:2;

}



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


.hero-badge{

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

    padding:3px 9px;

    border:1px solid #ff5a00;

    border-radius:50px;

    color:#ff5a00;

    font-size:10px;

    font-weight:600;

}


.hero-badge span{

    width:8px;
    height:8px;

    background:#ff5a00;

    border-radius:50%;

}
.hero-content{
    transform: translateY(-66px);
}


.hero-content h1{

    font-size:66px;

    line-height:1.1;

    margin:30px 0;

    font-weight:800;

    color:white;

}



.hero-content h1 strong{

    color:#ff5a00;

}



.hero-content p{

    color:#aaa;

    font-size:17px;

    line-height:32px;

    max-width:650px;

}



/* FEATURES */

.hero-features{

    display:grid;

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

    gap:20px;

    margin-top:45px;

}


.hero-feature{

    background:#151515;

    border:1px solid #272727;

    border-radius:18px;

    padding:25px 10px;

    text-align:center;

    transition:.3s;

}



.hero-feature:hover{

    transform:translateY(-8px);

    border-color:#ff5a00;

}



.feature-icon{

    width: 16px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    background: #202020;
    border-radius: 7px;
    color: #ff5a00;
    font-size: 13px;

}



.feature-icon i{

    font-size:28px;

}



.hero-feature h4{

    color:#ddd;

    font-size:14px;

    line-height:22px;

}



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


.form-card{

    background:#161616;

    border:1px solid #292929;

    padding:35px;

    border-radius:25px;

    box-shadow:0 20px 60px #000;

}



.form-card h2{

    color:#fff;

    font-size:35px;

}



.form-card h2 span{

    color:#ff5a00;

}



.form-card p{

    color:#999;

    margin:15px 0 25px;

}



.form-card input,
.form-card textarea{

    width:100%;

    background:#222;

    border:1px solid #333;

    color:white;

    padding:16px;

    border-radius:10px;

    margin-bottom:15px;

    outline:none;

    font-size:15px;

}



.form-card input:focus,
.form-card textarea:focus{

    border-color:#ff5a00;

}



.form-card textarea{

    height:120px;

    resize:none;

}



.form-card button{

    width:100%;

    padding:17px;

    background:#ff5a00;

    border:none;

    border-radius:10px;

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

}



.form-card button:hover{

    background:#ff741f;

}



.privacy{

    color:#888;

    font-size:13px;

    margin-top:20px;

}




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


.hero-stats{

    display:grid;

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

    gap:15px;

    margin-top:20px;

}



.hero-stats div{

    background:#151515;

    border:1px solid #272727;

    padding:18px;

    border-radius:15px;

}



.hero-stats h3{

    color:#ff5a00;

    font-size:28px;

}



.hero-stats span{

    color:#aaa;

    font-size:12px;

}



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


/* ==========================
   RESPONSIVE GRID SYSTEM
========================== */


/* Tablet Landscape */

@media(max-width:1100px){

    .hero-container{

        grid-template-columns:1fr;

        gap:50px;

    }


    .hero-content h1{

        font-size:55px;

    }


    .hero-right{

        width:100%;
        max-width:650px;
        margin:auto;

    }



    /* Feature Grid */

    .hero-features{

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

        gap:20px;

    }


    /* Stats Grid */

    .hero-stats{

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

        gap:15px;

    }

}




/* Tablet Portrait */

@media(max-width:768px){


    .modern-hero{

        padding:70px 0;

    }


    .hero-container{

        width:92%;

    }



    .hero-content h1{

        font-size:45px;

    }


    .hero-content p{

        font-size:15px;

        line-height:28px;

    }



    /* Features 2 Column */

    .hero-features{

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

        gap:15px;

    }



    .hero-feature{

        padding:20px 10px;

    }



    .feature-icon{

        width:60px;
        height:60px;

    }




    /* Stats 2 Column */

    .hero-stats{

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

        gap:15px;

    }



}





/* Mobile */

@media(max-width:480px){

    .hero-features{

        display:grid;

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

        gap:12px;

    }


    .hero-feature{

        display:grid;

        grid-template-columns:1fr;

        align-items:center;

        text-align:center;

        padding:18px 8px;

    }


    .feature-icon{

        margin:0 auto 12px;

        width:55px;

        height:55px;

    }


    .hero-feature h4{

        font-size:12px;

        line-height:18px;

    }

}
    .marketing-section {
        background: #f7f4ee;
        padding: 70px 0;
    }

    .container {
        width: 90%;
        max-width: 1350px;
        margin: auto;
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 40px;
    }

    .title h2 {
        font-size: 48px;
        font-weight: 900;
        margin-top: 10px;
    }

    .title small {
        color: #ff5b2e;
        letter-spacing: 2px;
    }

    .desc {
        width: 360px;
        color: #777;
        line-height: 1.7;
    }

    .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid #ddd;
        background: #f7f4ee;
    }

    .left {
        border-right: 1px solid #ddd;
    }

    .item {
        padding: 20px;
        border-bottom: 1px solid #ddd;
    }

    .heading {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .heading span {
        color: #ff5b2e;
        font-weight: bold;
    }

    .heading h4 {
        font-size: 17px;
    }

    .item p {
        margin-top: 15px;
        color: #666;
        line-height: 1.7;
    }

    .active {
        position: relative;
    }

    .active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20px;
        width: 90%;
        height: 2px;
        background: #ff5b2e;
    }

    .right {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bars {
        display: flex;
        align-items: flex-end;
        gap: 18px;
        height: 280px;
    }

    .bar {
        width: 95px;
        text-align: center;
    }

    .fill {
        background: #ff5622;
        width: 100%;
    }

    .bar h5 {
        margin-top: 15px;
    }

    .bar span {
        color: #666;
        font-size: 14px;
    }

    .wg-why-section {
        width: 100%;
        background: #f6f3ed;
        padding: 14px 0;
        overflow: hidden;
    }

    .wg-why-container {
        width: 90%;
        max-width: 1400px;
        margin: auto;
    }

    .wg-why-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 50px;
        margin-bottom: 55px;
    }

    .wg-why-heading {
        flex: 1;
    }

    .wg-why-eyebrow {
        color: #ff5722;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        margin: 0 0 18px;
    }

    .wg-why-heading h2 {
        margin: 0;
        font-size: 46px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -1px;
        color: #111;
    }

    .wg-why-description {
        width: 360px;
        color: #777;
        font-size: 15px;
        line-height: 1.8;
        padding-top: 45px;
        font-size: 13px;
        text-align: justify;
    }

    .wg-why-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid #ddd8cf;
        background: #f6f3ed;
    }

    .wg-why-accordion {
        border-right: 1px solid #ddd8cf;
    }

    .wg-why-item {
        border-bottom: 1px solid #ddd8cf;
        transition: .3s ease;
    }

    .wg-why-title {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 25px 30px;
        cursor: pointer;
        font-size: 17px;
        font-weight: 600;
    }

    .wg-why-number {
        color: #ff5722;
        font-weight: 700;
    }

    .wg-why-title span:nth-child(2) {
        flex: 1;
    }

    .wg-why-title button {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background: white;
        cursor: pointer;
        font-size: 18px;
    }

    .wg-why-item.active .wg-why-title button {
        background: #ff5722;
        color: white;
        border-color: #ff5722;
    }

    .wg-why-content {
        max-height: 0;
        overflow: hidden;
        padding: 0 30px;
        transition: max-height .5s ease;
    }

    .wg-why-item.active .wg-why-content {
        max-height: 200px;
        padding-bottom: 25px;
    }

    .wg-why-content p {
        color: #777;
        font-size: 14px;
        line-height: 1.8;
        margin: 0 0 20px;
    }

    .wg-why-progress {
        width: 100%;
        height: 5px;
        background: #ddd;
        overflow: hidden;
    }

    .wg-why-progress span {
        display: block;
        height: 100%;
        background: #ff5722;
    }

    .wg-why-chart {
        padding: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wg-panel {
        display: none;
        width: 100%;
        animation: wgFade .5s ease;
    }

    .wg-panel.active {
        display: block;
    }

    @keyframes wgFade {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .wg-panel h3 {
        text-align: center;
        color: #ff5722;
        font-size: 14px;
        letter-spacing: 2px;
        margin-bottom: 40px;
    }

    .wg-bars {
        height: 330px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 25px;
    }

    .wg-bar {
        width: 65px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .wg-bar span {
        font-size: 14px;
        font-weight: 700;
    }

    .wg-bar div {
        width: 100%;
        height: 230px;
        background: #ebe6dc;
        display: flex;
        align-items: flex-end;
    }

    .wg-bar i {
        width: 100%;
        background: #ff5722;
        display: block;
        transition: 1s;
    }

    .wg-bar small {
        color: #777;
        font-size: 12px;
    }

    /* ==========================
CARDS
========================== */
    .wg-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .wg-cards div {
        background: white;
        border: 1px solid #ddd;
        padding: 11px 0px;
        text-align: center;
    }

    .wg-cards strong {
        display: block;
        font-size: 22px;
        padding-right: 118px;
        color: #ff5722;
    }

    .wg-cards span {
        color: #777;
        font-size: 14px
    }

    .wg-roi {
        width: 220px;
        height: 220px;
        border-radius: 50%;
        margin: auto;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background: conic-gradient(#ff5722 270deg,
                #e7e2da 270deg);
    }

    .wg-roi::before {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        background: #fff;
        border-radius: 50%;
    }

    .roi-text {
        position: relative;
        z-index: 5;
        text-align: center;
        font-size: 45px;
        font-weight: 900;
        color: #111;
    }

    .roi-text small {
        display: block;
        font-size: 14px;
        color: #777;
        font-weight: 400;
    }

    .wg-funnel div {
        background: #ff5722;
        color: white;
        margin: 15px auto;
        padding: 15px;
        text-align: center;
        font-weight: 600;
    }

    .wg-panel {
        background: #f7f4ef;
        padding: 40px;
        font-family: Arial, sans-serif;
    }

    .dashboard-title {
        color: #ff4b17;
        font-size: 14px;
        letter-spacing: 2px;
        margin-bottom: 25px;
        text-transform: uppercase;
    }

    .wg-dashboard {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 20px;
    }

    .wg-dashboard-card {
        background: #fff;
        border: 1px solid #e5e5e5;
        padding: 18px;
    }

    .wg-dashboard-card h2 {
        margin: 0;
        color: #ff4b17;
        font-size: 46px;
        font-weight: 700;
        line-height: 1;
        text-align:center;
    }

    .wg-dashboard-card p {
        margin-top: 10px;
        color: #444;
        font-size: 16px;
    }

    .wg-dashboard-progress {
        background: #fff;
        border: 1px solid #e5e5e5;
        text-align: center;
        padding: 18px;
    }

    .wg-dashboard-progress p {
        margin-bottom: 10px;
        color: #555;
    }

    .progress-bar {
        width: 140px;
        height: 8px;
        background: #ddd;
        margin: 0 auto 15px;
        border-radius: 20px;
        overflow: hidden;
    }

    .progress-bar span {
        display: block;
        width: 94%;
        height: 100%;
        background: #ff4b17;
    }

    .wg-dashboard-progress h2 {
        margin: 0;
        font-size: 40px;
        font-weight: 700;
        color: #000;
    }

    .wg-conversion {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px 0;
    }

    .wg-conversion-step {
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111;
        font-size: 14px;
        font-weight: 600;
        border-radius: 4px;
        transition: .4s ease;
    }

    .wg-conversion-step div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 8px;
    }

    .wg-conversion-step span {
        font-weight: 600;
    }

    .wg-conversion-step strong {
        font-size: 18px;
        color: #ff4d1c;
    }

    .wg-step-visitor {
        width: 100%;
        background: rgba(255, 77, 28, .12);
    }

    .wg-step-interest {
        width: 85%;
        background: rgba(255, 77, 28, .22);
    }

    .wg-step-leads {
        width: 65%;
        background: rgba(255, 77, 28, .40);
    }

    .wg-step-customer {
        width: 45%;
        background: rgb(227 104 70 / 75%);
    }

    .wg-step-converted {
        width: 35%;
        background: rgba(255, 77, 28, .75);
    }

    .wg-conversion-step:hover {
        transform: translateY(-5px);
        box-shadow:
            0 10px 25px rgba(0, 0, 0, .12);
    }

    .wg-conversion-arrow {
        font-size: 12px;
        color: #777;
        text-align: center;
    }

    .wg-con-bottom {
        margin-top: 20px;
        text-align: center;
        font-size: 13px;
        color: #777;
    }

    @media(max-width:768px) {
        .wg-step-visitor {
            width: 100%;
        }

        .wg-step-interest {
            width: 90%;
        }

        .wg-step-leads {
            width: 75%;
        }

        .wg-step-customer {
            width: 55%;
        }

        .wg-step-converted {
            width: 56%;
        }

        .wg-conversion-step div {
            padding: 0 2px;
        }
    }

    @media(max-width:1024px) {
        .wg-why-header {
            flex-direction: column;
        }

        .wg-why-description {
            width: 100%;
            padding-top: 0;
        }

        .wg-why-heading h2 {
            font-size: 42px;
        }

        .wg-why-wrapper {
            grid-template-columns: 1fr;
        }

        .wg-why-accordion {
            border-right: 0;
        }

        .wg-why-chart {
            padding: 40px;
        }
    }

    @media(max-width:600px) {
        .wg-why-section {
            padding: 50px 0;
        }

        .wg-why-container {
            width: 92%;
        }

        .wg-why-heading h2 {
            font-size: 30px;
            line-height: 1.2;
        }

        .wg-why-description {
            font-size: 14px;
        }

        .wg-why-title {
            padding: 18px 15px;
            font-size: 14px;
        }

        .wg-why-content {
            padding-left: 15px;
            padding-right: 15px;
        }

        .wg-why-chart {
            padding: 30px 10px;
        }

        .wg-bars {
            gap: 8px;
            height: 240px;
        }

        .wg-bar {
            width: 40px;
        }

        .wg-bar small {
            font-size: 10px;
        }

        .wg-cards {
            grid-template-columns: 1fr;
        }

        .wg-roi {
            width: 170px;
            height: 170px;
            font-size: 35px;
        }

        .wg-dashboard h2 {
            font-size: 55px;
        }
    }

    @media(max-width:380px) {
        .wg-why-heading h2 {
            font-size: 25px;
        }

        .wg-bars {
            gap: 5px;
        }

        .wg-bar {
            width: 32px;
        }
    }

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

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .wg-why-container{
        width:95%;
    }

    .wg-why-heading h2{
        font-size:40px;
    }

    .wg-why-description{
        width:100%;
        padding-top:0;
    }

    .wg-why-chart{
        padding:40px 20px;
    }

    .wg-bar{
        width:55px;
    }

}


/* ---------- Tablet ---------- */

@media (max-width:991px){

    .wg-why-header{
        flex-direction:column;
        gap:20px;
    }

    .wg-why-description{
        width:100%;
    }

    .wg-why-wrapper{
        grid-template-columns:1fr;
    }

    .wg-why-accordion{
        border-right:none;
        border-bottom:1px solid #ddd8cf;
    }

    .wg-dashboard{
        grid-template-columns:1fr;
    }

    .wg-cards{
        grid-template-columns:repeat(2,1fr);
    }

    .wg-bars{
        height:260px;
        gap:15px;
    }

    .wg-bar{
        width:48px;
    }

    .wg-panel{
        padding:30px 20px;
    }

}


/* ---------- Mobile ---------- */

@media (max-width:767px){

    .wg-why-section{
        padding:50px 0;
    }

    .wg-why-container{
        width:94%;
    }

    .wg-why-heading h2{
        font-size:30px;
        line-height:1.3;
    }

    .wg-why-description{
        font-size:14px;
        line-height:1.7;
        text-align:left;
    }

    .wg-why-title{
        padding:16px;
        font-size:14px;
        gap:10px;
    }

    .wg-why-title button{
        width:28px;
        height:28px;
        font-size:16px;
        flex-shrink:0;
    }

    .wg-why-content{
        padding:0 16px;
    }

    .wg-why-chart{
        padding:25px 10px;
    }

    .wg-bars{
        height:210px;
        gap:10px;
    }

    .wg-bar{
        width:38px;
    }

    .wg-bar div{
        height:150px;
    }

    .wg-bar span{
        font-size:12px;
    }

    .wg-bar small{
        font-size:10px;
    }

    .wg-dashboard-card h2{
        font-size:34px;
    }

    .wg-dashboard-card p{
        font-size:14px;
        text-align:center;
    }

    .wg-dashboard-progress h2{
        font-size:30px;
    }

    .wg-cards{
        grid-template-columns:1fr;
    }

    .wg-cards strong{
        padding-right:0;
        font-size:28px;
    }

    .wg-roi{
        width:170px;
        height:170px;
    }

    .wg-roi::before{
        width:145px;
        height:145px;
    }

    .roi-text{
        font-size:32px;
    }

    .wg-conversion-step{
        height:auto;
        padding:12px;
    }

    .wg-conversion-step div{
        padding:0 12px;
        font-size:13px;
    }

    .wg-conversion-step strong{
        font-size:16px;
    }

}


/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .wg-why-heading h2{
        font-size:26px;
    }

    .wg-bars{
        gap:6px;
    }

    .wg-bar{
        width:28px;
    }

    .wg-bar div{
        height:120px;
    }

    .wg-dashboard-card{
        padding:15px;
    }

    .wg-dashboard-card h2{
        font-size:28px;
    }

    .wg-dashboard-progress h2{
        font-size:26px;
    }

    .progress-bar{
        width:100%;
    }

    .wg-conversion-step div{
        flex-direction:column;
        align-items:center;
        gap:6px;
    }

    .wg-step-visitor,
    .wg-step-interest,
    .wg-step-leads,
    .wg-step-customer,
    .wg-step-converted{
        width:100%;
    }

}
    .cs-section {
        background: #080808;
        padding: 70px 60px;
    }

    .cs-title span {
        color: #ff5722;
        font-size: 11px;
    }

    .cs-title h2 {
        color: #fff;
        font-size: 28px;
    }

    .cs-title p {
        color: #fff;
        font-size: 16px;
        line-height: 1.8;
        font-weight: 400;
        margin-top: 20px;
        text-align: left;
    }

    .cs-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .svc-card {
        background: #080808;
        border: 1px solid #242424;
        min-height: 190px;
        padding: 22px;
        position: relative;
        overflow: hidden;
        transition: .4s ease;
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.45);
    }

    .svc-card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .svc-icon-box svg {
        width: 22px;
        height: 22px;
        color: #777;
        transition: .3s ease;
    }

    .svc-num {
        color: #555;
        font-size: 11px;
    }

    .svc-name {
        margin-top: 5px;
        color: #FAFAF8;
        font-size: 15px;
        font-weight: 500;
    }

    .svc-tag {
        display: block;
        margin-top: 8px;
        color: #FAFAF8;
        font-size: 11px;
    }

    .svc-desc {
        color: #999;
        font-size: 12px;
        line-height: 1.5;
        opacity: 0;
        transform: translateY(20px);
        transition: .4s ease;
        text-align: justify;
    }

    .svc-arrow {
        position: absolute;
        right: 22px;
        bottom: 18px;
        color: #777;
        font-size: 18px;
        transition: .3s ease;
    }

    .svc-card::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #ff5722;
        transition: .4s ease;
    }

    .svc-card:hover {
        background: #111;
        transform: translateY(-5px);
        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.7),
            0 0 20px rgba(255, 87, 34, 0.15);
    }

    .svc-card:hover::after {
        width: 100%;
    }

    .svc-card:hover .svc-desc {
        opacity: 1;
        transform: translateY(0);
    }

    .svc-card:hover .svc-icon-box svg {
        color: #ff5722;
    }

    .svc-card:hover .svc-arrow {
        color: #ff5722;
        transform: translate(5px, -5px);
    }
.svc-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.svc-card-link:hover {
    color: inherit;
}

.svc-card-link:hover .svc-card {
    transform: translateY(-5px);
}
    @media(max-width:992px) {
        .cs-section {
            padding: 60px 20px;
        }

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

        .svc-card {
            min-height: 170px;
        }
    }

    @media(max-width:576px) {
        .cs-section {
            padding: 45px 15px;
        }

        .cs-grid {
            grid-template-columns: 1fr;
        }

        .cs-title h2 {
            font-size: 22px;
        }

        .svc-card {
            min-height: 150px;
            padding: 18px;

        }

        .svc-arrow {
            right: 15px;
            bottom: 15px;
        }
    }

    .ai-sec {
        background: #070d18;
        padding: 14px 60px;

    }

    .ai-head span {
        color: #ff5a1f;
        font-size: 10px;

    }

    .ai-head h2 {
        color: #fff;
        font-size: 34px;
    }

    .ai-head h2 b {
        color: #ff5a1f;
    }

    .ai-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-top: 35px;
    }

    .ai-card {
        background: #101723;
        border: 1px solid #223247;
        min-height: 190px;
        padding: 16px;
        position: relative;
        overflow: hidden;
        transition: .4s ease;
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.35);
    }

    .ai-card-top {
        display: flex;
        justify-content: space-between;
    }

    .ai-svg svg {
        width: 22px;
        height: 22px;
        stroke: #73849a;
        fill: none;
        stroke-width: 1.7;
        transition: .3s;
    }

    .ai-card-top small {
        color: #526174;
        font-size: 9px;
    }

    .ai-card label {
        display: inline-block;
        margin-top: 18px;
        font-size: 8px;
        color: #00aaff;
        border: 1px solid #006c9f;
        padding: 2px 6px;
    }

    .ai-card h3 {
        color: white;
        font-size: 13px;
        margin: 8px 0;
    }

    .ai-card p {
        color: #7c899b;
        font-size: 10px;
        opacity: 0;
        transform: translateY(15px);
        transition: .4s;
        text-align: justify;
    }

    .ai-card em {
        position: absolute;
        right: 15px;
        bottom: 12px;
        font-style: normal;
        font-size: 8px;
        color: #008bcc;
    }

    .ai-card:hover {
        background: #111f32;
        border-color: #00aaff;
        transform: translateY(-5px);
        box-shadow:
            0 15px 40px rgba(0, 170, 255, 0.18),
            0 0 25px rgba(0, 170, 255, 0.15);
    }

    .ai-card:hover .ai-svg svg {
        stroke: #00aaff;
    }

    .ai-card:hover p {
        opacity: 1;
        transform: translateY(0);
    }

    @media(max-width:992px) {
        .ai-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media(max-width:576px) {
        .ai-grid {
            grid-template-columns: 1fr;
        }

        .ai-head h2 {
            font-size: 25px;
        }
    }

    .grow-business {
        position: relative;
        background: #000;
        overflow: hidden;
        padding: 90px 80px;
    }

    .grow-container {
        max-width: 1400px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .grow-left {
        width: 60%;
    }

    .grow-left h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 52px;
        font-weight: 900;
        line-height: 0.95;
        letter-spacing: -2px;
        text-transform: uppercase;
        color: #fff;
    }

    .grow-left h2 span {
        color: #ff5a1f;
    }

    .grow-right {
        width: 40%;
        display: flex;
        justify-content: flex-end;
    }

    .grow-btn {
        background: #ff5a1f;
        color: #111;
        text-decoration: none;
        padding: 10px 16px;
        display: inline-flex;
        align-items: center;
        gap: 14px;
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        font-weight: 600;
        transition: .35s;
        position: relative;
        z-index: 5;
        border-radius: 85px;
    }

    .grow-btn:hover {
        background: #ff5a1f;
        color: #fff;
        transform: translateY(-3px);
    }

    .grow-btn span {
        font-size: 24px;
    }

    .bg-circle {
        position: absolute;
        right: -180px;
        top: 50%;
        transform: translateY(-50%);
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: #2b120d;
        z-index: 1;
    }

    @media(max-width:991px) {

        .grow-business {
            padding: 70px 30px;
        }

        .grow-container {
            flex-direction: column;
            align-items: flex-start;
            gap: 40px;
        }

        .grow-left,
        .grow-right {
            width: 100%;
        }

        .grow-right {
            justify-content: flex-start;
        }

        .grow-left h2 {
            font-size: 48px;
        }

        .grow-btn {
            width: 100%;
            justify-content: center;
        }

        .bg-circle {
            width: 350px;
            height: 350px;
            right: -150px;
        }

    }

    @media(max-width:576px) {

        .grow-left h2 {
            font-size: 34px;
        }

        .grow-btn {
            padding: 18px 20px;
            font-size: 16px;
        }

    }

    .grow-business {
        position: relative;
        background: #000;
        overflow: hidden;
        padding: 90px 80px;
    }

    .grow-container {
        max-width: 1400px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .grow-left {
        width: 60%;
    }

    .grow-left h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 52px;
        font-weight: 900;
        line-height: 0.95;
        letter-spacing: -2px;
        text-transform: uppercase;
        color: #fff;
    }

    .grow-left h2 span {
        color: #ff5a1f;
    }

    .grow-right {
        width: 40%;
        display: flex;
        justify-content: flex-end;
    }

    .grow-btn {
        background: #ff5a1f;
        color: #111;
        text-decoration: none;
        padding: 10px 16px;
        display: inline-flex;
        align-items: center;
        gap: 14px;
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        font-weight: 600;
        transition: .35s;
        position: relative;
        z-index: 5;
        border-radius: 85px;
    }

    .grow-btn:hover {
        background: #ff5a1f;
        color: #fff;
        transform: translateY(-3px);
    }

    .grow-btn span {
        font-size: 24px;
    }

    .bg-circle {
        position: absolute;
        right: -180px;
        top: 50%;
        transform: translateY(-50%);
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: #2b120d;
        z-index: 1;
    }

    @media(max-width:991px) {

        .grow-business {
            padding: 70px 30px;
        }

        .grow-container {
            flex-direction: column;
            align-items: flex-start;
            gap: 40px;
        }

        .grow-left,
        .grow-right {
            width: 100%;
        }

        .grow-right {
            justify-content: flex-start;
        }

        .grow-left h2 {
            font-size: 48px;
        }

        .grow-btn {
            width: 100%;
            justify-content: center;
        }

        .bg-circle {
            width: 350px;
            height: 350px;
            right: -150px;
        }

    }

    @media(max-width:576px) {

        .grow-left h2 {
            font-size: 34px;
        }

        .grow-btn {
            padding: 18px 20px;
            font-size: 16px;
        }

    }

    .roadmap-wrapper {
        display: flex;
        gap: 70px;
        align-items: flex-start;
        margin-top: 70px;
    }

    .roadmap-left {
        width: 48%;
    }

    .roadmap-right {
        width: 70%;
        position: sticky;
        top: 120px;
    }

    .roadmap-card {

        display: none;
        background: #f6f3ec;
        border-radius: 20px;
        padding: 45px;
        animation: cardFade .45s ease;
        box-shadow: 0 15px 45px rgba(0, 0, 0, .08);

    }

    .roadmap-card.active {

        display: block;

    }


    @keyframes cardFade {

        from {

            opacity: 0;
            transform: translateY(20px);

        }

        to {

            opacity: 1;
            transform: translateY(0);

        }

    }


    .card-tag {

        display: inline-block;

        padding: 8px 18px;

        border-radius: 30px;

        background: #fff;

        color: #ff5b2e;

        font-size: 13px;

        font-weight: 700;

        letter-spacing: 2px;

        margin-bottom: 25px;

        text-transform: uppercase;

    }


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

    .roadmap-card h3 {

        font-size: 42px;

        line-height: 1.2;

        font-weight: 700;

        margin-bottom: 18px;

        color: #111;

    }


    .roadmap-card p {

        font-size: 17px;

        line-height: 1.8;

        color: #666;

        margin-bottom: 35px;

    }


    /*=============================
 STAT BOXES
==============================*/

    .card-stats {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 18px;

        margin-bottom: 35px;

    }


    .stat-box {

        background: #ff6200;

        padding: 30px;

        border-radius: 16px;

        border: 1px solid #ececec;

        transition: .35s;

    }


    .stat-box:hover {

        transform: translateY(-6px);

        box-shadow: 0 18px 35px rgba(0, 0, 0, .08);

    }


    .stat-box h2 {

        font-size: 42px;

        font-weight: 700;

        color: #fff;

        margin-bottom: 10px;

    }


    .stat-box span {

        font-size: 15px;

        color: #fff;

    }


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

    .progress-area {

        background: #fff;

        padding: 2px;

        border-radius: 18px;

        border: 1px solid #ececec;

    }


    .progress-head {

        display: flex;

        justify-content: space-between;

        font-weight: 600;

        margin-bottom: 0px;

        font-size: 0px;

    }


    .progress {

        height: 10px;

        background: #e5e5e5;

        border-radius: 50px;

        overflow: hidden;

    }


    .progress span {

        display: block;

        height: 100%;

        background: linear-gradient(90deg, #ff5b2e, #ff9a52);

        border-radius: 50px;

        width: 0;

        transition: 1.2s;

    }


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

    @media(max-width:991px) {

        .roadmap-wrapper {

            flex-direction: column;

        }

        .roadmap-left,
        .roadmap-right {

            width: 100%;

        }

        .roadmap-right {

            position: relative;

            top: 0;

        }

    }


    @media(max-width:768px) {

        .roadmap-card {

            padding: 28px;

        }

        .roadmap-card h3 {

            font-size: 30px;

        }

        .card-stats {

            grid-template-columns: 1fr;

        }

        .stat-box {

            padding: 22px;

        }

        .stat-box h2 {

            font-size: 32px;

        }

    }

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

    .analytics-dashboard {

        margin: 35px 0;

        background: #ffffff;

        border-radius: 20px;

        padding: 28px;

        border: 1px solid #ececec;

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

    }


    /* HEADER */

    .analytics-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 25px;

    }

    .analytics-header span {

        color: #ff5b2e;

        font-size: 13px;

        font-weight: 700;

        letter-spacing: 2px;

    }

    .analytics-header small {

        color: #888;

        font-size: 13px;

    }


    /*======================================
 METRIC BOXES
=======================================*/

    .analytics-grid {

        display: grid;

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

        gap: 18px;

        margin-bottom: 30px;

    }

    .analytics-box {

        background: #f8f7f5;

        border-radius: 16px;

        padding: 22px;

        transition: .35s;

    }

    .analytics-box:hover {

        transform: translateY(-6px);

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

    }

    .analytics-box h2 {

        font-size: 40px;

        color: #ff5b2e;

        margin-bottom: 8px;

        font-weight: 700;

    }

    .analytics-box p {

        margin: 0;

        color: #666;

        font-size: 15px;

    }


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

    .analytics-chart {

        margin-top: 10px;

    }

    .chart-bars {

        height: 180px;

        display: flex;

        align-items: flex-end;

        justify-content: space-between;

        gap: 12px;

        margin-bottom: 14px;

    }

    .chart-bars span {

        flex: 1;

        border-radius: 10px 10px 0 0;

        background: linear-gradient(to top, #ff5b2e, #ffaf66);

        animation: barGrow 1.3s ease;

        transition: .35s;

    }

    .chart-bars span:hover {

        transform: scaleY(1.08);

    }


    /* LABELS */

    .chart-labels {

        display: flex;

        justify-content: space-between;

        font-size: 13px;

        color: #999;

    }


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

    .analytics-footer {

        margin-top: 35px;

        display: grid;

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

        gap: 16px;

    }

    .analytics-footer div {

        background: #f8f7f5;

        border-radius: 14px;

        padding: 18px;

        text-align: center;

    }

    .analytics-footer strong {

        display: block;

        font-size: 28px;

        color: #111;

        margin-bottom: 6px;

    }

    .analytics-footer span {

        font-size: 13px;

        color: #666;

    }


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

    @keyframes barGrow {

        from {

            height: 0;

        }

    }


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

    @media(max-width:768px) {

        .analytics-grid {

            grid-template-columns: 1fr;

        }

        .analytics-footer {

            grid-template-columns: 1fr;

        }

        .chart-bars {

            height: 130px;

        }

        .analytics-box h2 {

            font-size: 32px;

        }

    }

    .roadmap-content {

        max-height: 0;

        overflow: hidden;

        transition: max-height .45s ease;

    }

    .roadmap-btn {

        transition: .3s;

    }

    .roadmap-item.active {

        border-color: #ff5b2e;

    }

    .roadmap-card {

        display: none;

    }

    .roadmap-card.active {

        display: block;

        animation: fadeCard .45s ease;

    }

    @keyframes fadeCard {

        from {

            opacity: 0;

            transform: translateY(20px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

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

    .roadmap-card {

        transition: .45s;

    }

    .roadmap-card:hover {

        transform: translateY(-8px);

    }


    .chart-bars span {

        transition:
            height .8s ease,
            transform .3s ease;

    }


    .chart-bars span:hover {

        transform: scaleY(1.08);

    }


    .stat-box {

        transition: .35s;

    }

    .stat-box:hover {

        transform: translateY(-8px);

        box-shadow: 0 18px 35px rgba(0, 0, 0, .08);

    }


    .analytics-footer div {

        transition: .35s;

    }

    .analytics-footer div:hover {

        transform: translateY(-6px);

    }

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

    .analytics-circle {

        width: 170px;

        height: 170px;

        margin: 45px auto 10px;

        position: relative;

    }

    .analytics-circle svg {

        transform: rotate(-90deg);

    }

    .circle-bg {

        fill: none;

        stroke: #ececec;

        stroke-width: 10;

    }

    .circle-progress {

        fill: none;

        stroke: #ff5b2e;

        stroke-width: 10;

        stroke-linecap: round;

        stroke-dasharray: 427;

        stroke-dashoffset: 427;

        transition: 2s ease;

    }

    .circle-text {

        position: absolute;

        inset: 0;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

    .circle-text h2 {

        font-size: 42px;

        margin: 0;

        color: #111;

    }

    .circle-text span {

        color: #777;

        font-size: 14px;

    }

    .roadmap-section {
        background: #F2EFE8;
        padding: 20px 60px;
        font-family: 'Poppins', sans-serif;
    }

    .roadmap-section .container {
        width: 100%;
        max-width: 1320px;
        margin: auto;
        padding: 0 15px;
    }



    .roadmap-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 70px;
        gap: 80px;
    }

    .roadmap-heading {
        flex: 1;
    }

    .roadmap-subtitle {
        display: inline-block;
        color: #ff5a1f;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .roadmap-heading h2 {
        color: #111;
        font-size: 40px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -1px;
        text-transform: uppercase;
    }

    .roadmap-text {
        width: 360px;
    }

    .roadmap-text p {
        color: #9a9a9a;
        font-size: 16px;
        line-height: 1.8;
        margin-top: 52px;
        text-align: justify;
    }



    .roadmap-wrapper {
        display: flex;
        gap: 80px;
        align-items: flex-start;
    }

    .roadmap-left {
        width: 58%;
    }




    .roadmap-item {
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding: 8px 0;
    }

    .roadmap-item:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .roadmap-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .roadmap-info {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    .roadmap-number {
        color: #5a5a5a;
        font-size: 18px;
        font-weight: 700;
        min-width: 40px;
    }

    .roadmap-info h4 {
        color: #111;
        font-size: 19px;
        font-weight: 600;
        transition: .3s;
    }

    .roadmap-item:hover .roadmap-info h4 {
        color: #ff5a1f;
    }



    .roadmap-btn {
        width: 46px;
        height: 46px;
        border: none;
        border-radius: 50%;
        background: #1d1d1d;
        color: #fff;
        font-size: 24px;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: .35s;
        flex-shrink: 0;
    }

    .roadmap-btn:hover {
        background: #ff5a1f;
    }

    .roadmap-item.active .roadmap-btn {
        background: #ff5a1f;
        transform: rotate(1deg);
    }



    .roadmap-content {
        display: none;
        padding-left: 65px;
        margin-top: 20px;
    }

    .roadmap-item.active .roadmap-content {
        display: block;
    }

    .roadmap-content p {
        color: #9c9c9c;
        font-size: 13px;
        line-height: 1.8;
        max-width: 520px;
        text-align: justify;
    }



    .roadmap-item.active .roadmap-number {
        color: #ff5a1f;
    }

    .roadmap-item.active h4 {
        color: #ff5a1f;
    }


    .score-card {
        background: #141414;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 18px;
        padding: 40px;
    }

    .score-card h5 {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 35px;
        letter-spacing: 1px;
    }

    .progress-item {
        margin-bottom: 28px;
    }

    /* .progress-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0px;
} */

    .progress-head span:first-child {
        color: #9c9c9c;
        font-size: 15px;
        font-weight: 500;
    }

    .progress-head span:last-child {
        color: #ff5a1f;
        font-size: 15px;
        font-weight: 700;
    }

    .roadmap-progress {
        width: 100%;
        height: 10px;
        background: #2a2a2a;
        border-radius: 30px;
        overflow: hidden;
    }

    .roadmap-progress-fill {
        height: 100%;
        background: #ff5a1f;
        border-radius: 30px;
        transition: 1s;
    }

    .fill1 {
        width: 85%;
    }

    .fill2 {
        width: 74%;
    }

    .fill3 {
        width: 92%;
    }

    .fill4 {
        width: 81%;
    }

    .score-text {
        margin-top: 30px;
        color: #8b8b8b;
        line-height: 1.8;
        font-size: 15px;
    }



    .roadmap-item {
        transition: .35s;
    }

    .roadmap-item:hover {
        padding-left: 12px;
    }

    .score-card {
        transition: .4s;
    }

    .score-card:hover {
        transform: translateY(-6px);
    }



    @media(max-width:991px) {

        .roadmap-header {
            flex-direction: column;
            gap: 25px;
            margin-bottom: 50px;
        }

        .roadmap-text {
            width: 100%;
        }

        .roadmap-wrapper {
            flex-direction: column;
            gap: 45px;
        }

        .roadmap-left,
        .roadmap-right {
            width: 100%;
        }

        .roadmap-right {
            position: relative;
            top: 0;
        }

        .roadmap-heading h2 {
            font-size: 42px;
        }

        .roadmap-info h4 {
            font-size: 22px;
        }

        .score-card {
            padding: 30px;
        }

    }



    @media(max-width:767px) {

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

        .roadmap-heading h2 {
            font-size: 30px;
        }

        .roadmap-subtitle {
            font-size: 12px;
        }

        .roadmap-title {
            align-items: flex-start;
            gap: 15px;
        }

        .roadmap-info {
            gap: 15px;
        }

        .roadmap-number {
            font-size: 15px;
            min-width: 30px;
        }

        .roadmap-info h4 {
            font-size: 18px;
            line-height: 1.4;
        }

        .roadmap-btn {
            width: 38px;
            height: 38px;
            font-size: 18px;
        }

        .roadmap-content {
            padding-left: 45px;
        }

        .score-card {
            padding: 22px;
        }

        .score-card h5 {
            font-size: 16px;
        }

        .progress-head span {
            font-size: 14px !important;
        }

        .score-text {
            font-size: 14px;
        }

    }



    @media(max-width:480px) {

        .roadmap-heading h2 {
            font-size: 26px;
        }

        .roadmap-info h4 {
            font-size: 16px;
        }

        .roadmap-content {
            padding-left: 0;
            margin-top: 15px;
        }

        .roadmap-content p {
            font-size: 14px;
        }

    }

    /* trusted */
    .logo-gridp {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding: 12px 0;
        overflow: hidden;
        /* background:#f7f6f4; */
    }


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

    .logo-row-wrapper {
        overflow: hidden;
        width: 100%;
    }


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

    .logo-rowp {

        display: flex;
        align-items: center;
        width: max-content;

        gap: 25px;
        white-space: nowrap;
        padding: 14px;
    }


    /* animation */

    .logo-rowp-1 {
        animation: logoLeft 35s linear infinite;
    }


    .logo-rowp-2 {
        animation: logoRight 35s linear infinite;
    }


    /* hover pause */

    .logo-row-wrapper:hover .logo-rowp {
        animation-play-state: paused;
    }


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


    .logo-rowp img {

        height: 89px;
        width: 201px;
        padding: 13px;
        background: #fff;
        border-radius: 14px;
        object-fit: contain;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
        transition: .35s ease;

    }


    .logo-rowp img:hover {

        transform: translateY(-6px);

        box-shadow:
            0 15px 35px rgba(255, 90, 31, .25);
    }



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


    @keyframes logoLeft {

        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }

    }


    @keyframes logoRight {

        from {
            transform: translateX(-50%);
        }

        to {
            transform: translateX(0);
        }

    }

    .trusted-section {
        padding: 25px 0;
        background: #fff;
    }

    .trusted-container {
        width: 100%;
        max-width: 1349px;
        margin: auto;
    }

    .section-title {
        text-align: center;
        margin-bottom: 50px;
    }

    .section-title h2 {
        font-size: 31px;
        font-weight: 700;
    }

    .section-title p {
        color: #666;
        margin-top: 10px;
    }

    /* .slider {
        overflow: hidden;
        position: relative;
        width: 100%;
    } */

    /* .slide-track {
        display: flex;
        width: calc(220px * 14);
        animation: scroll 25s linear infinite;
    } */

    /* .brand-card {
        width: 200px;
        height: 64px;
        margin: 0 10px;
        border: 1px solid #eee;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        font-weight: 700;
        background: #fff;
        flex-shrink: 0;
        transition: .3s;
    } */

    /* .brand-card:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-220px * 7));
        }
    } */


    @media(max-width:768px) {

        .section-title h2 {
            font-size: 28px;
        }

        .brand-card {
            width: 150px;
            height: 65px;
            font-size: 18px;
        }

        /* .slide-track {
            width: calc(170px * 14);
        }

        @keyframes scroll {
            100% {
                transform: translateX(calc(-170px * 7));
            }
        } */

    }

    .case-study {
        background: #0b0b0b;
        color: #fff;
        padding: 49px 0;
    }

    .container {
        width: 90%;
        max-width: 1280px;
        margin: auto;
    }


    .top-label {

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

        color: #ff5a1f;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;

        margin-bottom: 20px;
    }


    .top-label span {

        width: 15px;
        height: 2px;
        background: #ff5a1f;
        display: block;

    }



    .heading h2 {

        font-size: 52px;
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
        margin-bottom: 15px;

    }


    .heading p {

        color: #777;
        font-size: 15px;
        margin-bottom: 45px;

    }


    .case-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        align-items: stretch;
    }

    .case-card {
        background: #111;
        border: 1px solid #2a2a2a;
        border-radius: 14px;
        padding: 24px;
        min-height: 420px;
        display: flex;
        flex-direction: column;
        transition: all .35s ease;
        position: relative;
        overflow: hidden;
    }

    .case-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: transparent;
        transition: .35s;
    }

    .case-card:hover {
        transform: translateY(-8px);
        border-color: #ff5a1f;
        background: #171717;
        box-shadow: 0 18px 40px rgba(255, 90, 31, .12);
    }

    .case-card:hover::before {
        background: #ff5a1f;
    }

    .case-card h3 {
        font-size: 22px;
        line-height: 1.35;
        margin: 0 0 20px;
        min-height: 58px;
    }

    .case-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .case-card li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #bcbcbc;
        line-height: 1.5;
        font-size: 15px;
        margin-bottom: 14px;
    }

    .case-card strong {
        color: #ff5a1f;
        font-size: 30px;
        font-weight: 800;
        min-width: 82px;
    }

    .case-card hr {
        border: none;
        border-top: 1px solid #2e2e2e;
        margin: 22px 0;
    }

    .case-card p {
        margin-top: auto;
        color: #9d9d9d;
        font-size: 14px;
        line-height: 1.7;
        text-align: left;
        text-align: justify;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        border-radius: 30px;
        background: rgba(255, 90, 31, .08);
        border: 1px solid rgba(255, 90, 31, .4);
        color: #ff5a1f;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
        margin-bottom: 18px;
    }

    /* ---------- Tablet ---------- */

    @media(max-width:991px) {


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

        .case-card {
            min-height: 390px;
        }

        .heading h2 {

            font-size: 40px;
        }

    }

    /* ---------- Mobile ---------- */

    @media(max-width:767px) {
        .case-grid {
            grid-template-columns: 1fr;
        }

        .case-card {
            min-height: auto;
            padding: 20px;
        }

        .case-card h3 {
            min-height: auto;
            font-size: 20px;
        }

        .case-card strong {
            font-size: 26px;
            min-width: 72px;
        }



        .heading h2 {

            font-size: 30px;
        }



    }

    /* new */
    .iw-section {
        padding: 40px 0;
        background: #fff;
        overflow: hidden;
    }


    .iw-container {
        width: 80%;
        max-width: 1200px;
        margin: auto;
    }


    .iw-heading {
        text-align: center;
        color: #f58220;
        font-size: 30px;
        font-weight: 700;
        margin-bottom: 40px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }


    /* ONLY THIS SLIDER */

    .iw-slider {
        width: 100%;
        overflow: hidden;
    }


    .iw-slider .swiper-wrapper {
        align-items: stretch;
    }


    .iw-slider .swiper-slide {
        height: auto;
    }



    /* CARD */

    .iw-card {

        background: #f58220;
        color: #fff;

        border-radius: 22px;
        padding: 25px;

        min-height: 360px;

        position: relative;
        overflow: hidden;

        transition: .35s ease;

        cursor: pointer;

        display: flex;
        flex-direction: column;

        box-sizing: border-box;

        margin-top: 12px;
    }


    .iw-card:hover {

        transform: translateY(-8px);

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

    }



    .iw-card::before {

        content: "";

        position: absolute;

        top: 0;
        left: -100%;

        width: 100%;
        height: 100%;

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

        transition: .5s;

    }


    .iw-card:hover::before {
        left: 100%;
    }



    /* ICON */


    .iw-icon {

        width: 60px;
        height: 60px;

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

        margin-bottom: 20px;

        position: relative;
        z-index: 2;

    }


    .iw-icon i {

        font-size: 42px;
        color: #fff;

    }



    /* TITLE */

    .iw-title {

        font-size: 20px;

        line-height: 1.3;

        margin-bottom: 15px;

        font-weight: 700;

        position: relative;

        z-index: 2;

    }



    /* TEXT */


    .iw-text {

        font-size: 15px;

        line-height: 1.7;

        text-align: justify;

        margin-bottom: 25px;

        flex-grow: 1;

        position: relative;

        z-index: 2;

    }




    /* BUTTON */

    .iw-buttons {

        display: flex;

        justify-content: center;

        gap: 15px;

        margin-top: 35px;

    }



    .iw-buttons button {


        width: 45px;
        height: 45px;


        border: none;

        background: #fff;

        color: #f58220;


        border-radius: 50%;


        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);


        cursor: pointer;

        transition: .3s;

    }



    .iw-buttons button:hover {

        background: #f58220;

        color: #fff;

    }





    /* RESPONSIVE */


    @media(max-width:1200px) {

        .iw-container {
            width: 92%;
        }

    }


    @media(max-width:768px) {

        .iw-container {
            width: 90%;
        }


        .iw-heading {
            font-size: 22px;
        }


        .iw-card {

            min-height: auto;

            padding: 25px 20px;

        }


        .iw-icon i {

            font-size: 34px;

        }


        .iw-text {

            text-align: left;

        }


    }


    /* new */




    .tools-section {
        padding: 14px 0;
        background: #f7f3eb;
    }

    .tools-header {
        margin-bottom: 50px;
    }

    .tools-subtitle {
        display: inline-block;
        color: #ff5a2f;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        position: relative;
        padding-left: 28px;
        margin-bottom: 15px;
    }

    .tools-subtitle::before {
        content: "";
        width: 18px;
        height: 2px;
        background: #ff5a2f;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .tools-header h2 {
        font-size: 40px;
        font-weight: 900;
        line-height: 1.1;
        margin: 0 0 12px;
        color: #111;
        text-transform: uppercase;
    }

    .tools-header p {
        color: #777;
        font-size: 14px;
    }



    .tools-grid {

        display: grid;

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

        gap: 18px;

    }



    .tool-card {

        background: #fff;

        border: 1px solid #e8e3da;

        border-radius: 8px;

        padding: 0px 18px;

        text-align: center;

        transition: .35s;

        min-height: 90px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

    .tool-card:hover {

        transform: translateY(-8px);

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

    }




    .tool-icon {

        width: 28px;

        height: 28px;

        border-radius: 8px;

        color: #fff;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 10px;

        font-weight: 700;

        margin-bottom: 0px;

    }


    /* COLORS */

    .ads {
        background: #fbbc05;
        color: #111;
    }

    .meta {
        background: #1877f2;
    }

    .sem {
        background: #ff6b4a;
    }

    .ahrefs {
        background: #0d63ff;
    }

    .ga4 {
        background: #f15a24;
    }

    .mailchimp {
        background: #ffd32a;
        color: #111;
    }

    .figma {
        background: #ff7262;
    }

    .canva {
        background: #14b8c4;
    }

    .wordpress {
        background: #21759b;
    }

    .shopify {
        background: #95bf47;
    }

    .hubspot {
        background: #ff5b5b;
    }

    .linkedin {
        background: #0a66c2;
    }


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

    .tool-card h4 {

        margin: 0 0 8px;

        font-size: 15px;

        font-weight: 700;

        color: #111;

    }

    .tool-card span {

        font-size: 12px;

        color: #888;

    }


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

    /* @media (max-width: 768px) {
    .tools-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .tool-card {
        width: 100%;
        min-height: 110px;
        padding: 15px 10px;
    }
}

@media (max-width: 480px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .tool-card {
        min-height: 100px;
        padding: 12px 8px;
    }
}

    @media(max-width:1200px) {

        .tools-grid {

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

        }

    }


    @media(max-width:992px) {

        .tools-header h2 {

            font-size: 42px;

        }

        .tools-grid {

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

        }

    }


    @media(max-width:768px) {

        .tools-section {

            padding: 70px 0;

        }

        .tools-grid {

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

            gap: 15px;

        }

        .tool-card {

            min-height: 130px;

            padding: 20px 12px;

        }

        .tools-header h2 {

            font-size: 34px;

        }

    }


    @media(max-width:480px) {

        .tools-grid {

            grid-template-columns: 1fr;

        }

        .tools-header {

            text-align: center;

        }

        .tools-subtitle {

            padding-left: 0;

        }

        .tools-subtitle::before {

            display: none;

        }

        .tools-header h2 {

            font-size: 30px;

        }

        .tool-card {

            min-height: 120px;

        }

    } */
    /* =========================
   Large Tablet
========================= */
    @media (max-width: 1200px) {
        .tools-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
    }

    /* =========================
   Tablet
========================= */
    @media (max-width: 992px) {

        .tools-header h2 {
            font-size: 36px;
        }

        .tools-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .tool-card {
            min-height: 120px;
        }
    }

    /* =========================
   Mobile
========================= */
    @media (max-width: 768px) {

        .tools-section {
            padding: 40px 15px;
        }

        .tools-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .tools-header h2 {
            font-size: 30px;
        }

        .tools-header p {
            font-size: 13px;
        }

        .tools-subtitle {
            padding-left: 0;
        }

        .tools-subtitle::before {
            display: none;
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .tool-card {
            width: 100%;
            min-height: 110px;
            padding: 15px 10px;
        }

        .tool-card h4 {
            font-size: 14px;
        }

        .tool-card span {
            font-size: 11px;
        }
    }

    @media (max-width: 768px) {
        .hero {
            flex-direction: column;
            padding: 60px 20px !important;
            gap: 35px;
            min-height: auto;
            text-align: center;
        }
    }


    /* =========================
   Small Mobile
========================= */
    @media (max-width: 480px) {

        .tools-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .tool-card {
            min-height: 100px;
            padding: 12px 8px;
        }

        .tool-card h4 {
            font-size: 13px;
        }

        .tool-card span {
            font-size: 10px;
        }
    }

    /* =========================
   Extra Small Devices
========================= */
    @media (max-width: 360px) {

        .tools-grid {
            grid-template-columns: 1fr;
        }
    }

    /*====================================
 WHY WEBGROSS SECTION
====================================*/

    .why-webgross {
        padding: 100px 49px;
        background: #f8f5ef;
    }

    .why-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 70px;
    }

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

    .why-left {
        flex: 0 0 42%;
    }

    .why-subtitle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #ff5b2e;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 22px;
    }

    .why-subtitle::before {
        content: "";
        width: 18px;
        height: 2px;
        background: #ff5b2e;
    }

    .why-left h2 {
        font-size: 43px;
        line-height: 1.05;
        font-weight: 900;
        margin: 0 0 25px;
        color: #111;
        text-transform: uppercase;
    }

    .why-left h2 span {
        color: #ff5b2e;
    }

    .why-left p {
        font-size: 14px;
        line-height: 1.9;
        color: #666;
        max-width: 470px;
        text-align: justify;
    }

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

    .why-right {
        flex: 0 0 58%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

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

    .why-card {

        background: #fff;

        border: 1px solid #ebe5db;

        border-left: 3px solid #ff5b2e;

        border-radius: 8px;

        padding: 24px;

        display: flex;

        align-items: flex-start;

        gap: 16px;

        transition: .35s ease;

    }

    .why-card:hover {

        transform: translateY(-6px);

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

        border-left-width: 6px;

    }

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

    .why-icon {

        width: 42px;

        height: 42px;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 22px;

        background: #fff4ef;

        border-radius: 10px;

        flex-shrink: 0;

    }

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

    .why-content h4 {

        font-size: 18px;

        font-weight: 700;

        color: #111;

        margin: 0 0 10px;

    }

    .why-content p {

        font-size: 14px;

        line-height: 1.7;

        color: #777;

        margin: 0;
        text-align: justify;

    }

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

    .why-card:hover .why-icon {

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

        transition: .35s;

    }

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

    @media(max-width:1200px) {

        .why-wrapper {

            gap: 45px;

        }

        .why-left h2 {

            font-size: 48px;

        }

    }

    @media(max-width:991px) {

        .why-wrapper {

            flex-direction: column;

            align-items: flex-start;

        }

        .why-left {

            width: 100%;

        }

        .why-right {

            width: 100%;

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

        }

    }

    @media(max-width:768px) {

        .why-webgross {

            padding: 70px 0;

        }

        .why-left h2 {

            font-size: 38px;

        }

        .why-right {

            grid-template-columns: 1fr;

        }

        .why-card {

            padding: 20px;

        }

        .why-content h4 {

            font-size: 17px;

        }

    }

    @media(max-width:480px) {

        .why-left h2 {

            font-size: 30px;

        }

        .why-left p {

            font-size: 15px;

        }

        .why-card {

            gap: 12px;

            padding: 18px;

        }

        .why-icon {

            width: 36px;

            height: 36px;

            font-size: 18px;

        }

    }

    .why-icon {

        width: 42px;
        height: 42px;

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

        background: #fff4ef;

        border-radius: 10px;

        color: #ff5b2e;

        flex-shrink: 0;

    }

    .why-icon i {

        font-size: 20px;

    }

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

    .process-section {
        background: #0d0d0d;
        padding: 100px 0;
        overflow: hidden;
    }

    .process-header {
        margin-bottom: 60px;
    }

    .process-subtitle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #ff5b2e;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .process-subtitle::before {
        content: "";
        width: 18px;
        height: 2px;
        background: #ff5b2e;
    }

    .process-header h2 {
        font-size: 45px;
        font-weight: 900;
        color: #fff;
        line-height: 1;
        margin: 0 0 15px;
        text-transform: uppercase;
    }

    .process-header p {
        color: #8b8b8b;
        font-size: 16px;
        max-width: 650px;
        line-height: 1.8;
    }

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

    .process-grid {

        display: grid;

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

        border: 1px solid #232323;

    }

    .process-card {

        position: relative;

        padding: 28px;

        min-height: 235px;

        border-right: 1px solid #232323;

        border-bottom: 1px solid #232323;

        transition: .35s;

        background: #0d0d0d;

    }

    .process-card:nth-child(4),
    .process-card:nth-child(6) {

        border-right: none;

    }

    .process-card:hover {

        background: #151515;

    }


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

    .step-number {

        display: block;

        font-size: 22px;

        font-weight: 900;

        color: #242424;

        line-height: 1;

        margin-bottom: 18px;

    }


    /*=========================================
DOT
=========================================*/

    .step-dot {

        position: absolute;

        width: 16px;

        height: 16px;

        background: #ff5b2e;

        border-radius: 50%;

        right: -8px;

        top: 78px;

        z-index: 5;

    }

    .step-dot::after {

        content: "";

        width: 5px;

        height: 5px;

        background: #fff;

        border-radius: 50%;

        position: absolute;

        left: 50%;

        top: 50%;

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

    }

    /* Hide last dot */

    .process-card:nth-child(4) .step-dot,
    .process-card:nth-child(6) .step-dot {

        display: none;

    }


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

    .process-icon {

        width: 42px;

        height: 42px;

        border: 1px solid #343434;

        display: flex;

        justify-content: center;

        align-items: center;

        color: #fff;

        margin-bottom: 18px;

        border-radius: 6px;

        transition: .35s;

    }

    .process-card:hover .process-icon {

        border-color: #ff5b2e;

        color: #ff5b2e;

    }


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

    .process-card h4 {

        color: #fff;

        font-size: 16px;

        margin-bottom: 14px;

        font-weight: 700;

    }

    .process-card p {

        color: #8f8f8f;

        font-size: 13px;

        line-height: 1.8;
        text-align: justify;

    }


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

    .process-card:hover {

        transform: translateY(-8px);

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

    }

    /* .process-card:hover .step-number{

    color:#353535;

} */
    .process-card:hover .step-number {
        color: #ff5b2e;
        transition: 0.35s ease;
    }

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

    @media(max-width:1200px) {

        .process-grid {

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

        }

        .process-card {

            border-right: 1px solid #232323;

        }

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

            border-right: none;

        }

        .process-card:nth-child(4) .step-dot {

            display: block;

        }

        .process-card:nth-child(even) .step-dot {

            display: none;

        }

    }


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

    @media(max-width:768px) {

        .process-section {

            padding: 70px 0;

        }

        .process-header h2 {

            font-size: 42px;

        }

        .process-grid {

            grid-template-columns: 1fr;

        }

        .process-card {

            border-right: none;

            min-height: auto;

            padding: 25px;

        }

        .step-dot {

            display: none;

        }

        .step-number {

            font-size: 44px;

        }

        .process-card h4 {

            font-size: 18px;

        }

        .process-card p {

            font-size: 15px;

        }

    }


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

    @media(max-width:480px) {

        .process-header h2 {

            font-size: 34px;

        }

        .process-header p {

            font-size: 14px;

        }

        .process-card {

            padding: 22px;

        }

        .step-number {

            font-size: 38px;

        }

        .process-icon {

            width: 38px;

            height: 38px;

        }

    }



    /* SECTION */

    .ts-section {

        padding: 100px 60px;

        background: #f8f5ef;

        overflow: hidden;

    }



    .ts-header {

        margin-bottom: 50px;

    }


    .ts-subtitle {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        color: #ff5b2e;

        font-size: 10px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 2px;

        margin-bottom: 18px;

    }


    .ts-subtitle::before {

        content: "";

        width: 18px;

        height: 2px;

        background: #ff5b2e;

    }



    .ts-header h2 {

        font-size: 35px;

        font-weight: 900;

        color: #111;

        line-height: 1;

        margin-bottom: 15px;

        text-transform: uppercase;

    }



    .ts-header p {

        color: #666;

        font-size: 14px;

    }





    /* SLIDER */

    .ts-slider-wrap {

        position: relative;

        width: 100%;

    }



    .ts-slider {

        width: calc(100% - 120px);

        margin: auto;

        overflow: hidden;

    }



    .ts-slider .swiper-wrapper {

        align-items: stretch;

    }



    .ts-slider .swiper-slide {

        height: auto;

    }





    /* ARROWS */

    .ts-prev,
    .ts-next {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);


        width: 55px;

        height: 55px;


        border-radius: 50%;

        background: #fff;

        border: 1px solid #e5e5e5;


        display: flex;

        align-items: center;

        justify-content: center;


        cursor: pointer;

        z-index: 10;


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

        transition: .35s;

    }



    .ts-prev {

        left: 0;

    }



    .ts-next {

        right: 0;

    }



    .ts-prev:hover,
    .ts-next:hover {

        background: #ff5b2e;

        color: #fff;

    }





    /* CARD */


    .ts-card {

        background: #fff;

        border: 1px solid #e6dfd4;

        border-radius: 8px;


        padding: 45px;


        min-height: 430px;


        display: flex;

        flex-direction: column;

        justify-content: space-between;


        transition: .35s;

    }



    .ts-card:hover {

        transform: translateY(-8px);

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

    }





    /* QUOTE */

    .ts-quote-icon {

        font-size: 34px;

        color: #ff5b2e;

        margin-bottom: 25px;

    }





    /* TEXT */


    .ts-text {

        font-size: 12px;

        line-height: 1.8;

        color: #222;


        margin-bottom: 18px;

        text-align: justify;


        display: -webkit-box;

        -webkit-line-clamp: 4;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }



    .ts-text.active {

        display: block;

        overflow: visible;

    }





    /* BOTTOM */


    .ts-bottom {

        display: flex;

        align-items: center;

        gap: 18px;

    }





    /* AVATAR */


    .ts-avatar {

        width: 45px;

        height: 45px;

        border-radius: 50%;


        background: #6b21d9;

        color: #fff;


        display: flex;

        align-items: center;

        justify-content: center;


        font-weight: 700;

        font-size: 13px;

    }





    /* INFO */

    .ts-stars {

        color: #ff9800;

        margin-bottom: 6px;

    }


    .ts-stars i {

        font-size: 13px;

    }



    .ts-info h4 {

        margin: 0;

        font-size: 13px;

        color: #111;

    }



    .ts-info span {

        color: #777;

        font-size: 11px;

    }





    /* PAGINATION ONLY THIS SLIDER */


    /* .ts-pagination{

    position:absolute !important;

    left:140px !important;

    bottom:12px !important;

    width:auto !important;

} */



    /* .ts-pagination .swiper-pagination-bullet{

    width:8px;

    height:8px;

    background:#d5d5d5;

    opacity:1;

} */



    /* .ts-pagination .swiper-pagination-bullet-active{

    width:24px;

    border-radius:20px;

    background:#ff5b2e;

} */




    /* READ MORE */


    .ts-read-more {

        border: none;

        background: none;

        color: #ff5b2e;

        font-weight: 700;

        cursor: pointer;

        padding: 0;

        margin-bottom: 20px;

    }



    .ts-read-more:hover {

        color: #111;

    }





    /* RESPONSIVE */


    @media(max-width:992px) {


        .ts-header h2 {

            font-size: 42px;

        }


        .ts-card {

            padding: 30px;

        }


    }





    @media(max-width:768px) {


        .ts-section {

            padding: 70px 0;

        }



        .ts-slider {

            width: 100%;

        }



        .ts-card {

            padding: 25px;

            min-height: auto;

        }



        .ts-text {

            font-size: 15px;

        }



        .ts-prev,
        .ts-next {

            display: none;

        }



        .ts-pagination {

            left: 0 !important;

            width: 100% !important;

            text-align: center;

        }



    }




    @media(max-width:480px) {


        .ts-header h2 {

            font-size: 30px;

        }



        .ts-text {

            font-size: 14px;

        }


    }


    ..nxfq-section {
    padding: 90px 20px;
    background: #fff;
}
.nxfq-container {
    max-width: 1397px;
    margin: auto;
    background: #050505;
    padding: 70px;
    /* border-radius: 32px; */
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.nxfq-container::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: #f76428;
    filter: blur(170px);
    opacity: .15;
    top: -180px;
    right: -150px;
    z-index: -1;
}
.nxfq-heading {
    text-align: center;
    color: #fff;
    margin-bottom: 50px;
}
.nxfq-tag {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 50px;
    background: rgba(247, 100, 40, .12);
    border: 1px solid rgba(247, 100, 40, .3);
    color: #f76428;
    font-size: 14px;
    margin-bottom: 20px;
}
.nxfq-heading h2 {
    font-size: 50px;
    margin: 0 0 15px;
    font-weight: 800;
}
.nxfq-heading h2 span {
    color: #f76428;
}
.nxfq-heading p {
    color: #aaa;
    font-size: 17px;
}
.nxfq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.nxfq-item {
    background:
        rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    overflow: hidden;
    transition: .4s;
}

.nxfq-item:hover {
    border-color: #f76428;
    box-shadow:
        0 15px 40px rgba(247, 100, 40, .12);
}
.nxfq-question {
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    padding: 24px 28px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}
.nxfq-question span {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f76428;
    color: #fff;
    font-size: 25px;
    transition: .4s;
}
.nxfq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease;
}
.nxfq-answer p {
    padding: 0 28px 25px;
    color: #cfcfcf;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}
.nxfq-item.active .nxfq-answer {
    max-height: 200px;
}
.nxfq-item.active .nxfq-question span {
    transform: rotate(45deg);
}
.nxfq-question h3 {
    margin: 0;
    flex: 1;
    font-size: 18px;
    line-height: 1.5;
}
.nxfq-question span {
    flex-shrink: 0;
}
@media (max-width:768px) {
    .nxfq-list {
        grid-template-columns: 1fr;
    }
    .nxfq-container {
        padding: 40px 20px;
    }
    .nxfq-heading h2 {
        font-size: 34px;
    }
    .nxfq-question {
        font-size: 16px;
        padding: 20px;
    }
    .nxfq-question h3 {
    margin: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.nxfq-answer p {
    padding: 0 28px 25px;
    color: #cfcfcf;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}
}

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

    .bg-blur {
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        filter: blur(120px);
        opacity: .25;
    }

    .blur-one {
        background: #f76428;
    }

    .blur-two {
        background: #f76428;
    }

    .section-heading {
        text-align: center;
        max-width: 720px;
        margin: auto auto 70px;
    }

    .sub-title {
        display: inline-block;
        padding: 10px 18px;
        border-radius: 40px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        color: #f76428;
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: 18px;
    }

    .section-heading h2 {
        color: #fff;
        font-size: 48px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .section-heading h2 span {
        background: #f76428;
        -webkit-background-clip: text;
        color: transparent;
    }

    .section-heading p {
        color: #b5bdd5;
        font-size: 17px;
    }

    .locations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 28px;
    }

    .location-card {
        position: relative;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 28px;
        border-radius: 24px;
        text-decoration: none;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        backdrop-filter: blur(20px);
        overflow: hidden;
        transition: .45s;
    }

    .location-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #6C63FF, #00D4FF);
        opacity: 0;
        transition: .4s;
    }

    .location-card:hover::before {
        opacity: .08;
    }

    .location-card:hover {
        transform: translateY(-10px);
        border-color: #f76428;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    }

    .icon {
        width: 65px;
        height: 65px;
        border-radius: 18px;
        background: #f76428;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28px;
        flex-shrink: 0;
    }

    .location-content {
        flex: 1;
    }

    .location-content h4 {
        color: #fff;
        font-size: 22px;
        margin-bottom: 8px;
    }

    .location-content p {
        color: #cfd6ec;
        font-size: 15px;
        margin: 0;
    }

    .arrow {
        color: #fff;
        font-size: 28px;
        transition: .35s;
    }

    .location-card:hover .arrow {
        transform: translate(6px, -6px) rotate(45deg);
    }

    @media(max-width:768px) {
        .section-heading h2 {
            font-size: 34px;
        }

        .locations-grid {
            grid-template-columns: 1fr;
        }

        .location-card {
            padding: 22px;
        }
    }

    .location-container {
        max-width: 1250px;
        margin: 0 auto;
        padding: 70px 60px;
        background: #080808;
        border-radius: 32px;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(247, 100, 40, .15);
        isolation: isolate;
    }

    .location-container::before {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        background: #f76428;
        filter: blur(170px);
        opacity: .18;
        top: -220px;
        right: -150px;
        z-index: -1;
    }

    .location-container::after {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        background: #f76428;
        filter: blur(160px);
        opacity: .08;
        bottom: -150px;
        left: -100px;
        z-index: -1;
    }

    .location-container:hover {
        border-color: rgba(247, 100, 40, .35);
        box-shadow:
            0 30px 80px rgba(0, 0, 0, .45);
    }

    @media(max-width:768px) {
        .location-container {
            padding: 45px 20px;
            border-radius: 24px;
        }
    }

    .small-popup {
    width: 300px !important;
    padding: 10px !important;
}

.small-popup .swal2-title {
    font-size: 18px;
    margin: 5px 0;
}

.small-popup .swal2-html-container {
    font-size: 14px;
    margin: 0px 0;
}

.small-popup .swal2-image {
    transform: scale(0.7);
    margin: 10px auto;
}

.small-popup .swal2-actions {
    margin-top: 10px;
}