@charset "utf-8";

@font-face {
  font-family: 'Cooper Black';
  src: url('fonts/CooperBlack.TTF') format('truetype');
}

@font-face {
  font-family: 'Arial Rounded MT Bold';
  src: url('fonts/arialroundedmtbold.ttf') format('truetype');
}

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

html, body {
  	height: 100%;
}

html,body {
  	font-family: 'Cooper Black', 'Arial Rounded MT Bold', sans-serif;
  	background: #fff;
}


/* Navbar */
.header {
	position:fixed;
	top: 0;
	width:100%;
	z-index:3;
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  	background-color: #F2EFDE;
 	padding: 10px 30px;
    height: 95px;
 	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar a {
	font-family: 'Cooper Black', Arial, sans-serif;
  	text-decoration: none;
  	color: #873C40;
  	font-size: 22px;
  	margin: 0 5px;
	display: inline-block;
  	border-bottom: 2px solid transparent;
  	padding-bottom: 0px;
	transition: transform 0.2s ease;
}

.navbar a:hover {
  	color: #EB2228;
	transform: scale(1.1);
}

.navbar a.active {
  	color: #EB2228;
}

.nav-left {
	flex: 0 0 auto;
	margin-right: 50px;
}

.navbar{
	flex: 1 1 auto;
	display:flex;
	align-items: center;
	gap:30px;
}

.nav-left img {
  	height: 50px;
}

.navbar a, .dropbtn {
  	flex: 0 0 auto;         
} 

.nav-right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 15px;
}

.nav-left img{
	height: 50px
}
.nav-right img {
  	height: 50px;
}

.dropdown {
  	position: relative;
  	display: inline-block;
}


@media (max-width: 768px) {
  .header {
    flex-wrap: wrap;         
    padding: 8px 16px;
  }
  .nav-left, .nav-right {
    margin: 8px 0;
  }
  .navbar {
    gap: 12px;
  }
  .navbar a, .dropbtn {
    font-size: 18px;
    padding: 8px 6px;
  }
}

/* Dropdown button */
.dropbtn {
  	background-color: #F2EFDE;
  	color: #873C40;
  	padding: 15px 9px;
  	font-family: 'Cooper black', sans-serif;
  	font-size: 25px;
  	border: none;
  	cursor: pointer;
  	border-radius: 12px;
	margin-top: -1px;
}

.dropbtn:hover {
	color:#EA2226;
}

/* Hidden menu list initially */
.dropdown-content {
  	display: none;
  	position: absolute;
  	background-color: #6b4343;
  	min-width: 230px;
  	box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  	z-index: 1;
  	border-radius: 12px;
  	overflow: hidden;
}

/* Dropdown item links */
.dropdown-content a {
  	color: #F2EFDE;
  	padding: 14px 20px;
  	text-decoration: none;
  	display: block;
  	font-family: 'Arial rounded mt bold', sans-serif;
  	transition: background 0.3s;
	font-size: 15px;
}

