@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
:root {
/* Colors */
--color-primary: #9b6e41;
--color-white: hsl(0, 0%, 100%);
--color-black: hsl(0, 0%, 0%);
--bg-page: #9b6e4115;
--bg-card: hsl(0, 0%, 100%);
--color-card: hsl(0, 0%, 0%);
--bg-scroll: hsl(0, 0%, 100%);
--color-border-1: #9b6e4150;

/* Borders */
--border-1: 1px solid var(--color-border-1);

/* Box Shadows */
--shadow-2: 0 1px 2px #00000033;
--shadow-4: 0 0 4px #0000004d;

/* Font Families */
--ff-regular: 'Roboto', sans-serif;
--ff-headings: 'Bebas Neue', sans-serif;
--ff-accent: 'Allura', cursive;

/* Font Sizes */
--fs-sm: 12px;
--fs-md: 14px;
--fs-base: 16px;
--fs-button: 20px;
--fs-lg: 28px;
--fs-banner: 42px;
--fs-xl: 60px;
--fs-2xl: 80px;

/* Spacing */
--section-padding: 60px;

/* Transition */
--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
}
/* ########## RESET ########## */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ########## INITIALIZE ########## */
html {
scroll-behavior: smooth;
font-size: 10px;
}

body {
background-color: var(--bg-page);
color: var(--color-black);
font-family: var(--ff-regular);
font-size: var(--fs-base);
line-height: 1.6;
overflow-x: hidden;
}

body.dark {
--bg-page: hsl(0, 0%, 9%);
--bg-card: hsl(0, 0%, 15%);
--color-card: hsl(0, 0%, 100%);
--color-black: hsl(0, 0%, 100%);
--color-white: hsl(var(--hue) var(--saturation) 93%);
--bg-scroll: var(--bg-page);
}

li {
list-style: none;
}

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

// a,
img,
span,
input,
select,
button,
textarea,
ion-icon {
display: block;
}

img {
height: auto;
}

input,
select,
button,
textarea {
background: none;
border: none;
font: inherit;
}

input,
select,
textarea {
width: 100%;
}

button {
cursor: pointer;
}

address {
font-style: normal;
}

.material-icons {
pointer-events: none;
}

:focus-visible {
outline-offset: 4px;
}

::selection {
background-color: var(--color-primary);
color: var(--color-white);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
border-radius: 50%;
}

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

::-webkit-scrollbar-thumb {
background-color: var(--color-primary);
border-radius: 20px;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--ff-headings);
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.1;
}

/* ########## UTILITY CLASSES ########## */

/* Background Colors */
.bg-page {
background-color: var(--bg-page);
}
.bg-primary {
background-color: var(--color-primary);
}

/* Buttons */
.btn {
padding-block: 15px;
padding-inline: 30px;
font-family: var(--ff-headings);
letter-spacing: 1px;
font-size: var(--fs-button);
border-radius: 10px;
outline: 2px solid hsl(0, 0%, 100%);
outline-offset: -6px;
}

.btn-primary {
background-color: var(--color-primary);
color: var(--color-white);
}

/* Colors */
.color-black {
color: var(--color-black);
}
.color-primary {
color: var(--color-primary);
}
.color-white {
color: var(--color-white);
}

/* Display */
.block {
display: block;
}

/* Flex */
.flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.gap-20 {
gap: 20px;
}

/* Grid */
.grid {
display: grid;
}

/* Grid & Flex Alignments */
.justify-content-center {
justify-content: center;
}
.justify-content-start {
justify-content: flex-start;
}
.justify-content-between {
justify-content: space-between;
}
.align-items-center {
align-items: center;
}

/* Font Family */
.font-accent {
font-family: var(--ff-accent);
}

/* Font Sizes */
.font-sm {
font-size: var(--fs-sm);
}
.font-md {
font-size: var(--fs-md);
}
.font-base {
font-size: var(--fs-base);
}
.font-lg {
font-size: var(--fs-lg);
}
.font-xl {
font-size: var(--fs-xl);
}
.font-2xl {
font-size: var(--fs-2xl);
}

.font-banner {
font-size: var(--fs-banner);
}

/* Line Heights */
.line-height-1 {
line-height: 1;
}

/* Margins */
.ml-10 {
margin-left: 10px;
}
.mx-auto {
margin: 0px auto;
}

