/* ============================================

   SRI MOKSHIT CATERERS & EVENTS

   Elegant Light Theme | Food-First Design

   ============================================ */



/* ----- Font Imports ----- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Lato:wght@300;400;700;900&display=swap');



/* ----- CSS Variables (Color Palette) ----- */

:root {

    /* Light & Elegant Base */

    --cream: #faf7f2;

    --pure-white: #ffffff;

    --warm-gray: #f8f6f4;

    --off-white: #fefcf9;

    

    /* Food-Inspired Accents */

    --terracotta: #c17b5c;

    --terracotta: #a62c13;

    --terracotta-light: #e6b09c;

    --terracotta-dark: #9e5e44;

    --terracotta-soft: #f9ece6;

    

    --olive: #9aa97b;

    --olive-light: #c5d0b5;

    --olive-soft: #f1f5ea;

    

    --gold: #d4af37;

    --gold-light: #f5e7c8;

    --gold-soft: #fcf5e6;

    

    /* Text Colors */

    --charcoal: #3a3a3a;

    --taupe: #7c6e65;

    --warm-brown: #67544a;

    --soft-black: #2c2c2c;

    

    /* Functional Colors */

    --shadow: rgba(0, 0, 0, 0.03);

    --shadow-strong: rgba(0, 0, 0, 0.06);

    --border-light: #e8e0d8;

    --border-soft: #f0e9e2;

    

    /* Gradients */

    --gradient-warm: linear-gradient(135deg, #fdf8f2 0%, #fff9f0 100%);

    --gradient-terracotta: linear-gradient(135deg, #c17b5c 0%, #d49c82 100%);

    

    /* Typography */

    --font-heading: 'Playfair Display', serif;

    --font-body: 'Lato', sans-serif;

    --font-accent: 'Cormorant Garamond', serif;

}



/* ----- Reset & Base Styles ----- */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: var(--font-body);

    color: var(--charcoal);

    background-color: var(--cream);

    line-height: 1.6;

    overflow-x: hidden;

}



.logo {

    max-height: 65px;

}

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    font-weight: 600;

    color: var(--warm-brown);

    line-height: 1.3;

}



a {

    text-decoration: none;

    color: inherit;

    transition: all 0.3s ease;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



.container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 30px;

}



.section {

    padding: 100px 0;

    position: relative;

}



/* ----- Section Headers (Elegant & Appetizing) ----- */

.section-header {

    text-align: center;

    margin-bottom: 60px;

    position: relative;

}



.section-subtitle {

    display: inline-block;

    font-family: var(--font-accent);

    font-size: 1.1rem;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--terracotta);

    margin-bottom: 15px;

    font-weight: 500;

    position: relative;

    padding: 0 15px;

    background: linear-gradient(to right, transparent, var(--gold-soft), transparent);

}



.section-title {

    font-size: 3.2rem;

    font-weight: 700;

    color: var(--warm-brown);

    margin-bottom: 20px;

    line-height: 1.2;

    position: relative;

    display: inline-block;

}



.section-title .highlight {

    color: var(--terracotta);

    font-style: italic;

    position: relative;

    display: inline-block;

}



.section-title .highlight::after {

    content: '';

    position: absolute;

    bottom: 5px;

    left: 0;

    width: 100%;

    height: 8px;

    background: var(--gold-soft);

    z-index: -1;

    opacity: 0.5;

}



.section-description {

    font-size: 1.1rem;

    color: var(--taupe);

    max-width: 700px;

    margin: 0 auto;

    font-weight: 300;

    line-height: 1.8;

}



/* ----- Buttons (Elegant & Appetizing) ----- */

.btn {

    display: inline-block;

    padding: 14px 36px;

    font-family: var(--font-body);

    font-weight: 500;

    font-size: 0.95rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    border-radius: 40px;

    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    cursor: pointer;

    border: none;

    position: relative;

    overflow: hidden;

    z-index: 1;

}



.btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

    transition: left 0.6s;

    z-index: -1;

}



.btn:hover::before {

    left: 100%;

}



.btn-primary {

    background: var(--terracotta);

    color: var(--pure-white);

    box-shadow: 0 10px 20px -8px rgba(193, 123, 92, 0.3);

}



.btn-primary:hover {

    background: var(--terracotta-dark);

    transform: translateY(-3px);

    box-shadow: 0 15px 25px -8px rgba(193, 123, 92, 0.4);

}



.btn-secondary {

    background: transparent;

    color: var(--terracotta);

    border: 2px solid var(--terracotta);

}



.btn-secondary:hover {

    background: var(--terracotta-soft);

    transform: translateY(-3px);

    border-color: var(--terracotta-dark);

    color: var(--terracotta-dark);

}



.btn-light {

    background: var(--pure-white);

    color: var(--terracotta);

    box-shadow: 0 5px 15px var(--shadow-strong);

}



.btn-light:hover {

    background: var(--cream);

    transform: translateY(-3px);

    box-shadow: 0 10px 25px var(--shadow-strong);

}



.btn-link {

    color: var(--terracotta);

    font-weight: 600;

    letter-spacing: 1px;

    font-size: 0.9rem;

    text-transform: uppercase;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    position: relative;

    padding-bottom: 3px;

}



.btn-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--terracotta);

    transition: width 0.3s;

}



.btn-link:hover::after {

    width: 100%;

}



.btn-link i {

    transition: transform 0.3s;

}



.btn-link:hover i {

    transform: translateX(5px);

}



/* ----- Top Bar (Elegant & Minimal) ----- */

.top-bar {

    background: var(--pure-white);

    border-bottom: 1px solid var(--border-soft);

    padding: 2px 0;

    font-size: 0.9rem;

    color: var(--taupe);

}



.top-bar-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

}



.contact-info {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

}



.contact-info a {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--taupe);

    transition: color 0.3s;

}



.contact-info a:hover {

    color: var(--terracotta);

}



.contact-info i {

    color: var(--terracotta);

    font-size: 0.9rem;

}



.separator {

    color: var(--border-light);

    font-size: 1.2rem;

    line-height: 1;

}



.social-links {

    display: flex;

    gap: 15px;

}



.social-links a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    background: var(--warm-gray);

    color: var(--taupe);

    border-radius: 50%;

    transition: all 0.3s;

}



.social-links a:hover {

    background: var(--terracotta);

    color: var(--pure-white);

    transform: translateY(-3px);

}



/* ----- Header & Navigation (Light & Airy) ----- */

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    box-shadow: 0 2px 20px var(--shadow);

    transition: all 0.3s;

}



.header.scroll-down {

    transform: translateY(-100%);

}



.header.scroll-up {

    transform: translateY(0);

    box-shadow: 0 5px 20px var(--shadow-strong);

}



.nav-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 0px;

}



/* Logo */

.logo a {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}



.logo-main {

    font-family: var(--font-heading);

    font-size: 2rem;

    font-weight: 700;

    color: var(--terracotta);

    letter-spacing: 2px;

}



.logo-sub {

    font-family: var(--font-accent);

    font-size: 0.8rem;

    letter-spacing: 4px;

    color: var(--taupe);

    text-transform: uppercase;

    margin-top: 2px;

}



/* Navigation Menu */

.nav-menu {

    display: flex;

    list-style: none;

    gap: 40px;

}



.nav-menu a {

    font-family: var(--font-body);

    font-weight: 500;

    font-size: 0.95rem;

    color: var(--charcoal);

    letter-spacing: 0.5px;

    position: relative;

    padding: 5px 0;

}



.nav-menu a::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 2px;

    background: var(--terracotta);

    transition: width 0.3s;

}



.nav-menu a:hover::after,

.nav-menu a.active::after {

    width: 80%;

}



.nav-menu a:hover,

.nav-menu a.active {

    color: var(--terracotta);

}



.nav-buttons {

    display: flex;

    align-items: center;

    gap: 20px;

}



.btn-book {

    background: var(--terracotta);

    color: var(--pure-white) !important;

    padding: 12px 28px !important;

    border-radius: 40px;

    font-weight: 600 !important;

    font-size: 0.9rem !important;

    box-shadow: 0 5px 15px rgba(193, 123, 92, 0.2);

}



.btn-book:hover {

    background: var(--terracotta-dark);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(193, 123, 92, 0.3);

}



.btn-book::after {

    display: none !important;

}



/* Hamburger Menu */

.hamburger {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 6px;

}



.hamburger span {

    width: 30px;

    height: 2px;

    background: var(--terracotta);

    transition: all 0.3s;

}



.hamburger.active span:nth-child(1) {

    transform: rotate(45deg) translate(8px, 8px);

}



.hamburger.active span:nth-child(2) {

    opacity: 0;

}



.hamburger.active span:nth-child(3) {

    transform: rotate(-45deg) translate(8px, -8px);

}



/* ----- Hero Section (Fresh & Appetizing) ----- */

.hero {

    position: relative;

    min-height: 90vh;

    background: var(--gradient-warm);

    overflow: hidden;

    padding: 80px 0;

}



.hero::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -10%;

    width: 80%;

    height: 200%;

    background: radial-gradient(circle, rgba(193, 123, 92, 0.03) 0%, transparent 70%);

    z-index: 0;

}



