/* =========================
   GOOGLE FONTS
========================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Montserrat:wght@300;400;500;600&display=swap');

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#000;
    overflow-x:hidden;
}

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

.royal-header{
    position:fixed;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    width:92%;
    z-index:9999;
    transition:0.5s ease;
}

/* SCROLL EFFECT */

.royal-header.scrolled{

    top:10px;

}

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

.header-inner{

position:relative;

width:100%;

display:flex;

align-items:center;

justify-content: end;

padding: 40px 40px;

background: rgb(0 0 0);

border: 1px solid rgb(255 255 255 / 52%);

backdrop-filter:blur(12px);

overflow:hidden;

border-radius:80px;

box-shadow:
    0 10px 40px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* TOP LIGHT LINE */

.header-inner::before{
    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:1px;

    background:rgba(255,255,255,0.4);

    animation:lightMove 6s linear infinite;
}

@keyframes lightMove{

    0%{
        left:-100%;
    }

    100%{
        left:100%;
    }

}

/* =========================
   NAV AREA
========================= */

.header-left,
.header-right{

    display:flex;
    align-items:center;
    gap:34px;

}

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

.header-logo{

position:absolute;

left: 15%;

top:50%;

transform: translate(-45%, -50%);
}

.header-logo img{
    width: 97%;
    transition:0.5s ease;
}

.header-logo:hover img{

    transform:scale(1.08) rotate(-2deg);

}

/* =========================
   LINKS
========================= */

.nav-link{

    position:relative;

    text-decoration:none;

    color:#f3f3f3;

    font-family:'Montserrat', sans-serif;
    font-size:14px;
    font-weight:500;

    letter-spacing:2px;
    text-transform:uppercase;

    transition:0.4s ease;
}

.nav-link::after{

    content:"";

    position:absolute;
    bottom:-7px;
    left:0;

    width:0%;
    height:1px;

    background:#fff;

    transition:0.4s ease;

}

.nav-link:hover{

    color:#ffffff;

    transform:translateY(-3px);

}

.nav-link:hover::after{

    width:100%;

}

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

.reserve-btn{

text-decoration:none;

color:#fff;

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

font-size:13px;

font-weight:500;

letter-spacing:1px;

text-transform:uppercase;

padding:14px 26px;

border: 1px solid rgb(255 255 255 / 71%);

border-radius:40px;

transition:0.5s ease;

position:relative;

overflow:hidden;
}

.reserve-btn::before{

    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:#fff;

    transition:0.5s ease;

    z-index:-1;

}

.reserve-btn:hover::before{

    left:0;

}

.reserve-btn:hover{

    color:#000;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(255,255,255,0.18);

}

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

.mobile-toggle{

    width:50px;
    height:50px;

    display:none;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:7px;

    cursor:pointer;
}

.mobile-toggle span{

    width:26px;
    height:1.5px;

    background:#fff;

    transition:0.4s ease;

}

.mobile-toggle:hover span:nth-child(1){

    transform:translateX(-4px);

}

.mobile-toggle:hover span:nth-child(2){

    transform:translateX(4px);

}

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

.mobile-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.96);

    z-index:10000;

    visibility:hidden;
    opacity:0;

    transition:0.5s ease;
}

.mobile-overlay.active{

    visibility:visible;
    opacity:1;

}

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

.mobile-menu{

    width:100%;
    height:100%;

    padding:30px;

    display:flex;
    flex-direction:column;
}

/* TOP */

.mobile-top{

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

    margin-bottom:90px;
}

.mobile-top img{

    width:130px;

}

.mobile-top button{

    background:none;
    border:none;

    color:#fff;

    font-size:34px;

    cursor:pointer;

    transition:0.4s ease;
}

.mobile-top button:hover{

    transform:rotate(180deg);

}

/* MOBILE LINKS */

.mobile-links{

    display:flex;
    flex-direction:column;
    gap:28px;
}

.mobile-links a{

    width:fit-content;

    text-decoration:none;

    color:#fff;

    font-family:'Cinzel', serif;
    font-size:38px;
    font-weight:500;

    letter-spacing:1px;

    position:relative;

    transition:0.4s ease;
}

.mobile-links a::after{

    content:"";

    position:absolute;
    left:0;
    bottom:-6px;

    width:0%;
    height:1px;

    background:#fff;

    transition:0.4s ease;
}

.mobile-links a:hover{

    transform:translateX(12px);

}

.mobile-links a:hover::after{

    width:100%;

}

/* MOBILE ORDER */

.mobile-order{

    margin-top:15px;

    border:1px solid rgba(255,255,255,0.2);

    padding:15px 24px;

    border-radius:40px;

    font-size:16px !important;

}

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

@media(max-width:1200px){

    .header-logo{
        position: sticky;
        transform:none;
        left: 0%;
    }

    .header-inner{
        justify-content:space-between;
    }

}

@media(max-width:992px){

    .header-left,
    .header-right{
        display:none;
    }

    .mobile-toggle{
        display:flex;
    }

    .header-logo img{
        width:130px;
    }

    .header-inner{
        padding:16px 22px;
    }

}

@media(max-width:768px){

    .royal-header{
        width:94%;
        top:15px;
    }

    .mobile-links a{
        font-size:32px;
    }

}

@media(max-width:480px){

    .mobile-links a{
        font-size:27px;
    }

    .mobile-top img{
        width: 60%;
    }

    .header-logo img{
        width: 70%;
    }

}



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

.nepali-hero{

position:relative;

width:100%;

height: 120vh;

background: #000000;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

padding: 100px 6%;
}

/* =========================================
   SIDE IMAGES
========================================= */

.hero-img{

    position:absolute;

    z-index:2;

    overflow:hidden;

    border-radius:25px;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:0 25px 60px rgba(0,0,0,0.65);

    transition:0.6s ease;

}

.hero-img img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s ease;

}

/* LEFT IMAGE */

.hero-img-left{

width: 380px;

height: 500px;

left:5%;

top:50%;

transform:translateY(-50%) rotate(-6deg);
}

/* RIGHT IMAGE */

.hero-img-right{

width: 380px;

height: 500px;

right:5%;

top:50%;

transform:translateY(-50%) rotate(6deg);
}

/* IMAGE HOVER */

.hero-img:hover{

    transform:translateY(-50%) rotate(0deg) scale(1.03);

}

.hero-img:hover img{

    transform:scale(1.08);

}

