/* ==========================================================
   MARKETS
   ========================================================== */

.markets{
    position: relative;
    padding: 170px 0 120px;
    overflow: hidden;
}

.markets::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 35%, rgba(179,25,47,.12), transparent 35%),
        radial-gradient(circle at 85% 20%, rgba(55,163,255,.10), transparent 35%);
    pointer-events:none;
}

.markets .container{
    position:relative;
    z-index:2;
    width:min(1500px,92%);
    margin:auto;
}

/* ---------- Header ---------- */

.markets-header{

    text-align:center;

    margin-bottom:70px;

}

.markets-header h2{

    max-width:900px;

    margin:20px auto 0;

    font-size:clamp(42px,5vw,72px);

    line-height:1.05;

}

.section-tag{

    display:inline-block;

    color:#37a3ff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.25em;

    text-transform:uppercase;

}

/* ---------- Tabs ---------- */

.market-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:70px;

}

.market-tab{

    padding:12px 0;

    background:none;

    border:none;

    color:#7d8794;

    font-size:17px;

    font-weight:500;

    cursor:pointer;

    border-bottom:2px solid transparent;

    transition:.25s;

}

.market-tab:hover{

    color:#fff;

}

.market-tab.active{

    color:#fff;

    border-bottom:2px solid #b3192f;

}

/* ---------- Slides ---------- */

.market-slider{

    position:relative;

}

.market-slide{

    display:none;

    animation:marketFade .45s ease;

}

.market-slide.active{

    display:block;

}

@keyframes marketFade{

    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

/* ---------- Grid ---------- */

.market-grid{

    display:grid;

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

    gap:80px;

    align-items:center;

}

/* ---------- Image ---------- */

.market-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.market-image img{

    width:100%;

    max-width:760px;

    border-radius:26px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.45);

}

/* ---------- Text ---------- */

.market-number{

    display:block;

    margin-bottom:15px;

    color:#b3192f;

    font-size:74px;

    font-weight:800;

    line-height:1;

}

.market-text h3{

    margin:0 0 28px;

    font-size:52px;

    line-height:1.08;

}

.market-text p{

    margin:0 0 22px;

    color:#b8c1cc;

    font-size:18px;

    line-height:1.85;

}

.market-text ul{

    margin:34px 0;

    padding-left:22px;

}

.market-text li{

    margin:10px 0;

    color:#fff;

    font-size:18px;

}

/* ---------- Controls ---------- */

.market-slider{
    position:relative;
}

.slider-controls{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.slider-controls button{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:64px;

    height:64px;

    border-radius:50%;

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

    background:rgba(15,18,25,.75);

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:28px;

    cursor:pointer;

    pointer-events:auto;

    transition:.25s;

}

#prevSlide{

    left:-80px;

}

#nextSlide{

    right:-80px;

}

.slider-controls button:hover{

    background:#b3192f;

    transform:translateY(-50%) scale(1.08);

}

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

@media (max-width:1100px){

    .market-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .market-image{

        order:-1;

    }

    .market-number{

        font-size:54px;

    }

    .market-text h3{

        font-size:38px;

    }

    .market-text p,
    .market-text li{

        font-size:16px;

    }

}