.hero::after {

    content: '';

    position: absolute;

    bottom: -50%;

    left: -10%;

    width: 80%;

    height: 200%;

    background: radial-gradient(circle, rgba(154, 169, 123, 0.03) 0%, transparent 70%);

    z-index: 0;

}



.hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

    padding: 60px 0;

}



.hero-pre-title {

    display: inline-block;

    font-family: var(--font-accent);

    font-size: 1.2rem;

    letter-spacing: 8px;

    text-transform: uppercase;

    color: var(--terracotta);

    margin-bottom: 20px;

    font-weight: 500;

    background: var(--gold-soft);

    padding: 8px 25px;

    border-radius: 40px;

}



.hero-title {

    font-size: 5rem;

    font-weight: 800;

    color: var(--warm-brown);

    margin-bottom: 20px;

    line-height: 1.1;

    font-family: var(--font-heading);

}



.hero-title .highlight {

    color: var(--terracotta);

    display: block;

    font-size: 5.5rem;

    font-weight: 900;

    font-style: italic;

    margin-top: 10px;

    position: relative;

    display: inline-block;

}



.hero-description {

    font-size: 1.2rem;

    color: var(--taupe);

    max-width: 700px;

    margin: 0 auto 40px;

    line-height: 1.8;

    font-weight: 300;

}



/* Hero Features */

.hero-features {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin-bottom: 50px;

    flex-wrap: wrap;

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 12px;

    background: var(--pure-white);

    padding: 12px 25px;

    border-radius: 50px;

    box-shadow: 0 5px 20px var(--shadow);

    border: 1px solid var(--border-soft);

}



.feature-item i {

    font-size: 1.5rem;

    color: var(--terracotta);

}



.feature-item span {

    font-size: 0.95rem;

    font-weight: 500;

    color: white;

    text-shadow: -2px 2px 2px black;

}



/* Hero Stats */

.hero-stats {

    display: flex;

    justify-content: center;

    gap: 60px;

    margin-top: 60px;

}



.stat-item {

    text-align: center;

}



.stat-number {

    display: block;

    font-family: var(--font-heading);

    font-size: 3rem;

    font-weight: 700;

    color: var(--terracotta);

    line-height: 1;

    margin-bottom: 5px;

}



.stat-label {

    font-size: 0.9rem;

    color: var(--taupe);

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 400;

}



/* Hero Buttons */

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 40px;

}



/* Scroll Indicator */

.scroll-indicator {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 5;

}



.scroll-indicator a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background: var(--pure-white);

    border-radius: 50%;

    color: var(--terracotta);

    box-shadow: 0 5px 15px var(--shadow);

    animation: bounce 2s infinite;

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-20px);

    }

    60% {

        transform: translateY(-10px);

    }

}



/* ----- About Preview Section (Fresh & Organic) ----- */

.about-preview {

    padding: 100px 0;

    background: var(--pure-white);

    position: relative;

}



.about-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



/* About Image Grid */

.about-image-grid {

    position: relative;

    height: 600px;

}



.image-main {

    position: absolute;

    top: 0;

    left: 0;

    width: 70%;

    height: 70%;

    z-index: 2;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 30px 40px -20px rgba(0,0,0,0.2);

}



.image-main img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s;

}



.image-main:hover img {

    transform: scale(1.05);

}



.image-small {

    position: absolute;

    width: 50%;

    height: 40%;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 20px 30px -15px rgba(0,0,0,0.15);

    z-index: 3;

    border: 5px solid var(--pure-white);

}



.image-small img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s;

}



.image-small:hover img {

    transform: scale(1.05);

}



.image-small-1 {

    bottom: 0;

    right: 0;

    width: 55%;

    height: 45%;

}



.image-small-2 {

    bottom: 20%;

    right: 15%;

    width: 35%;

    height: 30%;

    z-index: 4;

}



.experience-badge {

    position: absolute;

    bottom: 15%;

    left: 0;

    background: var(--terracotta);

    padding: 25px;

    border-radius: 30px;

    width: 140px;

    height: 140px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: var(--pure-white);

    z-index: 5;

    box-shadow: 0 20px 25px -10px rgba(193, 123, 92, 0.4);

}



.experience-badge .years {

    font-family: var(--font-heading);

    font-size: 3rem;

    font-weight: 700;

    line-height: 1;

}



.experience-badge .text {

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 400;

}



/* About Text */

.about-text h3 {

    font-size: 2.5rem;

    margin-bottom: 20px;

    line-height: 1.3;

}



.about-text p {

    color: var(--taupe);

    margin-bottom: 30px;

    font-size: 1.05rem;

    line-height: 1.8;

}



.features-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 35px;

}



.feature {

    display: flex;

    gap: 15px;

    align-items: flex-start;

}



.feature i {

    color: var(--terracotta);

    font-size: 1.5rem;

    margin-top: 3px;

    background: var(--terracotta-soft);

    padding: 10px;

    border-radius: 50%;

}



.feature h4 {

    font-size: 1.2rem;

    margin-bottom: 5px;

    color: var(--warm-brown);

}



.feature p {

    margin-bottom: 0;

    font-size: 0.95rem;

    color: var(--taupe);

}



/* ----- Services Section (Elegant Cards) ----- */

.services {

    padding: 100px 0;

    background: var(--cream);

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 30px;

    margin-top: 50px;

}



.service-card {

    background: var(--pure-white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 30px var(--shadow);

    transition: all 0.4s;

    border: 1px solid var(--border-soft);

}



.service-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 40px var(--shadow-strong);

}



.service-image {

    position: relative;

    height: 250px;

    overflow: hidden;

}



.service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s;

}



.service-card:hover .service-image img {

    transform: scale(1.1);

}



.service-overlay {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 2;

}



.service-tag {

    background: var(--gold);

    color: var(--warm-brown);

    padding: 5px 15px;

    border-radius: 25px;

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: 0 5px 10px rgba(0,0,0,0.1);

}



.service-content {

    padding: 30px;

}



.service-content i {

    font-size: 2.5rem;

    color: var(--terracotta);

    margin-bottom: 15px;

}



.service-content h3 {

    font-size: 1.5rem;

    margin-bottom: 15px;

}



.service-content p {

    color: var(--taupe);

    margin-bottom: 20px;

    line-height: 1.7;

}



.service-features {

    list-style: none;

    margin-bottom: 20px;

}



.service-features li {

    padding: 8px 0;

    color: var(--charcoal);

    display: flex;

    align-items: center;

    gap: 10px;

    border-bottom: 1px dashed var(--border-soft);

}



.service-features li:last-child {

    border-bottom: none;

}



.service-features li i {

    font-size: 1rem;

    margin: 0;

    color: var(--olive);

}



.btn-service {

    color: var(--terracotta);

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: gap 0.3s;

}



.btn-service:hover {

    gap: 15px;

}



/* ----- Signature Dishes Section (Food Focus) ----- */

.signature-dishes {

    padding: 100px 0;

    background: var(--pure-white);

    position: relative;

}



.signature-dishes::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.02"><path d="M20,20 Q40,10 60,20 Q80,30 70,50 Q60,70 40,70 Q20,70 30,50 Q20,30 20,20" fill="%23c17b5c"/></svg>');

    background-repeat: repeat;

    pointer-events: none;

}



.dish-card {

    background: var(--pure-white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 30px var(--shadow);

    margin: 15px;

    border: 1px solid var(--border-soft);

    transition: all 0.4s;

}



.dish-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 40px var(--shadow-strong);

}



.dish-image {

    position: relative;

    height: 280px;

    overflow: hidden;

}



.dish-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s;

}



.dish-card:hover .dish-image img {

    transform: scale(1.1);

}



.dish-chef {

    position: absolute;

    bottom: 20px;

    left: 20px;

    background: var(--pure-white);

    color: var(--terracotta);

    padding: 6px 18px;

    border-radius: 30px;

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    z-index: 2;

}



.dish-info {

    padding: 25px;

}



.dish-info h4 {

    font-size: 1.3rem;

    margin-bottom: 10px;

    color: var(--warm-brown);

}



.dish-info p {

    color: var(--taupe);

    font-size: 0.95rem;

    margin-bottom: 15px;

    line-height: 1.6;

}



.dish-tags {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.dish-tags span {

    background: var(--warm-gray);

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 0.8rem;

    color: var(--taupe);

    font-weight: 500;

}



/* ----- Why Choose Us Section (Elegant Features) ----- */

.why-choose-us {

    padding: 100px 0;

    background: var(--cream);

}



.features-grid-large {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.feature-large {

    display: flex;

    gap: 20px;

    padding: 35px;

    background: var(--pure-white);

    border-radius: 20px;

    box-shadow: 0 10px 25px var(--shadow);

    border: 1px solid var(--border-soft);

    transition: all 0.3s;

}



.feature-large:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 35px var(--shadow-strong);

    border-color: var(--terracotta-soft);

}



.feature-icon {

    flex-shrink: 0;

    width: 70px;

    height: 70px;

    background: var(--terracotta-soft);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.feature-icon i {

    font-size: 2rem;

    color: var(--terracotta);

}



.feature-content h3 {

    font-size: 1.3rem;

    margin-bottom: 10px;

}



.feature-content p {

    color: var(--taupe);

    line-height: 1.7;

    margin: 0;

    font-size: 0.95rem;

}



/* ----- Gallery Section (Beautiful Grid) ----- */

.recent-events {

    padding: 100px 0;

    background: var(--pure-white);

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-top: 50px;

}



.gallery-item {

    position: relative;

    height: 300px;

    overflow: hidden;

    border-radius: 20px;

    box-shadow: 0 15px 25px var(--shadow);

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s;

}



.gallery-item:hover img {

    transform: scale(1.1);

}



.gallery-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);

    display: flex;

    align-items: flex-end;

    padding: 25px;

    opacity: 0;

    transition: opacity 0.4s;

}



