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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#050505;
    color:#fff;
    overflow-x:hidden;
}

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

.hero{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    padding:80px 8%;
    background:#050505;
    overflow:hidden;
    margin-top: 38px;
}

.container{
    width:100%;
    max-width:1300px;
    margin:auto;
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:80px;
    align-items:center;
}

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

.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(255,106,0,.4);
    color:#ff6a00;
    padding:8px 18px;
    border-radius:50px;
    font-size:11px;
    font-weight:500;
    letter-spacing:1px;
    margin-bottom:25px;
}

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

.hero-content h1{
    font-size:56px;
    line-height:0.95;
    font-weight:800;
    margin-bottom:25px;
}

.orange{
    color:#ff5a1f;
}

.outline{
    color:transparent;
    -webkit-text-stroke:2px #fff;
}

.hero-content p{
    max-width:620px;
    /* color:#9a9a9a; */
    color:rgba(255,255,255,.55);
    line-height:1.8;
    font-size:15px;
    margin-bottom:35px;
    text-align:justify;
}

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

.buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    background:#ff5a1f;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.3s ease;
    box-shadow:0 0 25px rgba(255,90,31,.4);
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;
    transition:.3s ease;
}

.btn-secondary:hover{
    border-color:#ff5a1f;
}

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

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

.hero-card{
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
    padding:28px;
    transition:.3s ease;
}

.hero-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,90,31,.3);
}

.hero-card h3{
    font-size:24px;
    font-weight:800;
}

.hero-card h3 span{
    color:#ff5a1f;
}

.hero-card p{
    margin-top:8px;
    color:#9a9a9a;
    font-size:11px;
    line-height:1.5;
}

.line{
    width:75%;
    height:2px;
    background:#ff5a1f;
    margin-top:18px;
}

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

.bg-glow{
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    filter:blur(180px);
    opacity:.18;
    pointer-events:none;
}

.bg-glow.left{
    background:#ff5a1f;
    left:-220px;
    top:120px;
}

.bg-glow.right{
    background:#ff5a1f;
    right:-200px;
    top:-50px;
}

/* =========================
   LAPTOP
========================= */

@media(max-width:1200px){

    .hero-content h1{
        font-size:64px;
    }

    .container{
        gap:60px;
    }
}

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

@media(max-width:991px){

    .hero{
        padding:70px 5%;
    }

    .container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .hero-content{
        text-align:center;
    }

    .hero-content p{
        margin-left:auto;
        margin-right:auto;
    }

    .buttons{
        justify-content:center;
    }

    .hero-content h1{
        font-size:56px;
    }

    .stats{
        max-width:700px;
        margin:auto;
    }
}

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

@media(max-width:768px){

    .hero{
        min-height:auto;
        padding:60px 20px;
    }

    .hero-content h1{
        font-size:42px;
        line-height:1;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.7;
    }

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

    .card{
        padding:20px;
    }

    .card h3{
        font-size:28px;
    }

    .card p{
        font-size:12px;
    }

    .btn-primary,
    .btn-secondary{
        padding:14px 24px;
        font-size:14px;
    }
}

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

@media(max-width:480px){

    .hero{
        padding:50px 15px;
    }

    .badge{
        font-size:9px;
        padding:7px 14px;
    }

    .hero-content h1{
        font-size:34px;
    }

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

    .buttons{
        flex-direction:column;
        width:100%;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
    }

    .stats{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .card{
        padding:15px;
        border-radius:14px;
    }

    .card h3{
        font-size:22px;
    }

    .card p{
        font-size:11px;
    }

    .line{
        width:100%;
    }
}


/* =========================
   MARQUEE SECTION BASE
========================= */

.ugc-marquee-section{
    background:#050505;
    padding:0px 0;
    overflow:hidden;
}

/* =========================
   TOP + BOTTOM TRACK BASE
========================= */

.top-marquee,
.bottom-marquee{
    width:100%;
    overflow:hidden;
}

/* spacing between two bars */
.top-marquee{
    margin-bottom:80px;
}

/* =========================
   TRACK STYLE
========================= */

.top-track,
.bottom-track{
    display:flex;
    width:max-content;
    white-space:nowrap;
}

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

.top-track{
    animation:topScroll 85s linear infinite;
}

.top-track span{
    display:inline-block;
    color:rgba(255,255,255,0.30);
    font-size:11px;
    font-weight:500;
    letter-spacing:1px;
}

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

.bottom-marquee{
    background:#ff5a1f;
    padding:14px 0;
}

.bottom-track{
    animation:bottomScroll 75s linear infinite;
}

.bottom-track span{
    display:inline-block;
    /* color:#fff; */
    color:rgba(255, 255, 255, .85);
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

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

.dot{
    color:#000 !important;
    display:inline-block;
}

/* .star{
    color:#ff2d2d;
} */

.star{
    color:#ff2d2d !important;
    display:inline-block;
}
/* =========================
   ANIMATIONS (SMOOTH LOOP)
========================= */

@keyframes topScroll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

@keyframes bottomScroll{
    0%{
        transform:translateX(-50%);
    }
    100%{
        transform:translateX(0);
    }
}

/* =========================
   HOVER EFFECT (OPTIONAL)
========================= */

.top-marquee:hover .top-track,
.bottom-marquee:hover .bottom-track{
    animation-play-state:paused;
}

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

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

    .top-marquee{
        margin-bottom:60px;
    }

    .top-track span{
        font-size:13px;
    }

    .bottom-track span{
        font-size:12px;
    }
}

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

    .ugc-marquee-section{
        padding:25px 0;
    }

    .top-marquee{
        margin-bottom:45px;
    }

    .top-track span{
        font-size:12px;
    }

    .bottom-track span{
        font-size:11px;
        letter-spacing:1px;
    }
}

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

    .top-track span{
        font-size:11px;
    }

    .bottom-track span{
        font-size:10px;
    }

    .top-marquee{
        margin-bottom:35px;
    }
}


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

