@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

@font-face {
    font-family: 'Modern Negra Demo';
    src: url('../fonts/ModernNegraDemo.woff2') format('woff2'),
        url('../fonts/ModernNegraDemo.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


:root {
    --primary_color: #E7D393;
    --secondary_color: #EFEFEF;
    --body_color: #EFEFEF;
    --link_color: #EFEFEF;
    --link_hover_color: #E7D393;
    --heading_color: #fff;
    --body_font: "Mona Sans", sans-serif;
    --heading_font: 'Modern Negra Demo', serif;
    --primary_transition: 400ms;
}

*{box-sizing: border-box;}
*:focus{outline:none;}
::-moz-focus-inner{border:0;}
body{margin:0px; background: #000;}
body{font-family:var(--body_font); font-weight:500; color:var(--secondary_color); font-size:18px; line-height:30px;}
strong{font-weight:700;}
a{ text-decoration:none; color:var(--link_color); transition: var(--primary_transition);}
a:hover, a:focus{text-decoration:none; color: var(--link_hover_color); }
p{margin:0 0 15px 0;}
p:last-child{margin:0;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-uppercase{text-transform:uppercase;}

.white-text,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text h6{color:#fff;}


h1,h2,h3,h4,h5,h6{margin-top:0px; font-weight:400; margin-bottom:15px; font-family: var(--heading_font); color: #fff; line-height: 1; }
h1 { font-size:330px;  }
h2 { font-size: 90px; }
h3 { font-size: 64px; }
h4 { font-size: 50px; }
h5 { font-size: 48px; }
h6 { font-size:36px; } 
.font20{ font-size: 20px; }
.font30{ font-size: 30px; }

.container{margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px;}

img{height:auto; max-width:100%;}

html { scroll-behavior: smooth; }


/* Custom CSS start from here */

.eyebrow { font-size: 14px; line-height: 18px; padding: 10px 20px; background: #fff; display: inline-block; border-radius: 100px; color: #000; }
.leaf { position: relative; }
.leaf .leaf-img { width: 326px; height: auto; position: absolute; top: 0; left: 0; }
.leaf-img.leaf-left { left: -135px; transform: rotate(45deg); top: 214px; }
.leaf-img.leaf-right { left: unset; right: -180px; transform: rotate(-26deg); top: 10px; }

/* header css start */
header.site-header { padding: 30px 0;  position: fixed; width: 100%; top: 0; left: 0; z-index: 1; transition: var(--primary_transition); }
header.site-header.scrolled{ background-color: rgb(from #000 r g b / 50%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
header.site-header .site-branding a { gap: 10px; font-size: 30px; line-height: 40px; font-family: var(--heading_font); }
header.site-header .site-branding a > div { line-height: 1; padding-top: 8px; }
header.site-header nav ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 45px; }
/* header css end */

/* Hero section css start */
.hero-menu-wrapper { position: relative; overflow-x: clip; }
.noise { position: absolute; inset: 0; }
.noise img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.5; pointer-events: none; }
.hero-section { min-height: 100vh; overflow-x: clip; padding: 150px 0 80px; /*background: radial-gradient(rgba(67, 67, 67, 0.4), rgba(0, 0, 0, 0.4));*/ }

.hero-section h1 { display: flex; justify-content: center; gap: 6px; }
.hero-section h1 .split-char { background: -webkit-linear-gradient(#FFFFFF 30%, #898989 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -8px; padding: 0 4px; }

.hero-section .bottom-content{ margin-top: 150px; position: relative; }
.hero-section .content-left { max-width: 250px; width: 100%; }
.hero-section .content-left h4 { color: var(--primary_color); margin-top: 20px; }
.hero-section  .content-right { max-width: 300px; width: 100%; }
.hero-section .content-right .label { font-weight: 600; opacity: 0.8; margin-top: 10px; }
/* Hero section css end */

/* Animated video css start */
.video-wrapper { position: absolute; width: 100%; height: 100dvh; top: 0;  z-index: -1; display: flex; justify-content: center; align-items: flex-end; }
.video-wrapper video { width: 60%; }
/* Animated video css end*/

/* Menu section css start */
.menu-section{ padding: 120px 0 480px; overflow-x: clip; }
.menu-section .inner .menu-title { margin-bottom: 32px; }
.menu-section .inner .menu-item { gap: 50px; }
.menu-section .inner .menu-item h6 { margin: 0; color: var(--primary_color); }
.menu-section .inner .menu-item + .menu-item { margin-top: 40px; }
.menu-section .leaf-img.leaf-left { bottom: -70px; top: unset; left: -110px; transform: rotate(38deg); }
.menu-section .leaf-img.leaf-right { bottom: -70px; top: unset; right: -100px; transform: rotate(130deg) scale(-1); left: unset; }
/* Menu section css end */

/* image-content-grid section css start */
.image-content-grid { padding: 100px 0; position: relative;}
.image-content-grid .inner{ position: relative; }
.image-content-grid .inner .top-part { gap: 20px; }
.image-content-grid .top-part .title-part { max-width: 552px; width: 100%; }
.image-content-grid .top-part .title-part h3 { margin-top: 40px; }
.image-content-grid .top-part .right-part { max-width: 450px; }
.image-content-grid .top-part .box { margin-top: 50px; }
.image-content-grid .top-part .box .left { position: relative; padding-right: 20px; max-width: 220px; }
.image-content-grid .top-part .box .right { max-width: 200px; }
.image-content-grid .top-part .box .raing-number { margin-top: 30px; font-size: 24px; }
.image-content-grid .top-part .box .rating-subtext { margin-top: 10px; font-size: 14px; line-height: 20px; }
.image-content-grid .top-part .box .left:before { position: absolute; content: ''; width: 1px; height: 100%; background: #fff; right: -22px; }
.image-content-grid .top-part .box .img-pill .image { width: 44px; height: 44px; background: var(--primary_color); }
.image-content-grid .top-part .box .img-pill { padding: 20px; background: linear-gradient(to bottom, #313131, #0F0F0F); border-radius: 100px; }
.image-content-grid .top-part .box .img-pill .image { border-radius: 50%; overflow: clip; border: 2px solid #fff; }
.image-content-grid .top-part .box .img-pill .image + .image { margin-left: -17px; }
.image-content-grid .card-grid { margin-top: 100px; }
.image-content-grid .parent { display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; }
.image-content-grid .parent .div1 { grid-area: 1 / 1 / 2 / 5; }
.image-content-grid .parent .div2 { grid-area: 1 / 5 / 2 / 9; background: linear-gradient(to bottom, #313131, #0F0F0F); border-radius: 20px; padding: 20px; }
.image-content-grid .parent .div3 { grid-area: 1 / 9 / 2 / 17; }
.image-content-grid .parent .div4 { grid-area: 2 / 1 / 3 / 11; }
.image-content-grid .parent .div5 { grid-area: 2 / 11 / 3 / 17; }
.image-content-grid .card-grid > div img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.image-content-grid .card-grid > div .image { width: 100%; height: 100%; border-radius: 20px; overflow: hidden; }
.image-content-grid .parent .div2 .content { width: 100%; }
.image-content-grid .parent .content h6 { padding-bottom: 15px; border-bottom: 1px solid rgb(from #fff r g b / 50%); }
.image-content-grid .parent .content ul { padding-left: 20px; margin: 0; }
/* image-content-grid section css end */

/* Footer css start */
footer.footer { padding: 100px 0; position: relative; overflow: hidden; }
footer.footer.leaf .leaf-left { top: unset; bottom: -70px; left: -140px; transform: rotate(35deg); }
footer.footer.leaf .leaf-right { right: -140px; left: unset; transform: rotate(-145deg); }
footer.footer .inner{ position: relative; }
footer.footer .info { max-width: 880px; margin: 0 auto; gap: 50px; flex-direction: column; }
footer.footer .info .item .title{ margin-bottom: 10px; }
footer.footer .info .item a { font-size: 30px; line-height: 1; font-weight: 400; }
footer.footer .info .item .social { line-height: 0; gap: 20px; }
footer.footer .info .item .social .icon { width: 20px; }

/* Footer css end */



/* Custom CSS end  here */

@media (min-width:768px) { .container {width:750px;} }
@media (min-width:992px) { .container {width:970px;} }
@media (min-width:1200px) { .container {width:1170px;} }
@media (min-width:1430px) { .container {width:1290px;} }


@media (min-width:768px){
    header.site-header .mobile-menu-btn{ display: none; }
}


.flex{display:flex}
.flex-reverse{flex-flow:row-reverse;}
.align-center{align-items:center;}
.align-top{align-items:flex-start;}
.align-bottom{align-items:flex-end;}
.space-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.justify-right{justify-content:flex-end;}
.justify-left{justify-content:flex-start;}
.row-wrap{flex-flow:row wrap;}
.mobile-show{display:none} 

@media (max-width:1629px){}
@media (max-width:1429px){}
@media (max-width:1199px){
    h1 { font-size: 210px; }
    .leaf .leaf-img { width: 270px; }
    .video-wrapper video { width: 80%; }
    .hero-section.leaf .leaf-img.leaf-right { right: -100px; top: 100px; }
    .menu-section { padding: 120px 0 360px; }
}
@media (max-width:991px){
    h1 { font-size: 180px; }
    .leaf .leaf-img { width: 140px; }
    header.site-header nav ul { gap: 30px; }
    .hero-section.leaf .leaf-img.leaf-left { left: -70px; }
    .hero-section.leaf .leaf-img.leaf-right { right: -80px; }
    .menu-section { padding: 80px 0 330px; }

    .image-content-grid { padding: 80px 0; }
    .image-content-grid .top-part .title-part {max-width: 100%;}
    .image-content-grid  .top-part { flex-direction: column; align-items: flex-start; }

    .image-content-grid .parent { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; }
    .image-content-grid .parent .div1 { grid-area: 1 / 1 / 2 / 2; }
    .image-content-grid .parent .div2 { grid-area: 1 / 2 / 2 / 3; }
    .image-content-grid .parent .div3 { grid-area: 2 / 1 / 3 / 3; }
    .image-content-grid .parent .div4 { grid-area: 3 / 1 / 4 / 2; }
    .image-content-grid .parent .div5 { grid-area: 3 / 2 / 4 / 3; }

    footer.footer .leaf-left { left: -120px; }
    footer.footer .leaf-right { right: -110px; }
}

@media (max-width:767px){
    h1 { font-size: 110px; }
    h3 { font-size: 52px; }
    body{font-size:16px; line-height:24px;}

    header.site-header nav.main-navigation { display: none; position: absolute; top: 100px; left: 0; width: 100%; line-height: normal; padding: 15px; background-color: rgb(from #000 r g b / 80%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    header.site-header .header-wrapper { line-height: 0; }
    header.site-header .mobile-menu-btn { background: transparent; border: none; width: 40px; height: 40px; background: var(--primary_color); border-radius: 4px; line-height: 0; position: relative; }
    header.site-header .mobile-menu-btn:before { position: absolute; content: '';  top: 5px; left: 5px; width: 30px; height: 30px; background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='24px' height='24px' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Emenu-hamburger%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cg%3E%3Cpath d='M42,12a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2H6a2,2,0,0,1,2-2H40a2,2,0,0,1,2,2Z'/%3E%3Cpath d='M42,24a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2H6a2,2,0,0,1,2-2H40a2,2,0,0,1,2,2Z'/%3E%3Cpath d='M42,36a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2H6a2,2,0,0,1,2-2H40a2,2,0,0,1,2,2Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / cover; }
    header.site-header .mobile-menu-btn.open:before { background:url("data: image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Menu / Close_MD'%3E%3Cpath id='Vector' d='M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Menu / Close_MD'%3E%3Cpath id='Vector' d='M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / cover; }
    header.site-header nav.main-navigation ul { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
    .hero-section .bottom-content { flex-direction: column; align-items: center; text-align: center; }
    .video-wrapper video { width: 160%; }
    .menu-section .inner .col { width: 100%; }
    .menu-section .inner .menu-item { justify-content: space-between; }
    
    .image-content-grid .top-part .box { flex-direction: column; align-items: flex-start; gap: 30px; }
    .image-content-grid .top-part .box .left:before { display: none; }
    .image-content-grid .parent { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; max-width: 400px; margin: 40px auto 0; }
    .image-content-grid .parent .div1 { grid-area: 1 / 1 / 2 / 2; }
    .image-content-grid .parent .div2 { grid-area: 2 / 1 / 3 / 2; }
    .image-content-grid .parent .div3 { grid-area: 3 / 1 / 4 / 2; }
    .image-content-grid .parent .div4 { grid-area: 4 / 1 / 5 / 2; }
    .image-content-grid .parent .div5 { grid-area: 5 / 1 / 6 / 2; }
    
}