@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Cinzel:wght@400;700&display=swap');

:root {
    --color-primary: #3d6a64;
    /* Deep Teal */
    --color-secondary: #f3efe6;
    /* Beige/Cream */
    --color-accent: #c5a065;
    /* Gold/Bronze */
    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Cinzel', serif;
}

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

html,
body {
    width: 100%;
    overflow-x: hidden;
    position: relative;
    max-width: 100vw;
}

body {
    font-family: var(--font-ar);
    background-color: var(--color-primary);
    color: var(--color-secondary);
    direction: rtl;
    /* Right to Left for Arabic */
    line-height: 1.6;
}

/* Utilities */
.text-center {
    text-align: center;
}

.w-100 {
    width: 100%;
}

.d-block {
    display: block;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.eng-font {
    font-family: var(--font-en);
    direction: ltr;
    display: block;
}

.section-icon {
    font-size: 2rem;
    color: var(--color-secondary);
    margin: 2rem auto 1rem;
}

.separator {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 2rem 0;
    color: var(--color-accent);
    font-size: 1.2rem;
    opacity: 0.7;
}

/* Sections */
/* Navbar */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Align left and right to stretch */
    width: auto;
    /* Allow auto width to respect padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    z-index: 1000;
}

.brand-logo {
    width: 90px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.call-btn {
    text-decoration: none;
    color: #fff;
    border: 2px solid #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.call-btn:hover {
    background-color: #fff;
    color: var(--color-primary);
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 10px solid var(--color-secondary);
    width: 100%;
    overflow: hidden;
    /* Prevent spillover */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(47, 82, 76, 0.6), rgba(47, 82, 76, 0.6));
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

/* Prevent spillover */


.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
}

.hero-content h2 {
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.cream-section {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    /* Prevent spillover */
    width: 100%;
}

.green-section {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: 4rem 0;
    position: relative;
    /* Subtle pattern overlay */
    background-image: radial-gradient(var(--color-secondary) 1px, transparent 1px);
    background-size: 30px 30px;
    background-opacity: 0.1;
    overflow: hidden;
    /* Prevent spillover */
    width: 100%;
}

/* Background Wrapper for specific sections */
.building-bg-wrapper {
    background-image: linear-gradient(rgba(61, 106, 100, 0.80), rgba(61, 106, 100, 0.80)), url('assets/building.png');
    background-size: cover;
    background-position: center top;
    position: relative;
    overflow: hidden;
    /* Prevent spillover */
    width: 100%;
}

/* Make inner sections transparent so background shows through */
.building-bg-wrapper .green-section {
    background-color: transparent;
    background-image: none;
    /* Remove dot pattern from these if desired, or keep it. User asked for building bg. keeping pattern might be too busy. Let's keep pattern? Or remove? User said "on the green background" which usually implies the solid color. Let's keep transparent background so wrapper shows. Remove pattern to see building better? Or keep pattern. The user said "like the image". The image has green background + building overlay. The pattern was my addition. I will keep pattern but make it very subtle or remove it to let building show. Let's remove pattern for clarity.*/
}

/* Re-apply pattern to wrapper? Or just leave building. Let's leave building. */

.logo-large {
    width: 200px;
    margin: 0 auto;
    display: block;
}

.content-block {
    margin-bottom: 3rem;
    text-align: center;
}

.content-block p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* Menu Grid */
.menu-container {
    max-width: 900px;
    margin: 3rem auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
    padding: 0 20px;
}

.menu-column {
    flex: 1;
    min-width: 300px;
}

/* Arabic Menu Column (Right side in RTL) */
.menu-column.ar {
    text-align: right;
}

/* English Menu Column (Left side in RTL) */
.menu-column.en {
    text-align: left;
    direction: ltr;
    /* Ensure text flows LTR inside RTL body */
}

.menu-item {
    margin-bottom: 2rem;
}

.menu-item h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--color-secondary);
}

