:root {
--primary: #e61e2d;
--secondary: #9a0611;
--white:#fff;
--dark: #1a1a1a;
--cream: #fff3f3;
--cream2: #f5d8d8;
--light: #eeedf2;
--shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);
}
* {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: "Inter", sans-serif;color: #444;background: #fff;overflow-x: hidden;}
h1, h2, h3, h4, h5 {font-family: "Inter", sans-serif;color: var(--dark);}
a {text-decoration: none;transition: all 0.3s;}
img {max-width: 100%;}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb {background: var(--primary);border-radius: 10px;}
.container{max-width: 1440px;}

/*  NAVBAR */
#nav {background: var(--primary);position: sticky;top: 0;z-index: 990;transition: 0.4s;}
#nav.scrolled {box-shadow: 0 4px 30px rgba(0, 0, 0, 0.14);}
.blogo {display: flex;align-items: center;gap: 10px;width: 140px;}
.bico {width: 46px;height: 46px;border-radius: 50%;background: linear-gradient(135deg, var(--primary), var(--secondary));display: flex;align-items: center;justify-content: center;font-size: 1.3rem;color: #fff;box-shadow: 0 4px 15px rgba(232, 40, 26, 0.35);}
.bsub {font-size: 0.62rem;text-transform: uppercase;letter-spacing: 2px;color: #aaa;}
.navbar-nav .nav-link {font-size:1rem;font-weight: 600;color: var(--white) !important;padding: 0px 13px !important;position: relative;}
.navbar-nav .nav-link::after {content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 0;height: 3px;background: var(--primary);border-radius: 3px 3px 0 0;transition: 0.3s;}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {width: 55%;}
.navbar-nav .nav-link:hover {color: var(--white) !important;}
#navSearchBtn {background: var(--white);border: none;cursor: pointer;color: var(--dark);font-size: 18px;padding: 8px 15px;border-radius: 28px;transition: 0.3s;font-weight: 500;}
#navSearchBtn:hover {background: var(--white);color: var(--dark);}
.nav-cta {background: var(--dark);color: var(--white)!important;border-radius: 50px;padding: 12px 15px !important;font-size: 1rem !important;font-weight: 500 !important;box-shadow: 0 4px 15px rgba(232, 40, 26, 0.3);margin-left: 6px;}
.nav-cta::after {display: none !important;}
.nav-cta:hover {box-shadow: 0 8px 22px rgba(232, 40, 26, 0.4);color: var(--white);}

/*  SECTION COMMONS */
section {padding: 88px 0;}
.slbl {font-family: "Dancing Script", cursive;font-size: 2rem;color: var(--primary);display: block;margin-bottom: 4px;font-weight: 600;}
.stitle {font-size: clamp(1.9rem, 4vw, 2.7rem);font-weight: 700;line-height: 1.2;margin-bottom: 12px;}
.stitle span {color: var(--primary);}
.sline {width: 58px;height: 4px;border-radius: 4px;background: linear-gradient(90deg, var(--primary), var(--secondary));margin: 0 auto 12px;}
.sline.lft {margin-left: 0;}
.sdesc {color: #777;font-size: 0.93rem;line-height: 1.8;}
.btn-red {background: linear-gradient(135deg, var(--primary), var(--secondary));color: var(--white);border: none;border-radius: 50px;padding: 10px 20px;font-weight: 600;font-size: 0.93rem;box-shadow: 0 8px 24px rgba(232, 40, 26, 0.35);transition: 0.3s;display: inline-flex;align-items: center;gap: 9px;cursor: pointer;}
.btn-red:hover {transform: translateY(-3px);box-shadow: 0 14px 34px rgba(232, 40, 26, 0.45);color: var(--white);}

/*  HERO */
#hero {background: var(--primary);min-height: 700px;display: flex;align-items: center;position: relative;overflow: hidden;}
.hbgtxt {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 22vw;font-weight: 900;color: rgba(0, 0, 0, 0.04);pointer-events: none;white-space: nowrap;}
.hs {position: absolute;}
.hs1 {width: 250px;top:100px;left:0px;animation: fsh 8s ease-in-out infinite;}
.hs2 {width: 250px;top: 35%;bottom:0;right: 0;animation: fsh 10s ease-in-out infinite reverse;}
@keyframes fsh {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-28px);}
}

.htitle {font-size:clamp(2.6rem, 6vw, 3.6rem);font-weight: 700;line-height: 1.1;margin-bottom: 18px;color: var(--white);}
.htitle .hl {color: var(--white);position: relative;display: inline-block;}
.htitle .hl::before {content: "";position: absolute;bottom: 2px;left: 0;right: 0;height: 7px;background: rgba(232, 40, 26, 0.14);border-radius: 4px;z-index: -1;}
.hdesc {font-size: 1.8rem;color: var(--white);;line-height: 1.2;max-width: 650px;margin:0 auto 40px;text-align: center;}

/*  MARQUEE */
.mqsec {background: var(--primary);padding: 13px 0;overflow: hidden;}
.mqtrack {display: flex;gap: 38px;white-space: nowrap;animation: mqrun 22s linear infinite;will-change: transform;transform: translateZ(0);}
.mqitem {display: inline-flex;align-items: center;gap: 10px;color: #fff;font-size: 1rem;font-weight: 600;}
.mqitem i {color: rgba(255, 255, 255, 0.55);font-size: 0.55rem;}
@keyframes mqrun {
from {transform: translateX(0);}
to {transform: translateX(-50%);}
}

/*  CATEGORY */
#category {background: var(--white); position: relative;}
.hs3 {width: 120px;top:100px;left:0px;animation: fsh 8s ease-in-out infinite;}
.hs4 {width: 120px;top: 70%;bottom:0;right: 0;animation: fsh 10s ease-in-out infinite reverse;}
.catcard {background: #fff;border-radius: 15px;padding: 22px 14px;text-align: center;cursor: pointer;transition: 0.4s;box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);border: 2px solid transparent;}
.catcard:hover,
.catcard.active {transform: translateY(-7px);box-shadow: 0 14px 38px rgba(232, 40, 26, 0.14);border-color: var(--primary);}
.catimg {width: 86px;height: 86px;border-radius: 50%;object-fit: cover;margin: 0 auto 12px;display: block;transition: 0.4s;}
.catcard:hover .catimg {transform: scale(1.1) rotate(-4deg);}
.catnm {font-size: 0.86rem;font-weight: 600;color: var(--dark);margin-bottom: 3px;}
.catct {font-size: 0.73rem;color: #bbb;}

/*  MENU */
#menu {background: var(--light); position: relative;}
.filtbtn {border: 2px solid #e5e5e5;background: #fff;border-radius: 50px;padding: 8px 20px;font-size: 0.84rem;font-weight: 600;color: #666;cursor: pointer;transition: 0.3s;margin: 3px;}
.filtbtn.active,
.filtbtn:hover {background: var(--primary);border-color: var(--primary);color: #fff;box-shadow: 0 5px 18px rgba(232, 40, 26, 0.24);}
.mwrap {transition: 0.35s;}
.mwrap.gone {display: none !important;}
.mcard {background: #fff;border-radius: 18px;overflow: hidden;transition: 0.4s;box-shadow:var(--shadow);cursor: pointer;}
.mcard:hover {transform: translateY(-9px);box-shadow: 0 18px 48px rgba(0, 0, 0, 0.13);}
.mimg {position: relative;overflow: hidden;height: 215px;background: var(--cream2);}
.mimg img {width: 100%;height: 100%;object-fit: cover;transition: 0.5s;}
.mcard:hover .mimg img {transform: scale(1.09);}
.mbdg {position: absolute;top: 13px;left: 13px;background: var(--primary);color: #fff;border-radius: 7px;padding: 3px 11px;font-size: 0.7rem;font-weight: 700;}
.mbdg.new {background: var(--green);}
.mbdg.hot {background: var(--secondary);color: var(--dark);}

.mhrt {position: absolute;top: 13px;right: 13px;width: 33px;height: 33px;border-radius: 50%;background: #fff;display: flex;align-items: center;justify-content: center;color: #ccc;cursor: pointer;transition: 0.3s;box-shadow: 0 2px 9px rgba(0, 0, 0, 0.1);}
.mhrt:hover {color: var(--primary);transform: scale(1.18);}
.mbody {padding: 18px;}
.mcat {font-size: 0.7rem;font-weight: 600;color: var(--secondary);text-transform: uppercase;letter-spacing: 1px;margin-bottom: 5px;}
.mtit {font-size: 1.05rem;font-weight: 700;margin-bottom: 5px;}
.mdesc {font-size: 0.78rem;color: var(--dark);margin-bottom: 13px;line-height: 1.5;}
.mfoot {display: flex;align-items: center;justify-content: space-between;}
.mprice {font-size: 1.25rem;font-weight: 800;color: var(--primary);}
.mprice small {font-size: 0.72rem;font-weight: 400;color: #ccc;text-decoration: line-through;margin-left: 5px;}
.mstars {font-size: 0.73rem;color: var(--secondary);}

.madd {width: 36px;height: 36px;border-radius: 50%;background: linear-gradient(135deg, var(--primary), #c01e12);border: none;color: #fff;font-size: 1rem;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: 0.3s;box-shadow: 0 4px 11px rgba(232, 40, 26, 0.28);}
.madd:hover {transform: scale(1.15) rotate(90deg);}

/*  SPECIAL OFFER */
#special {background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 80%);position: relative;overflow: hidden;}
.spbg {position: absolute;inset: 0;pointer-events: none;opacity: 0.03;background: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 40px 40px;}
.sptag {display: inline-block;background: var(--secondary);color: var(--dark);border-radius: 6px;padding: 4px 15px;font-size: 0.76rem;font-weight: 700;text-transform: uppercase;letter-spacing: 2px;margin-bottom: 14px;}
.sptitle {font-size: clamp(2.3rem, 5vw, 3.8rem);font-weight: 700;color:var(--white);line-height: 1.1;}
.sptitle span {color: var(--secondary);}
.spdesc {color: var(--white);margin: 30px 0 40px;font-size: 20px;font-weight: 700;line-height: 1.5;}
.cdwrap {display: flex;gap: 14px;justify-content: center;}
.cditem {text-align: center;background: rgba(255, 255, 255, 0.07);border: 1px solid rgba(255, 255, 255, 0.11);border-radius: 20px;padding: 5px 5px;width: 190px;}
.cdnum {font-size: 2.1rem;font-weight: 900;color: #fff;display: block;line-height: 1;}
.cdlbl {font-size: 0.63rem;text-transform: uppercase;letter-spacing: 1px;color: rgba(255, 255, 255, 0.48);margin-top: 3px;display: block;}
.spimgw {position: relative;text-align: center;}
.spglow {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 360px;height: 360px;border-radius: 50%;background: radial-gradient(circle, rgba(246, 166, 35, 0.24), transparent 70%);}
.spimgw img {position: relative;z-index: 2;width: 100%;max-width:100%;filter: drop-shadow(0 28px 56px rgba(246, 166, 35, 0.28));animation: fltimg 5s ease-in-out infinite;}
@keyframes fltimg {
0%, 100% {transform: translateY(0);}
50% { transform: translateY(-17px);}
}
.sppbdg {position: absolute;top: 18px;left: 18px;z-index: 3;background: var(--primary);color: #fff;width: 86px;height: 86px;border-radius: 50%;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;box-shadow: 0 8px 24px rgba(232, 40, 26, 0.5);animation: plsbdg 2.5s ease-in-out infinite;}
@keyframes plsbdg {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.06);box-shadow: 0 12px 34px rgba(232, 40, 26, 0.7);}
}
.sppbdg .old {font-size: 0.68rem;text-decoration: line-through;opacity: 0.7;}
.sppbdg .np {font-size: 1.25rem;font-weight: 900;}
#restaurant{position: relative;}
/*  FOOTER  */
footer {background: var(--light);padding: 68px 0 0;}
.fnm {width:140px;}
.fnm span {color: var(--primary);}
.fdesc {color:var(--dark);font-size: 0.86rem;line-height: 1.8;margin-top: 9px;}
.fsoc {display: flex;gap: 9px;margin-top: 18px;}
.fsoc a {width: 36px;height: 36px;border-radius: 9px;background: rgba(255, 255, 255, 0.5);display: flex;align-items: center;justify-content: center;color: var(--primary);font-size: 1rem;transition: 0.3s;}
.fsoc a:hover {background: var(--primary);color: #fff;transform: translateY(-3px);}
.ftit {color:var(--dark);font-size: 0.95rem;font-weight: 700;margin-bottom: 18px;padding-bottom: 9px;border-bottom: 2px solid var(--primary);display: inline-block;}
.flinks li {list-style: none;margin-bottom: 9px;}
.flinks a {color: var(--dark);font-size: 0.86rem;display: inline-flex;align-items: center;gap: 7px;transition: 0.3s;}
.flinks a:hover {color: var(--primary);padding-left: 5px;}
.flinks a i {color: var(--primary);font-size: 0.68rem;}
.fci {display: flex;align-items: flex-start;gap: 11px;margin-bottom: 14px;}
.fciico {width: 34px;height: 34px;border-radius: 7px;background: rgba(232, 40, 26, 0.14);display: flex;align-items: center;justify-content: center;color: var(--primary);font-size: 1rem;flex-shrink: 0;}
.fciinfo {color: var(--dark);font-size: 0.83rem;line-height: 1.6;}
.fciinfo strong {color: var(--dark);display: block;font-size: 0.77rem;font-weight: 600;}
.fbot {border-top: 1px solid rgba(0, 0, 0, 0.3);padding: 18px 0;margin-top: 46px;}
.fbot p {color: var(--dark);font-size: 18px;margin: 0;font-weight: 600;}
.fbot span {color: var(--primary);}
.fbot a {color: #555;font-size: 0.8rem;margin-left: 18px;}
.fbot a:hover {color: var(--secondary);}

.lines-icon:hover, .language-picker__button:hover, .icon-link:hover{background: #ff8000; color: #fff;}
.language-picker{position:relative;display:inline-block;}
.language-btn{width:45px;height:45px;border:none;border-radius:50%;cursor:pointer;background:var(--white);font-size:24px;}
.language-dropdown{position:absolute;top:50px;left:0;background:#fff;border:1px solid #ddd;min-width:100px;display:none;box-shadow:0 5px 15px rgba(0,0,0,.15);border-radius: 10px;}
.language-dropdown.active{display:block;}
.language-dropdown a{display:block;padding:5px 8px;text-decoration:none;color:var(--dark);font-size: 14px;}
.language-dropdown a:hover{background:var(--white);border-radius: 10px;}
.search-local {position:relative;width: 70%;display: flex;align-items: center;padding-left: 1rem;background: #fbfbfb;border-radius:50px;height: 60px;border-right: none;margin: 0 auto; box-shadow: var(--shadow-lg);}
.search-local input {height: 100%;width: 100%;flex: 1 1 25rem;background: #fbfbfb;display: flex;outline: none;border: none;color: #222;font-size: 1rem;padding-right:1rem;}
input[type="text"]::placeholder {color: var(--dark);font-size: 1rem;}
.search-local button {background:var(--dark);color:var(--white);border: none;border-radius: 50px;margin-right:2px;font-weight: 500;font-size: 1rem;height: 56px;width: 8rem;cursor: pointer;transition: all 0.3s;text-align: center;text-decoration: none;}
.search-local button a{text-decoration: none;}
.search-local button a:hover{color:var(--white);}
.search-local button a {color:var(--white)!important;}
.search-local button .search-icon {display: none;}
.search-local button:hover {text-decoration: none;color:var(--white); background: var(--secondary);}
#suggestions{ position:absolute;top:100%;left:40px;width:75%;background:var(--white);border-radius:0 0 20px 20px; box-shadow:0 8px 20px rgba(0,0,0,.15); z-index:999;display:none;overflow:hidden;}
.suggestion-item{padding:12px 15px;cursor:pointer;border-bottom:1px solid #eee;display:flex;align-items:center;gap:10px;}
.suggestion-item:last-child{ border-bottom:none;}
.suggestion-item:hover{background:var(--cream);}
.suggestion-item i{color:var(--primary);}


.icon {color:var(--primary);font-size: 2rem;display: flex;align-items: center;cursor: pointer;}
.step-card {position: relative;height: 100%;padding: 35px 25px 30px;border: 1px solid var(--cream2);border-radius: 18px;background:var(--white);display: flex;flex-direction: column;box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);transition: 0.4s;}
.step-card:hover{transform: translateY(-7px);box-shadow: 0 14px 38px rgba(232, 40, 26, 0.14);border-color: var(--cream);}
.step-number {position: absolute;top: 15px;left: 15px;width: 42px;height: 42px;background: var(--primary);border-radius: 50%;color: var(--white);font-size: 22px;font-weight: 700;display: flex;align-items: center;justify-content: center;}
.step-title {display: flex;align-items: center;gap: 10px;margin-left: 55px;margin-bottom: 30px;}
.step-title img {width: 22px;height: 22px;object-fit: contain;}
.step-title h3 {font-size: 18px;font-weight: 600;color: var(--dark);margin: 0;}
.step-content {display: flex;align-items: flex-start;gap: 20px;flex: 1;}
.step-icon {width: 95px;min-width: 95px;height: 95px;background:var(--cream);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.step-icon img {max-width: 55px;max-height: 55px;object-fit: contain;}
.step-text p {margin: 0;font-size: 16px;line-height: 1.5;color: var(--dark);}
.step-footer {margin-top: auto;padding-top: 20px;color: #ff002f;font-size:16px;font-weight: 700;line-height: 1.4;text-align: center;}
#btt {position: fixed;bottom: 28px;right: 28px;z-index: 9990;width: 44px;height: 44px;border-radius: 11px;background: linear-gradient(135deg, var(--primary), #c01e12);color: #fff;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 0.95rem;box-shadow: 0 6px 18px rgba(232, 40, 26, 0.38);opacity: 0;transform: translateY(18px);transition: 0.4s;}
#btt.show {opacity: 1;transform: translateY(0);}
#btt:hover {transform: translateY(-4px) !important;}

/******* RESPONSIVE *******/
@media (max-width: 991px) {
.hcircle {width: 320px;height: 320px;}
.fc1, .fc2, .fc3 {transform: scale(0.82);transform-origin: center;}
.ggrid {grid-template-columns: 1fr 1fr;grid-template-rows: auto;}
.gitem:first-child {grid-row: span 1;}
.asm {display: none;}
.mpbox .mpimg,
.mpbox .mpbody {width: 100%;}
.mpbox .mpimg {border-radius: 22px 22px 0 0;min-height: 240px;}
.mpbox .mpbody {padding: 22px 18px;}
.step-card {margin-bottom: 20px;}
.step-text p {font-size: 16px;}
.step-footer {font-size: 18px;}
}

@media (max-width: 767px) {
section {padding: 55px 0;}
#hero{min-height: 450px; padding-bottom: 0;}
.hs1, .hs2{width:90px;height:120px; top:20px;}
.hcircle {width: 260px;height: 260px;}
.htitle {font-size: 2rem;}
.blogo{width: 140px;}
.hdesc{font-size: 1rem;margin: 0 auto 20px;}
.search-local{width: 95%;}
.search-local input, .search-local button{font-size: 1rem;}
.step-number{top:25px;}
.offer-frame{flex-direction: column-reverse;}
/*.spimgw img{max-width: 200px;}*/
.fbot p{text-align: center; font-size: 16px;}
#navmenu{display: flex; justify-content: space-between;}
.navbar-nav{margin-left: 0!important;}
.navbar-nav .nav-link{font-size: 16px;padding: 5px 0px !important;}
#navSearchBtn{font-size: 14px;padding: 7px 12px;}
#nav .container{justify-content: center;}
.navbar-brand{margin-right: 0;}
.language-dropdown{left:-50px;}
.fcard.fc1, .fcard.fc2, .fcard.fc3 {display: none !important;}
.hstats {display: none !important;}
.ggrid {grid-template-columns: 1fr 1fr;}
.cdwrap {gap: 8px;}
.cditem {min-width: 56px;padding: 9px;}
.nl-form-wrap {flex-direction: column;padding: 0 8px;}
.nlinput, .nlbtn {width: 100%;border-radius: 12px;}
.fcard {padding: 22px 18px;}
.step-content {flex-direction: column;text-align: center;}
.step-icon {margin: auto;}
.step-title {margin-left: 50px;}
.step-footer {text-align: center;}
.step-title h3 {font-size: 16px;}
}

@media (max-width: 480px) {
.hcircle {width: 220px;height: 220px;}
.htitle {font-size: 2rem;}
.stitle {font-size: 1.8rem;}
}