/* Positions */
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}

/* Text Alignment */
.text-center {
text-align: center;
}

/* Top - Bottom - Left - Right */
.top-0 {
top: 0px;
}
.left-0 {
left: 0px;
}

/* Width */
.w-full {
width: 100%;
}

/* Z-Indexes */
.z-4 {
z-index: 4;
}

/* Custom */
.container {
padding-inline: 15px;
}

/* ########## HEADER SECTION ########## */
.header {
color: var(--color-white);
--btn-color: var(--color-white);
padding-block: 7px;
border-block-end: 1px solid var(--color-border-1);
}

.header.active {
color: var(--color-black);
--btn-color: var(--color-black);

position: fixed;
top: -60px;
background-color: var(--bg-scroll);
box-shadow: var(--shadow-1);
animation: slide-in 0.5s ease-out forwards;
}

@keyframes slide-in {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}

.header .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}

/* Logo */
.logo img {
max-height: 40px;
width: auto;
max-width: 180px;
}
.logo a,
.logo span {
font-size: var(--fs-lg);
}
.logo a {
text-transform: uppercase;
font-family: var(--ff-headings);
}

/* Button Group */
.header-btn-group {
display: flex;
align-items: center;
gap: 20px;
}

/* Navigation Toggle Button */
.nav-toggle-btn {
display: grid;
gap: 4px;
}

.line {
width: 10px;
height: 3px;
background-color: var(--btn-color);
border-radius: 5px;
transition: var(--transition-1);
}

.line.middle {
width: 20px;
}

.line.bottom {
margin-left: auto;
}

.nav-toggle-btn.active .line.top {
transform: translate(1px, 3px) rotate(45deg);
}

.nav-toggle-btn.active .line.middle {
transform: rotate(-45deg);
}

.nav-toggle-btn.active .line.bottom {
transform: translate(-1px, -3px) rotate(45deg);
}

/* Navigation */
.navbar {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 100%;
background-color: var(--bg-scroll);
padding-inline: 20px;
box-shadow: var(--shadow-4);
height: 0;
overflow: hidden;
visibility: hidden;
transition: var(--transition-1);
}

.navbar.active {
height: 360px;
visibility: visible;
}

.navbar-list {
margin-block: 10px;
}

.nav-item::not(:last-child) {
border-block-end: 1px solid hsl(0 0% 0% / 0.04);
}

.navbar-link {
color: var(--color-black);
padding: 10px 15px;
transition: var(--transition-1);
}

.navbar-link:is(:hover, :focus, :active) {
color: var(--color-primary);
}

.navbar ul a.active {
color: var(--color-primary) !important;
}

/* ########## HERO SECTION ########## */

.home.hero {
/* position: relative; */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #4a4a4a;
background-blend-mode: overlay;
padding-block: 145px 60px;
text-align: center;
min-height: 100vh;
width: 100vw;
}

/* ########## ABOUT SECTION ########## */
.home.about .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-block: 120px;
}

.home.about .container .blob {
max-width: 100%;
max-height: auto;
width: 360px;
height: 360px;
object-fit: cover;
box-shadow: 0 10px 5px 5px rgba(0 0 0 / 0.1);
animation: animate-blob 20s ease-in-out infinite;
transition: all 4s ease-in-out;
}

@keyframes animate-blob {
0%,
100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
50% {
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
}
}

/* ########## BANNERS SECTION ########## */
.banner-wrapper {
color: var(--color-white);
font-size: var(--fs-banner);
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding-block: 90px 60px;
}

.banner-right {
display: grid;
gap: 20px;
}

.banner-left,
.banner-right-upper,
.banner-right-lower {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #414141;
background-blend-mode: overlay;
border-radius: 20px;
border: 7px solid var(--bg-card);
padding: 30px;
min-height: 300px;
display: grid;
place-content: center;
}

/* ########## FOOD MENU SECTION ########## */
.food-menu {
padding-block: 60px 0px;
}

.food-menu p.intro {
margin-block-end: 40px;
}

.filter-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding-block-end: 40px;
}

.filter-btn {
background-color: var(--bg-card);
color: var(--color-card);
padding: 5px 20px;
border: 1px solid var(--color-border-1);
}