.work-section{
    background:#f7f6f4;
    padding:80px 8%;
    text-align:center;
}

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

.work-header .small-title{
    color:#ff5a1f;
    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
}

.work-header h2{
    font-size:44px;
    margin:10px 0;
    font-weight:800;
    color:#111;
}

.work-header h2 span{
    color:#ff5a1f;
}

.work-header p{
    color:#666;
    font-size:14px;
    max-width:600px;
    margin:0 auto;
    line-height:1.6;
    text-align: justify;
}

/* ======================
   FILTERS
====================== */

.filters{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin:40px 0;
}

.filters button{
    padding:10px 18px;
    border-radius:30px;
    border:1px solid #ddd;
    background:white;
    font-size:13px;
    cursor:pointer;
    transition:.3s;
}

.filters button.active{
    background:#ff5a1f;
    color:white;
    border-color:#ff5a1f;
}

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

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

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

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

.video-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
    transition:.3s ease;
}

.video-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

/* =========================
   VIDEO THUMB (FIXED)
========================= */

.video-thumb{
    position:relative;
    width:100%;
    aspect-ratio: 9 / 16;   /* BEST for UGC / reels */
    background:#000;
    overflow:hidden;
}

/* iframe full cover */
.video-thumb iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

/* optional overlay gradient */
.video-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.2));
    pointer-events:none;
}
.vcard.hidden{
    display:none !important;
}
/* =========================
   VIDEO INFO
========================= */

.video-info{
    padding:14px 16px 18px;
}

.video-info h3{
    font-size:15px;
    font-weight:700;
    color:#111;
    margin-bottom:8px;
    line-height:1.3;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* result badge */
.result{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:700;
    color:#1a7a4a;
    background:#edf7f2;
    padding:6px 10px;
    border-radius:8px;
}

/* arrow */
.result::before{
    content:"↑";
    font-size:11px;
}

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

@media(max-width:1024px){
    .video-card{
        border-radius:16px;
    }
}

@media(max-width:768px){
    .video-info h3{
        font-size:14px;
    }

    .result{
        font-size:10px;
    }
}
/* ======================
   CTA
====================== */

.cta{
    margin-top:50px;
}

.cta a{
    display:inline-block;
    padding:16px 34px;
    background:#ff5a1f;
    color:white;
    text-decoration:none;
    border-radius:40px;
    font-weight:600;
}

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

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

@media(max-width:768px){
    .work-header h2{
        font-size:32px;
    }

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

    /* .video-box{
        height:260px;
    } */
}
/* ugc-section */
/* =========================
   CARDS GRID
========================= */

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

.ugc-section{
    background:#f7f6f4;
    padding:0px 8%;
}
.ugc-container{
    max-width:1200px;
    margin:0 auto;
}
.section-tag{
    display:block;
    text-align:center;
    color:#ff5a1f;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:15px;
}

.ugc-section h2{
    text-align:center;
    color:#111;
    font-size:58px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:20px;
}

.ugc-section h2 span{
    color:#ff5a1f;
}

.section-desc{
    max-width:750px;
    margin:0 auto 70px;
    text-align:center;
    color:#666;
    font-size:15px;
    line-height:1.9;
    text-align: justify;
}

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

.brand-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #e9e9e9;
    border-left:1px solid #e9e9e9;
    background:#fff;
}

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

.brand-card{
    position:relative;
    padding:45px 35px;
    background:#fff;
    border-right:1px solid #e9e9e9;
    border-bottom:1px solid #e9e9e9;
    transition:all .3s ease;
}

.brand-card::before{
    content:"";
    position:absolute;
    left:0;
     bottom:0;
    width:0;
    height:3px;
    background:#ff5a1f;
    transition:.35s ease;
}

.brand-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.brand-card:hover::before{
    width:100%;
}

.brand-card .number{
    font-size:64px;
    font-weight:800;
    line-height:1;
    color:#ff5a1f;
    margin-bottom:20px;
    transition:all .35s ease;
}

.brand-card:hover .number{
    transform:translateY(-5px) scale(1.05);
    color:#ff3d00;
}
.brand-card h3{
    color:#111;
    font-size:21px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:15px;
    transition:.3s;
}

.brand-card:hover h3{
    color:#ff5a1f;
}

