/*
Theme Name: Cambana ST.2004 Complete E-Menu
Theme URI: https://menu.cambanast2004.com
Author: Cambana Digital
Version: 5.5.0
Text Domain: cambana2004
*/


/* =========================================================
   ROOT
========================================================= */

:root{
    --cb-green:#0b4b37;
    --cb-green-dark:#052f23;

    --cb-gold:#d4aa57;
    --cb-gold-light:#f5dc9a;

    --cb-cream:#f8f3e9;
    --cb-white:#ffffff;
}


/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;

    width:100%;
    min-height:100%;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background:#080909;

    color:#fff;

    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

img{
    max-width:100%;
}


/* =========================================================
   HOME
========================================================= */

.cb-screen{
    min-height:100vh;
}

.cb-home{
    position:relative;

    width:100%;
    min-height:100vh;

    overflow:hidden;

    background:#000;

    color:#fff;
}


/* =========================================================
   MAIN CAROUSEL
========================================================= */

.cb-main-carousel{
    position:absolute;

    inset:0;

    z-index:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;
}

.cb-main-slide{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    opacity:0;

    transform:scale(1.05);

    transition:
        opacity 1.2s ease,
        transform 7s ease;
}

.cb-main-slide.active{
    opacity:1;

    transform:scale(1);
}


/* =========================================================
   MAIN PAGE OVERLAY
========================================================= */

.cb-carousel-overlay{
    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.30) 38%,
            rgba(0,0,0,.13) 65%,
            rgba(0,0,0,.42) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.85) 0%,
            rgba(0,0,0,.30) 35%,
            rgba(0,0,0,0) 74%
        );
}


/* =========================================================
   HOME INNER
========================================================= */

.cb-home-inner{
    position:relative;

    z-index:10;

    width:100%;
    min-height:100vh;

    padding:
        20px
        clamp(28px,4vw,64px)
        20px;

    display:flex;

    flex-direction:column;
}


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

.cb-top{
    position:relative;

    z-index:20;

    width:100%;

    display:grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:center;

    gap:24px;
}

.cb-left,
.cb-right{
    display:flex;

    align-items:center;

    gap:9px;
}

.cb-right{
    justify-content:flex-end;
}

.cb-ghost{
    min-height:42px;

    padding:
        0 15px;

    display:inline-flex;

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

    gap:7px;

    border:
        1px solid rgba(238,200,120,.50);

    border-radius:11px;

    background:
        rgba(3,8,6,.48);

    color:
        rgba(255,255,255,.96);

    font-size:12px;

    cursor:pointer;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 5px 16px rgba(0,0,0,.15);

    transition:
        .25s ease;
}

.cb-ghost:hover{
    color:
        var(--cb-gold-light);

    border-color:
        var(--cb-gold);

    background:
        rgba(5,24,17,.72);

    transform:
        translateY(-1px);
}

.cb-small-icon{
    width:17px;
    height:17px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   LOGO
========================================================= */

.cb-logo{
    display:flex;

    align-items:center;
    justify-content:center;
}

.cb-logo img{
    width:auto;
    height:auto;

    max-width:190px;
    max-height:74px;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(
            0 6px 18px rgba(0,0,0,.45)
        );
}


/* =========================================================
   HERO
========================================================= */

.cb-hero{
    width:max-content;

    max-width:650px;

    margin-top:
        clamp(22px,4.5vh,55px);

    padding-left:
        clamp(4px,1.7vw,24px);

    text-shadow:
        0 4px 24px rgba(0,0,0,.58);
}

.cb-hero small{
    display:block;

    margin-bottom:8px;

    color:#fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(16px,1.4vw,22px);

    letter-spacing:1.8px;
}

.cb-hero h1{
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px,5.8vw,84px);

    font-weight:400;

    line-height:.92;

    letter-spacing:1px;
}

.cb-hero h2{
    margin:
        7px 0 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(25px,2.5vw,37px);

    font-weight:400;

    letter-spacing:2.2px;
}