.gallery-item:hover .gallery-overlay {

    opacity: 1;

}



.gallery-info {

    color: var(--pure-white);

    transform: translateY(20px);

    transition: transform 0.4s;

}



.gallery-item:hover .gallery-info {

    transform: translateY(0);

}



.gallery-info h4 {

    color: var(--pure-white);

    font-size: 1.3rem;

    margin-bottom: 5px;

}



.gallery-info p {

    font-size: 0.9rem;

    opacity: 0.9;

    margin-bottom: 15px;

}



.gallery-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    background: var(--pure-white);

    color: var(--terracotta);

    border-radius: 50%;

    transition: all 0.3s;

}



.gallery-link:hover {

    background: var(--terracotta);

    color: var(--pure-white);

    transform: scale(1.1);

}



/* ----- Testimonials Section (Warm & Trustworthy) ----- */

.testimonials {

    padding: 100px 0;

    background: var(--cream);

}



.testimonial-card {

    background: var(--pure-white);

    padding: 40px;

    border-radius: 30px;

    box-shadow: 0 20px 30px var(--shadow);

    margin: 20px;

    border: 1px solid var(--border-soft);

    position: relative;

}



.testimonial-card::before {

    content: '"';

    position: absolute;

    top: 20px;

    right: 30px;

    font-family: var(--font-heading);

    font-size: 8rem;

    color: var(--terracotta-soft);

    line-height: 1;

    opacity: 0.3;

    z-index: 0;

}



.testimonial-rating {

    margin-bottom: 20px;

    position: relative;

    z-index: 1;

}



.testimonial-rating i {

    color: var(--gold);

    margin-right: 3px;

    font-size: 1.1rem;

}



.testimonial-text {

    font-size: 1.1rem;

    line-height: 1.8;

    margin-bottom: 25px;

    color: var(--charcoal);

    font-style: italic;

    position: relative;

    z-index: 1;

}



.testimonial-author {

    display: flex;

    align-items: center;

    gap: 15px;

    position: relative;

    z-index: 1;

}



.testimonial-author img {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid var(--terracotta-soft);

}



.testimonial-author h4 {

    font-size: 1.1rem;

    margin-bottom: 5px;

    color: var(--warm-brown);

}



.testimonial-author p {

    font-size: 0.9rem;

    color: var(--taupe);

}



/* ----- Blog Preview Section ----- */

.blog-preview {

    padding: 100px 0;

    background: var(--pure-white);

}



.blog-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.blog-card {

    background: var(--pure-white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 30px var(--shadow);

    transition: all 0.4s;

    border: 1px solid var(--border-soft);

}



.blog-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 40px var(--shadow-strong);

}



.blog-image {

    position: relative;

    height: 220px;

    overflow: hidden;

}



.blog-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s;

}



.blog-card:hover .blog-image img {

    transform: scale(1.1);

}



.blog-date {

    position: absolute;

    bottom: 20px;

    left: 20px;

    background: var(--terracotta);

    color: var(--pure-white);

    padding: 5px 15px;

    border-radius: 25px;

    font-size: 0.8rem;

    font-weight: 500;

    box-shadow: 0 5px 10px rgba(0,0,0,0.1);

}



.blog-content {

    padding: 25px;

}



.blog-content h3 {

    font-size: 1.2rem;

    margin-bottom: 12px;

    line-height: 1.5;

}



.blog-content h3 a {

    color: var(--warm-brown);

}



.blog-content h3 a:hover {

    color: var(--terracotta);

}



.blog-content p {

    color: var(--taupe);

    font-size: 0.95rem;

    margin-bottom: 15px;

    line-height: 1.7;

}



.read-more {

    color: var(--terracotta);

    font-weight: 600;

    font-size: 0.9rem;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.read-more:hover {

    gap: 10px;

}



/* ----- FAQ Section (Clean & Organized) ----- */

.faq {

    padding: 100px 0;

    background: var(--cream);

}



.faq-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 50px;

}



.faq-item {

    background: var(--pure-white);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 5px 20px var(--shadow);

    border: 1px solid var(--border-soft);

}



.faq-question {

    padding: 20px 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    transition: background 0.3s;

}



.faq-question:hover {

    background: var(--cream);

}



.faq-question h3 {

    font-size: 1.1rem;

    margin: 0;

    color: var(--warm-brown);

}



.faq-question i {

    color: var(--terracotta);

    transition: transform 0.3s;

}



.faq-item.active .faq-question i {

    transform: rotate(45deg);

}



.faq-answer {

    max-height: 0;

    padding: 0 25px;

    overflow: hidden;

    transition: all 0.3s;

}



.faq-item.active .faq-answer {

    max-height: 200px;

    padding: 0 25px 25px;

}



.faq-answer p {

    color: var(--taupe);

    line-height: 1.7;

    margin: 0;

}



/* ----- Partners Section (Subtle & Professional) ----- */

.partners {

    padding: 60px 0;

    background: var(--pure-white);

    border-top: 1px solid var(--border-soft);

    border-bottom: 1px solid var(--border-soft);

}



.partners-slider {

    margin-top: 30px;

}



.partners-slider img {

    max-width: 150px;

    height: auto;

    margin: 0 auto;

    filter: grayscale(100%);

    opacity: 0.5;

    transition: all 0.3s;

}



.partners-slider img:hover {

    filter: grayscale(0);

    opacity: 1;

}



/* ----- Contact CTA Section (Warm & Inviting) ----- */

.contact-cta {

    padding: 100px 0;

    background: linear-gradient(135deg, #fff9f2 0%, #fff5eb 100%);

    position: relative;

    overflow: hidden;

}



.contact-cta::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -20%;

    width: 70%;

    height: 200%;

    background: radial-gradient(circle, rgba(193, 123, 92, 0.05) 0%, transparent 70%);

    border-radius: 50%;

}



.cta-content {

    text-align: center;

    max-width: 800px;

    margin: 0 auto;

    position: relative;

    z-index: 2;

}



.cta-pre-title {

    display: inline-block;

    font-family: var(--font-accent);

    font-size: 1rem;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: var(--terracotta);

    margin-bottom: 15px;

    background: var(--pure-white);

    padding: 8px 25px;

    border-radius: 40px;

    box-shadow: 0 5px 15px var(--shadow);

}



.cta-title {

    font-size: 3rem;

    margin-bottom: 20px;

    color: var(--warm-brown);

    line-height: 1.3;

}



.cta-title .highlight {

    color: var(--terracotta);

    position: relative;

    display: inline-block;

}



.cta-title .highlight::after {

    content: '';

    position: absolute;

    bottom: 5px;

    left: 0;

    width: 100%;

    height: 10px;

    background: var(--gold-soft);

    z-index: -1;

    opacity: 0.5;

}



.cta-description {

    font-size: 1.1rem;

    color: var(--taupe);

    margin-bottom: 40px;

    line-height: 1.8;

}



.cta-contact-info {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin-bottom: 40px;

    flex-wrap: wrap;

}



.cta-phone,

.cta-email {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--warm-brown);

    font-size: 1.2rem;

    font-weight: 500;

    transition: color 0.3s;

}



.cta-phone i,

.cta-email i {

    color: var(--terracotta);

    font-size: 1.3rem;

}



.cta-phone:hover,

.cta-email:hover {

    color: var(--terracotta);

}



.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 40px;

    flex-wrap: wrap;

}



.btn-large {

    padding: 16px 45px;

    font-size: 1rem;

}



.cta-features {

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;

}



.cta-features span {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.95rem;

    color: var(--taupe);

}



.cta-features i {

    color: var(--olive);

    font-size: 1rem;

}



/* ----- Footer (Elegant & Warm) ----- */

.footer {

    background: var(--warm-brown);

    color: #fff;

    padding: 80px 0 20px;

    position: relative;

}



.footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--olive));

}



.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 2fr;

    gap: 40px;

    margin-bottom: 50px;

}



.footer-logo h3 {

    color: var(--pure-white);

    font-size: 2rem;

    margin-bottom: 5px;

}



.footer-logo p {

    color: rgba(255,255,255,0.7);

    font-size: 0.8rem;

    letter-spacing: 2px;

    margin-bottom: 20px;

}



.footer-description {

    color: rgba(255,255,255,0.8);

    line-height: 1.8;

    margin-bottom: 25px;

    font-size: 0.95rem;

}



.footer-social {

    display: flex;

    gap: 15px;

}



.footer-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.1);

    color: #fff;

    border-radius: 50%;

    transition: all 0.3s;

}



.footer-social a:hover {

    background: var(--terracotta);

    transform: translateY(-5px);

}



.footer-col h4 {

    color: var(--pure-white);

    font-size: 1.2rem;

    margin-bottom: 25px;

    position: relative;

    padding-bottom: 10px;

}



.footer-col h4::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 40px;

    height: 2px;

    background: var(--terracotta);

}