.brand-card p{
    color:#666;
    font-size:14px;
    line-height:1.9;
    text-align: justify;
}

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

@media(max-width:991px){

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

    .ugc-section h2{
        font-size:46px;
    }

    .brand-card{
        padding:35px 28px;
    }

    .brand-card h3{
        font-size:24px;
    }

    .number{
        font-size:54px;
    }
}

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

@media(max-width:768px){

    .ugc-section{
        padding:80px 20px;
    }

    .ugc-section h2{
        font-size:34px;
    }

    .section-desc{
        font-size:14px;
    }

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

    .brand-card{
        padding:30px 24px;
    }

    .brand-card h3{
        font-size:22px;
    }

    .number{
        font-size:48px;
    }

    .brand-card p{
        font-size:14px;
    }

    .brand-card:hover{
        transform:translateY(-3px);
    }
}

/* tyes of ugc */
.ugc-dark{
    background:#0b0b0b;
    padding:34px 8%;
    color:#fff;
}

.ugc-dark-container{
    max-width:1200px;
    margin:auto;
}

/* HEADER */

.ugc-dark-header{
    text-align:left;
    margin-bottom:50px;
}

.mini-title{
    font-size:12px;
    color:#ff5a1f;
    letter-spacing:2px;
}

.ugc-dark-header h2{
    font-size:52px;
    line-height:1.1;
    margin:15px 0;
    font-weight:800;
}

.ugc-dark-header h2 span{
    color:#ff5a1f;
}

.ugc-dark-header p{
    color:#888;
    max-width:500px;
    font-size:14px;
    line-height:1.7;
    text-align: justify;
}

/* GRID */

.ugc-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #222;
    border-left:1px solid #222;
}

/* BOX */
.ugc-box{
    position:relative;    
    padding:49px;
    border-right:1px solid #222;
    border-bottom:1px solid #222;
    transition:.3s ease;
    background:#0b0b0b;
    overflow:hidden;
}

.ugc-box:hover{
    background:#111;
    transform:translateY(-5px);
}

/* LINE */
.ugc-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:3px;
    background:#ff5a1f;
    transition:.35s ease;
}

/* HOVER ANIMATION */
.ugc-box:hover::before{
    width:100%;
}
 

.tag{
    font-size:10px;
    color:#ff5a1f;
    letter-spacing:1.5px;
    font-weight:600;
}

/* TITLE */

.ugc-box h3{
    margin-top:10px;
    font-size:18px;
    font-weight:700;
}

/* DESC */

.ugc-box p{
    margin-top:10px;
    font-size:13px;
    color:#aaa;
    line-height:1.6;
    text-align: justify;
}



/* RESPONSIVE */

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

    .ugc-dark-header h2{
        font-size:40px;
    }
}

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

    .ugc-dark{
        padding:70px 20px;
    }

    .ugc-dark-header h2{
        font-size:32px;
    }
}

/* our process */
.ep-process-section{
    padding:34px 40px;
    overflow:hidden;
    background: #f7f6f4;
}


.ep-process-head{
    text-align:center;
    max-width:750px;
    margin:auto;
}


.ep-small-title{
    color:#ff5a1f;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
}


.ep-process-head h2{
    margin:15px 0;
    font-size:48px;
    line-height:1.05;
    font-weight:800;
    color:#111;
}


.ep-process-head h2 span{
    color:#ff5a1f;
}


.ep-process-head p{
    font-size:15px;
    line-height:1.7;
    color:#777;
    text-align: justify;
}





.ep-process-timeline{

    display:flex;
    justify-content:space-between;
    gap:35px;
    margin-top:80px;

    position:relative;

}


.ep-process-line{

    position:absolute;

    top:48px;

    left:8%;

    width:84%;

    height:1px;

    background:#e5e5e5;

    z-index:0;

}




.ep-step-item{

    flex:1;

    text-align:center;

    position:relative;

    z-index:2;

}





.ep-step-label{

    display:inline-block;

    padding:5px 14px;

    background:#fff1ea;

    color:#ff5a1f;

    border-radius:30px;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}




.ep-step-circle{


    width:82px;

    height:82px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;


    background:#fff;

    border:1px solid #e1e1e1;

    color:#c8c8c8;

    font-size:21px;

    font-weight:700;


    transition:.4s ease;


}




/* Active */

.ep-step-item.active .ep-step-circle{

    background:#ff5a1f;

    color:#fff;

    border-color:#ff5a1f;

    transform:scale(1.18);

    box-shadow:

    0 0 0 4px #fff,

    0 0 0 5px #ff5a1f;

}




/* Orange connector dot */

.ep-step-item.active:before{

    content:"";

    position:absolute;

    top:47px;

    left:0;

    right:0;

    margin:auto;


    width:14px;

    height:14px;

    background:#ff5a1f;

    border-radius:50%;

    border:3px solid white;

    z-index:-1;

}




.ep-step-item:hover .ep-step-circle{

    background:#ff5a1f;

    color:#fff;

    border-color:#ff5a1f;

    transform:translateY(-8px) scale(1.12);

}





.ep-step-item h4{

    margin-top:35px;

    font-size:17px;

    font-weight:700;

    color:#111;

}



