/* ======================================================
   SERVICES – PREMIUM SPA STYLE (FIXED FOR YOUR HTML)
====================================================== */

/* ===============================
   VARIABLES
=============================== */

.section.bg-gray-150{
    --primary:#0c1451;
    --text:#1f2937;
    --muted:#6b7280;
    --soft:#f8f9ff;

    padding:90px 0;
    background:linear-gradient(135deg,#f8f9ff,#eef2ff);
}


/* ===============================
   TITLE
=============================== */

.section.bg-gray-150 h2{
    font-size:2.3rem;
    font-weight:800;
    color:var(--primary);
    letter-spacing:.5px;
}


/* ===============================
   CATEGORY TITLE
=============================== */

.section.bg-gray-150 h5{
    font-size:1.1rem;
    font-weight:600;
    letter-spacing:1px;
    color:var(--primary);
    margin-bottom:10px;
}

.section.bg-gray-150 .text-muted{
    color:var(--muted) !important;
    line-height:1.6;
}


/* ===============================
   HORIZONTAL SCROLL FIX (MATCH ID menu-*)
=============================== */

[id^="menu-"]{
    display:flex;
    gap:22px;
    overflow-x:auto;
    padding:8px 10px 18px;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;
}

/* Hide scrollbar */
[id^="menu-"]::-webkit-scrollbar{
    display:none;
}
[id^="menu-"]{
    scrollbar-width:none;
}


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

[id^="menu-"] > a{
    flex:0 0 18rem;
    width:18rem;
    scroll-snap-align:start;
}

.card{
    border-radius:20px;
    overflow:hidden;
    border:none;
    background:#fff;

    transition:.35s ease;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 45px rgba(15,23,42,.12);
}

/* image zoom */
.card img{
    transition:transform .6s ease;
}
.card:hover img{
    transform:scale(1.08);
}


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

.card-body{
    padding:16px 16px 18px;
    display:flex;
    flex-direction:column;
}

.card-title{
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.05em;
    color:var(--primary);
}

.card-text{
    font-size:.85rem;
    color:var(--muted);
    flex-grow:1;
}

.small{
    margin-top:auto;
    font-size:.78rem;
    opacity:.85;
}


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

.scroll-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:44px;
    height:44px;
    border-radius:50%;
    border:none;

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

    background:#fff;
    cursor:pointer;

    font-size:22px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.25s;
    z-index:10;
}

.scroll-btn:hover{
    transform:translateY(-50%) scale(1.12);
}

.scroll-left{ left:-18px; }
.scroll-right{ right:-18px; }


/* ===============================
   VIEW ALL BUTTON
=============================== */

.btn-view{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.75rem 1.8rem;
    border-radius:999px;

    font-size:.9rem;
    font-weight:600;
    letter-spacing:.4px;

    text-decoration:none;
    color:#3b2a1f;

    background:linear-gradient(90deg,#fff,#ffd37a,#8B5E3C,#fff);
    background-size:200% auto;

    border:1px solid rgba(139,94,60,.3);

    box-shadow:0 10px 24px rgba(139,94,60,.18);
    transition:.35s;
}

.btn-view:hover{
    background-position:right center;
    transform:translateY(-5px);
}

.section.bg-gray-150 .btn-view{
    margin-bottom:32px;
}


/* ===============================
   RESPONSIVE
=============================== */

@media (min-width:1200px){
    [id^="menu-"] > a{
        flex:0 0 23%;
        width:23%;
    }
}

@media (max-width:991px){
    [id^="menu-"] > a{
        flex:0 0 38%;
        width:38%;
    }
}

@media (max-width:767px){

    .section.bg-gray-150 h2{
        font-size:1.6rem;
    }

    [id^="menu-"] > a{
        flex:0 0 82%;
        width:82%;
    }

    .scroll-btn{
        display:none;
    }

    .btn-view{
        width:100%;
        max-width:340px;
    }

    .card:hover{
        transform:none;
        box-shadow:0 6px 18px rgba(15,23,42,.06);
    }
}


/* ===============================
   REDUCED MOTION
=============================== */

@media (prefers-reduced-motion:reduce){
    *{
        transition:none !important;
        animation:none !important;
    }
}