/*==================================================
            POPULAR TRADES
==================================================*/

.popular-trades{

    padding:110px 0;

    background:#06152d;

    position:relative;

    overflow:hidden;

}

/* Background Pattern */

.popular-trades::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top left,
    rgba(0,140,255,.08),
    transparent 45%),

    radial-gradient(circle at bottom right,
    rgba(255,193,7,.08),
    transparent 45%);

    pointer-events:none;

}

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

.popular-trades .container{

    width:90%;

    max-width:1400px;

    margin:auto;

    position:relative;

    z-index:2;

}

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

.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading .tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 25px;

    border:1px solid #008cff;

    border-radius:50px;

    color:#58b7ff;

    font-weight:600;

    margin-bottom:20px;

}

.section-heading h2{

    font-size:60px;

    font-weight:800;

    color:#fff;

    margin-bottom:20px;

}

.section-heading h2 span{

    color:#ffc107;

}

.section-heading p{

    color:#cfd8e3;

    font-size:19px;

}

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

.trade-grid{

    display:grid;

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

    gap:30px;

}

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

.trade-card{

    position:relative;

    background:#081b3c;

    border-radius:22px;

    overflow:hidden;

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

    transition:.45s;

    box-shadow:

    0 10px 30px rgba(0,0,0,.30);

}

/* Hover */

.trade-card:hover{

    transform:translateY(-12px);

    border-color:#00bfff;

    box-shadow:

    0 20px 40px rgba(0,191,255,.25);

}

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

.trade-image{

    height:230px;

    overflow:hidden;

}

.trade-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.trade-card:hover img{

    transform:scale(1.12);

}

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

.trade-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#ffc107;

    color:#111;

    font-weight:700;

    padding:10px 12px;

    border-radius:10px;

    font-size:13px;

    z-index:10;

    line-height:1.2;

    text-align:center;

}

.trade-badge span{

    display:block;

    font-size:11px;

}

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

.trade-icon{

    width:75px;

    height:75px;

    background:#0a2c5f;

    border:5px solid #06152d;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#4db7ff;

    font-size:28px;

    margin:-38px auto 0;

    position:relative;

    z-index:5;

}

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

.trade-content{

    padding:25px;

    text-align:center;

}

.trade-content h3{

    color:#fff;

    font-size:28px;

    margin-bottom:18px;

}

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

.trade-info{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:18px;

    color:#ffc107;

    font-size:15px;

}

.trade-info span{

    display:flex;

    align-items:center;

    gap:7px;

}

/*================ DESCRIPTION ================*/

.trade-content p{

    color:#c7d3df;

    font-size:15px;

    line-height:1.8;

    margin-bottom:25px;

}

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

.trade-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 26px;

    border:2px solid #009dff;

    color:#58b7ff;

    text-decoration:none;

    border-radius:40px;

    transition:.4s;

}

.trade-btn:hover{

    background:#009dff;

    color:#fff;

}

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

.all-trades{

    text-align:center;

    margin-top:60px;

}

.all-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:#ffc107;

    color:#111;

    padding:18px 40px;

    border-radius:50px;

    font-weight:700;

    text-decoration:none;

    transition:.4s;

}

.all-btn:hover{

    transform:translateY(-5px);

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

}


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

.trade-card{

    isolation:isolate;

}

/* Animated Border */

.trade-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        transparent,
        #00bfff,
        transparent
    );

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

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.5s;

}

.trade-card:hover::before{

    opacity:1;

}

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

.trade-image{

    position:relative;

}

.trade-image::after{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:linear-gradient(
        transparent,
        rgba(6,21,45,.7)
    );

}

/*====================================
        Icon Hover
=====================================*/

.trade-icon{

    transition:.5s;

}

.trade-card:hover .trade-icon{

    transform:rotateY(360deg) scale(1.1);

    background:#00bfff;

    color:#fff;

    box-shadow:

    0 0 20px #00bfff,

    0 0 40px rgba(0,191,255,.45);

}

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

.trade-btn{

    position:relative;

    overflow:hidden;

}

.trade-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

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

transform:skewX(-25deg);

transition:.6s;

}

.trade-btn:hover::before{

left:120%;

}

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

.trade-card::after{

content:"";

position:absolute;

left:50%;

bottom:-12px;

transform:translateX(-50%);

width:70%;

height:10px;

background:#00bfff;

filter:blur(15px);

opacity:0;

transition:.5s;

}

.trade-card:hover::after{

opacity:.9;

}

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

.trade-badge{

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

}

@keyframes badgeFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

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

.trade-card{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.trade-card.show{

opacity:1;

transform:translateY(0);

}

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

@media(max-width:1200px){

.trade-grid{

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

}

}

@media(max-width:992px){

.trade-grid{

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

}

.section-heading h2{

font-size:45px;

}

}

@media(max-width:768px){

.trade-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:34px;

}

.section-heading p{

font-size:16px;

}

.trade-image{

height:240px;

}

}