.ep-step-item p{

    margin-top:15px;

    font-size:14px;

    line-height:1.8;

    color:#777;
    text-align: justify;

}



 .ep-step-highlight {
    margin-top: 18px;
    min-height: 48px;
    padding: 10px 14px;

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

    background: #fff0e9;
    border: 1px solid transparent;
    border-radius: 6px;

    color: #222;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;

    text-align: left;

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

/* Hover */
.ep-step-highlight:hover {
    background: #ffe5d9;
    border-color: rgba(241, 90, 36, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(241, 90, 36, 0.10);
}

.ep-highlight-icon {
    width: 25px;
    min-width: 25px;
    height: 25px;

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

    color: #f15a24;
    font-size: 18px;

    transition: transform 0.3s ease;
}

.ep-step-highlight:hover .ep-highlight-icon {
    transform: scale(1.12);
}


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

@media (max-width: 991px) {

    .ep-step-highlight {
        min-height: 50px;
        padding: 10px 12px;
        font-size: 10.5px;
        gap: 8px;
    }

    .ep-highlight-icon {
        width: 23px;
        min-width: 23px;
        height: 23px;
        font-size: 16px;
    }
}


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

@media (max-width: 767px) {

    .ep-step-highlight {
        width: 100%;
        min-height: auto;
        padding: 11px 12px;

        font-size: 11px;
        line-height: 1.5;

        gap: 9px;

        /* Mobile par hover movement avoid */
        transform: none;
    }

    .ep-step-highlight:hover {
        transform: none;
        box-shadow: 0 5px 15px rgba(241, 90, 36, 0.08);
    }

    .ep-highlight-icon {
        flex-shrink: 0;
    }
}


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

@media (max-width: 480px) {

    .ep-step-highlight {
        padding: 10px;
        font-size: 10.5px;
    }

    .ep-highlight-icon {
        width: 22px;
        min-width: 22px;
        height: 22px;
        font-size: 15px;
    }
}


@media(max-width:991px){


.ep-process-section{
    padding:60px 20px;
}


.ep-process-head h2{
    font-size:36px;
}


.ep-process-timeline{

    flex-direction:column;

    gap:50px;

}



.ep-process-line{

    width:1px;

    height:80%;

    left:50%;

    top:80px;

}



}



@media(max-width:576px){

.ep-process-head h2{
    font-size:30px;
}


.ep-process-head p br{
    display:none;
}


.ep-step-item p{
    max-width:300px;
    margin:15px auto;
}


}

/* ===============================
   WEBGROSS RESULTS SECTION
================================ */

.wg-results-section{
    background:#f45a1e;
    padding:50px 8%;
    overflow:hidden;
}

.wg-results-container{
    max-width:1250px;
    margin:auto;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:80px;
    align-items:center;
}

/* LEFT */

.wg-mini-tag{
    display:block;
    color:rgba(255,255,255,.8);
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:18px;
}

.wg-results-content h2{
    color:#fff;
    font-size:64px;
    line-height:1;
    font-weight:800;
    margin-bottom:25px;
}

.wg-results-content h2 span{
    color:#000;
}

.wg-results-content p{
    color:rgba(255,255,255,.85);
    line-height:1.9;
    font-size:15px;
    max-width:650px;
    text-align: justify;

}

.wg-results-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    background:#000;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    margin-top:30px;
    font-weight:600;
    transition:.35s;
}

.wg-results-btn:hover{
    transform:translateY(-4px);
}

/* FEATURES */

.wg-feature-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-top:50px;
}

.wg-feature{
    display:flex;
    gap:14px;
}

.wg-feature span{
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    flex-shrink:0;
}

.wg-feature h4{
    color:#fff;
    font-size:15px;
    margin-bottom:8px;
}

.wg-feature p{
    font-size:13px;
    line-height:1.7;
    color:rgba(255,255,255,.75);
}

/* RIGHT GRID */

.wg-stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.wg-stat-card{
    background:rgba(0,0,0,.12);
    border:1px solid rgba(0,0,0,.15);
    border-radius:18px;
    padding:30px;
    position:relative;
    overflow:hidden;
    transition:.35s ease;
}

.wg-stat-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent
    );
    opacity:0;
    transition:.35s;
}

.wg-stat-card:hover{
    transform:translateY(-8px);
    background:#d94c15;
    box-shadow:0 20px 40px rgba(0,0,0,.2);
}

.wg-stat-card:hover::before{
    opacity:1;
}

.wg-stat-card h3{
    color:#fff;
    font-size:52px;
    line-height:1;
    font-weight:800;
    margin-bottom:12px;
}

.wg-stat-card p{
    color:rgba(255,255,255,.85);
    font-size:13px;
    line-height:1.6;
}

/* FLOATING DOT */

.wg-highlight{
    position:relative;
}

.wg-pulse{
    position:absolute;
    top:10px;
    right:10px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#ff7c43;
}

.wg-pulse::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:2px solid rgba(255,124,67,.5);
    animation:wgPulse 2s infinite;
}

