/* =========================
   HOTEL BRANDS SECTION
========================= */

.hotel-brands-section{
    position:relative;

    padding:120px 0 80px;

    overflow:hidden;

    background:
        url('../images/pramain.png') top center no-repeat,
        #f8f8f8;

    background-size:100% 100px;
}

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

.brands-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:40px;

    flex-wrap:wrap;

    gap:20px;
}

/* SUBTITLE */

.brands-subtitle{
    color:#d63c00;

    font-size:14px;
    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;
}

/* TITLE */

.brands-title{
    font-size:42px;
    font-weight:600;

    margin-top:8px;

    color:#111;
}

.brands-title span{
    color:#ff7a00;
}

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

.brands-buttons{
    display:flex;

    gap:12px;
}

.brand-btn{
    width:48px;
    height:48px;

    border-radius:50%;

    border:none;

    background:#fff;

    box-shadow:0 5px 14px rgba(0,0,0,0.10);

    font-size:20px;

    color:#ff5e00;

    cursor:pointer;

    transition:0.3s ease;
}

.brand-btn:hover{
    background:#ff7a00;

    color:#fff;

    transform:translateY(-3px);
}

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

.brands-slider-wrapper{
    overflow:hidden;
}

.brands-slider{
    display:flex;

    gap:22px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding-bottom:8px;
}

.brands-slider::-webkit-scrollbar{
    display:none;
}

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

.brand-card{
    min-width:210px;
    height:110px;

    background:#fff;

    border:2px solid #ff9900;

    border-radius:18px;

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

    padding:18px;

    transition:0.35s ease;
}

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

    box-shadow:0 14px 28px rgba(0,0,0,0.08);
}

/* IMAGE */

.brand-card img{
    max-width:100%;
    max-height:52px;

    object-fit:contain;
}

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

@media(max-width:991px){

    .hotel-brands-section{
        padding:100px 0 70px;

        background-size:100% 85px;
    }

    .brands-title{
        font-size:34px;
    }

    .brand-card{
        min-width:190px;

        height:100px;
    }

    .brand-card img{
        max-height:46px;
    }

}

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

@media(max-width:576px){

    .hotel-brands-section{
        padding:80px 0 60px;

        background-size:100% 70px;
    }

    .brands-header{
        flex-direction:column;

        align-items:flex-start;
    }

    .brands-title{
        font-size:28px;
    }

    .brands-buttons{
        gap:10px;
    }

    .brand-btn{
        width:42px;
        height:42px;

        font-size:17px;
    }

    .brands-slider{
        gap:16px;
    }

    .brand-card{
        min-width:160px;

        height:90px;

        border-radius:16px;
    }

    .brand-card img{
        max-height:38px;
    }

}