.dropdown-content a:hover {
  	background-color: #814d4d;
	color:aliceblue
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Hero Section */
.hero {
  	position: relative;
  	width: 100%;
  	height: 100vh;
}

.hero-text h2 {
   font-size: clamp(20px, 5vw, 36px);
}

/* SLideshow images*/
.slide {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	display: none;
  	position: absolute;
  	top: 0;
  	left: 0;
}

.slide.active {
  	display: block;
}

.hero-shadow {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	pointer-events: none; 
}

.slideshow {
  	position: absolute;
  	width: 100%;
  	height: 100%;
}


.hero-logo {
  	width: 500px;
  	display: block;
  	height:auto;
  	position: absolute;
  	top: 240px;
  	left: 50%;
  	transform: translateX(-50%);
  	outline:none;
}

.hero-buttons {
 	position: absolute;
  	top: 540px;
  	left: 50%;
  	transform: translateX(-50%);
  	display: flex;
  	gap: 40px;
	flex-wrap: wrap;
    justify-content:center;
}

.hero-buttons a {
 	padding: 17px 30px;
 	border-radius: 32px;
 	text-decoration: none;
 	font-size: 20px;
 	font-family: 'Cooper Black';
 	transition: 0.4s ease;
}

.btn-red {
  	background-color: White;
  	color: #EA2226;
}

.btn-red:hover {
  	background-color: #EA2226;
  	color:White;
	
}

.btn-grey {
  	background-color: rgba(255,255,255,0.5);
  	color: white;

}

.btn-grey:hover {
  	background-color: #ccc;
	color:#524B4C;
}

.logo-mb-topright {
  	position: absolute;
  	top: 50px;
  	left: 30px;
  	height: 40px;
}

.menu-with-icon {
  	display: flex;
  	align-items: center;
  	text-decoration: none;
  	margin: 0 8px;
  	transition: transform 0.3s ease;
}

.menu-with-icon img.icon-menu {
  	margin-left: 5px;
  	height: 20px; 
  	transition: transform 0.3s ease;
}

.menu-with-icon:hover img.icon-menu {
  	content: url("image/icon-menu-hover.png");
  	transform: scale(1.1);
}

/* Icon*/
.icon {
  	width: 40px;
  	height: 40px;
  	background-size: contain;
}

.user-icon {
  	background-image: url('image/icon-user.png');
	cursor:pointer;
}

.user-icon:hover {
 	 background-image: url('image/icon-user-hover.png');
}

.cart-icon {
  	background-image: url('image/icon-cart.png');
}

.cart-icon:hover {
  	background-image: url('image/icon-cart-hover.png');
}

/* Menu Category Icons Section */
.menu-icons {
  	background-color: #F2EFDE;
  	padding: 30px 0px;
	display: flex;
  	justify-content: center;
}

.icon-scroll {
  	display: flex;
  	flex-wrap: wrap;
  	gap: 22px;
  	justify-content: center;
	max-width: 1800px;
	width:100%;
}

.menu-item {
  	text-align: center;
	color: inherit;
  	width: 120px;
	height: 140px;
  	cursor: pointer;
  	transition: transform 0.3s ease;
	text-decoration:none;
}

.menu-item img {
  	width: 80px;
  	height: 80px;
  	object-fit: contain;
  	margin-bottom: 4px;
  	transition: transform 0.3s ease;
	box-sizing: border-box;
}

.menu-item p {
  	font-family: 'Arial Rounded MT Bold', sans-serif;
  	font-size: 13px;
  	color: #848181;
}

.menu-item:hover p {
  color: #873C40;
}

.menu-item:hover {
  	transform: scale(1.1);
	background-color: #FDD7AA;
	color:#873C40;
	padding: 2px;
	height: 140px;
}

.menu-item.active{
	background-color: #FDD7AA;
}

.menu-item.active p{
	color: #873C40;
}

/* Featured Product */
.featured-products {
  	background-color: #FFF;
  	padding: 40px 30px;
  	text-align: center;
}

.featured-products h2 {
  	font-family: 'Cooper Black', Arial, sans-serif;
  	font-size: 28px;
  	color: #873C40;
  	margin-bottom: 40px;
}

.product-grid {
  	display: flex;
  	justify-content: center;
  	gap: 100px;
  	flex-wrap: wrap;
}

.product-card {
  	background-color: #F2EFDE;
  	border-radius: 20px;
  	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  	width: 100%;
	max-width:220px;
  	padding: 30px;
  	transition: transform 0.3s ease;
}

.product-card:hover {
  	transform: translateY(-5px);
}

.product-card img {
  	width: 100%;
  	height: 100px;
	object-fit:contain;
  	margin-bottom: 14px;
}

.product-card p {
  	font-family: 'Cooper Black', Arial, sans-serif;
  	color: #873C40;
  	font-size: 17px;
}

.menu-view-more {
    text-align: center;
    margin-top: 50px;
	margin-bottom:10px;
}

.btn-view-more {
  	font-family: 'Arial Rounded MT Bold', sans-serif;
  	font-size: 15px;
  	color: White;
  	background-color: #C2C0C0;
  	padding: 15px 30px;
  	border-radius: 30px;
  	text-decoration: none;
  	transition: all 0.3s ease;
}

.btn-view-more:hover {
  	background-color: #8B8989;
  	color: white;
}

/* Promotion */
.promotion-section {
  	background-color: #F9F4E8;
  	padding: 50px 100px;
}

.promotion-section h2 {
  	font-family: 'Cooper Black', sans-serif;
  	font-size: 27px;
  	color: #EB2228;
  	margin-bottom: 50px;
}

.promo-slider {
  	display: flex;
  	gap: 90px;
	overflow-y: auto;
  	padding-bottom: 50px;
}

.promo-card {
  	border-radius: 17px;
	background-color: #F9F4E8;
  	overflow-x: hidden;
	overflow-y: auto;
  	flex-shrink: 0;
  	position: relative;
  	text-align: center;
  	padding-bottom: 27px; 
}

.promo-card img {
  	width: 100%;
  	height: auto;
  	display: block;
}

.promo-btn {
  	position: absolute;
  	bottom: 0px;
  	left: 50%;
  	transform: translateX(-50%);
  	background-color: #EB2228;
  	color: white;
  	padding: 17px 23px;
  	border-radius: 30px;
  	font-family: 'Cooper Black';
  	text-decoration: none;
  	font-size: 18px;
  	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  	transition: background 0.3s ease;
}

.promo-btn:hover {
  	background-color: #742022;
}

/* APP PROMOTION SECTION */
.app-section {
	background-color: #F9F4E8;
  	background: url("image/app-promo.png") no-repeat center center;
  	background-size:cover;
  	height:300px;
	min-height:300px;
	margin-top: 100px;
	z-index:0;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3); 
}