.footer-links {

    list-style: none;

}



.footer-links li {

    margin-bottom: 12px;

}



.footer-links a {

    color: rgba(255,255,255,0.8);

    display: flex;

    align-items: center;

    gap: 8px;

    transition: all 0.3s;

    font-size: 0.95rem;

}



.footer-links a i {

    font-size: 0.8rem;

    color: var(--terracotta);

}



.footer-links a:hover {

    color: var(--pure-white);

    transform: translateX(5px);

}



.footer-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 20px;

    color: rgba(255,255,255,0.8);

    font-size: 0.95rem;

    line-height: 1.7;

}



.footer-contact-item i {

    color: var(--terracotta);

    font-size: 1.2rem;

    margin-top: 3px;

}



.footer-contact-item a {

    color: rgba(255,255,255,0.8);

}



.footer-contact-item a:hover {

    color: var(--terracotta);

}



.footer-map {

    margin: 40px 0;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    border: 3px solid rgba(255,255,255,0.1);

}



.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 30px;

    border-top: 1px solid rgba(255,255,255,0.1);

    color: rgba(255,255,255,0.6);

    font-size: 0.9rem;

}



.footer-bottom-links {

    display: flex;

    gap: 25px;

}



.footer-bottom-links a {

    color: rgba(255,255,255,0.6);

    transition: color 0.3s;

}



.footer-bottom-links a:hover {

    color: var(--terracotta);

}



.fa-heart {

    color: #ff6b6b;

}



/* ----- Back to Top Button ----- */

.back-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 50px;

    height: 50px;

    background: var(--terracotta);

    color: var(--pure-white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s;

    z-index: 999;

    box-shadow: 0 5px 20px rgba(193, 123, 92, 0.3);

}



.back-to-top.show {

    opacity: 1;

    visibility: visible;

}



.back-to-top:hover {

    background: var(--terracotta-dark);

    transform: translateY(-5px);

}



/* ----- Swiper Customization ----- */

.swiper-button-next,

.swiper-button-prev {

    color: var(--terracotta);

    background: var(--pure-white);

    width: 45px;

    height: 45px;

    border-radius: 50%;

    box-shadow: 0 5px 15px var(--shadow);

}



.swiper-button-next::after,

.swiper-button-prev::after {

    font-size: 1.2rem;

}



.swiper-button-next:hover,

.swiper-button-prev:hover {

    background: var(--terracotta);

    color: var(--pure-white);

}



.swiper-pagination-bullet {

    width: 10px;

    height: 10px;

    background: var(--border-light);

    opacity: 1;

}



.swiper-pagination-bullet-active {

    background: var(--terracotta);

    width: 25px;

    border-radius: 5px;

}



/* ----- Responsive Design ----- */

@media (max-width: 1200px) {

    .hero-title {

        font-size: 4rem;

    }

    

    .hero-title .highlight {

        font-size: 4.5rem;

    }

    

    .section-title {

        font-size: 2.8rem;

    }

    

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 992px) {

    .nav-menu {

        gap: 25px;

    }

    

    .hero-title {

        font-size: 3.5rem;

    }

    

    .hero-title .highlight {

        font-size: 4rem;

    }

    

    .about-content {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    

    .about-image-grid {

        height: 500px;

    }

    

    .features-grid-large {

        grid-template-columns: 1fr;

    }

    

    .gallery-grid,

    .blog-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .faq-grid {

        grid-template-columns: 1fr;

    }

    

    .hero-stats {

        gap: 40px;

    }

    

    .stat-number {

        font-size: 2.5rem;

    }

}



@media (max-width: 768px) {

    .container {

        padding: 0 20px;

    }

    

    .section {

        padding: 70px 0;

    }

    

    .section-title {

        font-size: 2.2rem;

    }

    

    /* Mobile Navigation */

    .hamburger {

        display: flex;

    }

    

    .nav-menu {

        position: fixed;

        top: 120px;

        left: -100%;

        width: 100%;

        height: calc(100vh - 120px);

        background: var(--pure-white);

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        padding: 40px 20px;

        transition: left 0.3s;

        box-shadow: 0 10px 30px var(--shadow);

        z-index: 999;

        overflow-y: auto;

    }

    

    .nav-menu.active {

        left: 0;

    }

    

    .nav-menu li {

        width: 100%;

        text-align: center;

    }

    

    .nav-menu a {

        display: block;

        padding: 15px;

        font-size: 1.1rem;

        border-bottom: 1px solid var(--border-soft);

    }

    

    .nav-menu a::after {

        display: none;

    }

    

    .btn-book {

        display: none;

    }

    

    /* Hero Section */

    .hero {

        min-height: auto;

        padding: 40px 0;

    }

    

    .hero-title {

        font-size: 2.5rem;

    }

    

    .hero-title .highlight {

        font-size: 3rem;

    }

    

    .hero-description {

        font-size: 1rem;

    }

    

    .hero-features {

        flex-direction: column;

        gap: 15px;

        align-items: center;

    }

    

    .feature-item {

        width: 100%;

        max-width: 300px;

    }

    

    .hero-stats {

        flex-direction: column;

        gap: 20px;

    }

    

    .hero-buttons {

        flex-direction: column;

        align-items: center;

        gap: 15px;

    }

    

    .hero-buttons .btn {

        width: 100%;

        max-width: 250px;

    }

    

    /* About Section */

    .about-image-grid {

        height: 400px;

    }

    

    .experience-badge {

        width: 100px;

        height: 100px;

        padding: 15px;

    }

    

    .experience-badge .years {

        font-size: 2rem;

    }

    

    /* Services Grid */

    .services-grid {

        grid-template-columns: 1fr;

    }

    

    /* Gallery & Blog Grid */

    .gallery-grid,

    .blog-grid {

        grid-template-columns: 1fr;

    }

    

    /* CTA Section */

    .cta-title {

        font-size: 2rem;

    }

    

    .cta-contact-info {

        flex-direction: column;

        gap: 15px;

    }

    

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .cta-buttons .btn {

        width: 100%;

    }

    

    .cta-features {

        flex-direction: column;

        align-items: center;

        gap: 15px;

    }

    

    /* Footer */

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .footer-bottom {

        flex-direction: column;

        text-align: center;

        gap: 15px;

    }

    

    .footer-bottom-links {

        flex-wrap: wrap;

        justify-content: center;

    }

    

    /* Top Bar */

    .top-bar-content {

        flex-direction: column;

        text-align: center;

    }

    

    .contact-info {

        justify-content: center;

    }

    

    .separator {

        display: none;

    }

    

    .contact-info a {

        font-size: 0.85rem;

    }

}



@media (max-width: 480px) {

    .hero-title {

        font-size: 2rem;

    }

    

    .hero-title .highlight {

        font-size: 2.5rem;

    }

    

    .section-title {

        font-size: 1.8rem;

    }

    

    .about-image-grid {

        height: 350px;

    }

    

    .service-card {

        margin: 0;

    }

    

    .testimonial-card {

        padding: 25px;

    }

    

    .dish-card {

        margin: 5px;

    }

    

    .contact-info {

        flex-wrap: wrap;

    }

    

    .contact-info a {

        width: 100%;

        justify-content: center;

    }

}



/* ----- Print Styles ----- */

@media print {

    .header,

    .footer,

    .back-to-top,

    .hero-buttons,

    .cta-buttons {

        display: none;

    }

}



/* ----- Loading Animation ----- */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.fadeInUp {

    animation: fadeInUp 0.6s ease forwards;

}



/* ----- Custom Scrollbar ----- */

::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: var(--cream);

}



::-webkit-scrollbar-thumb {

    background: var(--terracotta-light);

    border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--terracotta);

}



/* ----- Selection Color ----- */

::selection {

    background: var(--terracotta-soft);

    color: var(--terracotta-dark);

}



::-moz-selection {

    background: var(--terracotta-soft);

    color: var(--terracotta-dark);

}





/* Form Error Styles */

.form-group {

    position: relative;

    margin-bottom: 20px;

}



.form-group input.error,

.form-group textarea.error {

    border-color: #c17b5c;

    background-color: #fff9f5;

}



.error-message {

    color: #c17b5c;

    font-size: 0.85rem;

    margin-top: 5px;

    animation: slideDown 0.3s ease;

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Success message style (optional) */

.success-message {

    background: #9aa97b;

    color: white;

    padding: 15px;

    border-radius: 8px;

    text-align: center;

    margin-bottom: 20px;

    animation: slideDown 0.3s ease;

}





/* ============================================

   FIX FOR HORIZONTAL OVERFLOW

   Add this at the end of your CSS file

   ============================================ */



/* Universal fix for overflow */

html, body {

    overflow-x: hidden !important;

    width: 100%;

    position: relative;

}



/* Container fix */

.container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 30px;

    box-sizing: border-box;

    overflow-x: hidden;

}



/* Fix for any elements causing overflow */

.hero,

.about-preview,

.services,

.signature-dishes,

.why-choose-us,

.recent-events,

.testimonials,

.blog-preview,

.faq,

.partners,

.contact-cta,

.footer {

    width: 100%;

    overflow-x: hidden;

    position: relative;

}



/* Fix for absolute positioned elements that might cause overflow */

.hero::before,

.hero::after,

