/*==================================================
ECOMMERCE SECTION
==================================================*/

.ecommerce{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}

.ecommerce::before{

    content:"";

    position:absolute;

    left:-180px;

    top:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 70%);

}

.ecommerce::after{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-200px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(124,58,237,.08),
    transparent 70%);

}

.ecommerce-container{

    width:min(92%,1320px);

    margin:auto;

    position:relative;

    z-index:2;

}

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

.section-heading{

    text-align:center;

    max-width:720px;

    margin:0 auto 60px;

}

.section-heading .section-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:30px;

    border:1px solid #dbeafe;

    background:#eef4ff;

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    margin-bottom:20px;

}

.section-heading h2{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    color:#0f172a;

    margin-bottom:18px;

}

.section-heading h2 span{

    background:linear-gradient(
    90deg,
    #2563eb,
    #7c3aed);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.section-heading p{

    color:#64748b;

    line-height:1.8;

    font-size:18px;

}

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

.ecommerce-grid{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:30px;

    align-items:start;

}

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

.marketplace-side{

    display:flex;

    flex-direction:column;

    gap:22px;

}

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

.marketplace-grid{

    display:grid;

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

    gap:12px;

}

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

.marketplace-card{

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:14px;

    padding:18px;

    text-align:center;

    transition:.35s;

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

}

.marketplace-card:hover{

    transform:translateY(-6px);

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

}

.marketplace-icon{

    width:42px;

    height:42px;

    margin:auto;

    margin-bottom:12px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

}

.marketplace-card h4{

    font-size:15px;

    font-weight:700;

    margin-bottom:5px;

    color:#0f172a;

}

.marketplace-card span{

    color:#94a3b8;

    font-size:11px;

}

/*==================================================
TRACK RECORD
==================================================*/

.track-record{

    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:18px;

    background:linear-gradient(
    135deg,
    #2563eb,
    #7c3aed);

    color:#fff;

}

.track-record h3{

    font-size:22px;

    font-weight:700;

    margin-bottom:22px;

}

.track-grid{

    display:grid;

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

    gap:14px;

}

.track-box{

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

    backdrop-filter:blur(10px);

    border-radius:12px;

    padding:18px;

    text-align:center;

}

.track-box h4{

    font-size:28px;

    font-weight:800;

    margin-bottom:6px;

}

.track-box span{

    font-size:12px;

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

}

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

.track-bg-circle{

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    top:-60px;

    border-radius:50%;

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

}

.track-bg-circle.second{

    width:120px;

    height:120px;

    left:-30px;

    bottom:-40px;

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

.services-side{

    display:flex;

    flex-direction:column;

    gap:16px;

}

/*==================================================
SERVICE ROW
==================================================*/

.service-row{

    display:flex;

    align-items:center;

    gap:18px;

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:16px;

    padding:20px;

    transition:.35s;

    position:relative;

    overflow:hidden;

    box-shadow:0 8px 24px rgba(15,23,42,.04);

}

.service-row::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:linear-gradient(
    180deg,
    #2563eb,
    #7c3aed);

    transform:scaleY(0);

    transition:.35s;

    transform-origin:top;

}

.service-row:hover::before{

    transform:scaleY(1);

}

.service-row:hover{

    transform:translateY(-5px);

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

}

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

.service-icon{

    width:52px;

    height:52px;

    border-radius:14px;

    background:#eef4ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

    transition:.35s;

}

.service-row:hover .service-icon{

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

    background:linear-gradient(
    135deg,
    #2563eb,
    #7c3aed);

    color:#ffffff;

}

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

.service-content{

    flex:1;

}

.service-content h4{

    font-size:18px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:8px;

}

.service-content p{

    font-size:14px;

    color:#64748b;

    line-height:1.7;

}

/*==================================================
ARROW
==================================================*/

.service-arrow{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8fafc;

    color:#94a3b8;

    transition:.35s;

    flex-shrink:0;

}

.service-arrow i{

    transition:.35s;

}

.service-row:hover .service-arrow{

    background:linear-gradient(
    135deg,
    #2563eb,
    #7c3aed);

    color:#ffffff;

}

.service-row:hover .service-arrow i{

    transform:translateX(4px);

}

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

.ecommerce-btn{

    margin-top:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:14px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    color:#ffffff;

    background:linear-gradient(
    135deg,
    #2563eb,
    #7c3aed);

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

    transition:.35s;

    overflow:hidden;

    position:relative;

}

.ecommerce-btn::before{

    content:"";

    position:absolute;

    left:-120px;

    top:0;

    width:80px;

    height:100%;

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

    transform:skewX(-25deg);

}

.ecommerce-btn:hover::before{

    left:120%;

    transition:1s;

}

.ecommerce-btn:hover{

    transform:translateY(-5px);

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

}

.ecommerce-btn i{

    transition:.35s;

}

.ecommerce-btn:hover i{

    transform:translateX(6px);

}
/*==================================================
MARKETPLACE COLORS
==================================================*/

.orange{
    background:#FFF3E0;
    color:#F59E0B;
}

.blue{
    background:#DBEAFE;
    color:#2563EB;
}

.purple{
    background:#F3E8FF;
    color:#7C3AED;
}

.green{
    background:#DCFCE7;
    color:#16A34A;
}

.red{
    background:#FEE2E2;
    color:#EF4444;
}

.pink{
    background:#FCE7F3;
    color:#EC4899;
}

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

.marketplace-card,
.service-row{

    position:relative;

}

.marketplace-card::after,
.service-row::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.03),
        transparent 70%
    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.marketplace-card:hover::after,
.service-row:hover::after{

    opacity:1;

}

/*==================================================
TRACK RECORD ANIMATION
==================================================*/

.track-record{

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

}

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

/*==================================================
BACKGROUND CIRCLE ANIMATION
==================================================*/

.track-bg-circle{

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

}

.track-bg-circle.second{

    animation-duration:11s;

}

@keyframes circleFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(18px);
    }

    100%{
        transform:translateY(0);
    }

}

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

.marketplace-card:hover .marketplace-icon{

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

}

.marketplace-icon{

    transition:.35s;

}

/*==================================================
TRACK BOX
==================================================*/

.track-box{

    transition:.35s;

}

.track-box:hover{

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

    transform:translateY(-4px);

}

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

.ecommerce-btn{

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

}

.service-arrow{

    transition:
        transform .35s,
        background .35s;

}

.marketplace-card{

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

}

.service-row{

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

}

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

.marketplace-card,
.service-row,
.track-record{

    opacity:0;

    transform:translateY(35px);

}

.marketplace-card.show,
.service-row.show,
.track-record.show{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .7s ease,
        transform .7s ease;

}
/*==========================================
JS HOVER
==========================================*/

.marketplace-card{

transform-style:preserve-3d;

will-change:transform;

}

.service-row.active-hover{

border-color:#2563eb;

}

.track-record.show{

animation:fadeUp .8s ease forwards;

}

.marketplace-card.show{

animation:fadeUp .8s ease forwards;

}

.service-row.show{

animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}