@keyframes wgPulse{
    from{
        transform:scale(.5);
        opacity:1;
    }
    to{
        transform:scale(2);
        opacity:0;
    }
}

/* TABLET */

@media(max-width:991px){

    .wg-results-container{
        grid-template-columns:1fr;
        gap:60px;
    }

    .wg-results-content h2{
        font-size:52px;
    }
}

/* MOBILE */

@media(max-width:768px){

    .wg-results-section{
        padding:70px 20px;
    }

    .wg-results-content h2{
        font-size:38px;
    }

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

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

    .wg-stat-card{
        padding:22px;
    }

    .wg-stat-card h3{
        font-size:36px;
    }
}

@media(max-width:480px){

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

    .wg-results-content h2{
        font-size:32px;
    }
}
/* location */
.locations-section {
        position: relative;
        overflow: hidden;
        padding: 30px 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: 1px 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: 11px;
        font-size: 11px;
    }

    .section-heading h2 {
        color: #fff;
        font-size: 40px;
        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: 20px 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;
        }
    }

/* ====================================
   D2C SHIFT SECTION
==================================== */

.d2c-shift-section{
    background:#050505;
    padding:30px 8%;
    overflow:hidden;
}

.d2c-shift-container{
    max-width:1200px;
    margin:auto;
}

/* HEADER */

.d2c-heading{
    text-align:center;
    max-width:800px;
    margin:0 auto 70px;
}

.d2c-tag{
    display:inline-block;
    color:#ff5a1f;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:20px;
    position:relative;
}

.d2c-tag::before,
.d2c-tag::after{
    content:"";
    width:35px;
    height:1px;
    background:#ff5a1f;
    position:absolute;
    top:50%;
}

.d2c-tag::before{
    right:100%;
    margin-right:10px;
}

.d2c-tag::after{
    left:100%;
    margin-left:10px;
}

.d2c-heading h2{
    font-size:44px;
    line-height:1.05;
    font-weight:800;
    color:#fff;
    margin-bottom:25px;
}

.d2c-heading h2 span{
    color:#ff5a1f;
}

.d2c-heading p{
    max-width:650px;
    margin:auto;
    color:#8f8f8f;
    font-size:15px;
    line-height:1.8;
    text-align: justify;
}

/* CENTER DOT */

.d2c-center-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    margin:25px auto 0;
    border:2px solid #ff5a1f;
    position:relative;
}

.d2c-center-dot::before{
    content:"";
    position:absolute;
    inset:4px;
    background:#ff5a1f;
    border-radius:50%;
}

/* GRID */

.d2c-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
}

/* CARD */

/* .d2c-card{
    padding:32px;
    background:#0b0b0b;
    border-right:1px solid rgba(255,255,255,.06);
    position:relative;
    transition:.35s ease;
    overflow:hidden;
     height: 400px;
} */
 .d2c-card{
    padding:32px;
    background:#0b0b0b;
    border-right:1px solid rgba(255,255,255,.06);
    position:relative;
    transition:.35s ease;
    overflow:hidden;
     

    display:flex;
    flex-direction:column;
}

.d2c-card:last-child{
    border-right:none;
}

 

.d2c-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:2px;
    background:#ff5a1f;
    transition:.35s;
    z-index:5;
}

.d2c-card:hover::before{
    width:100%;
}

.d2c-card:hover{
    background:#101010;
    box-shadow:
    0 0 30px rgba(255,90,31,.08);
}

.d2c-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,90,31,.08);
    border:1px solid rgba(255,90,31,.2);
    font-size:18px;
    margin-bottom:25px;
}

 

.d2c-card h3{
    color:#ff5a1f;
    font-size:52px;
    font-weight:800;
    margin-bottom:10px;
}

 

.d2c-card h4{
    color:#fff;
    font-size:17px;
    line-height:1.4;
    margin-bottom:15px;
    font-weight:700;
}

/* TEXT */

.d2c-card p{
    color:#8d8d8d;
    font-size:14px;
    line-height:1.8;
    margin-bottom:25px;
    text-align: justify;
}

 

/* .d2c-source{
    padding:10px 14px;
    border:1px solid rgba(255,90,31,.2);
    background:rgba(255,90,31,.04);
    color:#ff5a1f;
    font-size:11px;
    border-radius:6px;
    
} */
 .d2c-source{
    padding:10px 14px;
    border:1px solid rgba(255,90,31,.2);
    background:rgba(255,90,31,.04);
    color:#ff5a1f;
    font-size:11px;
    border-radius:6px;

    margin-top:auto;
}

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

@media(max-width:1100px){

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

    .d2c-card{
        border-bottom:1px solid rgba(255,255,255,.06);
    }
}

@media(max-width:768px){

    .d2c-shift-section{
        padding:80px 20px;
    }

    .d2c-heading h2{
        font-size:38px;
    }

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

    .d2c-card{
        border-right:none;
    }

    .d2c-card h3{
        font-size:42px;
    }
}

@media(max-width:480px){

    .d2c-heading h2{
        font-size:32px;
    }

    .d2c-card{
        padding:24px;
    }
}
/* =================================
   COMPARE SECTION
================================= */

.cmp-section{
    background:#f5f5f5;
    padding:44px 8%;
}