/* =========================================
   CENTER CONTENT
========================================= */

.hero-center{

    position:relative;

    z-index:10;

    text-align:center;

    max-width:760px;

}

/* TAG */

.hero-tag{

color:rgba(255,255,255,0.7);

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

font-size: 14px;

letter-spacing:5px;

text-transform:uppercase;

display:inline-block;

margin-bottom:30px;

font-weight: 700;
}

/* HEADING */

.hero-center h1{

color:#fff;

font-family:'Cormorant Garamond', serif;

font-size: 65px;

font-weight:700;

margin-bottom:30px;

text-transform:uppercase;
}

/* PARAGRAPH */

.hero-center p{

    color:rgba(255,255,255,0.72);

    font-family:'Montserrat', sans-serif;
    font-size:16px;

    line-height:1.9;

    max-width:650px;

    margin:auto auto 45px;

}

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

.hero-btns{

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

    gap:20px;

}

.hero-btn{

position:relative;

text-decoration:none;

color:#fff;

padding:17px 34px;

border: 1px solid rgb(255 255 255 / 76%);

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

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

overflow:hidden;

transition:0.5s ease;
}

.hero-btn::before{

    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:#fff;

    transition:0.5s ease;

    z-index:-1;

}

.hero-btn:hover::before{

    left:0;

}

.hero-btn:hover{

    color:#000;

    transform:translateY(-5px);

}

/* =========================================
   FLOATING CARDS
========================================= */

.floating-card{

    position:absolute;

    width:180px;
    height:220px;

    overflow:hidden;

    border-radius:20px;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:0 20px 50px rgba(0,0,0,0.55);

    z-index:5;

    animation:floatCard 5s ease-in-out infinite alternate;

}

.floating-card img{

    width:100%;
    height:100%;

    object-fit:cover;

}

/* CARD POSITION */

.floating-one{

    top:14%;
    left:30%;

    transform:rotate(-10deg);

}

.floating-two{

    bottom:12%;
    right:28%;

    transform:rotate(10deg);

}

/* FLOAT */

@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    100%{

        transform:translateY(-20px);

    }

}

/* =========================================
   SCROLL DOWN
========================================= */

.hero-scroll{

    position:absolute;

    bottom:35px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

    z-index:20;

}

.hero-scroll span{

    width:1px;
    height:60px;

    background:rgba(255,255,255,0.3);

    position:relative;

    overflow:hidden;

}

.hero-scroll span::before{

    content:"";

    position:absolute;
    top:-100%;

    width:100%;
    height:100%;

    background:#fff;

    animation:scrollAnim 2s linear infinite;

}

@keyframes scrollAnim{

    100%{

        top:100%;

    }

}

.hero-scroll p{

    color:#fff;

    font-family:'Montserrat', sans-serif;
    font-size:11px;

    letter-spacing:3px;
    text-transform:uppercase;

}

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

@media(max-width:1300px){

    .hero-img-left{

        width:260px;
        height:430px;

    }

    .hero-img-right{

        width:280px;
        height:450px;

    }

}

@media(max-width:1100px){

    .hero-center h1{

        font-size:85px;

    }

    .floating-card{

        display:none;

    }

}

@media(max-width:992px){

    .hero-img{

        opacity:0.35;
    }

    .hero-center h1{

        font-size:68px;

    }

}

@media(max-width:768px){

    .hero-img-left{

        width:180px;
        height:280px;

        left:-30px;

    }

    .hero-img-right{

        width:180px;
        height:280px;

        right:-30px;

    }

    .hero-center h1{

        font-size:52px;

    }

    .hero-btns{

        flex-direction:column;

    }

}

@media(max-width:480px){

    .hero-center h1{

        font-size:40px;

    }

    .hero-center p{

        font-size:14px;

    }

    .hero-img{

        opacity:0.2;
    }

    .hero-tag{

        font-size:11px;

        letter-spacing:3px;

    }

}
/* =========================================
   MOBILE RESPONSIVE NEW LAYOUT
========================================= */

@media(max-width:768px){

    .nepali-hero{

        height:auto;

        min-height:100vh;

        padding:140px 20px 120px;

        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    /* ====================================
       CENTER CONTENT
    ==================================== */

    .hero-center{

        order:2;

        width:100%;

        z-index:20;

        text-align:center;

    }

    .hero-center h1{

        font-size:48px;

        line-height:1.05;

        margin-bottom:22px;

    }

    .hero-center p{

        font-size:14px;

        line-height:1.9;

        margin-bottom:35px;

    }

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

    .hero-btns{

        flex-direction:column;

        gap:15px;

    }

    .hero-btn{

        width:100%;

        max-width:280px;

        text-align:center;

    }

    /* ====================================
       MAIN IMAGES NEW DESIGN
    ==================================== */

    .hero-img{

        position:relative;

        top:auto;
        left:auto;
        right:auto;

        transform:none !important;

        border-radius:22px;

        opacity:1;

    }

    /* TOP IMAGE */

    .hero-img-left{

        order:1;

        width:100%;
        height:240px;

        margin-bottom:22px;

    }

    /* BOTTOM IMAGE */

    .hero-img-right{

        order:3;

        width:100%;
        height:210px;

        margin-top:40px;

    }

    /* ====================================
       IMAGE STYLE
    ==================================== */

    .hero-img img{

        object-fit:cover;

    }

    /* ====================================
       FLOATING CARDS
    ==================================== */

    .floating-card{

        display:block;

        width:110px;
        height:140px;

        border-radius:16px;

        z-index:30;

    }

    .floating-one{

        top:110px;
        right:10px;

        left:auto;

        transform:rotate(8deg);

    }

    .floating-two{

        bottom:140px;
        left:10px;

        right:auto;

        transform:rotate(-8deg);

    }

    /* ====================================
       SCROLL DOWN
    ==================================== */

    .hero-scroll{

        bottom:18px;

    }

    .hero-scroll span{

        height:40px;

    }

    .hero-scroll p{

        font-size:10px;

        letter-spacing:2px;

    }

}

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

@media(max-width:480px){

    .nepali-hero{

padding: 160px 15px 110px;

}

    .hero-center h1{

        font-size:38px;

    }

    .hero-center p{

        font-size:13px;

    }

    .hero-img-left{

height: 400px;

display: none;
}

    .hero-img-right{

height: 400px;
}

    .floating-card{

        width:85px;
        height:110px;

    }

    .floating-one{

        top:95px;
        right:5px;

    }

    .floating-two{

        bottom:120px;
        left:5px;

    }

}



/* =========================================
   ABOUT SECTION
========================================= */

.royal-about{

position:relative;

width:100%;

padding:140px 7%;

background: #cccccc;

overflow:hidden;

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;
}

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

.about-pattern{

position:absolute;

inset:0;

background-image:url("../img/about-bg1.jpg");

background-size:280px;

opacity: 0.09;

pointer-events:none;
}

/* =========================================
   LEFT SIDE
========================================= */

.about-left{

    position:relative;

    height:760px;

}

/* =========================================
   IMAGES
========================================= */

.about-img{

overflow:hidden;

position:absolute;

border-radius:28px;

border: 1px solid rgb(0 0 0);

box-shadow: 0 25px 60px rgb(0 0 0 / 89%);

transition:0.7s ease;
}

/* LARGE IMAGE */

.large-img{

    width:78%;
    height:640px;

    top:0;
    left:0;

}

/* SMALL IMAGE */

.small-img{

    width:280px;
    height:340px;

    bottom:0;
    right:0;

}

/* IMAGE */

.about-img img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s ease;

}