.contact-cta::before {

    max-width: 100%;

    overflow: hidden;

}



/* Fix for grid layouts */

.services-grid,

.features-grid-large,

.gallery-grid,

.blog-grid,

.faq-grid,

.footer-grid {

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

}



/* Fix for cards and images */

.service-card,

.dish-card,

.blog-card,

.gallery-item,

.feature-large {

    max-width: 100%;

    box-sizing: border-box;

}



/* Fix for Swiper sliders */

.swiper-container,

.swiper-wrapper {

    overflow-x: hidden;

}



/* Media queries for mobile */

@media (max-width: 768px) {

    .container {

        padding: 0 20px;

    }

    

    /* Fix for hero section on mobile */

    .hero-title {

        font-size: 2.5rem;

        word-wrap: break-word;

    }

    

    .hero-title .highlight {

        font-size: 3rem;

        display: inline-block;

        max-width: 100%;

        word-wrap: break-word;

    }

    

    /* Fix for section titles */

    .section-title {

        font-size: 2rem;

        word-wrap: break-word;

        padding: 0 10px;

    }

    

    /* Fix for any flex/grid gaps */

    .hero-features,

    .hero-stats,

    .cta-contact-info,

    .cta-buttons,

    .cta-features {

        flex-wrap: wrap;

        gap: 15px;

    }

    

    /* Fix for feature items */

    .feature-item {

        width: 100%;

        max-width: 100%;

        margin: 0 10px;

    }

}



@media (max-width: 480px) {

    .container {

        padding: 0 15px;

    }

    

    .hero-title {

        font-size: 2rem;

    }

    

    .hero-title .highlight {

        font-size: 2.5rem;

    }

    

    .section-title {

        font-size: 1.8rem;

    }

}







/* ============================================

   HERO SECTION STYLES

   ============================================ */



/* Base Hero Styles */

.hero {

    position: relative;

    min-height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 80px 0;

}



/* Hero Overlay */

.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);

    z-index: 1;

}



.hero-content {

    position: relative;

    z-index: 3;

    text-align: center;

    color: #fff;

}



/* ============================================

   OPTION 1: BACKGROUND IMAGE

   ============================================ */

.hero-image-bg {

    background: url('../images/hero/hero-main.jpg') no-repeat center center;

    background-size: cover;

    background-attachment: fixed; /* Creates parallax effect */

}



/* ============================================

   OPTION 2: IMAGE CAROUSEL

   ============================================ */

.hero-carousel {

    position: relative;

}



.hero-carousel-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

}



.hero-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transition: opacity 1s ease-in-out;

}



.hero-slide.active {

    opacity: 1;

}



/* Carousel Navigation */

.hero-carousel-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 100%;

    z-index: 4;

    display: flex;

    justify-content: space-between;

    padding: 0 30px;

    box-sizing: border-box;

}



.hero-carousel-nav button {

    width: 50px;

    height: 50px;

    background: rgba(255, 255, 255, 0.2);

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    color: #fff;

    cursor: pointer;

    transition: all 0.3s;

    font-size: 1.2rem;

}



.hero-carousel-nav button:hover {

    background: var(--terracotta);

    border-color: var(--terracotta);

    transform: scale(1.1);

}



/* Carousel Dots */

.hero-carousel-dots {

    position: absolute;

    bottom: 100px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 4;

    display: flex;

    gap: 12px;

}



.dot {

    width: 12px;

    height: 12px;

    background: rgba(255, 255, 255, 0.4);

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.3s;

}



.dot.active {

    background: var(--terracotta);

    transform: scale(1.2);

    width: 30px;

    border-radius: 10px;

}



/* ============================================

   OPTION 3: VIDEO BACKGROUND

   ============================================ */

.hero-video-bg {

    position: relative;

}



.hero-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

}



.video-pause-btn {

    position: absolute;

    bottom: 100px;

    right: 30px;

    width: 45px;

    height: 45px;

    background: rgba(255, 255, 255, 0.2);

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    color: #fff;

    cursor: pointer;

    z-index: 5;

    transition: all 0.3s;

}



.video-pause-btn:hover {

    background: var(--terracotta);

    border-color: var(--terracotta);

    transform: scale(1.1);

}



/* ============================================

   HERO CONTENT STYLES (Common for all options)

   ============================================ */

.hero-pre-title {

    display: inline-block;

    font-family: var(--font-accent);

    font-size: 1.2rem;

    letter-spacing: 8px;

    text-transform: uppercase;

    color: var(--terracotta);

    margin-bottom: 20px;

    font-weight: 500;

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

    padding: 8px 25px;

    border-radius: 40px;

    border: 1px solid rgba(255, 255, 255, 0.3);

}



.hero-title {

    font-size: 5rem;

    font-weight: 800;

    color: #fff;

    margin-bottom: 20px;

    line-height: 1.1;

    font-family: var(--font-heading);

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

}



.hero-title .highlight {

    color: var(--terracotta);

    display: block;

    font-size: 5.5rem;

    font-weight: 900;

    font-style: italic;

    margin-top: 10px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}



.hero-description {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.9);

    max-width: 700px;

    margin: 0 auto 40px;

    line-height: 1.8;

    font-weight: 300;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

}



.hero-features {

    display: flex;

    justify-content: center;

    gap: 30px;

    margin-bottom: 40px;

    flex-wrap: wrap;

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 12px;

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(10px);

    padding: 12px 25px;

    border-radius: 50px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: #fff;

}



.feature-item i {

    font-size: 1.5rem;

    color: var(--terracotta);

}



.hero-stats {

    display: flex;

    justify-content: center;

    gap: 60px;

    margin-top: 50px;

}



.stat-item {

    text-align: center;

}



.stat-number {

    display: block;

    font-family: var(--font-heading);

    font-size: 3rem;

    font-weight: 700;

    color: var(--terracotta);

    line-height: 1;

    margin-bottom: 5px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

}



.stat-label {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.8);

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 400;

}



/* Buttons for hero */

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 30px;

}



.hero-buttons .btn-primary {

    background: var(--terracotta);

    color: #fff;

    border: none;

}



.hero-buttons .btn-secondary {

    background: transparent;

    color: #fff;

    border: 2px solid #fff;

}



.hero-buttons .btn-secondary:hover {

    background: #fff;

    color: var(--terracotta);

}



/* Scroll Indicator */

.scroll-indicator {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 5;

}



.scroll-indicator a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    color: #fff;

    transition: all 0.3s;

    animation: bounce 2s infinite;

}



.scroll-indicator a:hover {

    background: var(--terracotta);

    border-color: var(--terracotta);

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-20px);

    }

    60% {

        transform: translateY(-10px);

    }

}



/* Responsive */

@media (max-width: 992px) {

    .hero-title {

        font-size: 4rem;

    }

    

    .hero-title .highlight {

        font-size: 4.5rem;

    }

}



@media (max-width: 768px) {

    .hero {

        min-height: 100vh;

    }

    

    .hero-title {

        font-size: 3rem;

    }

    

    .hero-title .highlight {

        font-size: 3.5rem;

    }

    

    .hero-description {

        font-size: 1rem;

        padding: 0 20px;

    }

    

    .hero-features {

        flex-direction: column;

        align-items: center;

        padding: 0 20px;

    }

    

    .feature-item {

        width: 100%;

        max-width: 350px;

    }

    

    .hero-stats {

        flex-direction: column;

        gap: 20px;

    }

    

    .hero-buttons {

        flex-direction: column;

        align-items: center;

        gap: 15px;

    }

    

    .hero-buttons .btn {

        width: 200px;

    }

    

    .hero-carousel-nav {

        display: none;

    }

    

    .video-pause-btn {

        bottom: 80px;

        right: 20px;

    }

}



@media (max-width: 480px) {

    .hero-title {

        font-size: 2.2rem;

    }

    

    .hero-title .highlight {

        font-size: 2.8rem;

    }

    

    .hero-pre-title {

        font-size: 1rem;

        letter-spacing: 4px;

    }

}









/* Parallax Effect CSS */

.hero-parallax {

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    transition: all 0.3s;

}



/* Fallback for mobile */

@media (max-width: 768px) {

    .hero-parallax {

        background-attachment: scroll;

    }

}







.hero-zoom {

    position: relative;

    overflow: hidden;

}



.hero-zoom-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    animation: zoomInOut 20s infinite alternate ease-in-out;

    z-index: 0;

}



@keyframes zoomInOut {

    0% {

        transform: scale(1);

    }

    100% {

        transform: scale(1.1);

    }

}







/* ============================================

   FIXED SLIDER STYLES

   ============================================ */



.signature-dishes {

    padding: 80px 0;

    background: var(--pure-white);

    position: relative;

    overflow: hidden;

}



/* Swiper Container */

.dishesSwiper {

    width: 100%;

    height: 100%;

    padding: 20px 10px 60px !important;

    margin: 0 auto;

    overflow: visible !important;

}



.swiper-wrapper {

    display: flex;

    align-items: stretch;

}



.swiper-slide {

    height: auto !important;

    display: flex;

    transition: all 0.3s;

}



/* Dish Card */

.dish-card {

    background: var(--pure-white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 30px var(--shadow);

    border: 1px solid var(--border-soft);

    transition: all 0.4s;

    width: 100%;

    display: flex;

    flex-direction: column;

}



.dish-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 40px var(--shadow-strong);

}