.cb-script{
    margin-top:12px;

    color:
        var(--cb-gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(16px,1.6vw,22px);

    font-style:italic;
}

.cb-script:after{
    content:"";

    display:block;

    width:90px;
    height:1px;

    margin-top:12px;

    background:
        linear-gradient(
            90deg,
            var(--cb-gold),
            transparent
        );
}


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

.cb-home-category-grid,
.cb-four-categories{
    width:
        min(1380px,100%) !important;

    margin-top:auto;

    margin-left:auto;
    margin-right:auto;

    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:16px !important;

    align-items:stretch !important;
}


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

.cb-home-category{
    position:relative !important;

    width:100% !important;

    min-width:0 !important;
    min-height:270px !important;

    display:block !important;

    overflow:hidden !important;

    border:
        1px solid rgba(241,203,119,.88) !important;

    border-radius:
        18px !important;

    background-image:
        var(--card-bg) !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-color:
        #0b1d16;

    box-shadow:
        0 18px 44px rgba(0,0,0,.38),
        inset 0 0 0 1px rgba(255,255,255,.04) !important;

    isolation:isolate;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.cb-home-category:after{
    content:none !important;
}

.cb-home-category:before{
    content:"";

    position:absolute;

    top:0;
    left:16%;

    z-index:8;

    width:68%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,224,148,.95),
            transparent
        );
}

.cb-home-category:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(255,221,140,1) !important;

    box-shadow:
        0 28px 62px rgba(0,0,0,.52) !important;
}


/* =========================================================
   DARK CATEGORY BG OVERLAY
========================================================= */

.cb-card-overlay{
    position:absolute !important;

    inset:0 !important;

    z-index:1 !important;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,.30) 38%,
            rgba(0,0,0,.49) 68%,
            rgba(0,0,0,.84) 100%
        ) !important;
}


/* =========================================================
   PROMOTION OVERLAY
========================================================= */

.cb-home-category.promotion
.cb-card-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(63,34,0,.18) 0%,
            rgba(46,25,0,.30) 40%,
            rgba(30,15,0,.52) 70%,
            rgba(13,6,0,.86) 100%
        ) !important;
}


/* =========================================================
   BEVERAGE OVERLAY
========================================================= */

.cb-home-category.beverage
.cb-card-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(0,48,35,.18) 0%,
            rgba(0,36,27,.31) 40%,
            rgba(0,24,18,.52) 70%,
            rgba(0,11,8,.86) 100%
        ) !important;
}


/* =========================================================
   RESTAURANT OVERLAY
========================================================= */

.cb-home-category.restaurant
.cb-card-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(0,44,30,.18) 0%,
            rgba(0,34,23,.31) 40%,
            rgba(0,23,16,.52) 70%,
            rgba(0,10,7,.86) 100%
        ) !important;
}


/* =========================================================
   FINE DINING OVERLAY
========================================================= */

.cb-home-category.fine
.cb-card-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.22) 0%,
            rgba(0,0,0,.32) 40%,
            rgba(0,0,0,.54) 70%,
            rgba(0,0,0,.88) 100%
        ) !important;
}


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

.cb-card-content{
    position:relative !important;

    z-index:5 !important;

    width:100% !important;

    min-height:270px !important;

    padding:20px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    justify-content:flex-end !important;
}


/* =========================================================
   PREMIUM ICON OUTER
========================================================= */

.cb-premium-icon{
    width:60px !important;
    height:60px !important;

    min-width:60px !important;
    min-height:60px !important;

    margin:
        0 0 8px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:
        transparent !important;
}


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

.cb-image-icon{
    width:54px !important;
    height:54px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    background:
        transparent !important;
}

.cb-image-icon img{
    width:54px !important;
    height:54px !important;

    min-width:54px !important;
    min-height:54px !important;

    max-width:54px !important;
    max-height:54px !important;

    display:block !important;

    object-fit:
        contain !important;

    opacity:1 !important;

    filter:
        brightness(1.25)
        contrast(1.08)
        saturate(1.15)
        drop-shadow(
            0 4px 8px rgba(0,0,0,.75)
        )
        drop-shadow(
            0 0 10px rgba(225,178,70,.35)
        ) !important;

    transition:
        transform .25s ease;
}

.cb-home-category:hover
.cb-image-icon img{
    transform:
        scale(1.08);
}


/* =========================================================
   SMALL CATEGORY LABEL
========================================================= */

.cb-category-small{
    margin:
        0 0 6px 1px !important;

    color:
        #f7d781 !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    letter-spacing:
        1.8px !important;

    text-transform:
        uppercase;

    text-shadow:
        0 2px 5px rgba(0,0,0,1),
        0 0 9px rgba(222,175,65,.28);
}


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