/* HOVER */

.about-img:hover{

    transform:translateY(-12px);

}

.about-img:hover img{

    transform:scale(1.08);

}

/* =========================================
   EXPERIENCE BOX
========================================= */

.experience-box{

    position:absolute;

    top:50%;
    right:30px;

    transform:translateY(-50%);

    width:180px;
    height:180px;

    border-radius:50%;

    background:#0d0d0d;

    border:1px solid rgba(255,255,255,0.1);

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

    text-align:center;

    z-index:10;

    animation:rotateBox 18s linear infinite;

}

.experience-box h2{

    color:#fff;

    font-family:'Cormorant Garamond', serif;
    font-size:54px;

}

.experience-box p{

    color:rgba(255,255,255,0.7);

    font-family:'Montserrat', sans-serif;
    font-size:12px;

    line-height:1.8;

    letter-spacing:1px;

}

@keyframes rotateBox{

    from{

        transform:translateY(-50%) rotate(0deg);

    }

    to{

        transform:translateY(-50%) rotate(360deg);

    }

}

/* =========================================
   FLOATING SPICE IMAGE
========================================= */

.floating-spice{

position:absolute;

top:90px;

right:80px;

width: 140px;

opacity: 0.65;

animation:floatSpice 5s ease-in-out infinite alternate;
}

.floating-spice img{

    width:100%;

}

@keyframes floatSpice{

    100%{

        transform:translateY(-20px) rotate(10deg);

    }

}

/* =========================================
   RIGHT SIDE
========================================= */

.about-right{

    position:relative;

    z-index:20;

}

/* TAG */

.section-tag{

color: rgb(0 0 0);

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

font-size: 15px;

letter-spacing:5px;

text-transform:uppercase;

display:inline-block;

margin-bottom:25px;

font-weight: 800;
}

/* HEADING */

.about-right h2{

color: #000000;

font-family: 'Cormorant Garamond', serif;

font-size: 70px;

font-weight: 700;

margin-bottom:30px;
}

/* TEXT */

.about-text{

color: rgb(0 0 0);

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

font-size:16px;

line-height:2;

margin-bottom:45px;

font-weight: 600;
}

/* =========================================
   FEATURES
========================================= */

.about-features{

    display:flex;
    flex-direction:column;

    gap:28px;

    margin-bottom:45px;

}

/* FEATURE BOX */

.feature-box{

    display:flex;
    gap:22px;

    padding-bottom:24px;

    border-bottom:1px solid rgba(255,255,255,0.08);

    transition:0.5s ease;

}

.feature-box:hover{

    transform:translateX(10px);

}

/* NUMBER */

.feature-number{

    color:rgba(255,255,255,0.2);

    font-family:'Cormorant Garamond', serif;
    font-size:44px;
    font-weight:700;

}

/* CONTENT */

.feature-content h3{

    color:#fff;

    font-family:'Cormorant Garamond', serif;
    font-size:30px;

    margin-bottom:8px;

}

.feature-content p{

    color:rgba(255,255,255,0.68);

    font-family:'Montserrat', sans-serif;
    font-size:14px;

    line-height:1.8;

}

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

.about-btn{

    position:relative;

    display:inline-block;

    text-decoration:none;

    color:#fff;

    padding:18px 38px;

    border:1px solid rgba(255,255,255,0.15);

    font-family:'Montserrat', sans-serif;
    font-size:13px;

    letter-spacing:2px;
    text-transform:uppercase;

    overflow:hidden;

    transition:0.5s ease;

}

.about-btn::before{

    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:#fff;

    transition:0.5s ease;

    z-index:-1;

}

.about-btn:hover::before{

    left:0;

}

.about-btn:hover{

    color:#000;

    transform:translateY(-5px);

}

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

@media(max-width:1200px){

    .royal-about{

        gap:60px;

    }

    .about-right h2{

        font-size:66px;

    }

}

@media(max-width:992px){

    .royal-about{

        grid-template-columns:1fr;

    }

    .about-left{

        height:650px;

    }

}

@media(max-width:768px){

    .royal-about{

        padding:100px 20px;

    }

    .about-left{

        height:auto;

        display:flex;
        flex-direction:column;

        gap:20px;

    }

    .about-img{

        position:relative;

        width:100% !important;
        height:320px !important;

        top:auto;
        bottom:auto;
        left:auto;
        right:auto;

    }

    .experience-box{

        width:150px;
        height:150px;

        right:20px;

    }

    .about-right h2{

        font-size:52px;

    }

}

@media(max-width:480px){

    .about-right h2{

        font-size:40px;

    }

    .feature-content h3{

        font-size:24px;

    }

    .experience-box{

        width:120px;
        height:120px;

    }

    .experience-box h2{

        font-size:38px;

    }

}


/* =========================================
   RESERVATION SECTION
========================================= */

.cinematic-reservation{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

    padding:140px 7%;

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

    background:#000;

}

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

.reservation-bg{

position:absolute;

inset:0;

background:url("../img/reservation-bg.jpg")
    center center/cover no-repeat;

transform:scale(1.1);

animation: bgMove 14s ease-in-out infinite alternate;
}

/* OVERLAY */

.reservation-overlay{

position:absolute;

inset:0;

background: rgb(0 0 0 / 80%);
}

