@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
:root {
--primary-orange: #fc8a06;
--primary-orange-hover: #e57a05;
--primary-orange-light: rgba(252, 138, 6, 0.13);
--dark-bg: #18181b;
--darker-bg: #09090b;
--green-500: #10b981;
--green-50: #dbdfd0;
--blue-500: #3b82f6;
--red-500: #ef4444;
--text-muted: #6b7280;
--text-light: #d1d5dc;
--border-color: #e5e7eb;
--overlay-bg: rgba(0, 0, 0, 0.6);
--button-overlay: rgba(255, 255, 255, 0.1);
--border-gray: #4a5565;
--orange-light: rgba(252, 138, 6, 0.13);
--input-bg: #f3f3f5;
--input-placeholder: #717182;
--white: #ffffff;
--black: #000000;
--zinc-950: #18181b;
--zinc-900: #27272a;
--zinc-800: #4a5565;
--zinc-700: #52525b;
--zinc-600: #71717a;
--zinc-500: #a1a1aa;
--zinc-400: #d4d4d8;
--zinc-300: #e4e4e7;
--zinc-200: #e5e7eb;
--zinc-100: #f4f4f5;
--zinc-50: #fafafa;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--text-primary: #18181b;
--text-secondary: #6b7280;
--text-muted: #50545e;
--text-light: #99a1af;
--text-white: #ffffff;
--text-gray-light: #e5e7eb;
--background-light: #f9fafb;
--border-light: #e5e7eb;
--overlay-dark: rgba(0, 0, 0, 0.6);
--star-gold: #fdc700;
--star-empty: #d1d5dc;
--gray-950: #030712;
--gray-300: #d1d5db;
--text-white: #ffffff;
--text-black: #000000;
--color-red: #ad343e;
--color-green: #22c55e;
--backdrop-blur: blur(45px);
--container-max-width: 1320px;
--container-padding: 16px;
--section-spacing: 50px;
--border-radius: 16px;
--border-radius-full: 9999px;
--border-radius-large: 24px;
--border-radius-small: 8px;
--font-poppins: "Poppins", sans-serif;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-8: 32px;
--spacing-9: 38px;
--spacing-10: 40px;
--spacing-12: 48px;
--spacing-15: 60px;
--spacing-16: 64px;
--spacing-20: 80px;
--spacing-24: 96px;
--spacing-32: 128px;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 40px;
--text-5xl: 60px;
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-full: 999px;
--shadow-primary: 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-sm: 0px 4px 6px 0px rgba(255, 255, 255, 0.15);
--shadow-md: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-lg: 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
0px 8px 10px -6px rgba(0, 0, 0, 0.1);
--shadow-delivery-card: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-contact-card: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -4px rgba(0, 0, 0, 0.1);
--transition-fast: 0.3s ease;
--transition-normal: 0.5s ease;
--transition-slow: 350ms ease-in-out;
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite; 
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-poppins) !important;
font-weight: var(--font-weight-normal);
line-height: var(--leading-normal);
background-color: var(--white);
color: var(--zinc-900);
min-height: 100vh;
}
img {
max-width: 100%;
height: auto;
display: block;
}
section {
width: 100%;
background-color: var(--white);
padding-top: 0;
padding-bottom: 0px;
margin-bottom: 60px;
}
a {
color: inherit;
text-decoration: none;
}
.section-content {
display: flex;
flex-direction: column;
gap: 28px;
}
.section-title.center {
text-align: center;
}
.section-spacer {
height: var(--section-spacing);
}
.main {
width: 100%;
}
.loader-wrapper{
display: flex;
justify-content: center;
padding: 32px;
}
.marquee-section {
background-color: #000000;
padding: 0.375rem 0;
}
.marquee-container-wrapper {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--container-padding);
}
.marquee-flex {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.marquee-container {
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.marquee-content {
display: flex;
gap: 1rem;
animation: marquee 20s linear infinite;
}
.marquee-content > p {
color: var(--text-white) !important;
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
line-height: 1;
padding-left: 0.5rem;
border-left: 1px solid white;
}
.marquee-content > p:first-child {
border-left: none;
padding-left: 0;
}
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.preview-website-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
.header-main {
box-shadow: var(--shadow-sm);
}
.header-main.bg-gray {
background-color: var(--gray-950);
}
.header-main.bg-white {
background-color: var(--text-white);
}
@media (min-width: 1024px) {
.header-main {
box-shadow: none;
}
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--container-padding);
width: 100%;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-4) 0;
}
@media (max-width: 768px) {
.header-content {
padding: var(--spacing-2) 0;
}
}
.logo-wrapper {
display: flex;
align-items: center;
gap: 2rem;
}
.logo-link {
display: block;
text-align: center;
}
@media (min-width: 768px) {
.logo-link {
max-width: 200px;
text-align: left;
}
}
@media (min-width: 1024px) {
.logo-link {
text-align: center;
}
}
.logo-text {
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
}
.logo-text.text-white {
color: var(--text-white);
}
.logo-text.text-black {
color: var(--text-black);
}
.logo-with-icon {
display: flex;
gap: 0.5rem;
align-items: center;
}
.logo-icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
}
.logo-icon.text-white {
color: var(--text-white);
}
.logo-icon.text-black {
color: var(--text-black);
}
.logo-image-container {
height: 3rem;
display: flex;
align-items: center;
}
@media (min-width: 1024px) {
.logo-image-container {
height: 6rem;
justify-content: center;
}
}
.logo-background-wrapper {
display: flex;
align-items: center;
height: 100%;
}
.logo-background {
border-radius: 9999px;
padding: 1rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
height: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.logo-background.bg-gray {
background-color: var(--gray-950);
}
.logo-background.bg-white {
background-color: white;
}
.logo-image {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
object-fit: contain;
}
.header-buttons {
display: none;
align-items: flex-end;
gap: 0.75rem;
align-items: center;
}
@media (min-width: 1280px) {
.header-buttons {
display: flex;
}
}
.translate-container {
width: 100%;
max-width: 200px;
height: 2.75rem;
overflow: hidden;
}
.btn-outline {
display: flex;
align-items: center;
padding: 0.625rem 1.5rem;
border: 2px solid currentColor;
background-color: transparent;
border-radius: 9999px;
font-weight: var(--font-weight-bold);
transition: all var(--transition-normal);
cursor: pointer;
font-size: var(--text-base);
}
.btn-outline:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-outline.text-black {
color: var(--text-black);
}
.btn-outline.text-white {
color: var(--text-white);
border-color: var(--text-white);
}
.btn-outline.text-white:hover:not(:disabled) {
background-color: var(--text-white);
color: var(--text-black);
}
.btn-primary {
display: flex;
align-items: center;
padding: 0.625rem 1.5rem;
border: 1px solid var(--color-red);
background-color: var(--color-red);
border-radius: 9999px;
font-weight: var(--font-weight-bold);
color: var(--text-white);
transition: all var(--transition-normal);
cursor: pointer;
font-size: var(--text-base);
}
.btn-primary:hover:not(:disabled) {
border-color: var(--color-green);
background-color: var(--text-white);
color: var(--text-black);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.spinner {
margin-right: 0.5rem;
height: 1rem;
width: 1rem;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
@media (min-width: 768px) and (max-width: 1279px) {
.toggle {
display: block;
}
}
.toggle.text-white {
color: var(--text-white);
}
.toggle.text-black {
color: var(--text-black);
}
.toggle svg {
width: 2.25rem;
height: 2.25rem;
}
.nav-section {
display: none;
}
@media (min-width: 1280px) {
.nav-section {
display: block;
}
}
.nav-links {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-link {
color: var(--text-white);
text-decoration: none;
font-size: var(--text-lg);
font-weight: var(--font-weight-medium);
border-radius: var(--border-radius-small);
transition: all var(--transition-fast);
display: block;
}
.nav-link:hover {
color: var(--primary-orange);
}
.nav-link.active {
color: var(--primary-orange);
}
.menu-overlay {
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
z-index: 20;
}
.menu-overlay.active {
display: block;
}
@media (min-width: 1280px) {
.menu-overlay {
display: none !important;
}
}
.mobile-menu {
max-width: 320px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding-bottom: 2rem;
box-shadow: var(--shadow-lg);
transform: translateX(-100%);
transition: transform var(--transition-normal);
overflow-y: auto;
height: 100%;
z-index: 20;
}
.mobile-menu.active {
transform: translateX(0);
}
.mobile-menu.bg-gray {
background-color: var(--gray-950);
}
.mobile-menu.bg-white {
background-color: var(--text-white);
}
@media (min-width: 1280px) {
.mobile-menu {
display: none !important;
}
}
.mobile-menu-header {
padding: 1rem;
}
.mobile-menu-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.close-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn svg {
width: 2rem;
height: 2rem;
}
.close-btn.text-white {
color: var(--text-white);
}
.close-btn.text-black {
color: var(--text-black);
}
.mobile-nav-links {
list-style: none;
margin: 0;
padding: 1.5rem 0;
}
.mobile-nav-links li {
padding: 1rem;
}
.mobile-nav-links .nav-link {
display: block;
}
.mobile-nav-links .nav-link.text-white {
color: var(--text-white);
}
.mobile-menu-buttons {
display: inline-flex;
flex-direction: column;
gap: 1rem;
padding: 0 1rem;
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
overflow-y: auto;
z-index: 50;
padding: 1.25rem;
display: none;
}
.modal.active {
display: block;
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.modal-content {
position: relative;
width: 100%;
max-width: 1000px;
background-color: var(--text-white);
border-radius: 1.25rem;
overflow: hidden;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
background-color: var(--color-red);
border-bottom-left-radius: 0.5rem;
color: var(--text-white);
padding: 0.25rem;
border: none;
cursor: pointer;
z-index: 10;
transition: background-color var(--transition-normal);
}
.modal-close:hover {
background-color: #b91c1c;
}
@media (min-width: 640px) {
.modal-close {
padding: 0.5rem;
}
}
.modal-close svg {
width: 1.25rem;
height: 1.25rem;
transition: all var(--transition-normal);
}
@media (min-width: 640px) {
.modal-close svg {
width: 1.5rem;
height: 1.5rem;
}
}
.modal-iframe-wrapper {
width: 100%;
height: calc(100vh - 2rem);
overflow: hidden;
border-radius: 1.25rem;
}
.modal-iframe {
width: 100%;
height: 100%;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
.hidden {
display: none;
}
.max-lg-hidden {
display: none;
}
@media (min-width: 1024px) {
.max-lg-hidden {
display: block;
}
}
body.modal-open {
overflow: hidden;
}
.button {
border: none;
border-radius: var(--border-radius-full);
padding: 12px 24px;
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
font-family: inherit;
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.button {
padding: 8px 20px;
}
}
.button-outline {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid var(--gray-500);
color: var(--text-white);
}
.button-outline:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.button-primary {
background-color: var(--primary-orange);
color: var(--text-white);
}
.button-primary:hover {
background-color: var(--primary-orange-hover);
}
.button-secondary {
background: var(--white);
color: var(--black);
border: 1px solid var(--zinc-800);
}
.button-secondary:hov {
background-color: var(--primary-orange);
color: var(--text-white);
}
.hero-section {
position: relative;
width: 100%;
border-bottom-left-radius: var(--border-radius-large);
border-bottom-right-radius: var(--border-radius-large);
overflow: hidden;
margin-bottom: 60px;
padding-top: 300px;
padding-bottom: 155px;
}
@media (max-width: 1280px) {
.hero-section {
padding-top: 250px;
padding-bottom: 105px;
}
}
@media (max-width: 1023px) {
.hero-section {
padding-top: 140px;
padding-bottom: 85px;
}
}
@media (max-width: 768px) {
.hero-section {
padding-top: 125px;
padding-bottom: 95px;
margin-bottom: 40px;
}
}
.hero-background {
position: absolute;
inset: 0;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
inset: 0;
background-color: var(--overlay-dark);
}
.hero-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 var(--container-padding);
text-align: center;
}
.hero-text {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 800px;
width:100%;
}
.hero-heading {
display: flex;
flex-direction: column;
gap: 20px;
}
.hero-heading h1 {
font-size: var(--text-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-white);
line-height: 60px;
}
.hero-heading p {
font-size: var(--text-xl);
color: var(--text-gray-light);
line-height: 28px;
font-weight: var(--font-weight-normal);
}
.hero-cards {
display: flex;
gap: 16px;
justify-content: center;
}
.hero-card {
background-color: var(--white);
border-radius: var(--border-radius);
padding: 16px;
max-width: 248px;
width: 100%;
box-shadow: var(--shadow-md);
transition: all var(--transition-fast);
}
.hero-card:hover {
opacity: 0.9;
transform: translateY(-5px);
cursor: pointer;
}
.hero-card-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-card-header {
display: flex;
align-items: center;
gap: 12px;
}
.hero-card-icon {
border-radius: 50%;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-card-icon-dark {
background-color: var(--zinc-950);
color: var(--text-white);
}
.hero-card-icon-orange {
background-color: var(--primary-orange);
color: var(--text-white);
}
.hero-card-header .title {
font-size: var(--text-base);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.hero-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.hero-card-footer span {
font-size: var(--text-sm);
color: var(--text-primary);
font-weight: var(--font-weight-normal);
}
.hero-card-footer-orange {
color: var(--primary-orange) !important;
}
.swiper-container-wrapper {
position: relative;
}
.swiper.offer-slider {
padding: 30px 10px;
margin: -30px -10px;
}
@media (min-width: 1024px) {
.swiper-container-wrapper {
padding: 0 60px;
}
.swiper-container-wrapper.no-navigation {
padding: 0;
}
.swiper.offer-slider {
padding: 30px 10px;
margin: -30px -10px;
}
}
.offer-card {
background-color: var(--white);
border-radius: var(--border-radius);
overflow: hidden;
border: 2px solid var(--border-light);
box-shadow: var(--shadow-primary);
height: auto !important;
max-width: 286px;
}
.offer-card-content {
height: 100%;
display: flex;
flex-direction: column;
}
.offer-image {
height: 160px;
width: 100%;
overflow: hidden;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.offer-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.offer-text {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.offer-text h3 {
font-size: var(--text-lg);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: 28px;
}
.offer-text p {
font-size: var(--text-sm);
color: var(--text-secondary);
font-weight: var(--font-weight-normal);
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.swiper-button-prev,
.swiper-button-next {
display: none; 
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background-color: var(--white);
color: #000000 !important;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
align-items: center;
justify-content: center;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.swiper-button-prev svg,
.swiper-button-next svg {
height: auto !important;
width: 30% !important;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background-color: var(--primary-orange);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 16px;
font-weight: bold;
color: var(--text-primary);
}
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
color: var(--white);
}
.swiper-button-prev {
left: -22px;
}
.swiper-button-next {
right: -22px;
}
@media (min-width: 1024px) {
.swiper-button-prev {
left: 8px;
}
.swiper-button-next {
right: 8px;
}
}
.swiper-button-disabled {
opacity: 0.35;
cursor: not-allowed;
}
.swiper-button-disabled:hover {
background-color: var(--white);
}
.swiper-button-disabled:hover::after {
color: var(--text-primary);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.step-card {
background-color: var(--white);
border-radius: var(--border-radius-large);
border-bottom: 4px solid var(--primary-orange);
box-shadow: var(--shadow-primary);
padding: 20px;
}
.step-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.step-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.step-number {
background-color: var(--primary-orange);
border-radius: 50%;
width: 43px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
}
.step-image {
width: 96px;
height: 96px;
}
.step-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius-small);
}
.step-text {
display: flex;
flex-direction: column;
gap: 24px;
}
.step-text h3 {
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
color: var(--black);
}
.step-text p {
font-size: var(--text-base);
color: var(--text-muted);
font-weight: var(--font-weight-normal);
line-height: 21.28px;
}
.working-hours-card {
display: grid;
grid-template-columns: 1fr 1fr;
height: auto;
background-color: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--shadow-primary);
overflow: hidden;
}
.working-hours-left {
position: relative;
max-height: 400px;
}
.working-hours-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.working-hours-overlay {
position: absolute;
inset: 0;
background-color: var(--overlay-dark);
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px;
gap: 32px;
}
.working-hours-btn-wrapper {
display: flex;
gap: 12px;
align-items: flex-start;
}
.working-hours-title {
font-size: var(--text-4xl);
font-weight: var(--font-weight-bold);
color: var(--text-white);
line-height: 45px;
}
.working-hours-right-title {
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
color: var(--black);
}
.working-hours-right {
flex: 1;
padding: 36px;
display: flex;
flex-direction: column;
gap: 16px;
}
.working-hours-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.working-hours-item {
background-color: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--shadow-primary);
padding: 16px;
}
.working-hours-item-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
}
@media screen and (max-width: 700px) {
.working-hours-item-content {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.working-hours-day {
font-size: var(--text-base) !important;
}
.working-hours-btn-wrapper {
gap: 12px;
flex-direction: column;
}
}
.working-hours-info {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.working-hours-icon {
color: var(--primary-orange);
}
.working-hours-day {
font-size: var(--text-lg);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.working-hours-label {
font-size: var(--text-sm);
color: var(--text-secondary);
font-weight: var(--font-weight-normal);
}
.working-hours-time {
font-size: var(--text-base);
font-weight: var(--font-weight-bold);
color: var(--primary-orange);
white-space: nowrap;
}
.working-hours-note {
font-size: var(--text-sm);
font-style: italic;
color: var(--text-secondary);
font-weight: var(--font-weight-normal);
margin-top: auto;
}
.story-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
justify-content: space-between;
}
.story-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
}
.story-text p {
font-size: var(--text-base);
color: var(--text-secondary);
line-height: 26px;
font-weight: var(--font-weight-normal);
}
.story-image {
max-height: 500px;
flex-shrink: 0;
}
.story-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius);
box-shadow: var(--shadow-primary);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.gallery-item {
height: 256px;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-primary);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-fast);
}
.gallery-item:hover img {
transform: scale(1.05);
}
.allergens-card {
background-color: var(--background-light);
border-radius: var(--border-radius);
padding: 32px;
}
.allergens-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
text-align: center;
}
.allergens-content p {
font-size: var(--text-base);
color: var(--text-secondary);
line-height: 24px;
max-width: 660px;
font-weight: var(--font-weight-normal);
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.review-card {
background-color: var(--white);
border-radius: var(--border-radius);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-primary);
padding: 24px;
}
.review-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.review-header {
display: flex;
align-items: center;
gap: 16px;
}
.review-avatar {
background-color: var(--primary-orange-light);
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-orange);
font-size: var(--text-lg);
font-weight: var(--font-weight-bold);
}
.review-info h3 {
font-size: var(--text-base);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.review-info p {
font-size: var(--text-sm);
color: var(--text-secondary);
font-weight: var(--font-weight-normal);
}
.review-rating {
display: flex;
align-items: center;
gap: 8px;
}
.stars {
display: flex;
line-height: 20px;
}
.star {
width: 20px;
height: 20px;
font-size: 20px;
}
.star.filled {
color: var(--star-gold);
}
.star.empty {
color: var(--star-empty);
}
.rating-text {
font-size: var(--text-sm);
color: var(--text-secondary);
font-weight: var(--font-weight-normal);
}
.review-text {
font-size: var(--text-base);
color: var(--gray-700);
line-height: 26px;
font-weight: var(--font-weight-normal);
}
.faq-container {
width: 100%;
}
.faq-item {
background-color: rgba(249, 250, 251, 0.6);
border: 2px solid var(--border-light);
border-radius: var(--border-radius);
padding: 16px;
margin-bottom: 16px;
}
.faq-question {
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.faq-toggle {
font-size: 20px;
font-weight: var(--font-weight-normal);
color: var(--text-secondary);
}
.faq-answer {
display: none;
padding-top: 8px;
}
.faq-answer p {
font-size: var(--text-sm);
color: var(--text-secondary);
font-weight: var(--font-weight-normal);
line-height: 20px;
}
.quicklinks-card {
background-color: var(--background-light);
border-radius: var(--border-radius);
padding: 48px;
}
.quicklinks-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.quicklinks-section {
width: 100%;
max-width: 672px;
display: flex;
flex-direction: column;
gap: 28px;
}
.quicklinks-title {
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
text-align: center;
line-height: 33.6px;
}
.quicklinks-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.quicklink-item {
background-color: var(--white);
border-radius: var(--border-radius);
border: 1px solid rgba(229, 231, 235, 0.6);
box-shadow: var(--shadow-primary);
padding: 16px;
cursor: pointer;
transition: box-shadow var(--transition-fast);
}
.quicklink-item:hover {
box-shadow: var(--shadow-xl);
}
.quicklink-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.quicklink-info {
display: flex;
align-items: center;
gap: 12px;
}
.quicklink-icon {
border-radius: 50%;
width: 60px;
}
.quicklink-info span {
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
}
.quicklink-arrow {
color: var(--primary-orange);
}
.social-section {
width: 100%;
display: flex;
flex-direction: column;
gap: 28px;
}
.social-links {
display: flex;
justify-content: center;
gap: 28px;
}
.social-icon {
width: 44px;
height: 44px;
cursor: pointer;
transition: transform var(--transition-fast);
}
.social-icon:hover {
transform: scale(1.1);
}
.social-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius-small);
}
.social-bottom {
border-top: 1px solid var(--border-light);
padding-top: 32px;
width: 100%;
}
.social-bottom p {
font-size: var(--text-base);
color: var(--text-secondary);
text-align: center;
line-height: 24px;
font-weight: var(--font-weight-normal);
}
footer {
padding-bottom: 50px;
}
.footer-card {
background-color: var(--zinc-950);
border-radius: var(--border-radius);
color: var(--text-white);
padding: 48px;
}
.footer-content {
display: flex;
flex-direction: column;
gap: 40px;
}
.footer-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-nav {
display: flex;
align-items: center;
gap: 32px;
}
.footer-link {
color: var(--text-white);
text-decoration: none;
font-size: var(--text-lg);
font-weight: var(--font-weight-normal);
transition: color var(--transition-fast);
}
.footer-link:hover {
color: var(--gray-300);
}
.footer-badges {
display: flex;
align-items: center;
gap: 8px;
}
.custom-pages-list{
display: flex;
align-items: center;
gap: 32px;
font-size: var(--text-lg);
font-weight: var(--font-weight-normal);
transition: color var(--transition-fast);
}
.app-badge {
background-color: var(--black);
border-radius: var(--border-radius-small);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gray-500);
gap: 4px;
padding: 6px;
}
.badge-text {
color: var(--text-white);
font-size: var(--text-xs);
}
.badge-small {
font-size: 10px;
line-height: 1;
font-weight: var(--font-weight-normal);
}
.badge-large {
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
line-height: 1;
}
.footer-bottom {
border-top: 1px solid var(--gray-700);
padding-top: 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-powered {
font-size: var(--text-base);
color: var(--gray-400);
font-weight: var(--font-weight-normal);
}
.footer-legal {
display: flex;
align-items: center;
gap: 32px;
}
.footer-legal-link {
font-size: var(--text-base);
color: var(--gray-400);
text-decoration: none;
font-weight: var(--font-weight-normal);
transition: color var(--transition-fast);
}
.footer-legal-link:hover {
color: var(--gray-300);
}
@media (max-width: 1200px) {
.hero-heading h1 {
font-size: 48px;
line-height: 56px;
}
.offers-grid {
grid-template-columns: repeat(2, 1fr);
}
.steps-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.step-image {
width: 64px;
height: 64px;
}
.working-hours-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 1023px) {
.steps-grid {
grid-template-columns: repeat(2, 1fr);
}
.story-content {
gap: 40px;
}
.
}
@media (max-width: 992px) {
.story-content {
grid-template-columns: 1fr;
gap: 24px;
}
.story-image{
order: -1;
}
.footer-card {
padding: 36px;
}
.footer-content {
gap: 24px;
}
.footer-nav {
flex-direction: column;
gap: 24px;
}
.footer-top {
flex-direction: column;
gap: 24px;
}
.custom-pages-list{
margin-top: 16px;
}
.city-list, .custom-pages-list{
justify-content: center;
}
.footer-bottom {
flex-direction: column;
padding-top: 24px;
gap: 16px;
text-align: center;
}
.footer-legal {
flex-direction: column;
gap: 24px;
}
}
@media (max-width: 768px) {
section {
margin-bottom: 40px;
}
.hero-card-header .title {
font-size: var(--text-sm);
}
.hero-card-content{
gap: 8px; 
}
.navigation {
display: none;
}
.hero-heading h1 {
font-size: 36px;
line-height: 40px;
}
.hero-cards {
flex-direction: column;
align-items: center;
}
.offers-grid {
grid-template-columns: 1fr;
}
.steps-grid {
grid-template-columns: 1fr;
}
.reviews-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: 1fr;
}
.quicklinks-grid {
grid-template-columns: 1fr;
}
.working-hours-title {
font-size: var(--text-3xl);
line-height: 36px;
}
.working-hours-overlay {
padding: 16px;
}
.quicklinks-card {
padding: 24px;
}
.step-content {
gap: 16px;
}
.step-image {
width: 48px;
height: 48px;
}
.steps-grid {
gap: 24px;
}
.step-text {
gap: 16px;
}
.step-text h3 {
font-size: var(--text-xl);
}
.step-number {
width: 36px;
height: 36px;
font-size: var(--text-xl);
}
footer {
padding-bottom: 100px;
}
.story-text {
gap: 16px;
}
.working-hours-right {
padding: 16px;
}
}
.orderbtnmodel {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
overflow-y: auto;
z-index: 50;
padding: 1.25rem; 
}
.orderbtnmodel.hide {
display: none;
}
.orderbtnmodel.show {
display: block;
}
.modal-container {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem; 
}
.modal-content {
position: relative;
width: 100%;
max-width: 1000px;
background-color: white;
border-radius: 20px;
overflow: hidden;
}
.close-button {
position: absolute;
top: 0;
right: 0;
background-color: red;
border-bottom-left-radius: 0.5rem;
color: white;
padding: 0.25rem; 
cursor: pointer;
z-index: 10;
transition: background-color 0.3s ease-in-out;
}
@media (min-width: 640px) {
.close-button {
padding: 0.5rem;
}
}
.close-button:hover {
background-color: #7f1d1d; 
}
.close-icon {
width: 1.25rem;
height: 1.25rem;
transition: all 0.3s ease-in-out;
}
@media (min-width: 640px) {
.close-icon {
width: 1.5rem;
height: 1.5rem;
}
}
.iframe-wrapper {
width: 100%;
height: calc(100vh - 2rem);
overflow: hidden;
border-radius: 20px;
}
.iframe {
width: 100%;
height: 100%;
}
.custom-translate-wrapper {
overflow: hidden;
width: 100%;
max-width: 200px;
height: 2.75rem;
}
.custom-translate .goog-te-combo {
width: 100%;
display: flex;
height: 2.5rem;
border-radius: 0.375rem;
border: 1px solid #d1d5db;
background-color: #f9fafb;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
outline: none;
transition: box-shadow 0.2s ease;
cursor: pointer;
}
.main-content {
padding: var(--spacing-15) 0;
display: flex;
flex-direction: column;
flex: 1;
gap: var(--spacing-15);
max-width: var(--container-max-width);
margin: 0 auto;
}
.delivery-section {
width: 100%;
padding: 0 var(--container-padding);
}
.location-section-title {
font-size: var(--text-3xl);
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 1.5;
margin-bottom: var(--spacing-6);
}
.delivery-content {
display: flex;
gap: 38px;
align-items: flex-start;
}
.delivery-info {
flex: 0 0 572px;
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.delivery-description {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.delivery-description p {
font-size: var(--text-base);
font-weight: var(--font-weight-regular);
color: var(--text-muted);
line-height: 1.625;
}
.delivery-fee-card {
background: var(--gray-50);
border-radius: var(--radius-2xl);
padding: var(--spacing-6);
display: flex;
flex-direction: column;
gap: var(--spacing-4);
width: 100%;
min-height: 483px;
max-height: 600px;
}
.delivery-fee-title {
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 1.5;
height: 36px;
}
.delivery-zones {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-right: 8px;
}
.delivery-zones::-webkit-scrollbar {
width: 6px;
}
.delivery-zones::-webkit-scrollbar-track {
background: var(--gray-100);
border-radius: 10px;
}
.delivery-zones::-webkit-scrollbar-thumb {
background: var(--gray-400);
border-radius: 10px;
}
.delivery-zones::-webkit-scrollbar-thumb:hover {
background: var(--primary-orange);
}
.delivery-zone {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--spacing-4);
border-bottom: 1px solid var(--gray-200);
height: 69px;
box-sizing: border-box;
}
.delivery-zone:last-child {
border-bottom: none;
height: 68px;
}
.zone-info {
display: flex;
align-items: center;
gap: var(--spacing-3);
}
.zone-color {
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
}
.zone-color.orange {
background: var(--primary-orange);
}
.zone-color.green {
background: var(--green-500);
}
.zone-color.blue {
background: var(--blue-500);
}
.zone-color.red {
background: var(--red-500);
}
.zone-details {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
flex: 1;
}
.zone-name {
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
color: var(--dark-bg);
line-height: 1.5;
height: 24px;
}
.zone-fee {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.4;
height: 20px;
}
.zone-time {
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
color: var(--dark-bg);
line-height: 1.5;
text-align: right;
height: 24px;
}
.show-route-btn {
background: var(--primary-orange);
color: var(--white);
padding: var(--spacing-3) var(--spacing-5);
border-radius: var(--radius-full);
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.show-route-btn:hover {
background: #e67c05;
transform: translateY(-1px);
}
.map-section {
flex: 0 0 616px;
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.map-container {
background: var(--gray-100);
border-radius: var(--radius-2xl);
overflow: hidden;
height: 500px;
box-shadow: var(--shadow-primary);
position: relative;
width: 616px;
}
.map-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.map-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.2) 100%
);
}
.delivery-zones-legend {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--spacing-6);
box-shadow: var(--shadow-primary);
width: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-5);
}
.legend-title {
font-size: var(--text-base);
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 1.5;
height: 24px;
}
.legend-items {
display: flex;
justify-content: space-between;
gap: var(--spacing-4);
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: var(--spacing-2);
flex: 1;
justify-content: flex-start;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 50%;
}
.legend-color.orange {
background: var(--primary-orange);
}
.legend-color.green {
background: var(--green-500);
}
.legend-color.blue {
background: var(--blue-500);
}
.legend-color.red {
background: var(--red-500);
}
.legend-label {
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
color: var(--dark-bg);
line-height: 1.33;
}
.features-section {
padding: 0 var(--container-padding);
}
.features-content {
display: flex;
gap: var(--spacing-12);
}
.features-image {
flex: 1;
border-radius: var(--radius-2xl);
overflow: hidden;
aspect-ratio: 584 / 415;
box-shadow: var(--shadow-primary);
position: relative;
}
.features-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quality-badge {
position: absolute;
top: var(--spacing-6);
left: var(--spacing-6);
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-full);
padding: var(--spacing-2) var(--spacing-4);
display: flex;
align-items: center;
gap: var(--spacing-2);
box-shadow: var(--shadow-primary);
}
.quality-icon {
width: 20px;
height: 20px;
color: var(--primary-orange);
}
.quality-text {
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--dark-bg);
}
.features-text {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.features-intro {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
max-width: 350px;
}
.features-title {
font-size: var(--text-3xl);
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 1.5;
}
.features-description {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.features-description p {
font-size: var(--text-base);
font-weight: var(--font-weight-regular);
color: var(--text-muted);
line-height: 1.625;
}
.online-menu-text {
color: var(--primary-orange);
font-weight: var(--font-weight-medium);
}
.features-list {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
max-width: 350px;
}
.feature-item {
display: flex;
align-items: center;
gap: var(--spacing-3);
}
.feature-icon {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.feature-text {
font-size: var(--text-base);
color: var(--gray-700);
line-height: 1.5;
}
@media (max-width: 1199px) {
.navigation {
order: 3;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.header-buttons {
order: 2;
flex-wrap: wrap;
}
.delivery-content {
flex-direction: column;
gap: var(--spacing-8);
}
.delivery-fee-card {
height: auto;
max-height: 500px;
}
.delivery-info {
flex: none;
width: 100%;
}
.features-content {
gap: var(--spacing-8);
}
.map-section {
flex: none;
width: 100%;
}
.map-container {
width: 100%;
}
.map-marker {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero-title {
font-size: var(--text-5xl);
}
}
@media (max-width: 767px) {
.hero-title {
font-size: var(--text-4xl);
}
.hero-actions {
flex-direction: column;
width: 100%;
max-width: 600px;
}
.action-card {
flex-direction: row;
align-items: center;
height: 80px;
padding: var(--spacing-5);
}
.navigation {
gap: var(--spacing-4);
}
.legend-items {
flex-wrap: wrap;
gap: var(--spacing-3);
}
.legend-item {
justify-content: flex-start;
flex: auto;
min-width: 50%;
}
.delivery-zones-legend {
padding: var(--spacing-3) var(--spacing-4);
height: auto;
}
.features-content {
flex-direction: column;
}
}
@media (max-width: 479px) {
.hero-title {
font-size: var(--text-3xl);
}
.hero-subtitle {
font-size: var(--text-lg);
}
.header-buttons {
flex-direction: column;
width: 100%;
}
.btn {
width: 100%;
min-width: auto;
}
.logo-circle {
width: 60px;
height: 60px;
}
.app-badges {
flex-direction: column;
align-items: center;
gap: var(--spacing-3);
}
.delivery-fee-card {
padding: var(--spacing-4);
max-height: 450px;
}
.features-text {
gap: var(--spacing-6);
}
.legend-items {
flex-direction: column;
gap: var(--spacing-2);
}
.legend-item {
min-width: auto;
}
.delivery-zones-legend {
margin-top: var(--spacing-6);
}
}
.section-title {
font-size: 30px;
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 36px;
width: 100%;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.contact-info-cards {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-2xl);
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.contact-card:first-child {
height: 180px;
}
.contact-card.location {
align-items: flex-start;
}
.contact-header {
display: flex;
align-items: center;
gap: 16px;
}
.contact-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-title {
font-size: 24px;
font-weight: var(--font-weight-semibold);
color: var(--dark-bg);
line-height: 30px;
}
.contact-detail {
font-size: 16px;
color: var(--dark-bg);
line-height: 24px;
}
.contact-note {
font-size: 14px;
color: var(--text-muted);
line-height: 20px;
}
.contact-form-wrapper {
display: flex;
flex-direction: column;
}
.form-content {
display: flex;
flex-direction: column;
gap: 24px;
flex: 1;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
width:100%;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--dark-bg);
line-height: 20px;
}
.form-group input,
.form-group textarea {
padding: 12px 16px;
border: 1px solid var(--gray-300);
border-radius: var(--radius-lg);
font-size: 16px;
color: var(--dark-bg);
background: var(--white);
transition: border-color var(--transition-fast);
}
.form-group input {
height: 48px;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-orange);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
}
.contact-card {
background: var(--gray-50);
border-radius: 16px;
width: 100%;
flex-shrink: 0;
}
.contact-card:not(.location) {
height: 180px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.contact-card .contact-header {
display: flex;
gap: 16px;
height: 48px;
align-items: center;
width: 100%;
flex-shrink: 0;
}
.contact-card .contact-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--orange-light);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-card .contact-title {
font-size: 24px;
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 36px;
height: 36px;
white-space: nowrap;
}
.contact-card .contact-detail {
font-size: 16px;
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 24px;
}
.contact-card .contact-note {
font-size: 14px;
color: var(--text-muted);
line-height: 20px;
}
.contact-btn {
padding: 8px 20px;
}
.contact-form {
padding: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
box-sizing: border-box;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-2xl);
gap: 32px;
}
.form-content {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
width: 100%;
}
.form-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.form-group {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.form-group.full-width {
width: 100%;
}
.form-group label {
font-size: 14px;
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 14px;
white-space: nowrap;
}
.form-group input {
background: var(--input-bg);
border: 2px solid var(--gray-200);
border-radius: 10px;
padding: 12px;
font-size: 14px;
color: var(--dark-bg);
transition: border-color var(--transition-fast);
width: 100%;
height: 44px;
flex-shrink: 0;
}
.form-group textarea {
background: var(--input-bg);
border: 2px solid var(--gray-200);
border-radius: 10px;
padding: 12px;
font-size: 14px;
color: var(--dark-bg);
transition: border-color var(--transition-fast);
width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--input-placeholder);
font-size: 14px;
line-height: normal;
white-space: nowrap;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-orange);
}
.contact-us-map-section {
margin-top: var(--spacing-10);
}
.contact-us-map-container {
background: var(--gray-100);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-primary);
height: 384px;
position: relative;
overflow: hidden;
}
.contact-us-map-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact-us-map-info-card {
position: absolute;
bottom: 24px;
left: 24px;
max-width: 271px;
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-contact-card);
padding: 16px;
z-index: 3;
}
.map-btn{
padding: 10px 18px;
border-radius: 10px;
font-size: var(--text-xs);
}
.contact-us-map-title {
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
color: var(--dark-bg);
line-height: 24px;
margin-bottom: 8px;
}
.contact-us-map-address {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 20px;
margin-bottom: 12px;
}
.map-btn {
border-radius: 10px !impotant;
padding: 10px 18px !important;
}
@media (max-width: 1024px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media (max-width: 767px) {
.form-row {
flex-direction: column;
}
.form-group {
width: 100%;
}
.contact-form {
padding: 24px;
gap: 16px;
}
.contact-us-map-info-card{
padding: 12px;
max-width: 220px;
bottom: 12px;
left: 12px;
}
.section-title {
font-size: 24px;
line-height: 32px;
}
.section-content{
gap: var(--spacing-4);
}
}
.menu-wrapper{
display: flex;
flex-direction: column;
gap: var(--spacing-15);
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-5);
}
.menu-section-title {
font-size: var(--text-3xl);
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 1.5;
}
.menu-section-wrapper {
background: var(--gray-50);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-primary);
padding: var(--spacing-10);
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.menu-card {
background: var(--white);
border-radius: var(--radius-xl);
border: 1px solid var(--border-color);
padding: var(--spacing-4);
display: flex;
gap: var(--spacing-4);
transition: box-shadow var(--transition-fast);
}
.menu-card:hover {
box-shadow: var(--shadow-primary);
}
.menu-card.text-only {
gap: 0;
}
.menu-card.text-only .menu-item-content {
width: 100%;
}
.menu-item-image {
width: 92px;
height: 92px;
border-radius: var(--radius-lg);
overflow: hidden;
flex-shrink: 0;
}
.menu-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.menu-item-content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-2);
justify-content: center;
}
.menu-item-title {
font-size: var(--text-base);
font-weight: var(--font-weight-bold);
color: var(--dark-bg);
line-height: 1.5;
}
.menu-item-description {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.625;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.menu-item-price {
font-size: var(--text-base);
font-weight: var(--font-weight-bold);
color: var(--primary-orange);
line-height: 1.5;
}
@media (max-width: 767px) {
.menu-grid {
gap: var(--spacing-4);
}
.menu-wrapper{
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.menu-section-wrapper {
padding: var(--spacing-6);
}
}
@media (max-width: 479px) {
.menu-item-description {
-webkit-line-clamp: 3;
}
.menu-grid {
grid-template-columns: 1fr;
gap: var(--spacing-4);
}
.menu-item-image {
align-self: center;
}
}
.footer-mobile-bar {
background-color: var(--primary-orange);
width: 100%;
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px 16px;
border-top: 1px solid var(--primary-orange);
z-index: 50;
}
@media (min-width: 640px) {
.footer-mobile-bar {
padding: 10px 24px;
}
}
@media (min-width: 768px) {
.footer-mobile-bar {
display: none !important;
}
}
.footer-mobile-content {
display: flex;
align-items: center;
gap: 16px;
justify-content: space-between;
}
.footer-menu-trigger {
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: transform 0.5s ease;
}
.footer-menu-trigger:hover {
transform: scale(1.1);
}
.footer-menu-icon {
width: 36px;
height: 36px;
color: var(--text-white);
transition: transform 0.5s ease;
}
.footer-menu-icon.rotate-90 {
transform: rotate(90deg);
}
.footer-nav-links {
color: var(--text-white);
margin-bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
}
@media (min-width: 768px) {
.footer-nav-links {
margin-bottom: 16px;
font-size: var(--text-base);
}
}
.footer-nav-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-nav-link {
display: block;
text-align: center;
color: var(--text-white);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-nav-link:hover {
color: var(--green-50);
}
.footer-nav-link-content {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.footer-nav-text {
display: block;
font-size: 12px;
}
@media (min-width: 640px) {
.footer-nav-text {
font-size: var(--text-sm) !important;
}
}
.footer-overlay {
position: fixed;
inset: 0;
z-index: 40;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.footer-overlay.active {
opacity: 1;
pointer-events: auto;
}
@media (min-width: 768px) {
.footer-overlay {
display: none !important;
}
}
.footer-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
background-color: var(--white);
padding-bottom: 32px;
padding-top: 32px;
transform: translateY(100%);
opacity: 0;
pointer-events: none;
transition: all 0.5s ease-in-out;
}
.footer-sheet.active {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
@media (min-width: 768px) {
.footer-sheet {
display: none !important;
}
}
.footer-sheet-close {
position: absolute;
top: 10px;
right: 8px;
background: none;
border: none;
color: #2c2f24;
cursor: pointer;
padding: 0;
transition: transform 0.3s ease;
}
.footer-sheet-close:hover {
transform: scale(1.1);
}
.footer-sheet-close-icon {
width: 16px;
height: 16px;
}
.footer-sheet-content {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 12px;
padding: 16px 0;
padding-top: 16px;
}
.footer-sheet-btn {
font-size: var(--text-sm);
padding: 0 24px;
}
.iframe-modal {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
overflow-y: auto;
z-index: 50;
padding: 20px;
display: none;
}
.iframe-modal.active {
display: block;
}
.iframe-modal-backdrop {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.iframe-modal-content {
position: relative;
width: 100%;
max-width: 1000px;
background-color: var(--white);
border-radius: 20px;
overflow: hidden;
}
.iframe-modal-close {
position: absolute;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 8px;
color: var(--text-white);
padding: 4px;
border: none;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease-in-out;
}
.iframe-modal-close:hover {
background-color: rgba(0, 0, 0, 0.7);
}
@media (min-width: 640px) {
.iframe-modal-close {
padding: 8px;
}
}
.iframe-modal-close-icon {
width: 20px;
height: 20px;
transition: all 0.3s ease-in-out;
}
@media (min-width: 640px) {
.iframe-modal-close-icon {
width: 24px;
height: 24px;
}
}
.iframe-modal-wrapper {
width: 100%;
height: calc(100vh - 2rem);
overflow: hidden;
border-radius: 20px;
}
.iframe-modal-frame {
width: 100%;
height: 100%;
border: none;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
.no-record-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
max-width: 300px;
border-radius: 12px;
background-color: var(--gray-50);
box-shadow: var(--shadow-primary);
}
.city-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
color: var(--text-white);
line-height: 1.6;
margin-top: 24px;
}
.city-item{
font-size: var(--text-xs);
color: inherit;
text-decoration: none;
}
.city-item:not(:first-child) {
position: relative;
padding-left: 10px; 
}
.footer-location-content{
margin-top: 16px;
font-size: var(--text-xs);
color: var(--text-white);
line-height: 1.6;
}
.footer-location-content p{
margin-bottom: 8px;
}
.footer-location-content p:last-child{
margin-bottom: 0;
}
.city-item:not(:first-child)::before {
content: "·";
position: absolute;
left: 0;
color: var(--text-white);
font-weight: bold;
font-size: 1.2em;
top: 50%;
transform: translateY(-50%);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.h-screen {
height: 100vh;
}
.overflow-y-auto {
overflow-y: auto;
}
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.h-\[calc\(100dvh-69px\)\] {
height: calc(100dvh - 69px);
}
.h-\[100dvh\] {
height: 100dvh;
}
@media (min-width: 768px) {
.md\:h-\[100dvh\] {
height: 100dvh;
}
}