.filter-btn.active {
background-color: var(--color-primary);
color: var(--color-white);
}

.food-menu-list {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 1fr);
overflow-x: hidden;
}

.food-menu-card {
background-color: var(--bg-card);
max-width: max-content;
border-radius: 10px;
border: 1px solid var(--color-border-1);
}

.food-menu-list-item.hide {
display: none;
}

.food-menu-card .card-banner {
margin-inline: auto;
}

.food-menu-card .card-banner img {
max-width: 100%;
height: auto;
border-radius: 10px;
overflow: hidden;
padding-block-end: 10px;
margin-inline: auto;
}

.food-menu .card-title {
text-align: center;
}

.food-menu-card .price-wrapper {
display: flex;
justify-content: center;
gap: 5px;
}

/* ########## PARTY ORDERS ########## */
.party-orders {
padding-block: 60px;
}

/* ########## CTA SECTION ########## */
.home.cta {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #4a4a4a;
background-blend-mode: overlay;
padding-block: 40px;
padding-inline: 20px;
color: var(--color-white);
text-align: center;
width: 100vw;
}

/* ########## TESTIMONIALS ########## */
.testimonials {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: var(--bg-page);
background-blend-mode: soft-light;
padding-block: 60px;
}

.testimonials h2 {
margin-block-start: 30px;
}
.testimonials p {
margin-block-end: 30px;
}

.testimonies {
display: flex;
flex-direction: column;
gap: 30px;
}

.testimony-card {
background-color: var(--bg-card);
padding: 40px;
text-align: center;
border-radius: 20px;
border: 1px solid var(--color-border-1);
/* box-shadow: var(--shadow-4); */
}

.testimony-card .client-info {
display: flex;
flex-direction: column;
}

.testimony-card .client-rating {
color: var(--color-primary);
}

.testimony-card .quote {
font-size: var(--fs-banner);
color: var(--color-primary);
opacity: 0.5;
}

.testimony-card .quote.quote-start {
padding-block: 20px 5px;
}

.testimony-card .quote.quote-end {
text-align: right;
padding-block: 5px 0px;
}

/* ########## FOOTER SECTION ########## */
.footer {
color: hsl(0, 0%, 100%);
padding-block-start: 120px;
background-repeat: no-repeat;
background-size: cover;
background-position: top;
background-color: #171717;
background-blend-mode: overlay;
border-block-end: 2px solid var(--color-border-1);
}

.footer .container {
display: grid;
gap: 30px;
}

.social-links {
display: flex;
gap: 5px;
}

.social-link {
color: hsl(0, 0%, 100%);
font-size: 2.5rem;
padding: 7px;
}

.footer-link-title,
.form-title {
position: relative;
max-width: max-content;
font-family: var(--ff-headings);
font-size: var(--fs-lg);
letter-spacing: 1px;
margin-block-end: 5px;
}

.footer-link-title {
color: hsl(0, 0%, 100%);
}

.form-title {
color: var(--color-card);
}

.footer-link > li:not(:last-child) {
margin-block-end: 15px;
}

.booking-form {
background-color: var(--bg-card);
color: var(--color-card);
padding: 30px;
border: 1px solid var(--color-border-1);
box-shadow: var(--shadow-4);
border-radius: 20px;
}

.booking-form input:active,
.booking-form input:focus,
.booking-form input:focus-visible,
.booking-form input:focus-within,
.booking-form textarea:active,
.booking-form textarea:focus,
.booking-form textarea:focus-visible,
.booking-form textarea:focus-within {
outline: 2px solid var(--color-primary);
}

.input-wrapper {
display: grid;
gap: 10px;
margin-block-end: 10px;
}

.input-wrapper select option {
background-color: var(--bg-card);
color: var(--color-card);
}

.input-field {
border: 1px solid var(--color-border-1);
padding: 8px 12px;
color: var(--color-card);
}

.input-field::placeholder {
color: var(--color-card);
}

textarea.input-field {
min-height: 50px;
max-height: 150px;
height: 100px;
resize: vertical;
margin-block-end: 10px;
}

.copyright {
background-color: var(--color-primary);
color: hsl(0, 0%, 100%);
padding-block: 20px;
margin-block-start: 40px;
text-align: center !important;
}