/* BACKGROUND ANIMATION */

@keyframes bgMove{

    0%{

        transform:scale(1.1) translateY(0px);

    }

    100%{

        transform:scale(1.18) translateY(-20px);

    }

}

/* =========================================
   MANDALA DESIGN
========================================= */

.mandala{

    position:absolute;

    width:320px;
    height:320px;

    border:1px solid rgba(255,255,255,0.04);

    border-radius:50%;

    z-index:1;

    animation:rotateMandala 20s linear infinite;

}

.mandala::before{

    content:"";

    position:absolute;
    inset:25px;

    border:1px solid rgba(255,255,255,0.04);

    border-radius:50%;

}

.mandala-left{

    top:-120px;
    left:-120px;

}

.mandala-right{

    bottom:-120px;
    right:-120px;

}

@keyframes rotateMandala{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* =========================================
   WRAPPER
========================================= */

.reservation-wrapper{

position:relative;

z-index:10;

width:100%;

display:grid;

grid-template-columns: 1fr 700px;

gap:80px;

align-items:center;
}

/* =========================================
   LEFT CONTENT
========================================= */

.reservation-info{

    position:relative;

}

/* SUBTITLE */

.reservation-subtitle{

    color:rgba(255,255,255,0.7);

    font-family:'Montserrat', sans-serif;
    font-size:13px;

    letter-spacing:5px;
    text-transform:uppercase;

    display:inline-block;

    margin-bottom:25px;

}

/* HEADING */

.reservation-info h2{

color:#fff;

font-family: 'Cormorant Garamond', serif;

font-size:90px;

font-weight: 700;

line-height:1.05;

margin-bottom:30px;
}

/* TEXT */

.reservation-info p{

    color:rgba(255,255,255,0.72);

    font-family:'Montserrat', sans-serif;
    font-size:16px;

    line-height:2;

    max-width:650px;

}

/* =========================================
   INFO CARDS
========================================= */

.reservation-cards{

    margin-top:45px;

    display:flex;
    flex-direction:column;

    gap:22px;

}

/* CARD */

.info-card{

position:relative;

padding:28px;

border:1px solid rgba(255,255,255,0.08);

background: rgb(0 0 0 / 46%);

overflow:hidden;

transition:0.5s ease;

backdrop-filter:blur(4px);
}

/* LIGHT LINE */

.info-card::before{

    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:1px;

    background:rgba(255,255,255,0.5);

    transition:0.6s ease;

}

.info-card:hover::before{

    left:100%;

}

/* HOVER */

.info-card:hover{

    transform:translateX(12px);

    border-color:rgba(255,255,255,0.18);

}

/* TITLE */

.info-card h3{

    color:#fff;

    font-family:'Cormorant Garamond', serif;
    font-size:34px;

    margin-bottom:10px;

}

/* =========================================
   BOOKING BOX
========================================= */

.booking-box{

position:relative;

padding:28px;

background: rgb(0 0 0 / 44%);

border:1px solid rgba(255,255,255,0.1);

backdrop-filter:blur(10px);

overflow:hidden;

box-shadow:0 30px 80px rgba(0,0,0,0.65);
}

/* TOP */

.booking-header{

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

    gap:15px;

    margin-bottom:20px;

}

.booking-header span{

width:60px;

height:1px;

background: rgb(255 255 255 / 47%);
}

.booking-header p{

color:#fff;

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

font-size:12px;

letter-spacing:4px;

text-transform:uppercase;

font-weight: 700;
}

/* IFRAME */

#restaurantBooking{

    border:none;

    background:#fff;

}

/* =========================================
   SCROLL INDICATOR
========================================= */

.reservation-scroll{

    position:absolute;

    bottom:30px;
    left:50%;

    transform:translateX(-50%);

    z-index:20;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

}

.reservation-scroll span{

    width:1px;
    height:55px;

    background:rgba(255,255,255,0.3);

    position:relative;

    overflow:hidden;

}

.reservation-scroll span::before{

    content:"";

    position:absolute;
    top:-100%;

    width:100%;
    height:100%;

    background:#fff;

    animation:scrollLine 2s linear infinite;

}

@keyframes scrollLine{

    100%{

        top:100%;

    }

}

.reservation-scroll p{

    color:#fff;

    font-family:'Montserrat', sans-serif;
    font-size:11px;

    letter-spacing:3px;
    text-transform:uppercase;

}

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

@media(max-width:1200px){

    .reservation-info h2{

        font-size:72px;

    }

    .reservation-wrapper{

        grid-template-columns:1fr 480px;

    }

}

@media(max-width:992px){

    .reservation-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .cinematic-reservation{

        padding:100px 20px;

    }

    .reservation-info h2{

        font-size:54px;

    }

    .booking-box{

        padding:15px;

    }

}

@media(max-width:480px){

    .reservation-info h2{

        font-size:42px;

    }

    .reservation-subtitle{

        font-size:11px;

        letter-spacing:3px;

    }

    .info-card h3{

        font-size:28px;

    }

}

/* =========================================
   MENU SECTION
========================================= */

.royal-menu{

    position:relative;

    width:100%;

    padding:140px 7%;

    background:#050505;

    overflow:hidden;

}

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

.menu-pattern{

    position:absolute;
    inset:0;

    background:url("images/nepali-pattern.png");

    background-size:260px;

    opacity:0.03;

    pointer-events:none;

}

/* =========================================
   FLOATING TEXT
========================================= */

.menu-floating-text{

    position:absolute;

    top:100px;
    right:-160px;

    transform:rotate(90deg);

    color:rgba(255,255,255,0.05);

    font-family:'Cormorant Garamond', serif;
    font-size:120px;
    font-weight:700;

    letter-spacing:6px;

    pointer-events:none;

    animation:floatText 6s ease-in-out infinite alternate;

}

@keyframes floatText{

    100%{

        transform:rotate(90deg) translateY(-20px);

    }

}

/* =========================================
   TOP CONTENT
========================================= */

.menu-top{

    position:relative;

    z-index:10;

    text-align:center;

    max-width:850px;

    margin:auto auto 90px;

}

/* TAG */

.menu-tag{

color:rgba(255,255,255,0.7);

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

font-size:13px;

letter-spacing:5px;

text-transform:uppercase;

display:inline-block;

margin-bottom:22px;

font-weight: 700;
}

/* HEADING */

