/* ===========================================
   MUMBAS DIGITAL MENU
   PART 1
===========================================*/

:root{

    --bg:#031228;
    --bg2:#071b36;

    --gold:#D4AF37;
    --gold-light:#F5D47A;
    --gold-dark:#9B7420;

    --white:#ffffff;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:

radial-gradient(circle at top,#0b2954 0%,#041326 45%,#020814 100%);

color:white;

overflow-x:hidden;

min-height:100vh;

position:relative;

}

/* ==========================
BACKGROUND
==========================*/

.bg-overlay{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background:

radial-gradient(circle at top,
rgba(255,214,110,.06),
transparent 35%);

pointer-events:none;

z-index:-1;

}

/* ==========================
PALMS
==========================*/

.palm-left{

position:fixed;

left:-30px;

top:80px;

width:230px;

opacity:.12;

pointer-events:none;

user-select:none;

}

.palm-right{

position:fixed;

right:-20px;

bottom:30px;

width:220px;

opacity:.12;

transform:rotate(180deg);

pointer-events:none;

user-select:none;

}

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

header{

width:100%;

padding:30px 40px;

display:flex;

justify-content:flex-end;

}

.language{

display:flex;

align-items:center;

gap:8px;

color:var(--gold);

font-size:15px;

letter-spacing:1px;

cursor:pointer;

transition:.3s;

}

.language:hover{

color:var(--gold-light);

}

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

main{

width:100%;

max-width:760px;

margin:auto;

padding:0 25px 60px;

}

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

.logo-box{

display:flex;

justify-content:center;

margin-top:10px;

}

.logo{

width:340px;

max-width:95%;

animation:logoAnimation 1.2s ease;

filter:

drop-shadow(0 0 20px rgba(212,175,55,.20));

}

@keyframes logoAnimation{

0%{

opacity:0;

transform:translateY(-25px)
scale(.9);

}

100%{

opacity:1;

transform:translateY(0)
scale(1);

}

}

/* ==========================
DIVIDER
==========================*/

.divider{

width:120px;

height:2px;

margin:25px auto;

background:

linear-gradient(to right,
transparent,
var(--gold),
transparent);

position:relative;

}

.divider::after{

content:"";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%) rotate(45deg);

width:12px;

height:12px;

background:var(--gold);

}

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

h1{

font-family:'Cinzel',serif;

font-size:46px;

font-weight:500;

text-align:center;

letter-spacing:3px;

margin-bottom:14px;

}

.subtitle{

text-align:center;

font-size:15px;

letter-spacing:3px;

color:var(--gold);

margin-bottom:55px;

}
/* ===========================================
   MENU CARDS
===========================================*/

.cards{

display:flex;

flex-direction:column;

gap:24px;

}

/* CARD */

.card{

position:relative;

display:flex;

align-items:center;

text-decoration:none;

padding:22px 28px;

border-radius:22px;

border:2px solid rgba(212,175,55,.75);

background:linear-gradient(
180deg,
rgba(12,33,60,.90),
rgba(5,18,36,.92));

backdrop-filter:blur(10px);

transition:.35s;

overflow:hidden;

}

/* Gold line */

.card::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:100%;

background:linear-gradient(
180deg,
var(--gold-light),
var(--gold),
var(--gold-dark));

}

/* Hover */

.card:hover{

transform:translateY(-6px);

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

box-shadow:

0 18px 45px rgba(0,0,0,.45),

0 0 25px rgba(212,175,55,.18);

}

.card:hover::after{

opacity:1;

}

.card::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.04),
transparent);

opacity:0;

transition:.35s;

}

/* ICON */

.icon{

width:92px;

height:92px;

border-radius:50%;

border:2px solid var(--gold);

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

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

}

.icon img{

width:46px;

height:46px;

object-fit:contain;

filter:drop-shadow(0 0 8px rgba(212,175,55,.35));

}

/* TEXT */

.info{

flex:1;

padding-left:26px;

}

.info h2{

font-family:'Cinzel',serif;

font-size:30px;

font-weight:600;

letter-spacing:1px;

color:white;

margin-bottom:6px;

}

.info p{

font-size:13px;

letter-spacing:2px;

color:var(--gold);

text-transform:uppercase;

}

/* ARROW */

.arrow{

width:54px;

height:54px;

border-radius:50%;

border:2px solid rgba(212,175,55,.60);

display:flex;

align-items:center;

justify-content:center;

color:var(--gold);

font-size:18px;

transition:.35s;

}

.card:hover .arrow{

background:var(--gold);

color:#041326;

transform:translateX(6px);

}

/* BOTTOM DIVIDER */

.bottom-divider{

display:flex;

justify-content:center;

margin-top:55px;

}

.bottom-divider img{

width:150px;

opacity:.95;

}

/* FOOTER */

footer{

margin-top:30px;

text-align:center;

font-size:13px;

letter-spacing:4px;

color:var(--gold);

opacity:.9;

}

/* ===========================================
   ANIMATIONS
=========================================== */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.logo-box{
    animation:fadeUp .8s ease;
}

h1{
    animation:fadeUp 1s ease;
}

.subtitle{
    animation:fadeUp 1.2s ease;
}

.card:nth-child(1){
    animation:fadeUp .8s ease;
}

.card:nth-child(2){
    animation:fadeUp 1s ease;
}

.card:nth-child(3){
    animation:fadeUp 1.2s ease;
}

.card:nth-child(4){
    animation:fadeUp 1.4s ease;
}

/* ===========================================
   SCROLLBAR
=========================================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#031228;
}

::-webkit-scrollbar-thumb{
    background:#b8892e;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#f3d67d;
}

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

@media(max-width:900px){

main{
    padding:0 18px 50px;
}

.logo{
    width:280px;
}

h1{
    font-size:38px;
}

.info h2{
    font-size:24px;
}

.icon{
    width:82px;
    height:82px;
}

}

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

@media(max-width:600px){

header{
    padding:20px;
}

.logo{
    width:230px;
}

.divider{
    width:90px;
}

h1{
    font-size:28px;
    letter-spacing:2px;
}

.subtitle{
    font-size:12px;
    letter-spacing:2px;
    margin-bottom:35px;
}

.card{
    padding:18px;
    border-radius:18px;
}

.icon{
    width:68px;
    height:68px;
}

.icon img{
    width:34px;
    height:34px;
}

.info{
    padding-left:16px;
}

.info h2{
    font-size:18px;
}

.info p{
    font-size:10px;
    letter-spacing:1px;
}

.arrow{
    width:42px;
    height:42px;
    font-size:14px;
}

footer{
    font-size:11px;
    letter-spacing:2px;
}

.palm-left{
    width:150px;
}

.palm-right{
    width:150px;
}

}

/* ===========================================
   SMALL PHONES
=========================================== */

@media(max-width:380px){

.logo{
    width:190px;
}

h1{
    font-size:24px;
}

.card{
    padding:15px;
}

.icon{
    width:100px;
    height:60px;
}

.icon img{
    width:100px;
    height:50px;
}

.info h2{
    font-size:16px;
}

.info p{
    display:none;
}

.arrow{
    width:36px;
    height:36px;
}

}


.gallery{

max-width:900px;

margin:auto;

padding:20px;

}

.gallery img{

width:100%;

display:block;

margin-bottom:25px;

border-radius:18px;

box-shadow:0 10px 35px rgba(0,0,0,.35);

}