:root{
    --primary-color: #FFFFFF;
    --secondary-color: #F2F2F2;
    --third-color: #686868;
    --fourth-color: #333333;
    --fifth-color: #0A0A0A;
    --sixth-color: #262626;
    --seventh-color: #797979;
    --eighth-color: #555555;
    --font-1: 'Cinzel', serif;
    --font-2: 'Montserrat', serif;
}
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-color);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border: 1px solid var(--third-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    background-color: var(--primary-color);
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}
body{
    position: relative;
}
.navbar{
    position: relative;
    background: transparent;
    transition: all .4s ease-in-out;
    will-change: background, backdrop-filter;
    width: 100%;
    margin: 0 auto;
    border-radius: 0 0 50px 50px;
}

.navbar.scrolled{
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px) saturate(60%);
    -webkit-backdrop-filter: blur(10px) saturate(60%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

#brandlogoo{
    width: 100px;
    height: auto;
    margin: auto;
    transition: all .1s ease-out;
}
.containerr{
    padding: 20px 40px;
    display: flex;
    align-items: start;
    justify-content: center;
    column-gap: 100px;
    margin: 0 auto;
    border-radius: 0 0 50px 50px;
}
#atag{
    color: var(--primary-color);
    text-decoration: none;
    font-family: var(--font-2);
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 3px;
    font-size: .7rem;
    margin-top: 20px;
    white-space: nowrap;
    transition: all .4s ease-in-out;
    will-change: background;
}
#atag:hover{
    background: var(--primary-color);
    color: var(--fifth-color);
    font-weight: 500;
    padding: 0 10px;
    border-radius: 2px;
}
#home-1{
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    height: 110vh;
    margin-top: -226px;
    padding-top: 226px;
    border-bottom: 44px solid var(--secondary-color);
}
#home-1::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/bg-1.png") center top / cover no-repeat;
    transform: translateY(0);
    will-change: transform;
    z-index: -1;
}
#home-1::before{
    transform: translateY(var(--parallax-shift, 0px));
}
#content{
    text-align: center;
    color: var(--primary-color);
}
#content h1{
    font-family: var(--font-1);
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: 11px;
    text-transform: uppercase;
    line-height: 64px;
}
#content h1 span{
    font-size: 2.5rem;
}
#content p{
    font-family: var(--font-2);
    font-size: 1rem;
    letter-spacing: 7px;
    font-weight: 300;
    text-transform: uppercase;
}
#home-2{
    padding: 55px 60px;
}
#h2-p1,#h2-p2{
    text-align: center;
    font-family: var(--font-1);
    font-family: 1.875rem;
    color: var(--fourth-color);
}
#h2-p1{
    font-weight: 700;
    letter-spacing: 11px;
}
#h2-p2{
    letter-spacing: 4px;
    font-weight: 300;
}
#images-1,#images-2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}
#images-1 img,#images-2 img{
    margin: 0;
    padding: 0;
    width: 30%;
    height: 100%;
}
#images-1{
    border-right: 15px solid var(--primary-color);
}
#images-2{
    border-left: 15px solid var(--primary-color);
}
#img-content{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    row-gap: 20px;
    background: var(--secondary-color);
    padding: 10px;
}
#i-content-in{
    padding: 15px 30px;
    background: var(--primary-color);
    height: 75%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}