.menu-top h2{

color:#fff;

font-family: 'Cormorant Garamond', serif;

font-size:92px;

font-weight: 700;

margin-bottom:25px;
}

/* TEXT */

.menu-top p{

    color:rgba(255,255,255,0.7);

    font-family:'Montserrat', sans-serif;
    font-size:15px;

    line-height:2;

}

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

.menu-grid{

    position:relative;

    z-index:10;

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

    gap:28px;

}

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

.menu-card{

    position:relative;

    background:#0d0d0d;

    border:1px solid rgba(255,255,255,0.08);

    overflow:hidden;

    transition:0.6s ease;

}

/* HOVER */

.menu-card:hover{

    transform:translateY(-15px);

    border-color:rgba(255,255,255,0.18);

}

/* =========================================
   IMAGE
========================================= */

.menu-image{

position:relative;

height: 380px;

overflow:hidden;
}

/* IMG */

.menu-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s ease;

}

/* IMAGE HOVER */

.menu-card:hover img{

    transform:scale(1.1);

}

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

.menu-overlay{

    position:absolute;

    top:20px;
    left:20px;

    background:rgba(0,0,0,0.7);

    padding:10px 18px;

    border:1px solid rgba(255,255,255,0.1);

}

.menu-overlay span{

    color:#fff;

    font-family:'Montserrat', sans-serif;
    font-size:11px;

    letter-spacing:3px;
    text-transform:uppercase;

}

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

.menu-content{

    padding:28px;

}

/* TITLE */

.menu-title{

display:flex;

align-items:center;

justify-content: center;

gap:15px;

margin-bottom:15px;
}

.menu-title h3{

    color:#fff;

    font-family:'Cormorant Garamond', serif;
    font-size:34px;

}

.menu-title span{

    color:#fff;

    font-family:'Montserrat', sans-serif;
    font-size:14px;

    letter-spacing:2px;

}

/* TEXT */

.menu-content p{

color:rgba(255,255,255,0.68);

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

font-size:14px;

line-height:1.9;

text-align: center;
}

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

.menu-btn-wrap{

    text-align:center;

    margin-top:70px;

}

/* BTN */

.menu-btn{

    position:relative;

    display:inline-block;

    text-decoration:none;

    color:#fff;

    padding:18px 38px;

    border:1px solid rgba(255,255,255,0.1);

    font-family:'Montserrat', sans-serif;
    font-size:13px;

    letter-spacing:3px;
    text-transform:uppercase;

    overflow:hidden;

    transition:0.5s ease;

}

/* BTN LIGHT */

.menu-btn::before{

    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:#fff;

    transition:0.5s ease;

    z-index:-1;

}

/* BTN HOVER */

.menu-btn:hover::before{

    left:0;

}

.menu-btn:hover{

    color:#000;

    transform:translateY(-5px);

}

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

@media(max-width:1200px){

    .menu-grid{

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

    }

}

@media(max-width:768px){

    .royal-menu{

        padding:100px 20px;

    }

    .menu-top h2{

        font-size:60px;

    }

    .menu-grid{

        grid-template-columns:1fr;

    }

    .menu-floating-text{

        display:none;

    }

}

@media(max-width:480px){

    .menu-top h2{

        font-size:42px;

    }

    .menu-tag{

        font-size:11px;

        letter-spacing:3px;

    }

    .menu-image{

        height:280px;

    }

}
/* =========================================
   BUTTON WRAP
========================================= */

.menu-btn-wrap{

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

    gap:22px;

    margin-top:70px;

    flex-wrap:wrap;

}

/* =========================================
   ORDER ONLINE BUTTON
========================================= */

.order-online-btn{

background:#fff;

color:#000;

border-color:#fff;

font-weight: 500;
}

/* HOVER */

.order-online-btn:hover{

    background:transparent;

    color:#fff;

}

/* LIGHT EFFECT */

.order-online-btn::before{

    background:#050505;

}

/* MOBILE */

@media(max-width:480px){

    .menu-btn-wrap{

        flex-direction:column;

    }

    .menu-btn{

        width:100%;

        max-width:280px;

        text-align:center;

    }

}

/* =========================================
   FULL ROYAL BORDER
========================================= */

.royal-menu{

    position:relative;

    width:100%;

    padding:140px 7%;

    background:#050505;

    overflow:hidden;

}

/* =========================================
   OUTER FRAME
========================================= */

.royal-menu::before{

content:"";

position:absolute;

top:40px;

left:40px;

right:40px;

bottom:40px;

border: 1px solid #fff;

pointer-events:none;

z-index:1;
}






/* =========================================
   CORNERS
========================================= */

.corner{

    position:absolute;

    width:95px;
    height:95px;

    z-index:3;

}

/* =========================================
   TOP LEFT
========================================= */

.top-left{

top:0;

left:0;

border-top: 1px solid #fff;

border-left: 1px solid #fff;
}

.top-left::before,
.top-left::after{

content:"";

position:absolute;

border: 1px solid #fff;
}

.top-left::before{

    width:38px;
    height:38px;

    top:18px;
    left:18px;

}

.top-left::after{

    width:18px;
    height:18px;

    top:38px;
    left:38px;

}

/* =========================================
   TOP RIGHT
========================================= */

.top-right{

top:0;

right:0;

border-top: 1px solid #fff;

border-right: 1px solid #fff;
}

.top-right::before,
.top-right::after{

content:"";

position:absolute;

border: 1px solid #fff;
}

.top-right::before{

    width:38px;
    height:38px;

    top:18px;
    right:18px;

}

.top-right::after{

    width:18px;
    height:18px;

    top:38px;
    right:38px;

}

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

.bottom-left{

bottom:0;

left:0;

border-bottom: 1px solid #fff;

border-left: 1px solid #fff;
}

.bottom-left::before,
.bottom-left::after{

content:"";

position:absolute;

border: 1px solid #fff;
}

.bottom-left::before{

    width:38px;
    height:38px;

    bottom:18px;
    left:18px;

}

.bottom-left::after{

    width:18px;
    height:18px;

    bottom:38px;
    left:38px;

}

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

.bottom-right{

bottom:0;

right:0;

border-bottom: 1px solid #fff;

border-right: 1px solid #fff;
}

.bottom-right::before,
.bottom-right::after{

content:"";

position:absolute;

border: 1px solid #fff;
}

.bottom-right::before{

    width:38px;
    height:38px;

    bottom:18px;
    right:18px;

}