.app-content {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 80px;
  	flex-wrap: wrap;
}

.app-image {
  	max-width: 440px;
  	width: 100%;
  	height: auto;
	margin-top: -110px;
	margin-left: -60px;
	z-index:1;
}

.app-image-right {
  	max-width: 240px;
  	width: 100%;
  	height: auto;
	margin-top: -45px;
	margin-left: -220px;
}

.app-image,
.app-image-right {
  	align-self: flex-start;
	flex: 1 1 200px;
}

.app-text h2 {
  	font-family: 'Cooper Black';
  	font-size: 33px;
  	line-height: 1.5;
  	color: #ffffff;
	margin-top: -10px;
	margin-bottom: 10px;
}

.app-store a img {
  	height: 82px;
	width:auto;
  	transition: transform 0.3s ease;
}

.app-right a img {
	height:200px;
	width:auto;
  	transition: transform 0.3s ease;
	margin-top: -144px;
	margin-left:170px;
}

/* SERVICE SECTION */
.service-section {
  	background-color: #EFDBC0;
  	padding: 120px 10px;
  	text-align: center;
}

.service-container {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-wrap: wrap;
  	gap: 70px;
}

.service-item {
  	width:250px;
  	text-align: center;
	background-color: #873C40; 
  	padding: 40px;
 	border-radius: 20px;
  	transition: transform 0.3s ease;
	position:relative;
}

.service-item::before {
  	content: "";
  	position: absolute;
  	top: 15px;
  	left: 15px;
  	right: 15px;
  	bottom: 15px;
  	border: 1px solid #F0E4CC; 
  	border-radius: 11px;
}

.service-item img {
  	width: 100px;
  	height: 70px;
  	object-fit: contain;
  	margin-bottom: 20px;
}

.service-item p {
  	font-family: 'Cooper Black', sans-serif;
  	font-size: 20px;
  	color: White;
}

.service-item:hover {
  	transform: scale(1.04);
}