.footer .copyright .container {
display: grid;
grid-template-columns: 1fr;
justify-content: center;
}
/* ########## BACK TO TOP BUTTON ########## */
.back-to-top-btn {
position: fixed;
bottom: 10px;
right: 20px;
background-color: var(--bg-card);
color: var(--color-primary);
padding: 10px 10px 0px;
border-radius: 5px;
box-shadow: var(--shadow-4);
z-index: 2;
opacity: 0;
visibility: hidden;
transition: var(--transition-1);
}

.back-to-top-btn.active {
opacity: 1;
visibility: visible;
transform: translateY(-10px);
}

.back-to-top-btn:is(:hover, :focus) {
background-color: var(--color-primary);
color: var(--bg-card);
}

/* ########## MEDIA QUERIES ########## */

/* Screens Larger than 480px */
@media (min-width: 480px) {
/* ##### HEADER SECTION ##### */
.header-btn-group .btn {
display: block;
}
}

/* Screens Larger than 540px */
@media (min-width: 540px) {
/* ##### UTILITY CLASSES ##### */
/* Custom */
.container {
max-width: 540px;
width: 100%;
margin-inline: auto;
}

/* ##### FOOTER SECTION ##### */
.footer .container {
grid-template-columns: 1fr 1fr;
}
}

/* Screens Larger than 768px */
@media (min-width: 768px) {
/* ##### UTILITY CLASSES ##### */
/* Custom */
.container {
max-width: 720px;
}

/* ##### FOOD MENU SECTION ##### */
.food-menu-list {
gap: 15px;
grid-template-columns: repeat(3, 1fr);
}

.food-menu-card {
/* padding: 10px; */
border-radius: 10px;
}

.food-menu-card .card-banner img {
border-radius: 10px;
}

/* ##### FOOTER SECTION ##### */
.input-wrapper {
grid-template-columns: 1fr 1fr;
}
}

/* Screens Larger than 992px */
@media (min-width: 992px) {
/* ##### CUSTOM PROPERTIES ##### */
:root {
/* Spacing */
--section-padding: 120px;
}

/* ##### UTILITY CLASSES ##### */
/* Custom */
.container {
max-width: 960px;
}

/* ##### HEADER SECTION ##### */
.nav-toggle-btn {
display: none;
}

.header .container {
gap: 20px;
}

.navbar,
.navbar.active {
all: unset;
margin-inline-start: auto;
}

.navbar-list {
margin-block: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 5px;
}

.nav-item:not(:last-child) {
border-block-end: none;
}

.navbar-link {
color: var(--btn-color);
}

/* ########## ABOUT SECTION ########## */
.home.about .container {
flex-wrap: nowrap;
}
.home.about .container .left,
.home.about .container .right {
width: 50%;
}

.home.about .container .right img {
margin-right: 0px;
margin-left: auto;
}

.home.about .container .blob {
width: 400px;
height: 400px;
}

/* ##### BANNERS SECTION ##### */
.banner-wrapper {
grid-template-columns: 1fr 1fr;
}

.banner-left,
.banner-right-upper,
.banner-right-lower {
min-height: 240px;
}

/* ##### FOOD MENU SECTION ##### */
.food-menu-list {
gap: 20px;
grid-template-columns: repeat(4, 1fr);
}

.food-menu-card {
border-radius: 15px;
}

.food-menu-card .card-banner img {
border-radius: 15px;
}

/* ##### CTA SECTION ##### */
.home.cta {
padding-block: 60px;
padding-inline: 40px;
}

/* ##### TESTIMONIALS SECTION ##### */
.testimonials {
padding-block: 80px 210px;
}
.testimonies {
flex-direction: row;
}

/* ##### FOOTER SECTION ##### */
.footer .container {
grid-template-columns: 2fr 1fr 1fr 1fr;
}

.booking-form {
margin-block-start: -270px;
}
}

/* Screens Larger than 1200px */
@media (min-width: 1200px) {
/* ##### UTILITY CLASSES ##### */
/* Custom */
.container {
max-width: 1170px;
}

/* ########## ABOUT SECTION ########## */

.home.about .container .blob {
width: 480px;
height: 480px;
}
}

/* Screens Larger than 1440px */
@media (min-width: 1440px) {
/* ##### UTILITY CLASSES ##### */
/* Custom */
.container {
max-width: 1240px;
}
}