.bottom-right::after{

    width:18px;
    height:18px;

    bottom:38px;
    right:38px;

}

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

@media(max-width:768px){

    .royal-menu::before{

        top:20px;
        left:20px;
        right:20px;
        bottom:20px;

    }

 

}
/* =========================================
   GOOGLE FONTS
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* =========================================
   TESTIMONIAL SECTION
========================================= */

.cinematic-testimonial{

    position:relative;

    width:100%;

    padding:140px 7%;

    overflow:hidden;

    background:#050505;

}

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

.testimonial-bg{

    position:absolute;
    inset:0;

    background:url("../img/testimonial-bg.png")
    center center/cover no-repeat;

    transform:scale(1.08);

    animation:bgZoom 16s ease-in-out infinite alternate;

}

/* OVERLAY */

.testimonial-overlay{

position:absolute;

inset:0;

background: rgb(0 0 0 / 85%);
}

/* BG ANIMATION */

@keyframes bgZoom{

    100%{

        transform:scale(1.15);

    }

}

/* =========================================
   MANDALA DESIGN
========================================= */

.mandala-design{

    position:absolute;

    width:320px;
    height:320px;

    border:1px solid rgba(255,255,255,0.04);

    border-radius:50%;

    z-index:1;

    animation:rotateMandala 25s linear infinite;

}

.mandala-design::before{

    content:"";

    position:absolute;
    inset:25px;

    border:1px solid rgba(255,255,255,0.04);

    border-radius:50%;

}

.mandala-left{

    top:-120px;
    left:-120px;

}

.mandala-right{

    bottom:-120px;
    right:-120px;

}

@keyframes rotateMandala{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* =========================================
   HEADING
========================================= */

.testimonial-heading{

    position:relative;

    z-index:10;

    text-align:center;

    margin-bottom:90px;

}

/* SUBTITLE */

.testimonial-subtitle{

    color:rgba(255,255,255,0.7);

    font-family:'Montserrat', sans-serif;
    font-size:13px;

    letter-spacing:5px;
    text-transform:uppercase;

    display:inline-block;

    margin-bottom:20px;

}

/* HEADING */

.testimonial-heading h2{

color:#fff;

font-family: 'Cormorant Garamond', serif;

font-size:92px;

font-weight: 700;

line-height:1.05;
}

/* =========================================
   WRAPPER
========================================= */

.testimonial-wrapper{

    position:relative;

    z-index:10;

    display:grid;
    grid-template-columns:480px 1fr;

    gap:70px;

    align-items:center;

}

/* =========================================
   LEFT IMAGE
========================================= */

.testimonial-image{

    position:relative;

    height:620px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,0.08);

}

.testimonial-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s ease;

}

.testimonial-image:hover img{

    transform:scale(1.08);

}

/* FLOATING FOOD */

.floating-food{

    position:absolute;

    width:170px;
    height:170px;

    bottom:-40px;
    right:-40px;

    overflow:hidden;

    border-radius:50%;

    border:4px solid #050505;

    animation:floatFood 5s ease-in-out infinite alternate;

}

.floating-food img{

    width:100%;
    height:100%;

    object-fit:cover;

}

@keyframes floatFood{

    100%{

        transform:translateY(-15px);

    }

}

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

.testimonial-content{

    position:relative;

}

/* QUOTE */

.quote-mark{

    color:rgba(255,255,255,0.08);

    font-size:220px;

    font-family:'Cormorant Garamond', serif;

    line-height:1;

    position:absolute;

    top:-100px;
    left:-30px;

}

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

.testimonial-slider{

    position:relative;

    min-height:320px;

}

/* ITEM */

.testimonial-item{

    position:absolute;

    inset:0;

    opacity:0;
    visibility:hidden;

    transform:translateY(40px);

    transition:0.8s ease;

}

/* ACTIVE */

.testimonial-item.active{

    opacity:1;
    visibility:visible;

    transform:translateY(0px);

}

/* TEXT */

.testimonial-item p{

color:#fff;

font-family:'Cormorant Garamond', serif;

font-size: 37px;

line-height:1.5;

margin-bottom:50px;
}

/* CLIENT */

.client-info h3{

    color:#fff;

    font-family:'Cormorant Garamond', serif;
    font-size:36px;

    margin-bottom:8px;

}

.client-info span{

    color:rgba(255,255,255,0.65);

    font-family:'Montserrat', sans-serif;
    font-size:12px;

    letter-spacing:4px;
    text-transform:uppercase;

}

/* =========================================
   NAVIGATION
========================================= */

.testimonial-controls{

display:flex;

gap:18px;

margin-top: 175px;
}

/* BUTTON */

.testimonial-btn{

    width:72px;
    height:72px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,0.08);

    background:rgba(255,255,255,0.03);

    color:#fff;

    font-size:24px;

    cursor:pointer;

    transition:0.5s ease;

}

/* HOVER */

.testimonial-btn:hover{

    transform:translateY(-8px);

    background:#fff;

    color:#000;

}

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

@media(max-width:1200px){

    .testimonial-wrapper{

        grid-template-columns:400px 1fr;

    }

    .testimonial-item p{

        font-size:34px;

    }

}

@media(max-width:992px){

    .testimonial-wrapper{

        grid-template-columns:1fr;

    }

    .testimonial-image{

        height:520px;

    }

}

@media(max-width:768px){

    .cinematic-testimonial{

        padding:100px 20px;

    }

    .testimonial-heading h2{

        font-size:60px;

    }

    .testimonial-item p{

        font-size:26px;

    }

    .quote-mark{

        font-size:140px;

    }

}

@media(max-width:480px){

    .testimonial-heading h2{

        font-size:42px;

    }

    .testimonial-subtitle{

        font-size:11px;

        letter-spacing:3px;

    }

    .testimonial-item p{

        font-size:22px;

    }

    .testimonial-btn{

        width:58px;
        height:58px;

    }

    .floating-food{

        width:120px;
        height:120px;

        right:-20px;

    }

}
/* =========================================
   GOOGLE FONT
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* =========================================
   FOOTER
========================================= */

.royal-footer{

position:relative;

width:100%;

padding:120px 7% 40px;

background: #000000;

overflow:hidden;
}

/* =========================================
   PATTERN
========================================= */

.footer-pattern{

    position:absolute;
    inset:0;

  

    opacity:0.03;

    pointer-events:none;

}