/* CONTACT SECTION */
.contact-section {
    background: linear-gradient(to bottom, #EFDBC0, #E8D0B1);
  	padding: 0px 0px;
}

.contact-title {
  	text-align: center;
  	font-family: 'Cooper Black', sans-serif;
  	font-size: 27px;
  	color: #873C40;
  	margin-bottom: -30px;
  	position: relative;
}

.contact-title::before,
.contact-title::after {
  	content: "";
  	position: absolute;	
	top: 50%;
  	width: 600px;
  	height: 3px;
  	background-color: #B44248;
}

.contact-title::before {
  	left: -1%;
  	transform: translateY(-50%);
}

.contact-title::after {
  	right: -1%;
  	transform: translateY(-50%);
}

.contact-container {
    background: linear-gradient(to bottom, #EFDBC0, #E8D0B1);
  	padding: 80px 20px;
  	font-family: 'Arial ', sans-serif;
  	display: flex;
  	flex-wrap: wrap;  
  	justify-content:space space-between;
  	align-items: flex-start;
	margin-bottom: -50px;
	flex-direction:row;
}

/* LEFT SIDE*/

.contact-left {
  	flex: 1 1 45%;
  	display: flex;
  	gap: 50px;
  	align-items: flex-start;
  	flex-wrap: wrap;
  	margin-left: -65px;
	width:100%;
	text-align: center;
}

.contact-left img {
  	width: 100%;
  	max-width: 450px;
  	border-radius: 0 150px 150px 0px;
  	margin-bottom: 20px;
}

.contact-store{
	margin-top:100px;
}

.contact-details{
	margin-top:80px;
}

.contact-details h3 {
  	font-family: 'Cooper Black', sans-serif;
  	font-size: 22px;
  	color: #4A3B3B;
  	margin-bottom: 20px;
}

.contact-details div {
  	display: flex;
  	align-items: flex-start;
  	gap:12px;
  	margin-bottom: 0px;
}

.contact-details img {
  	width: 18px;
  	margin-top: 4px;
}

.contact-details p {
	text-align: left;
  	font-size: 13px;
  	color: #6B6B6B;
  	line-height: 1.9;
}

.contact-details strong {
	text-align:left;
  	font-weight: bold;
  	display: block;
  	color: #6B6B6B;
}

/* RIGHT SIDE*/

.contact-form{
	margin-top: 40px;
	margin-right: 40px;
    text-align: center;
}

.feedback-title{
  	font-family: 'Cooper Black', sans-serif;
  	font-size: 22px;
  	color: #4A3B3B;
  	margin-bottom: 13px;
	text-align: center;
}

.feedback-subtitle{
	font-family: 'Arial', sans-serif;
  	font-size: 15px;
  	color: #656565;
	text-align: center;
}

.form-row {
  	display: flex;
  	gap: 10px;
  	margin-bottom: 15px;
}

.form-group {
  	flex: 1;
  	display:flex;
  	flex-direction: column;
}

.full-width {
  	width: 100%;
  	margin-bottom: 18px;
}

label {
	text-align:left;
  	font-family: 'Arial', sans-serif;
  	font-size: 12px;
  	margin-bottom: 5px;
  	color: #6B6B6B;
  	display: block;
}

input,
select,
textarea {
  	font-family: 'Arial', sans-serif;
  	font-size: 13px;
 	padding: 15px;
  	border-radius: 11px;
  	border: none;
  	background-color: #FFF9F3;
  	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  	width: 100%;
}

textarea {
  	min-height: 160px;
  	resize: vertical;
}

/* Buttons */
.form-buttons {
  	display: flex;
  	gap: 20px;
  	margin-top: 10px;
}

button {
  	padding: 14px 40px;
  	border-radius: 30px;
  	border: none;
  	font-family: 'Arial Rounded MT Bold', sans-serif;
  	font-size: 14px;
  	cursor: pointer;
	margin-top: 15px;
}

button[type="submit"] {
 	background-color: #873C40;
  	color: white;
}

button[type="submit"]:hover{
	background-color: #EB2228;
	color:#FFFFFF;
}

button[type="reset"] {
  	background-color: #FFFFFF transparent 50%;
  	color: #1A1A1A;
}

button[type="reset"]:hover{
	background-color: #FFFFFF;
	color:#1A1A1A;
}

button:hover {
  	transform: scale(1.04);
  	transition: 0.2s ease;
}

/* FOOTER SECTION */
.footer {
  	background-color: #3B3C3E;
  	color: #DEDCDC;
  	padding: 50px 50px 15px 50px;
  	font-family: 'Arial', sans-serif;
	font-size:11px;
}

.footer-col p:hover{
	color:#FFFFFF;
}

.footer-container {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-between;
  	align-items: flex-start;
  	gap: 5vw;
	max-width: 2000px;
}

/* Logo Area */
.footer-logo img {
  	width: 200px;
	margin-top:-100px;
}

/* Links Section */
.footer-links {
  	display: flex;
  	gap: 9vw;
  	flex-wrap: wrap;
	line-height: 1.9;
	margin-top:30px;
	margin-bottom:-10px;
}

/* Social Media Icons */

.footer-social{
 	display: flex;
 	justify-content: center; 
  	align-items: center; 
  	margin-top: -20px;
	gap:19px;
}

/* Footer Bottom */
.footer-bottom {
  	text-align: center;
  	font-size: 10px;
  	color: #D2CCCC;
  	margin-top: 40px;
}

/* FULL‑SCREEN OVERLAY */
.modal {
  position: fixed;
  inset: 0;                     
  background: rgba(0,0,0,0.6);  
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CENTER BOX */
.modal-content {
  background: #fff;
  border-radius: 32px;
  padding: 40px 20px;
  max-width: 600px;
  width: 90%;
  position: relative;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* CLOSE BUTTON */
.modal-close {
  position: absolute;
  top: 1px;
  right: 1px;
  background: none;
  border: none;
  font-size: 34px;
  cursor: pointer;
  color: #949494;
}

/* HEADING */
.modal-content h3 {
  font-family: 'Cooper Black', sans-serif;
  font-size: 25px;
  margin-bottom: 18px;
  color: #000;
}

/* SUBTEXT */
.modal-content p {
  font-family: 'Arial ', sans-serif;
  font-size: 15px;
  color: #B9B9B9;
  margin-bottom: 6px;
  line-height: 1.5;
}

/* BUTTON ROW */
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* INDIVIDUAL BUTTONS */
.modal-btn {
  padding: 14px 23px;
  border-radius: 24px;
  border: none;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  font-size: 15px;
  background: #ccc;
  color: #333;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.modal-btn:hover {
  background: #7a4242;
	color:#fff;
}

.modal-btn.active {
  background: #7a4242;  /* your Marrybrown red */
  color: #fff;
}