.dish-image {

    position: relative;

    height: 280px;

    overflow: hidden;

}



.dish-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s;

}



.dish-card:hover .dish-image img {

    transform: scale(1.1);

}



.dish-chef {

    position: absolute;

    bottom: 20px;

    left: 20px;

    background: var(--terracotta);

    color: var(--pure-white);

    padding: 6px 18px;

    border-radius: 30px;

    font-size: 0.8rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

    z-index: 2;

}



.dish-info {

    padding: 25px;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.dish-info h4 {

    font-size: 1.3rem;

    margin-bottom: 10px;

    color: var(--warm-brown);

}



.dish-info p {

    color: var(--taupe);

    font-size: 0.95rem;

    margin-bottom: 15px;

    line-height: 1.6;

    flex-grow: 1;

}



.dish-tags {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: auto;

}



.dish-tags span {

    background: var(--warm-gray);

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 0.8rem;

    color: var(--taupe);

    font-weight: 500;

}



/* Swiper Navigation */

.swiper-button-next,

.swiper-button-prev {

    color: var(--terracotta);

    background: var(--pure-white);

    width: 45px;

    height: 45px;

    border-radius: 50%;

    box-shadow: 0 5px 15px var(--shadow-strong);

    transition: all 0.3s;

}



.swiper-button-next:hover,

.swiper-button-prev:hover {

    background: var(--terracotta);

    color: var(--pure-white);

    transform: scale(1.1);

}



.swiper-button-next::after,

.swiper-button-prev::after {

    font-size: 1.2rem;

    font-weight: bold;

}



/* Swiper Pagination */

.swiper-pagination {

    position: relative;

    margin-top: 30px;

}



.swiper-pagination-bullet {

    width: 10px;

    height: 10px;

    background: var(--border-light);

    opacity: 1;

    transition: all 0.3s;

}



.swiper-pagination-bullet-active {

    background: var(--terracotta);

    width: 25px;

    border-radius: 5px;

}



/* Responsive */

@media (max-width: 992px) {

    .dishesSwiper {

        padding: 20px 5px 50px !important;

    }

}



@media (max-width: 768px) {

    .dish-image {

        height: 220px;

    }

    

    .dish-info h4 {

        font-size: 1.2rem;

    }

    

    .swiper-button-next,

    .swiper-button-prev {

        display: none;

    }

}





/* ============================================

   URGENT FIX FOR SLIDER CUT-OFF

   Add this at the END of your CSS file

   ============================================ */



/* Force all slides to be visible */

.signature-dishes {

    overflow: visible !important;

    position: relative;

    z-index: 1;

}



.dishesSwiper {

    overflow: visible !important;

    margin: 0 -15px !important; /* Compensate for card margins */

    padding: 20px 15px 50px !important;

    width: auto !important;

}



.swiper-wrapper {

    overflow: visible !important;

}



.swiper-slide {

    overflow: visible !important;

    height: auto !important;

    opacity: 1 !important;

    visibility: visible !important;

    padding: 10px !important; /* Add padding instead of margin on cards */

}



/* Remove margins from cards, use padding on slides instead */

.dish-card {

    margin: 0 !important; /* Remove any margins */

    width: 100% !important;

    height: 100% !important;

}



/* Fix container overflow */

.container {

    overflow: visible !important;

}



/* Ensure parent sections don't hide content */

section {

    overflow: visible !important;

}



/* Fix for any hidden overflow in body/html */

html, body {

    /* overflow-x: visible !important; */

    overflow-y: visible !important;

}



/* Debug - temporarily add borders to see the issue (remove after fixing) */

/*

.swiper-slide {

    border: 2px solid red !important;

}

.dish-card {

    border: 2px solid blue !important;

}

*/







/* ============================================

   ABOUT PAGE SPECIFIC STYLES

   ============================================ */



/* About Hero Section */

.about-hero {

    position: relative;

    min-height: 60vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 80px 0;

}



.about-hero-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    z-index: 0;

}



.about-hero .hero-overlay {

    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);

}



.about-hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    color: #fff;

    max-width: 800px;

    margin: 0 auto;

}



/* Journey Section */

.journey {

    padding: 100px 0;

    background: var(--pure-white);

}



.journey-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



.journey-text {

    color: var(--taupe);

    margin-bottom: 20px;

    line-height: 1.8;

    font-size: 1.05rem;

}



.journey-stats {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

    margin-top: 40px;

}



.stat-box {

    text-align: center;

    padding: 20px;

    background: var(--cream);

    border-radius: 10px;

    border: 1px solid var(--border-soft);

}



.stat-box .stat-number {

    font-size: 2rem;

    font-weight: 700;

    color: var(--terracotta);

    display: block;

}



.stat-box .stat-label {

    font-size: 0.9rem;

    color: var(--taupe);

}



.journey-image {

    position: relative;

    height: 500px;

}



.journey-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 20px;

    box-shadow: 0 30px 40px -20px rgba(0,0,0,0.2);

}



/* Founder Section */

.founder {

    padding: 100px 0;

    background: var(--cream);

}



.founder-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: start;

}



.founder-image {

    position: relative;

    height: 600px;

}



.founder-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 20px;

    box-shadow: 0 30px 40px -20px rgba(0,0,0,0.2);

}



.founder-social {

    position: absolute;

    bottom: 30px;

    right: 30px;

    display: flex;

    gap: 10px;

}



.founder-social a {

    width: 45px;

    height: 45px;

    background: var(--pure-white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--terracotta);

    transition: all 0.3s;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



.founder-social a:hover {

    background: var(--terracotta);

    color: var(--pure-white);

    transform: translateY(-5px);

}



.founder-title {

    font-size: 1.3rem;

    color: var(--terracotta);

    margin-bottom: 20px;

    font-weight: 400;

}



.founder-text {

    color: var(--taupe);

    margin-bottom: 20px;

    line-height: 1.8;

}



.founder-quote {

    margin-top: 30px;

    padding: 30px;

    background: var(--pure-white);

    border-radius: 15px;

    position: relative;

    border-left: 4px solid var(--terracotta);

}



.founder-quote i {

    font-size: 2rem;

    color: var(--terracotta-soft);

    margin-bottom: 15px;

}



.founder-quote p {

    font-style: italic;

    font-size: 1.1rem;

    color: var(--charcoal);

    margin-bottom: 15px;

}



.founder-quote span {

    font-weight: 600;

    color: var(--terracotta);

}



/* Team Section */

.our-team {

    padding: 100px 0;

    background: var(--pure-white);

}



.team-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.team-card {

    background: var(--pure-white);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 15px 30px var(--shadow);

    border: 1px solid var(--border-soft);

    transition: all 0.3s;

}



.team-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 40px var(--shadow-strong);

}



.team-image {

    position: relative;

    height: 300px;

    overflow: hidden;

}



.team-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s;

}



.team-card:hover .team-image img {

    transform: scale(1.05);

}



.team-social {

    position: absolute;

    bottom: -50px;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    gap: 10px;

    transition: bottom 0.3s;

}



.team-card:hover .team-social {

    bottom: 20px;

}



.team-social a {

    width: 40px;

    height: 40px;

    background: var(--pure-white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--terracotta);

    transition: all 0.3s;

}



.team-social a:hover {

    background: var(--terracotta);

    color: var(--pure-white);

}



.team-info {

    padding: 20px;

    text-align: center;

}



.team-info h3 {

    font-size: 1.2rem;

    margin-bottom: 5px;

    color: var(--warm-brown);

}



.team-info p {

    color: var(--taupe);

    font-size: 0.9rem;

    margin-bottom: 10px;

}



.team-exp {

    display: inline-block;

    padding: 5px 15px;

    background: var(--terracotta-soft);

    color: var(--terracotta);

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 500;

}



/* Philosophy Section */

.philosophy {

    padding: 100px 0;

    background: var(--cream);

}



.philosophy-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.philosophy-card {

    text-align: center;

    padding: 40px 30px;

    background: var(--pure-white);

    border-radius: 15px;

    box-shadow: 0 15px 30px var(--shadow);

    border: 1px solid var(--border-soft);

    transition: all 0.3s;

}



.philosophy-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 40px var(--shadow-strong);

}



.philosophy-card i {

    font-size: 3rem;

    color: var(--terracotta);

    margin-bottom: 20px;

}



.philosophy-card h3 {

    font-size: 1.3rem;

    margin-bottom: 15px;

    color: var(--warm-brown);

}



.philosophy-card p {

    color: var(--taupe);

    line-height: 1.7;

}



/* Awards Section */

.awards {

    padding: 100px 0;

    background: var(--pure-white);

}



.awards-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.award-item {

    text-align: center;

    padding: 40px 20px;

    background: linear-gradient(135deg, #fff9f2 0%, #fff 100%);

    border-radius: 15px;

    box-shadow: 0 15px 30px var(--shadow);

    border: 1px solid var(--border-soft);

    transition: all 0.3s;

}



.award-item:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 40px var(--shadow-strong);

}



.award-item i {

    font-size: 3rem;

    color: var(--gold);

    margin-bottom: 20px;

}



.award-item h3 {

    font-size: 1.1rem;

    margin-bottom: 10px;

    color: var(--warm-brown);

}



.award-item p {

    color: var(--taupe);

    font-size: 0.9rem;

}