/* =========================================
   FLOATING TEXT
========================================= */

.footer-floating-text{

    position:absolute;

    top:120px;
    right:-180px;

    transform:rotate(90deg);

    color:rgba(255,255,255,0.04);

    font-family:'Cormorant Garamond', serif;
    font-size:120px;
    font-weight:700;

    letter-spacing:8px;

    pointer-events:none;

    animation:footerFloat 6s ease-in-out infinite alternate;

}

@keyframes footerFloat{

    100%{

        transform:rotate(90deg) translateY(-20px);

    }

}

/* =========================================
   TOP AREA
========================================= */

.footer-top{

    position:relative;

    z-index:10;

    display:grid;
    grid-template-columns:1.2fr 1fr 1fr 1fr;

    gap:60px;

    padding-bottom:70px;

}

/* =========================================
   BRAND
========================================= */

.footer-brand img{

    width:170px;

    margin-bottom:30px;

    transition:0.5s ease;

}

.footer-brand img:hover{

    transform:scale(1.05);

}

/* TEXT */

.footer-brand p{

    color:rgba(255,255,255,0.68);

    font-family:'Montserrat', sans-serif;
    font-size:14px;

    line-height:2;

    max-width:320px;

}

/* =========================================
   COLUMN
========================================= */

.footer-column h3{

    color:#fff;

    font-family:'Cormorant Garamond', serif;
    font-size:34px;

    margin-bottom:25px;

}

/* TEXT */

.footer-column p{

    color:rgba(255,255,255,0.68);

    font-family:'Montserrat', sans-serif;
    font-size:14px;

    line-height:2;

    margin-bottom:18px;

}

/* LINKS */

.footer-column a{

    display:block;

    width:fit-content;

    color:rgba(255,255,255,0.7);

    text-decoration:none;

    font-family:'Montserrat', sans-serif;
    font-size:14px;

    margin-bottom:18px;

    transition:0.4s ease;

    position:relative;

}

/* UNDERLINE */

.footer-column a::after{

    content:"";

    position:absolute;
    left:0;
    bottom:-5px;

    width:0%;
    height:1px;

    background:#fff;

    transition:0.4s ease;

}

/* HOVER */

.footer-column a:hover{

    color:#fff;

    transform:translateX(8px);

}

.footer-column a:hover::after{

    width:100%;

}

/* =========================================
   LINE
========================================= */

.footer-line{

    width:100%;
    height:1px;

    background:rgba(255,255,255,0.08);

    margin-bottom:30px;

}

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

.footer-bottom{

display:flex;

align-items:center;

justify-content: center;

gap:20px;
}

/* COPYRIGHT */

.footer-bottom p{

color: rgb(255 255 255);

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

font-size:13px;

letter-spacing:1px;
}

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

.footer-social{

    display:flex;
    align-items:center;

    gap:28px;

}

/* LINK */

.footer-social a{

    position:relative;

    color:rgba(255,255,255,0.7);

    text-decoration:none;

    font-family:'Montserrat', sans-serif;
    font-size:12px;

    letter-spacing:3px;
    text-transform:uppercase;

    transition:0.4s ease;

}

/* HOVER */

.footer-social a:hover{

    color:#fff;

    transform:translateY(-4px);

}

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

@media(max-width:1100px){

    .footer-top{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .royal-footer{

        padding:90px 20px 30px;

    }

    .footer-top{

        grid-template-columns:1fr;

        gap:45px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-floating-text{

        display:none;

    }

}

@media(max-width:480px){

    .footer-brand img{

        width:140px;

    }

    .footer-column h3{

        font-size:28px;

    }

    .footer-social{

        gap:18px;

        flex-wrap:wrap;
        justify-content:center;

    }

}

a.footer_main {
    color: white;
    text-decoration: none;
    font-family: 'Oswald';
}
p.footer-copyright {
    color: white;
    font-family: 'Oswald';
}
.order-btn{

position:fixed;

bottom:30px;

left:30px;

display:flex;

align-items:center;

gap:10px;

background: #fc6143;

color:white;

padding:12px 22px;

text-decoration:none;

font-weight:bold;

border-radius:6px;

box-shadow:0 6px 15px rgba(0,0,0,0.3);

z-index:999;

animation:pulse 2s infinite;

transition:0.3s;

color: white;

text-transform: uppercase;

font-family: 'Oswald';
}

.order-btn img{

width: 30px;

height: 30px;

object-fit:contain;
}

.order-btn:hover{

background:#fc6143;

}

/* Pulse Animation */

@keyframes pulse{

0%{
box-shadow:0 0 0 0 rgba(252,97,67,0.7);
}

70%{
box-shadow:0 0 0 20px rgba(197,168,106,0);
}

100%{
box-shadow:0 0 0 0 rgba(197,168,106,0);
}

}

/* Mobile */

@media(max-width:600px){

.order-btn{

bottom:20px;
left:20px;
padding:10px 18px;
font-size:14px;

}

.order-btn img{*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
}
}
/* =========================================
   GOOGLE FONT
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* =========================================
   BAR SECTION
========================================= */

.royal-bar{

    position:relative;

    width:100%;

    padding:140px 7%;

    overflow:hidden;

    background:#050505;

}

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

.bar-bg{

    position:absolute;
    inset:0;

    background:url("images/bar-bg.jpg")
    center center/cover no-repeat;

    opacity:0.12;

    transform:scale(1.08);

    animation:barZoom 16s ease-in-out infinite alternate;

}

@keyframes barZoom{

    100%{

        transform:scale(1.15);

    }

}

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

.bar-overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.82);

}

/* =========================================
   FLOATING TEXT
========================================= */

.bar-floating-text{

    position:absolute;

    top:160px;
    right:-170px;

    transform:rotate(90deg);

    color:rgba(255,255,255,0.05);

    font-family:'Cormorant Garamond', serif;
    font-size:130px;
    font-weight:700;

    letter-spacing:8px;

    animation:floatBar 6s ease-in-out infinite alternate;

}

@keyframes floatBar{

    100%{

        transform:rotate(90deg) translateY(-20px);

    }

}

/* =========================================
   TOP
========================================= */

.bar-top{

    position:relative;

    z-index:10;

    text-align:center;

    max-width:850px;

    margin:auto auto 90px;

}

/* TAG */