#i-content-in h1{
    font-family: var(--font-1);
    font-size: 2.375rem;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--fourth-color);
}
#i-content-in p{
    font-family: var(--font-2);
    font-size: .788rem;
    font-weight: 400;
    line-height: 2.05;
    color: var(--third-color);
}
#home-3{
    padding: 55px 60px;
}
#home-3 h1{
    text-align: center;
    font-family: var(--font-1);
    font-weight: 400;
    color: var(--fourth-color);
}
#ag-img img{
    margin: auto;
    width: 100%;
    height: auto;
}
#pl-img img{
    height: 500px;
    width: 100%;
    object-fit: cover;
    transition: all .4s ease-in-out;
}
#pl-img a{
    text-decoration: none;
}
#ag-img p,#pl-img p{
    text-align: center;
    font-family: var(--font-2);
    letter-spacing: 5px;
    font-size: 1rem;
    color: var(--fifth-color);
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: 400;
}
#home-4{
    padding: 55px 60px;
    background: var(--secondary-color);
}
#fa-img{
    display: flex;
    align-items: center;
    justify-content: center;
}
#fa-img img{
    width: 100%;
    height: auto;
    object-fit: contain;
}
#fa-content{
    background: var(--primary-color);
    display: flex;
    align-items: end;
    justify-content: left;
    padding: 100px 50px 15px 30px;
}
#fa-content h1{
    font-family: var(--font-1);
    font-size: 2.375rem;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--fourth-color);
}
#fa-content h2{
    font-family: var(--font-2);
    color: var(--fifth-color);
    font-size: .788rem;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
}
#fa-content p{
    font-family: var(--font-2);
    font-size: .788rem;
    font-weight: 400;
    line-height: 2.05;
    color: var(--third-color);
}
#fa-content h3{
    font-family: var(--font-1);
    font-weight: 400;
    font-size: .875rem;
}
#home-5{
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    padding: 7% 5%;
}
#home-5::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: url("/images/bg-2.png") center top / cover no-repeat;
    transform: translateY(0);
    will-change: transform;
    z-index: -1;
}
#home-5::before{
    transform: translateY(var(--parallax-shift, 0px));
}
#home-5 h1{
    color: var(--primary-color);
    font-family: var(--font-1);
    font-size: 2.375rem;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}
#home-6{
    padding: 55px 25% 55px 15%;
}
#home-7{
    padding: 0 25% 0 15%;
}
#home-7 p{
    color: #0A0A0A;
    font-family: var(--font-1);
    font-size: .8rem;
    text-align: left;
}
#home-7 p a{
    color: #0A0A0A;
}
#home-6 iframe{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
#home-6 h3{
    color: var(--sixth-color);
    font-family: var(--font-1);
    font-weight: 400;
    font-size: .788rem;
    letter-spacing: 2px;
}
#home-6 p{
    color: var(--seventh-color);
    font-family: var(--font-2);
    font-size: .788rem;
    font-weight: 400;
    line-height: 2;
}
#home-6 h4{
    color: var(--eighth-color);
    font-family: var(--font-2);
    font-weight: 700;
    font-size: .788rem;
}
#home-6-a{
    text-decoration: none;
    font-family: var(--font-2);
    font-weight: 400;
    font-size: .788rem;
    color: black;
}
.social-links{
    display: flex;
    align-items: center;
    justify-content: start;
    column-gap: 10px;
    margin-top: 20px;
}
.social-links i{
    color: black;
    font-size: .8rem;
    margin: auto;
}
.social-links a{
    text-decoration: none;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    width: 25px;
    height: 25px;
}
.booking-form{
    display: flex;
    flex-wrap: wrap;           
    justify-content: center;
    gap: 15px;
    margin: auto;
}

.booking-form input,
.booking-form textarea{
    flex: 1 1 calc(20% - 15px);  
    padding:12px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:16px;
    margin-top: 12px;
    font-family: var(--font-2);
    resize: none !important;
}

.booking-form button{
    padding:12px;
    background:#0A0A0A;
    color:#fff;
    margin-top: 12px;
    border:none;
    cursor:pointer;
    border-radius:6px;
    font-family: var(--font-2);
    transition: all .4s ease-in-out;
}

.whatsapp-widget{
    position: fixed;
    right: 10px;
    bottom: 10px;
    display:inline-block;
    padding:12px 20px;
    background:#25D366;
    color:#fff;
    font-size: .9rem;
    text-decoration:none;
    border-radius:6px;
    font-family: var(--font-2);
    transition: all .4s ease-in-out;
}
.booking-form button:hover,.whatsapp-widget:hover{
    background: var(--sixth-color);
}
.event-widget{
    position: fixed;
    left: 10px;
    bottom: 10px;
    display:inline-block;
    padding:12px 20px;
    background:var(--sixth-color);
    color:#fff;
    font-size:.9rem;
    border-radius:10px;
    font-family: var(--font-2);
    transition: all .35s ease-in-out;
    cursor:pointer;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index:2000;
    display:flex;
    align-items:center;
    gap:10px;
}
.event-widget:hover{
    background:var(--fifth-color);
}