/* Timeline Section */

.milestones {

    padding: 100px 0;

    background: var(--cream);

}



.timeline {

    position: relative;

    max-width: 800px;

    margin: 50px auto 0;

    padding: 20px 0;

}



.timeline::before {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 2px;

    height: 100%;

    background: var(--terracotta-soft);

}



.timeline-item {

    position: relative;

    margin-bottom: 50px;

    display: flex;

    justify-content: flex-end;

    width: 100%;

}



.timeline-item:nth-child(even) {

    justify-content: flex-start;

}



.timeline-year {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    background: var(--terracotta);

    color: var(--pure-white);

    padding: 8px 20px;

    border-radius: 30px;

    font-weight: 600;

    z-index: 2;

}



.timeline-content {

    width: 45%;

    padding: 30px;

    background: var(--pure-white);

    border-radius: 15px;

    box-shadow: 0 15px 30px var(--shadow);

    border: 1px solid var(--border-soft);

    position: relative;

}



.timeline-content h3 {

    font-size: 1.2rem;

    margin-bottom: 10px;

    color: var(--warm-brown);

}



.timeline-content p {

    color: var(--taupe);

    line-height: 1.6;

    margin: 0;

}



/* Responsive */

@media (max-width: 992px) {

    .journey-grid,

    .founder-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    

    .team-grid,

    .philosophy-grid,

    .awards-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .timeline::before {

        left: 30px;

    }

    

    .timeline-item {

        justify-content: flex-start;

        padding-left: 60px;

    }

    

    .timeline-item:nth-child(even) {

        justify-content: flex-start;

    }

    

    .timeline-year {

        left: 30px;

        transform: translateX(-50%);

    }

    

    .timeline-content {

        width: 100%;

    }

}



@media (max-width: 768px) {

    .journey-stats {

        grid-template-columns: 1fr;

    }

    

    .team-grid,

    .philosophy-grid,

    .awards-grid {

        grid-template-columns: 1fr;

    }

    

    .team-image {

        height: 250px;

    }

}







/* ============================================

   PAGE HEADER WITH BREADCRUMB

   ============================================ */



.page-header {

    position: relative;

    padding: 80px 0;

    /* background: url('../images/hero/hero-main.jpg'), linear-gradient(135deg, var(--cream) 0%, var(--pure-white) 100%); */

    background:linear-gradient(135deg, rgba(139, 69, 19, 0.25), rgba(205, 133, 63, 0.8)), url('../images/hero/hero-main.jpg');

    border-bottom: 1px solid var(--border-soft);

    margin-top: 20px; /* Adjust based on your header height */

}



.page-header-content {

    text-align: center;

}



.page-header h1 {

    font-size: 3.5rem;

    color: var(--pure-white);

    margin-bottom: 15px;

    font-family: var(--font-heading);

    font-weight: 700;

}



.breadcrumb {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 1rem;

}



.breadcrumb a {

    color: var(--terracotta);

    text-decoration: none;

    transition: color 0.3s;

}



.breadcrumb a:hover {

    color: var(--terracotta-dark);

}



.breadcrumb .separator {

    color: var(--taupe);

    font-size: 0.8rem;

}



.breadcrumb .current {

    color: var(--taupe);

    font-weight: 500;

}



/* Responsive */

@media (max-width: 768px) {

    .page-header {

        padding: 60px 0;

    }

    

    .page-header h1 {

        font-size: 2.5rem;

    }

}



@media (max-width: 480px) {

    .page-header h1 {

        font-size: 2rem;

    }

}



/* ============================================

   SERVICES PAGE STYLES

   ============================================ */



.services-intro {

    padding: 60px 0 20px;

    background: var(--pure-white);

}



.intro-text {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

    color: var(--taupe);

    font-size: 1.1rem;

    line-height: 1.8;

}



.services-detailed {

    padding: 40px 0 80px;

    background: var(--pure-white);

}



.service-detailed-item {

    margin-bottom: 80px;

}



.service-detailed-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



.service-detailed-grid.reverse {

    direction: rtl;

}



.service-detailed-grid.reverse .service-detailed-content {

    direction: ltr;

}



.service-detailed-image {

    position: relative;

    height: 450px;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 30px 40px -20px rgba(0,0,0,0.2);

}



.service-detailed-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.service-badge {

    position: absolute;

    top: 20px;

    right: 20px;

    background: var(--gold);

    color: var(--warm-brown);

    padding: 8px 20px;

    border-radius: 30px;

    font-weight: 600;

    font-size: 0.9rem;

}



.service-category {

    display: inline-block;

    font-family: var(--font-accent);

    font-size: 1rem;

    letter-spacing: 3px;

    color: var(--terracotta);

    margin-bottom: 15px;

    font-weight: 500;

}



.service-detailed-content h2 {

    font-size: 2.2rem;

    margin-bottom: 20px;

    line-height: 1.3;

}



.service-detailed-content p {

    color: var(--taupe);

    margin-bottom: 25px;

    line-height: 1.8;

}



.service-features-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 30px;

}



.service-features-list .feature {

    display: flex;

    align-items: center;

    gap: 12px;

}



.service-features-list .feature i {

    color: var(--terracotta);

    font-size: 1.1rem;

}



.service-features-list .feature span {

    color: var(--charcoal);

    font-size: 1rem;

}



.service-cta {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

}



/* Service Packages */

.service-packages {

    padding: 80px 0;

    background: var(--cream);

}



.packages-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.package-card {

    background: var(--pure-white);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 30px var(--shadow);

    border: 1px solid var(--border-soft);

    transition: all 0.3s;

    position: relative;

}



.package-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 40px var(--shadow-strong);

}



.package-card.popular {

    transform: scale(1.05);

    border: 2px solid var(--terracotta);

    box-shadow: 0 20px 40px rgba(193, 123, 92, 0.2);

}



.popular-tag {

    position: absolute;

    top: 15px;

    right: 15px;

    background: var(--terracotta);

    color: var(--pure-white);

    padding: 5px 15px;

    border-radius: 30px;

    font-size: 0.8rem;

    font-weight: 600;

    z-index: 2;

}



.package-header {

    padding: 30px;

    text-align: center;

    border-bottom: 1px solid var(--border-soft);

}



.package-header h3 {

    font-size: 1.8rem;

    margin-bottom: 10px;

    color: var(--warm-brown);

}



.package-price {

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--terracotta);

}



.package-price span {

    font-size: 1rem;

    font-weight: 400;

    color: var(--taupe);

}



.package-content {

    padding: 30px;

}



.package-features {

    list-style: none;

    margin-bottom: 30px;

}



.package-features li {

    padding: 8px 0;

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--charcoal);

}



.package-features li i {

    color: var(--terracotta);

    font-size: 1rem;

}



.package-features li.not-included {

    color: var(--taupe);

    opacity: 0.7;

}



.package-features li.not-included i {

    color: var(--taupe);

}



.package-content .btn {

    width: 100%;

    text-align: center;

}



.packages-note {

    margin-top: 40px;

    text-align: center;

    color: var(--taupe);

    font-size: 0.95rem;

}



.packages-note i {

    color: var(--terracotta);

    margin-right: 8px;

}



/* Service Process */

.service-process {

    padding: 80px 0;

    background: var(--pure-white);

}



.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.process-step {

    text-align: center;

    padding: 30px;

    background: var(--cream);

    border-radius: 15px;

    border: 1px solid var(--border-soft);

    transition: all 0.3s;

}



.process-step:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 30px var(--shadow);

}



.step-number {

    font-size: 3rem;

    font-weight: 700;

    color: var(--terracotta-soft);

    margin-bottom: 15px;

    line-height: 1;

}



.step-content h3 {

    font-size: 1.3rem;

    margin-bottom: 10px;

    color: var(--warm-brown);

}



.step-content p {

    color: var(--taupe);

    line-height: 1.6;

    margin: 0;

}



/* ============================================

   CONTACT PAGE STYLES

   ============================================ */



.contact-intro {

    padding: 60px 0 20px;

    background: var(--pure-white);

}



/* Contact Cards */

.contact-cards {

    padding: 40px 0 60px;

    background: var(--pure-white);

}



.contact-cards-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}



.contact-card {

    text-align: center;

    padding: 40px 30px;

    background: var(--cream);

    border-radius: 15px;

    border: 1px solid var(--border-soft);

    transition: all 0.3s;

}



.contact-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 30px var(--shadow);

}



.contact-card-icon {

    width: 80px;

    height: 80px;

    background: var(--terracotta-soft);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

}



.contact-card-icon i {

    font-size: 2rem;

    color: var(--terracotta);

}



.contact-card h3 {

    font-size: 1.3rem;

    margin-bottom: 15px;

    color: var(--warm-brown);

}



.contact-detail {

    margin-bottom: 10px;

}



.contact-detail a {

    color: var(--charcoal);

    text-decoration: none;

    transition: color 0.3s;

}



.contact-detail a:hover {

    color: var(--terracotta);

}



.contact-timing {

    font-size: 0.9rem;

    color: var(--taupe);

}



/* Contact Form Section */

.contact-form-section {

    padding: 60px 0;

    background: var(--cream);

}



.contact-form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

}



.form-title {

    font-size: 2rem;

    margin-bottom: 10px;

}