.bar-tag{

    color:rgba(255,255,255,0.7);

    font-family:'Montserrat', sans-serif;
    font-size:13px;

    letter-spacing:5px;
    text-transform:uppercase;

    display:inline-block;

    margin-bottom:22px;

}

/* HEADING */

.bar-top h2{

    color:#fff;

    font-family:'Great Vibes', cursive;
    font-size:92px;
    font-weight:400;

    margin-bottom:25px;

}

/* TEXT */

.bar-top p{

    color:rgba(255,255,255,0.7);

    font-family:'Montserrat', sans-serif;
    font-size:15px;

    line-height:2;

}

/* =========================================
   WRAPPER
========================================= */

.bar-wrapper{

    position:relative;

    z-index:10;

    display:grid;
    grid-template-columns:1fr 520px;

    gap:70px;

    align-items:center;

}

/* =========================================
   DRINKS
========================================= */

.bar-drinks{

    display:flex;
    flex-direction:column;

    gap:28px;

}

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

.drink-card{

    display:flex;
    align-items:center;

    gap:24px;

    padding:24px;

    border:1px solid rgba(255,255,255,0.08);

    background:rgba(255,255,255,0.03);

    backdrop-filter:blur(5px);

    transition:0.5s ease;

}

/* HOVER */

.drink-card:hover{

    transform:translateX(14px);

    border-color:rgba(255,255,255,0.18);

}

/* IMAGE */

.drink-image{

    width:130px;
    height:130px;

    overflow:hidden;

    flex-shrink:0;

}

/* IMG */

.drink-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s ease;

}

/* HOVER IMG */

.drink-card:hover img{

    transform:scale(1.1);

}

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

.drink-title{

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

    gap:20px;

    margin-bottom:12px;

}

/* TITLE */

.drink-title h3{

    color:#fff;

    font-family:'Cormorant Garamond', serif;
    font-size:38px;

}

/* PRICE */

.drink-title span{

    color:#fff;

    font-family:'Montserrat', sans-serif;
    font-size:13px;

    letter-spacing:3px;

}

/* TEXT */

.drink-content p{

    color:rgba(255,255,255,0.68);

    font-family:'Montserrat', sans-serif;
    font-size:14px;

    line-height:1.9;

}

/* =========================================
   FEATURE
========================================= */

.bar-feature{

    position:relative;

}

/* MAIN IMAGE */

.feature-image{

    height:700px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,0.08);

}

.feature-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.9s ease;

}

.feature-image:hover img{

    transform:scale(1.08);

}

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

.floating-bar-card{

    position:absolute;

    bottom:-40px;
    left:-40px;

    padding:35px;

    background:#0c0c0c;

    border:1px solid rgba(255,255,255,0.08);

    animation:floatCard 5s ease-in-out infinite alternate;

}

/* ANIMATION */

@keyframes floatCard{

    100%{

        transform:translateY(-14px);

    }

}

/* TEXT */

.floating-bar-card span{

    color:rgba(255,255,255,0.6);

    font-family:'Montserrat', sans-serif;
    font-size:11px;

    letter-spacing:4px;
    text-transform:uppercase;

}

.floating-bar-card h3{

    color:#fff;

    font-family:'Cormorant Garamond', serif;
    font-size:42px;

    line-height:1.1;

    margin-top:16px;

}

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

@media(max-width:1100px){

    .bar-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .royal-bar{

        padding:100px 20px;

    }

    .bar-top h2{

        font-size:60px;

    }

    .drink-card{

        flex-direction:column;

        align-items:flex-start;

    }

    .feature-image{

        height:500px;

    }

    .bar-floating-text{

        display:none;

    }

}

@media(max-width:480px){

    .bar-top h2{

        font-size:42px;

    }

    .bar-tag{

        font-size:11px;

        letter-spacing:3px;

    }

    .drink-title h3{

        font-size:30px;

    }

    .floating-bar-card{

        left:10px;
        bottom:10px;

        padding:24px;

    }

    .floating-bar-card h3{

        font-size:30px;

    }

}



/* =========================================
   CATERING SERVICES SECTION
========================================= */

.services-section{

    position:relative;

    width:100%;

    padding:140px 7%;

    background:#050505;

    overflow:hidden;

}

/* HEADER */

.section-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 90px;

}

.section-header .section-tag{

    color:rgba(255,255,255,0.7);

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

    font-size:13px;

    letter-spacing:5px;

    text-transform:uppercase;

    display:inline-block;

    margin-bottom:22px;

    font-weight:700;

}

.section-header h2{

    color:#fff;

    font-family:'Cinzel', serif;

    font-size:60px;

    font-weight:600;

    margin-bottom:25px;

    line-height:1.3;

    text-transform:uppercase;

}

.section-header p{

    color:rgba(255,255,255,0.7);

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

    font-size:15px;

    line-height:2;

    max-width:700px;

    margin:auto;

}

/* GRID */

.service-grid{

    display:grid;

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

    gap:30px;

}

/* CARD */

.service-card{

    background:#0d0d0d;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:15px;

    overflow:hidden;

    transition:0.5s ease;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,255,255,0.18);

    box-shadow:0 20px 40px rgba(0,0,0,0.4);

}

/* IMAGE */

.service-card img{

    width:100%;

    height:350px;

    object-fit:cover;

    transition:0.8s ease;

}

.service-card:hover img{

    transform:scale(1.08);

}

/* TITLE */

.service-card h3{

    color:#fff;

    font-family:'Cinzel', serif;

    font-size:26px;

    font-weight:600;

    text-align:center;

    margin:25px 20px 15px;

    text-transform:uppercase;

}

/* TEXT */

.service-card p{

    color:rgba(255,255,255,0.68);

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

    font-size:14px;

    line-height:1.9;

    text-align:center;

    padding:0 25px 30px;

}

/* TABLET */

@media(max-width:1200px){

    .service-grid{

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

    }

}

/* MOBILE */

@media(max-width:768px){

    .services-section{

        padding:100px 20px;

    }

    .section-header{

        margin-bottom:60px;

    }

    .section-header h2{

        font-size:42px;

    }

    .service-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .service-card img{

        height:280px;

    }

}

/* SMALL MOBILE */

@media(max-width:480px){

    .section-header .section-tag{

        font-size:11px;

        letter-spacing:3px;

    }

    .section-header h2{

        font-size:34px;

    }

    .section-header p{

        font-size:14px;

    }

    .service-card h3{

        font-size:22px;

    }

    .service-card p{

        font-size:13px;

    }

}