.cmp-container{
    max-width:1200px;
    margin:auto;
}

/* HEADER */

.cmp-header{
    text-align:center;
    max-width:750px;
    margin:0 auto 70px;
}

.cmp-tag{
    display:inline-block;
    color:#ff5a1f;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
}

.cmp-header h2{
    color:#111;
    font-size:58px;
    line-height:1.05;
    font-weight:800;
}

.cmp-header h2 span{
    display:block;
    color:#ff5a1f;
}

.cmp-header p{
    margin-top:20px;
    color:#777;
    line-height:1.8;
    font-size:15px;
    text-align: justify;
}

/* TABLE WRAPPER */

.cmp-table-wrap{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 15px 50px rgba(0,0,0,.08);
}

/* ORANGE DOT */

.cmp-dot{
    position:absolute;
    top:14px;
    right:14px;

    width:22px;
    height:22px;

    border-radius:50%;
    border:1px solid #ff5a1f;
}

.cmp-dot::before{
    content:"";
    position:absolute;
    inset:5px;
    background:#ff5a1f;
    border-radius:50%;
}

/* TABLE */

.cmp-table{
    width:100%;
    border-collapse:collapse;
}

.cmp-table thead th{
    background:#050505;
    color:#777;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:1px;
    text-align:left;
    padding:20px;
}

.cmp-highlight-head{
    color:#ff5a1f !important;
}

.cmp-table tbody td{
    padding:18px 20px;
    border-bottom:1px solid #ececec;
    font-size:14px;
    color:#777;
    transition:.3s;
}

.cmp-table tbody tr:hover td{
    background:#fafafa;
}

.cmp-table tbody td:first-child{
    font-weight:700;
    color:#222;
}

/* WEBGROSS COLUMN */

.cmp-table tbody td:nth-child(2){
    background:#fff5f0;
    border-left:2px solid #ff5a1f;
    color:#222;
    font-weight:600;
}

.cmp-success{
    color:#168a4a !important;
    font-weight:700 !important;
}

/* RESPONSIVE */

@media(max-width:991px){

    .cmp-header h2{
        font-size:44px;
    }

    .cmp-table-wrap{
        overflow-x:auto;
    }

    .cmp-table{
        min-width:800px;
    }
}

@media(max-width:768px){

    .cmp-section{
        padding:80px 20px;
    }

    .cmp-header h2{
        font-size:34px;
    }

    .cmp-header p{
        font-size:14px;
    }
}

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

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

.wg-testimonial-section{
    background:#f7f6f4;
    padding:0px 8%;
}

.wg-testimonial-wrapper{
    max-width:1200px;
    margin:auto;
    text-align:center;
}

.wg-testimonial-tag{
    display:inline-block;
    color:#ff5a1f;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
}

.wg-testimonial-title{
    font-size:58px;
    line-height:1.05;
    font-weight:800;
    color:#111;
}

.wg-testimonial-title span{
    display:block;
    color:#ff5a1f;
}

.wg-testimonial-subtitle{
    max-width:650px;
    margin:20px auto 70px;
    color:#777;
    line-height:1.8;
    font-size:15px;
}

/* GRID */

.wg-testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* CARD */

.wg-testimonial-card{
    background:#fff;
    border-radius:22px;
    padding:30px;
    text-align:left;
    position:relative;
    border:1px solid #ececec;
    overflow:hidden;
    transition:.35s ease;
}

/* TOP ORANGE LINE */

.wg-testimonial-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:3px;
    background:#ff5a1f;
    transition:width .35s ease;
    z-index:10;
}

.wg-testimonial-card:hover::before{
    width:100%;
}

/* BOTTOM LINE */

.wg-testimonial-card::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:2px;
    background:#ff5a1f;
    transition:.35s ease;
}

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

.wg-testimonial-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

/* ACTIVE CARD */

.wg-testimonial-active{
    border-color:#ff5a1f;
    box-shadow:0 15px 35px rgba(255,90,31,.12);
}

.wg-testimonial-active::before{
    width:100%;
}

/* DOT */

.wg-testimonial-dot{
    position:absolute;
    top:14px;
    right:14px;
    width:10px;
    height:10px;
    background:#ff5a1f;
    border-radius:50%;
}

/* QUOTE */

.wg-testimonial-quote{
    color:#ffd3c2;
    font-size:48px;
    line-height:1;
}

/* STARS */

.wg-testimonial-stars{
    color:#ff5a1f;
    letter-spacing:2px;
    margin:10px 0 18px;
}

/* TEXT */

.wg-testimonial-text{
    color:#777;
    font-size:14px;
    line-height:1.9;

    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;

    min-height:105px;
    text-align: justify;
}

.wg-testimonial-text.expanded{
    display:block;
}

/* MORE BUTTON */

.wg-testimonial-more{
    background:none;
    border:none;
    color:#ff5a1f;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    margin-top:10px;
}

/* USER */

.wg-testimonial-user{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #ececec;

    display:flex;
    align-items:center;
    gap:12px;
}

.wg-testimonial-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#ff5a1f;

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

    color:#fff;
    font-size:12px;
    font-weight:700;
}