.cb-home-category h3{
    position:relative !important;

    display:inline-flex !important;

    width:auto !important;

    margin:
        0 0 8px !important;

    padding:
        7px 13px
        8px !important;

    color:
        #ffffff !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        27px !important;

    font-weight:
        500 !important;

    line-height:
        1 !important;

    letter-spacing:
        .9px !important;

    border-left:
        3px solid #e7bd62 !important;

    border-top:
        1px solid rgba(255,225,150,.25) !important;

    border-bottom:
        1px solid rgba(255,225,150,.22) !important;

    border-right:
        1px solid rgba(255,225,150,.10) !important;

    border-radius:
        4px 10px 10px 4px !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,20,14,.90) 0%,
            rgba(3,18,13,.72) 58%,
            rgba(2,13,9,.30) 100%
        ) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    text-shadow:
        0 2px 4px rgba(0,0,0,1),
        0 0 10px rgba(255,241,200,.32),
        0 0 18px rgba(230,185,80,.18) !important;

    box-shadow:
        0 7px 19px rgba(0,0,0,.24);
}


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

.cb-home-category.promotion h3{
    color:
        #fff6d7 !important;

    background:
        linear-gradient(
            90deg,
            rgba(62,31,1,.91) 0%,
            rgba(44,22,1,.72) 58%,
            rgba(26,13,0,.28) 100%
        ) !important;
}


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

.cb-home-category.beverage h3{
    background:
        linear-gradient(
            90deg,
            rgba(0,53,38,.92) 0%,
            rgba(0,39,29,.72) 58%,
            rgba(0,23,17,.28) 100%
        ) !important;
}


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

.cb-home-category.restaurant h3{
    background:
        linear-gradient(
            90deg,
            rgba(0,49,34,.92) 0%,
            rgba(0,37,26,.72) 58%,
            rgba(0,22,15,.28) 100%
        ) !important;
}


/* =========================================================
   FINE DINING TITLE
========================================================= */

.cb-home-category.fine h3{
    color:
        #fff8e6 !important;

    background:
        linear-gradient(
            90deg,
            rgba(12,12,12,.94) 0%,
            rgba(8,8,8,.74) 58%,
            rgba(3,3,3,.30) 100%
        ) !important;
}


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

.cb-home-category p{
    width:100%;

    max-width:245px;

    min-height:31px;

    margin:
        0 0 11px !important;

    color:
        rgba(255,255,255,.96) !important;

    font-size:
        10.5px;

    line-height:
        1.45;

    text-shadow:
        0 2px 5px rgba(0,0,0,1);
}


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

.cb-category-view{
    min-width:145px;
    min-height:35px;

    padding:
        0 14px;

    display:inline-flex;

    align-items:center;
    justify-content:space-between;

    gap:15px;

    border:
        1px solid rgba(255,236,190,.92);

    border-radius:
        8px;

    background:
        linear-gradient(
            110deg,
            #fff0bf 0%,
            #e9c66c 45%,
            #c38e35 100%
        );

    color:
        #171008;

    font-size:
        9px;

    font-weight:
        750;

    letter-spacing:
        .45px;

    box-shadow:
        0 8px 18px rgba(0,0,0,.32);

    transition:
        .22s ease;
}

.cb-home-category:hover
.cb-category-view{
    transform:
        translateX(3px);

    filter:
        brightness(1.08);
}


/* =========================================================
   BOTTOM
========================================================= */

.cb-home-bottom{
    width:100%;

    margin-top:13px;

    padding-bottom:17px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    color:
        rgba(255,255,255,.76);

    font-size:10px;

    letter-spacing:.5px;
}

.cb-home-location{
    display:flex;

    align-items:center;
}

.cb-gold-dot{
    padding:
        0 5px;

    color:
        #deb65f;
}


/* =========================================================
   SOCIAL
========================================================= */

.cb-home-social{
    display:flex;

    align-items:center;

    gap:7px;
}

.cb-follow-label{
    margin-right:4px;

    font-size:9px;

    color:
        rgba(255,255,255,.70);
}

.cb-home-social a{
    width:28px;
    height:28px;

    display:grid;

    place-items:center;

    border:
        1px solid rgba(218,176,88,.58);

    border-radius:
        50%;

    background:
        rgba(0,0,0,.42);

    color:
        #f0d080;
}


/* =========================================================
   DOTS
========================================================= */

.cb-carousel-dots{
    position:absolute;

    left:50%;
    bottom:10px;

    z-index:30;

    display:flex;

    gap:7px;

    transform:
        translateX(-50%);
}

.cb-dot{
    width:7px;
    height:7px;

    padding:0;

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

    border-radius:
        50%;

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

    cursor:pointer;
}

.cb-dot.active{
    width:27px;

    border-color:
        var(--cb-gold);

    border-radius:
        10px;

    background:
        var(--cb-gold);
}


/* =========================================================
   PC - FORCE 4 CARDS
========================================================= */