.form-subtitle {

    color: var(--taupe);

    margin-bottom: 30px;

}



.contact-form {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.form-group {

    margin-bottom: 0;

}



.form-group.full-width {

    grid-column: span 2;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    color: var(--charcoal);

    font-weight: 500;

    font-size: 0.95rem;

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid var(--border-light);

    border-radius: 8px;

    font-family: var(--font-body);

    font-size: 0.95rem;

    transition: all 0.3s;

    background: var(--pure-white);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--terracotta);

    box-shadow: 0 0 0 3px rgba(193, 123, 92, 0.1);

}



.map-container {

    border-radius: 15px;

    overflow: hidden;

    margin-bottom: 30px;

    box-shadow: 0 15px 30px var(--shadow);

    border: 1px solid var(--border-soft);

}



.business-hours {

    background: var(--pure-white);

    padding: 25px;

    border-radius: 15px;

    margin-bottom: 20px;

    border: 1px solid var(--border-soft);

}



.business-hours h3 {

    font-size: 1.2rem;

    margin-bottom: 15px;

    color: var(--warm-brown);

}



.hours-list {

    list-style: none;

}



.hours-list li {

    padding: 8px 0;

    border-bottom: 1px dashed var(--border-soft);

    display: flex;

    justify-content: space-between;

}



.hours-list li:last-child {

    border-bottom: none;

}



.hours-list li span {

    font-weight: 600;

    color: var(--charcoal);

}



.emergency-contact {

    background: var(--terracotta-soft);

    padding: 25px;

    border-radius: 15px;

    text-align: center;

}



.emergency-contact h3 {

    color: var(--terracotta-dark);

    margin-bottom: 10px;

}



.emergency-contact p {

    color: var(--charcoal);

    margin-bottom: 20px;

}



/* Consultation Section */

.consultation-section {

    padding: 80px 0;

    background: var(--pure-white);

}



.consultation-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    align-items: center;

}



.consultation-text {

    color: var(--taupe);

    line-height: 1.8;

    margin-bottom: 30px;

}



.consultation-options {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.consultation-option {

    display: flex;

    gap: 20px;

    align-items: center;

    padding: 20px;

    background: var(--cream);

    border-radius: 10px;

    border: 1px solid var(--border-soft);

    transition: all 0.3s;

}



.consultation-option:hover {

    transform: translateX(10px);

    box-shadow: 0 10px 20px var(--shadow);

}



.consultation-option i {

    font-size: 2rem;

    color: var(--terracotta);

}



.consultation-option h3 {

    font-size: 1.1rem;

    margin-bottom: 5px;

}



.consultation-option p {

    color: var(--taupe);

    font-size: 0.9rem;

    margin: 0;

}



.consultation-form {

    background: var(--cream);

    padding: 40px;

    border-radius: 20px;

    border: 1px solid var(--border-soft);

}



.consultation-form h3 {

    font-size: 1.5rem;

    margin-bottom: 25px;

    text-align: center;

}



.quick-booking-form {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.btn-full {

    width: 100%;

}



/* Responsive */

@media (max-width: 992px) {

    .service-detailed-grid,

    .service-detailed-grid.reverse {

        grid-template-columns: 1fr;

        direction: ltr;

        gap: 30px;

    }

    

    .packages-grid,

    .process-grid,

    .contact-cards-grid,

    .contact-form-grid,

    .consultation-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .package-card.popular {

        transform: scale(1);

    }

    

    .service-detailed-image {

        height: 350px;

    }

}



@media (max-width: 768px) {

    .contact-form {

        grid-template-columns: 1fr;

    }

    

    .form-group.full-width {

        grid-column: span 1;

    }

    

    .service-detailed-content h2 {

        font-size: 1.8rem;

    }

    

    .process-grid {

        grid-template-columns: 1fr;

    }

    

    .service-cta {

        flex-direction: column;

        align-items: flex-start;

    }

}





































/* ============================================

   FLOATING ACTION BUTTONS - iOS STYLE

   ============================================ */



.floating-actions {

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}



/* Main FAB Button */

.fab-main {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);

    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    z-index: 10000;

    position: relative;

}



.fab-main i {

    color: white;

    font-size: 24px;

    position: absolute;

    transition: all 0.3s ease;

}



.fab-main i.fa-phone-alt {

    opacity: 1;

    transform: rotate(0deg);

}



.fab-main i.fa-times {

    opacity: 0;

    transform: rotate(90deg);

}



.fab-main.active i.fa-phone-alt {

    opacity: 0;

    transform: rotate(-90deg);

}



.fab-main.active i.fa-times {

    opacity: 1;

    transform: rotate(0deg);

}



.fab-main:hover {

    transform: scale(1.1);

    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);

}



/* Expanded Options */

.fab-options {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 15px;

    margin-bottom: 20px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: all 0.3s ease;

}



.fab-options.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



/* Individual Option Buttons */

.fab-option {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    transition: all 0.3s ease;

}



.fab-option .fab-label {

    background: white;

    padding: 8px 16px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 500;

    color: #333;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    opacity: 0;

    transform: translateX(20px);

    transition: all 0.3s ease;

    white-space: nowrap;

}



.fab-option:hover .fab-label {

    opacity: 1;

    transform: translateX(0);

}



.fab-option .fab-icon {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

    transition: all 0.3s ease;

}



.fab-option .fab-icon i {

    font-size: 24px;

    color: white;

}



.fab-option:hover .fab-icon {

    transform: scale(1.1);

}



/* Call Option */

.call-option .fab-icon {

    background: linear-gradient(135deg, #0077b6, #00b4d8);

    box-shadow: 0 8px 20px rgba(0, 119, 182, 0.3);

}



/* WhatsApp Option */

.whatsapp-option .fab-icon {

    background: linear-gradient(135deg, #25D366, #128C7E);

    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);

}



/* ============================================

   SIMPLE BOTTOM BUTTONS (Alternative)

   ============================================ */



.fixed-bottom-buttons {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    display: flex;

    z-index: 9999;

    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);

}



.bottom-btn {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px;

    color: white;

    text-decoration: none;

    font-weight: 500;

    font-size: 16px;

    transition: all 0.3s ease;

}



.bottom-btn i {

    font-size: 20px;

}



.call-btn {

    background: linear-gradient(135deg, #0077b6, #00b4d8);

}



.whatsapp-btn {

    background: linear-gradient(135deg, #25D366, #128C7E);

}



.bottom-btn:hover {

    padding-bottom: 20px;

}



/* ============================================

   RESPONSIVE ADJUSTMENTS

   ============================================ */



@media (max-width: 768px) {

    .floating-actions {

        bottom: 20px;

        right: 20px;

    }

    

    .fab-main {

        width: 55px;

        height: 55px;

    }

    

    .fab-main i {

        font-size: 22px;

    }

    

    .fab-option .fab-icon {

        width: 45px;

        height: 45px;

    }

    

    .fab-option .fab-icon i {

        font-size: 20px;

    }

    

    .fab-option .fab-label {

        font-size: 12px;

        padding: 6px 12px;

    }

}



@media (max-width: 480px) {

    .fixed-bottom-buttons .bottom-btn {

        padding: 12px;

        font-size: 14px;

    }

    

    .bottom-btn i {

        font-size: 18px;

    }

}



/* Animation for FAB */

@keyframes pulse {

    0% {

        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);

    }

    70% {

        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);

    }

    100% {

        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);

    }

}



.fab-main {

    animation: pulse 2s infinite;

}



/* Prevent buttons from covering footer content */

@media (min-width: 769px) {

    body {

        padding-bottom: 0;

    }

}



@media (max-width: 768px) {

    body.fab-open {

        overflow: hidden;

    }

}







/* ============================================

   MENU TABS STYLES

   ============================================ */



.menu-tabs-section {

    padding: 20px 0 40px;

    background: var(--pure-white);

}



.menu-tabs {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}



.menu-tab-btn {

    padding: 15px 40px;

    font-size: 1.1rem;

    font-weight: 600;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    transition: all 0.3s ease;

    background: var(--cream);

    color: var(--charcoal);

    border: 1px solid var(--border-soft);

    letter-spacing: 1px;

}



.menu-tab-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px var(--shadow);

}



.menu-tab-btn.active {

    background: var(--terracotta);

    color: white;

    box-shadow: 0 10px 20px rgba(193, 123, 92, 0.3);

}



/* Menu Tab Content */

.menu-tab-content {

    display: none;

    animation: fadeIn 0.5s ease;

}



.menu-tab-content.active {

    display: block;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Menu Footer */

.menu-footer {

    margin-top: 50px;

    text-align: center;

    padding: 20px;

    background: var(--cream);

    border-radius: 10px;

    border: 1px solid var(--border-soft);

}



.menu-note {

    color: var(--taupe);

    font-size: 1rem;

    font-style: italic;

    margin: 0;

}



/* Responsive for tabs */

@media (max-width: 768px) {

    .menu-tabs {

        gap: 10px;

    }

    

    .menu-tab-btn {

        padding: 12px 25px;

        font-size: 1rem;

        flex: 1 1 auto;

        min-width: 120px;

    }

}



@media (max-width: 480px) {

    .menu-tabs {

        flex-direction: column;

        align-items: stretch;

    }

    

    .menu-tab-btn {

        width: 100%;

        padding: 12px;

    }

}