.wg-testimonial-user h4{
    color:#111;
    font-size:14px;
    margin-bottom:3px;
}

.wg-testimonial-user span{
    color:#888;
    font-size:12px;
}

/* RESPONSIVE */

@media(max-width:991px){

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

    .wg-testimonial-title{
        font-size:44px;
    }
}

@media(max-width:768px){

    .wg-testimonial-section{
        padding:80px 20px;
    }

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

    .wg-testimonial-title{
        font-size:34px;
    }

    .wg-testimonial-subtitle{
        font-size:14px;
    }
}

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

.wg-faq-section{
    background:#f7f6f4;
    padding:0px 8%;
}

.wg-faq-container{
    max-width:1100px;
    margin:auto;
}

.wg-faq-tag{
    display:block;
    text-align:center;
    color:#ff5a1f;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
}

.wg-faq-title{
    text-align:center;
    font-size:58px;
    line-height:1.05;
    font-weight:800;
    color:#111;
    margin-bottom:70px;
}

.wg-faq-title span{
    display:block;
    color:#ff5a1f;
}

/* FAQ LIST */

.wg-faq-list{
    border-top:1px solid #e6e6e6;
}

/* ITEM */

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

/* QUESTION */
.wg-faq-question span{
    transition:.3s ease;
    font-size:22px;
}

.wg-faq-item:hover .wg-faq-question span,
.wg-faq-item.active .wg-faq-question span{
    color:#ff5a1f;
}
.wg-faq-question{
    width:100%;
    border:none;
    background:none;
    cursor:pointer;

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

    padding:28px 0;

    font-size:22px;
    font-weight:700;
    color:#111;

    text-align:left;
    
}

/* ICON */

.wg-faq-icon{
    width:38px;
    height:38px;

    border-radius:50%;
    border:1px solid #ddd;

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

    color:#999;
    font-size:20px;

    transition:.35s ease;
    flex-shrink:0;
}

/* ANSWER */

.wg-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.wg-faq-answer p{
    padding:0 0 25px;
    color:#666;
    line-height:1.9;
    font-size:15px;
    max-width:900px;
    text-align: justify;
}

/* ACTIVE */

.wg-faq-item.active .wg-faq-answer{
    max-height:250px;
}

.wg-faq-item.active .wg-faq-icon{
    background:#ff5a1f;
    border-color:#ff5a1f;
    color:#fff;
    transform:rotate(45deg);
}

/* HOVER */

.wg-faq-item:hover .wg-faq-icon{
    border-color:#ff5a1f;
    color:#ff5a1f;
}

/* RESPONSIVE */

@media(max-width:768px){

    .wg-faq-section{
        padding:80px 20px;
    }

    .wg-faq-title{
        font-size:36px;
        margin-bottom:50px;
    }

    .wg-faq-question{
        font-size:17px;
        gap:15px;
    }

    .wg-faq-answer p{
        font-size:14px;
    }
}

/* =====================================
   STRATEGY CALL SECTION
===================================== */

.wg-call-section{
    background:#050505;
    padding:33px 8%;
}

.wg-call-container{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

/* LEFT */

.wg-call-tag{
    display:inline-block;
    padding:8px 18px;

    border:1px solid rgba(255,90,31,.3);
    border-radius:50px;

    color:#ff5a1f;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;

    margin-bottom:25px;
}

.wg-call-content h2{
    color:#fff;
    font-size:42px;
    line-height:1.05;
    font-weight:800;
    margin-bottom:20px;
}

.wg-call-content h2 span{
    color:#ff5a1f;
}

.wg-call-content p{
    color:#8c8c8c;
    line-height:1.8;
    font-size:15px;
}

.wg-call-feature{
    margin-top:18px;

    display:flex;
    gap:18px;

    padding:18px;

    background:#111;
    border:1px solid #222;
    border-radius:14px;

    transition:.35s;
}

.wg-call-feature:hover{
    border-color:#ff5a1f;
    transform:translateY(-3px);
}

.wg-call-icon{
    width:34px;
    height:34px;

    border-radius:10px;

    background:rgba(255,90,31,.08);
    border:1px solid rgba(255,90,31,.25);

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

    color:#ff5a1f;
}

.wg-call-feature h4{
    color:#fff;
    font-size:15px;
    margin-bottom:6px;
}

.wg-call-feature p{
    font-size:13px;
}

/* badges */

.wg-call-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:25px;
}

.wg-call-badges span{
    padding:10px 16px;
    border-radius:40px;

    background:#111;
    border:1px solid #222;

    color:#9f9f9f;
    font-size:12px;
}

/* FORM */

.wg-call-form-box{
    background:#151515;

    border:1px solid #2a2a2a;
    border-radius:18px;

    padding:22px;
}

/* top steps */