/* badge */
.event-widget .badge {
  background: #ff3b30;
  min-width:22px;height:22px;border-radius:12px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:0.8rem;margin-left:6px;
}

/* expanded panel */
.event-panel {
  position: fixed;
  left: 10px;
  bottom: 60px;
  width: 340px;
  max-height: 540px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(10,10,30,0.18);
  overflow:hidden;
  display:none;
  z-index:2000;
}
#eventPanel {
    display: none; /* hidden by default */
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    transform-origin: top right; /* scale from top-right if near bell */
}
#eventPanel.show {
    display: block; /* ensure it shows */
    transform: scale(1);
    opacity: 1;
}

/* header */
.event-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--secondary-color);font-family: var(--font-1);letter-spacing: 2px;}
.event-panel .panel-body{padding:8px;overflow:auto;max-height:460px;font-family: var(--font-2);}

/* chat-like item portrait */
.ev-item{display:flex;gap:10px;padding:10px;border-radius:8px;margin-bottom:8px;align-items:flex-start;background:linear-gradient(180deg,#ffffff,#fbfdff)}
.ev-item img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.ev-meta{flex:1}
.ev-meta h4{margin:0 0 6px 0;font-size:1rem}
.ev-meta p{margin:0;color:#475569;font-size:0.9rem}
.ev-meta .time{font-size:0.8rem;color:#94a3b8;margin-top:6px}

/* When no events */
.empty{padding:24px;text-align:center;color:#64748b}

/* small close icon */
.close-btn{background:transparent;border:none;font-size:1.1rem;cursor:pointer;color:#334155}
@media (max-width: 1270px) {
    #i-content-in{
        height: fit-content;
    }
}
@media (max-width: 998px) {
    #images-1{
        border-right: unset;
    }
    #images-2{
        border-left: unset;
    }
    #fa-img{
        padding: 0;
    }
    .booking-form input,
    .booking-form textarea{
        flex: 1 1 calc(33.33% - 15px);  
    }
}
@media (max-width: 837px) {
    #content h1{
        font-size: 3rem;
        padding: 0 20px;
    }
    #content h1 span{
        font-size: 2rem;
    }
}
@media (max-width: 768px) {
    .booking-form input,
    .booking-form textarea{
        flex: 1 1 calc(50% - 15px);  
    }
}
@media (max-width: 660px) {
    .containerr{
        width: 50%;
        column-gap: 20px;
        padding: 20px;
    }
}
@media (max-width: 637px) {
    #i-content-in h1,#fa-content h1,#home-5 h1{
        font-size: 1.5rem;
    }
}
@media (max-width: 470px) {
    .whatsapp-widget{
        padding:6px 10px;
        font-size: .8rem;
    }
    .event-widget{
        padding:6px 10px;
        font-size:.8rem;
        left: unset;
        right: 10px;
        bottom: 50px;
    }
    .event-widget .badge {
        min-width:20px;height:20px
    }
    .event-panel {
        width: 90%;
        left: unset;
        right: 10px;
        bottom: 90px;
        max-height: 340px;
        overflow-y: scroll;
    }
    .event-panel::-webkit-scrollbar{
        display: none;
    }
    .booking-form input,
    .booking-form textarea{
        flex: 1 1 100%;  
    }
    #atag{
        letter-spacing: 1px;
        font-size: .6rem;
    }
    #content h1{
        font-size: 2rem;
        padding: 0 20px;
    }
    #content h1 span{
        font-size: 1.5rem;
    }
    #content h1{
        font-size: 2.5rem;
        letter-spacing: 5px;
    }
    #content h1 span{
        font-size: 1.5rem;
    }
    #brandlogoo{
        width: 80px;
    }
}
@media (max-width: 381px) {
    #brandlogoo{
        width: 60px;
    }
    .containerr{
        padding: 15px 10px;
        column-gap: 10px;
    }
    .navbar{
        border-radius: 0 0 100px 100px;
    }
    #i-content-in h1,#fa-content h1,#home-5 h1{
        font-size: 1.2rem;
    }
}
@media (max-width: 357px) {
    #atag{
        display: none;
    }
}