@media(min-width:1025px){

    .cb-home-category-grid,
    .cb-four-categories{
        display:grid !important;

        grid-template-columns:
            repeat(4,minmax(0,1fr)) !important;

        width:
            min(1380px,100%) !important;

        gap:
            16px !important;
    }

    .cb-home-category{
        display:block !important;

        width:100% !important;

        min-width:0 !important;
        max-width:none !important;

        visibility:visible !important;

        opacity:1 !important;
    }
}


/* =========================================================
   IPAD LANDSCAPE
========================================================= */

@media
(min-width:768px)
and
(max-width:1366px)
and
(orientation:landscape){

    .cb-home-inner{
        padding:
            14px 28px 16px;
    }

    .cb-top{
        gap:14px;
    }

    .cb-ghost{
        min-height:37px;

        padding:
            0 11px;

        font-size:10px;
    }

    .cb-logo img{
        max-width:165px;
        max-height:59px;
    }

    .cb-hero{
        margin-top:14px;
    }

    .cb-hero small{
        font-size:14px;
    }

    .cb-hero h1{
        font-size:
            clamp(45px,5.1vw,64px);
    }

    .cb-hero h2{
        font-size:24px;
    }

    .cb-script{
        font-size:16px;

        margin-top:8px;
    }

    .cb-home-category-grid,
    .cb-four-categories{
        width:100% !important;

        grid-template-columns:
            repeat(4,minmax(0,1fr)) !important;

        gap:
            11px !important;
    }

    .cb-home-category{
        min-height:
            210px !important;

        border-radius:
            15px !important;
    }

    .cb-card-content{
        min-height:
            210px !important;

        padding:
            14px !important;
    }

    .cb-premium-icon{
        width:48px !important;
        height:48px !important;

        min-width:48px !important;
        min-height:48px !important;
    }

    .cb-image-icon,
    .cb-image-icon img{
        width:42px !important;
        height:42px !important;

        min-width:42px !important;
        min-height:42px !important;

        max-width:42px !important;
        max-height:42px !important;
    }

    .cb-category-small{
        font-size:
            7px !important;

        margin-bottom:
            4px !important;
    }

    .cb-home-category h3{
        font-size:
            19px !important;

        padding:
            6px 9px
            7px !important;

        margin-bottom:
            6px !important;
    }

    .cb-home-category p{
        font-size:
            8px;

        margin-bottom:
            7px !important;

        min-height:24px;
    }

    .cb-category-view{
        min-width:120px;
        min-height:30px;

        padding:
            0 11px;

        font-size:
            7.5px;
    }

    .cb-home-bottom{
        font-size:8px;

        margin-top:9px;

        padding-bottom:11px;
    }
}


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

@media
(min-width:601px)
and
(max-width:1024px)
and
(orientation:portrait){

    .cb-home{
        overflow:auto;
    }

    .cb-home-inner{
        padding:
            18px 20px 65px;
    }

    .cb-top{
        grid-template-columns:
            1fr auto;
    }

    .cb-right{
        display:none;
    }

    .cb-hero{
        margin-top:42px;
    }

    .cb-home-category-grid,
    .cb-four-categories{
        margin-top:50px;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:
            13px !important;
    }

    .cb-home-category,
    .cb-card-content{
        min-height:
            235px !important;
    }
}


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

@media(max-width:600px){

    .cb-home{
        overflow:auto;
    }

    .cb-home-inner{
        padding:
            16px 15px 60px;
    }

    .cb-top{
        grid-template-columns:
            1fr auto;
    }

    .cb-right{
        display:none;
    }

    .cb-logo img{
        max-width:130px;
    }

    .cb-hero{
        margin-top:35px;
    }

    .cb-hero h1{
        font-size:44px;
    }

    .cb-home-category-grid,
    .cb-four-categories{
        margin-top:45px;

        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }

    .cb-home-category,
    .cb-card-content{
        min-height:
            240px !important;
    }

    .cb-home-category h3{
        font-size:
            24px !important;
    }

    .cb-home-bottom{
        flex-direction:column;

        align-items:flex-start;
    }
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media(min-width:1500px){

    .cb-home-category-grid,
    .cb-four-categories{
        width:
            min(1420px,100%) !important;

        gap:
            18px !important;
    }

    .cb-home-category,
    .cb-card-content{
        min-height:
            290px !important;
    }

    .cb-card-content{
        padding:
            22px !important;
    }

    .cb-home-category h3{
        font-size:
            29px !important;
    }

    .cb-premium-icon{
        width:66px !important;
        height:66px !important;
    }

    .cb-image-icon,
    .cb-image-icon img{
        width:58px !important;
        height:58px !important;

        min-width:58px !important;
        min-height:58px !important;

        max-width:58px !important;
        max-height:58px !important;
    }
}