/* =========================================
TABLETS
========================================= */

@media(max-width:1024px){

    .grid{

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

}


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

@media(max-width:768px){

    body{

        overflow-x:hidden;
    }

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

    header{

        flex-direction:column;

        align-items:stretch;

        gap:14px;

        padding:14px;
    }

    .tabs{

        width:100%;

        overflow-x:auto;

        scrollbar-width:none;
    }

    .tabs::-webkit-scrollbar{
        display:none;
    }

    .search{

        max-width:100%;
    }

    .search input{

        width:100%;

        height:48px;

        font-size:15px;
    }

    .providers{

        width:100%;
    }

    .providers select{

        width:100%;

        height:50px;
    }

    /* ================= SLIDER ================= */

    .hero-slider{

        padding:12px;
    }

    .mainSlider{

        height:250px;

        border-radius:22px;
    }

    .slide-content{

        left:18px;

        max-width:210px;
    }

    .slide-content h1{

        font-size:32px;

        line-height:1;
    }

    .slide-content p{

        font-size:13px;

        margin-top:8px;

        margin-bottom:14px;
    }

    .slide-content button{

        padding:10px 16px;

        font-size:12px;
    }

    .swiper-button-next,
    .swiper-button-prev{

        transform:scale(.6);
    }

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

    .grid{

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

        gap:14px;

        padding:14px;
    }

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

    .card{

        border-radius:18px;
    }

    .card img{

        height:120px;
    }

    .card h4{

        font-size:13px;

        padding:10px;
    }

}


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

@media(max-width:480px){

    header{

        padding:10px;
    }

    .tab{

        padding:10px 14px;

        font-size:13px;
    }

    .mainSlider{

        height:210px;
    }

    .slide-content{

        max-width:160px;

        left:14px;
    }

    .slide-content h1{

        font-size:24px;
    }

    .slide-content p{

        font-size:10px;

        margin-bottom:10px;
    }

    .slide-content button{

        padding:8px 12px;

        font-size:10px;
    }

    .grid{

        gap:10px;

        padding:10px;
    }

    .card img{

        height:100px;
    }

    .card h4{

        font-size:11px;
    }

}
/* ================= HEADER PREMIUM MOBILE ================= */

@media(max-width:768px){

    .top-header{
        height:auto;
        padding:12px;
        flex-direction:column;
        align-items:center;
        gap:12px;
        position:relative;
    }

    .logo-area img{
        height:55px;
        max-width:90px;
    }

    .main-menu{
        width:100%;
        display:flex;
        overflow-x:auto;
        gap:12px;
        padding:8px 4px;
        white-space:nowrap;
        scrollbar-width:none;
    }

    .main-menu::-webkit-scrollbar{
        display:none;
    }

    .main-menu a{
        font-size:13px;
        padding:8px 14px;
        border-radius:18px;
        background:rgba(255,255,255,.05);
        border:1px solid rgba(168,85,247,.18);
        flex:0 0 auto;
    }

    .header-actions{
        width:100%;
        display:flex;
        gap:10px;
    }

    .promo-btn,
    .login-btn{
        flex:1;
        padding:11px 14px;
        font-size:13px;
        border-radius:16px;
    }

}
@media(max-width:768px){

    header{
        padding:14px 12px;
    }

    .search input{
        border-radius:22px;
    }

    .providers select{
        border-radius:22px;
    }

}