.wg-call-progress-top{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.wg-call-progress-top span{
    flex:1;
    height:3px;
    background:#303030;
}

.wg-call-progress-top span.active{
    background:#ff5a1f;
}

.wg-call-step{
    color:#777;
    font-size:11px;
    margin-bottom:10px;
}

.wg-call-form-box h3{
    color:#fff;
    font-size:24px;
    margin-bottom:20px;
}

/* options */

.wg-call-options{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.wg-call-option{
    padding:16px;

    border:1px solid #363636;
    border-radius:10px;

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

    cursor:pointer;
    transition:.3s;
}

.wg-call-option:hover{
    border-color:#ff5a1f;
    background:#1c1c1c;
}

.wg-call-option input{
    accent-color:#ff5a1f;
}

.wg-call-option span{
    color:#d8d8d8;
    font-size:14px;
}

/* progress */

.wg-call-progress-wrap{
    width:100%;
    height:5px;

    background:#2f2f2f;
    border-radius:30px;

    margin-top:25px;
    overflow:hidden;
}

.wg-call-progress-bar{
    width:17%;
    height:100%;
    background:#ff5a1f;
}

.wg-call-progress-text{
    color:#888;
    font-size:12px;
    margin-top:10px;
}

.wg-call-btn{
    width:100%;
    margin-top:20px;

    border:none;
    border-radius:10px;

    padding:16px;

    background:#ff5a1f;
    color:#fff;

    font-size:15px;
    font-weight:700;

    cursor:pointer;
    transition:.35s;
}

.wg-call-btn:hover{
    background:#ff6d33;
    transform:translateY(-2px);
}

.wg-call-question{
    color:#fff;
    font-size:24px;
    margin-bottom:20px;
}

.wg-call-fields{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.wg-call-input{
    width:100%;
    background:#1c1c1c;
    border:1px solid #333;
    border-radius:10px;
    padding:14px 16px;
    color:#fff;
    font-size:14px;
}

.wg-call-input:focus{
    outline:none;
    border-color:#ff5a1f;
}

.wg-call-buttons{
    display:flex;
    gap:10px;
}

.wg-call-error{
    color:#ff4d4d;
    margin:15px 0;
    font-size:14px;
}

/* responsive */

@media(max-width:991px){

    .wg-call-container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .wg-call-content h2{
        font-size:42px;
    }
}

@media(max-width:768px){

    .wg-call-section{
        padding:80px 20px;
    }

    .wg-call-content h2{
        font-size:34px;
    }

    .wg-call-form-box h3{
        font-size:20px;
    }
}

/* =========================
   LOGO MARQUEE SECTION
========================= */

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

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

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

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

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

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

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

.logo-row-wrapper:hover .logo-rowp{
    animation-play-state:paused;
}
 
.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);
}
 
@keyframes logoLeft{

    from{
        transform:translateX(0);
    }

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

}


@keyframes logoRight{

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

    to{
        transform:translateX(0);
    }

}


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


.headerp{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    margin-bottom:60px;

    padding:0 8%;
}



.headerp h1{

    font-family:Poppins,sans-serif;

    font-size:48px;

    font-weight:700;

    color:#fff;

    margin:0;

}


.contentp{

    max-width:600px;

    color:#999;

    line-height:1.8;

    font-size:15px;

    text-align:justify;

}


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


.logo-circle{

    width:190px;

    height:190px;

    position:relative;

}


.circle-svg{

    width:100%;

    height:100%;

    animation:rotateText 10s linear infinite;

}



@keyframes rotateText{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}



.circle-svg text{

    fill:#fff;

    font-size:12px;

    letter-spacing:2px;

}



.circle-center{

    position:absolute;

    top:50%;

    left:50%;

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


    width:75px;

    height:75px;


    background:#ff6200;

    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    box-shadow:
    0 0 25px rgba(255,98,0,.5);

}



.arrow svg{

    width:38px;

    height:38px;

    stroke:#fff;

}


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


@media(max-width:991px){


.logo-gridp{

    padding:60px 0;

}


.logo-rowp{

    gap:20px;

}



.logo-rowp img{

    width:130px;

    height:85px;

    padding:18px;

}



.headerp{

    flex-direction:column;

    align-items:flex-start;

    padding:0 5%;

}



.headerp h1{

    font-size:38px;

}


.logo-circle{

    width:150px;

    height:150px;

}



}



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


@media(max-width:768px){


.logo-gridp{

    gap:18px;

}


.logo-rowp-1,
.logo-rowp-2{

    animation-duration:25s;

}



.logo-rowp img{

    width:110px;

    height:70px;

    padding:12px;

    border-radius:12px;

}



.headerp{

    margin-bottom:35px;

}



.headerp h1{

    font-size:30px;

}


.contentp{

    font-size:14px;

}



.logo-circle{

    width:120px;

    height:120px;

}



.circle-center{

    width:55px;

    height:55px;

}


.arrow svg{

    width:28px;

    height:28px;

}


}



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


@media(max-width:480px){


.logo-gridp{

    padding:45px 0;

}


.logo-rowp img{

    width:95px;

    height:60px;

    padding:10px;

}



.headerp h1{

    font-size:26px;

}


.contentp{

    font-size:13px;

}


.logo-circle{

    width:100px;

    height:100px;

}



.circle-center{

    width:48px;

    height:48px;

}

}

/* sweet alert custom */
.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;
}


.otp-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.otp-input {
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 6px;
}