.menu-item p {
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 1.5;
    font-weight: 300;
}

/* Asterisk Styling */
.menu-item h3::before {
    content: '* ';
    color: var(--color-secondary);
    font-size: 1.2em;
}

.menu-column.en .menu-item h3::before {
    content: '';
    /* Reset default */
}

.menu-column.en .menu-item h3::after {
    /* Put asterisk at end for english usually? Or beginning? 
       In the image, English has *At The Start*, e.g. *Saudi Shawarma* 
    */
    content: '';
}

.menu-column.en .menu-item h3::before {
    content: '*';
}

.menu-column.en .menu-item h3::after {
    content: '*';
}

/* Specific adjustments matching image */
.menu-column.ar .menu-item h3::before {
    content: '* ';
    margin-left: 5px;
}

.menu-column.en h3 {
    font-family: 'Arial', sans-serif;
    /* Close to image sans-serif */
    font-weight: 700;
}

.menu-column.en p {
    font-family: 'Arial', sans-serif;
    font-size: 0.85rem;
}

/* Building section removed in favor of img tag */

.thank-you {
    padding: 4rem 0;
    background-color: var(--color-primary);
    text-align: center;
}

.thank-you h2 {
    font-size: 3rem;
    margin-bottom: 0;
}

.thank-you h3 {
    font-size: 1.5rem;
    letter-spacing: 3px;
}


/* Animations */
.animate {
    opacity: 0;
    transition: all 0.8s ease-out;
}

/* Base Transforms */
.fade-up {
    transform: translateY(30px);
}

.slide-right {
    transform: translateX(-50px);
}

.slide-left {
    transform: translateX(50px);
}

.pop-in {
    transform: scale(0.8);
}

/* Active State (Triggered by JS) */
.animate.visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Stagger Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.pattern-strip {
    height: 40px;
    background-color: var(--color-secondary);
    background-image: radial-gradient(var(--color-accent) 2px, transparent 2px);
    background-size: 10px 10px;
    margin: 0;
}

/* SVG Icon Sizing */
.svg-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

.section-icon .svg-icon {
    width: 40px;
    height: 40px;
}

/* Specific Icon Coloring */
.cream-section .svg-icon,
.separator .svg-icon {
    color: var(--color-accent);
    /* Gold color for diamonds */
}

/* Animations */
.animate {
    opacity: 0;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smoother bezier */
}

/* Base Transforms */
.fade-up {
    transform: translateY(40px);
}

/* Slightly more movement for smoothness */
.slide-right {
    transform: translateX(-50px);
}

.slide-left {
    transform: translateX(50px);
}

.pop-in {
    transform: scale(0.8);
}

/* Active State (Triggered by JS) */
.animate.visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Stagger Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.pattern-strip .svg-icon {
    color: var(--color-secondary);
    /* Keep pattern strip cream/white on green background for contrast */
}

/* Mobile Responsiveness & Typography Updates */
@media (max-width: 768px) {
    .navbar {
        /* Revert to row layout for Left Logo, Right Button */
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        /* Ensure it's not stacked */
        padding: 15px 20px;
    }

    .brand-logo {
        width: 70px;
        /* Slight resize for mobile */
    }

    .call-btn {
        padding: 8px 15px;
        font-size: 0.8rem;
    }

    .hero-content h1 {
        font-size: 3rem;
        /* Smaller on mobile to fit */
        line-height: 1.2;
    }

    .hero-content h2 {
        font-size: 1.5rem;
    }

    .menu-container {
        flex-direction: column;
        gap: 2rem;
    }

    .menu-column {
        width: 100%;
        min-width: unset;
    }
}

/* Global Size Increases */
.content-block p {
    font-size: 1.3rem;
    /* Increased from 1.1rem */
}

.menu-item h3 {
    font-size: 1.6rem;
    /* Increased from 1.3rem */
}

.menu-item p {
    font-size: 1.1rem;
    /* Increased from 0.95rem */
}