<title>GOLDEN | حلويات ذهبية</title> <style> :root { --gold: #D4AF37; --gold-light: #F4D03F; --gold-dark: #B8860B; --black: #0A0A0A; --white: #FFFFFF; --cream: #FFFAF0; --brown: #5D4037; --gradient-gold: linear-gradient(135deg, #F9D976 0%, #D4AF37 50%, #8E6D13 100%); }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    body {
        font-family: 'Cairo', sans-serif;
        background: var(--black);
        color: var(--white);
        overflow-x: hidden;
    }
    
    /* Fixed Header */
    .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(15px);
        border-bottom: 3px solid var(--gold);
        z-index: 1000;
        padding: 18px 0;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    }
    
    .header-content {
        max-width: 1300px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
    }
    
    .logo {
        font-family: 'Playfair Display', serif;
        font-size: 38px;
        font-weight: 900;
        font-style: italic;
        background: var(--gradient-gold);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }
    
    .nav-links {
        display: flex;
        gap: 35px;
    }
    
    .nav-link {
        color: var(--white);
        text-decoration: none;
        font-weight: 700;
        font-size: 17px;
        padding: 10px 20px;
        border-radius: 25px;
        transition: all 0.3s;
        position: relative;
    }
    
    .nav-link:hover {
        background: var(--gold);
        color: var(--black);
        transform: translateY(-2px);
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -5px;
        right: 50%;
        transform: translateX(50%);
        width: 0;
        height: 3px;
        background: var(--gradient-gold);
        border-radius: 2px;
        transition: width 0.3s;
    }
    
    .nav-link:hover::after {
        width: 80%;
    }
    
    .whatsapp-fixed {
        background: #25D366;
        color: white;
        padding: 12px 28px;
        border-radius: 30px;
        font-weight: 800;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.3s;
        box-shadow: 0 5px 15px rgba(37, 211, 102, 0.2);
    }
    
    .whatsapp-fixed:hover {
        background: #128C7E;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
    }
    
    /* Hero Section */
    .hero-section {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(45deg, #000000 0%, #1a1a1a 100%);
        position: relative;
        text-align: center;
        margin-top: 74px;
        overflow: hidden;
    }
    
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 40%),
            radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
            radial-gradient(circle at 40% 60%, rgba(212, 175, 55, 0.1) 0%, transparent 40%);
    }
    
    .golden-main {
        font-family: 'Playfair Display', serif;
        font-size: clamp(90px, 18vw, 180px);
        font-weight: 900;
        font-style: italic;
        background: var(--gradient-gold);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        position: relative;
        z-index: 2;
        text-shadow: 0 0 60px rgba(212, 175, 55, 0.4);
        animation: goldenGlow 4s ease-in-out infinite;
        letter-spacing: -5px;
        margin-bottom: 25px;
        line-height: 1;
    }
    
    .hero-subtitle {
        font-size: 26px;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 50px;
        max-width: 700px;
        line-height: 1.7;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    
    .hero-buttons {
        display: flex;
        gap: 25px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .hero-btn {
        padding: 18px 45px;
        border-radius: 50px;
        font-weight: 800;
        font-size: 19px;
        text-decoration: none;
        transition: all 0.4s;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        letter-spacing: 0.5px;
    }
    
    .btn-primary {
        background: var(--gradient-gold);
        color: var(--black);
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    }
    
    .btn-primary:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(212, 175, 55, 0.5);
    }
    
    .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: var(--white);
        border: 2px solid var(--gold);
        backdrop-filter: blur(10px);
    }
    
    .btn-secondary:hover {
        background: rgba(212, 175, 55, 0.15);
        transform: translateY(-8px);
        border-color: var(--gold-light);
        box-shadow: 0 15px 35px rgba(212, 175, 55, 0.2);
    }
    
    @keyframes goldenGlow {
        0%, 100% {
            filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.4));
            transform: scale(1);
        }
        50% {
            filter: drop-shadow(0 0 50px rgba(212, 175, 55, 0.7));
            transform: scale(1.03);
        }
    }
    
    /* Sections Common */
    .section {
        padding: 120px 25px;
        position: relative;
    }
    
    .section-title {
        font-size: 56px;
        font-weight: 900;
        margin-bottom: 30px;
        text-align: center;
        position: relative;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .section-title::after {
        content: '';
        position: absolute;
        bottom: -15px;
        right: 50%;
        transform: translateX(50%);
        width: 150px;
        height: 5px;
        background: var(--gradient-gold);
        border-radius: 3px;
    }
    
    .golden-accent {
        color: var(--gold);
        position: relative;
    }
    
    .golden-accent::after {
        content: '';
        position: absolute;
        bottom: -5px;
        right: 0;
        width: 100%;
        height: 3px;
        background: var(--gradient-gold);
        border-radius: 2px;
    }
    
    .section-description {
        font-size: 20px;
        color: rgba(255, 255, 255, 0.8);
        max-width: 850px;
        margin: 0 auto 60px;
        text-align: center;
        line-height: 1.8;
        padding: 0 20px;
    }
    
    .section-number {
        font-size: 150px;
        font-weight: 900;
        color: rgba(212, 175, 55, 0.08);
        position: absolute;
        top: 20px;
        right: 40px;
        font-family: 'Playfair Display', serif;
        z-index: -1;
    }
    
    /* Eastern Menu Section */
    .eastern-section {
        background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    }
    
    .eastern-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            radial-gradient(circle at 15% 85%, rgba(93, 64, 55, 0.12) 0%, transparent 45%),
            radial-gradient(circle at 85% 15%, rgba(212, 175, 55, 0.07) 0%, transparent 45%);
    }
    
    .menu-container {
        max-width: 1300px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(15px);
        border-radius: 25px;
        padding: 50px;
        border: 2px solid rgba(212, 175, 55, 0.25);
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
    }
    
    .menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 35px;
        margin-top: 40px;
    }
    
    .category-card {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 20px;
        padding: 30px;
        border: 1px solid rgba(212, 175, 55, 0.15);
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
    }
    
    .category-card:hover {
        border-color: var(--gold);
        transform: translateY(-12px);
        box-shadow: 0 20px 50px rgba(212, 175, 55, 0.15);
    }
    
    .category-title {
        background: linear-gradient(135deg, #8B4513, #5D2906);
        color: var(--gold);
        padding: 18px;
        border-radius: 12px;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 25px;
        border: 2px solid var(--gold);
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
    
    .menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
        border-bottom: 2px dashed rgba(255, 255, 255, 0.1);
    }
    
    .menu-item:last-child {
        border-bottom: none;
    }
    
    .menu-item:hover {
        background: rgba(212, 175, 55, 0.08);
        border-radius: 10px;
        padding: 14px 12px;
    }
    
    .item-name {
        font-weight: 800;
        color: var(--white);
        font-size: 18px;
        flex: 1;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .item-price {
        background: var(--gradient-gold);
        color: var(--black);
        padding: 8px 20px;
        border-radius: 25px;
        font-weight: 900;
        font-size: 18px;
        min-width: 120px;
        text-align: center;
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
    }
    
    /* Western Menu Section */
    .western-section {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    }
    
    .western-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            radial-gradient(circle at 25% 35%, rgba(212, 175, 55, 0.12) 0%, transparent 45%),
            radial-gradient(circle at 75% 65%, rgba(93, 64, 55, 0.08) 0%, transparent 45%);
    }
    
    /* Branches Section */
    .branches-section {
        background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    }
    
    .branches-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            radial-gradient(circle at 12% 88%, rgba(212, 175, 55, 0.1) 0%, transparent 45%),
            radial-gradient(circle at 88% 12%, rgba(93, 64, 55, 0.07) 0%, transparent 45%);
    }
    
    .branches-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 45px;
        max-width: 1300px;
        margin: 0 auto;
    }
    
    .branch-card {
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(15px);
        border: 2px solid rgba(212, 175, 55, 0.2);
        border-radius: 25px;
        padding: 45px;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
    
    .branch-card:hover {
        transform: translateY(-12px);
        border-color: var(--gold);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
    }
    
    .branch-icon {
        font-size: 60px;
        color: var(--gold);
        margin-bottom: 25px;
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }
    
    .branch-title {
        font-size: 32px;
        font-weight: 900;
        margin-bottom: 25px;
        color: var(--gold);
        text-align: center;
        border-bottom: 3px solid rgba(212, 175, 55, 0.25);
        padding-bottom: 20px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .branch-details {
        margin-top: 30px;
    }
    
    .branch-info {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 25px;
        padding: 18px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
        border-right: 4px solid var(--gold);
        transition: all 0.3s;
    }
    
    .branch-info:hover {
        background: rgba(212, 175, 55, 0.08);
        transform: translateX(-5px);
    }
    
    .branch-info i {
        color: var(--gold);
        font-size: 24px;
        margin-top: 3px;
    }
    
    .branch-info h4 {
        font-size: 17px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 8px;
    }
    
    .branch-info p {
        font-size: 20px;
        font-weight: 700;
        color: var(--white);
        line-height: 1.6;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .whatsapp-branch {
        background: linear-gradient(135deg, #25D366, #128C7E);
        color: white;
        border: none;
        padding: 18px 40px;
        border-radius: 30px;
        font-weight: 800;
        font-size: 18px;
        text-decoration: none;
        margin-top: 25px;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        width: 100%;
        justify-content: center;
        box-shadow: 0 10px 25px rgba(37, 211, 102, 0.25);
    }
    
    .whatsapp-branch:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(37, 211, 102, 0.35);
    }
    
    /* Footer */
    .footer {
        background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%);
        padding: 70px 25px;
        text-align: center;
        border-top: 3px solid var(--gold);
        position: relative;
        overflow: hidden;
    }
    
    .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    }
    
    .footer-content {
        max-width: 1300px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    
    .footer-logo {
        font-family: 'Playfair Display', serif;
        font-size: 48px;
        font-weight: 900;
        font-style: italic;
        background: var(--gradient-gold);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 30px;
        text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
    }
    
    .footer-info {
        color: rgba(255, 255, 255, 0.7);
        font-size: 18px;
        line-height: 1.9;
        margin-bottom: 40px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .footer-contact {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    
    .contact-item {
        display: flex;
        align-items: center;
        gap: 15px;
        color: var(--gold);
        font-weight: 700;
        font-size: 20px;
        padding: 15px 30px;
        background: rgba(212, 175, 55, 0.1);
        border-radius: 50px;
        border: 2px solid rgba(212, 175, 55, 0.2);
        transition: all 0.3s;
    }
    
    .contact-item:hover {
        background: rgba(212, 175, 55, 0.15);
        transform: translateY(-5px);
        border-color: var(--gold);
    }
    
    .copyright {
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
        padding-top: 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 30px;
    }
    
    /* Responsive */
    @media (max-width: 1200px) {
        .golden-main {
            font-size: 140px;
        }
        
        .header-content, .menu-container, .branches-container, .footer-content {
            max-width: 95%;
        }
    }
    
    @media (max-width: 992px) {
        .golden-main {
            font-size: 100px;
        }
        
        .section-title {
            font-size: 44px;
        }
        
        .nav-links {
            display: none;
        }
        
        .header-content {
            justify-content: center;
            padding: 0 20px;
        }
        
        .whatsapp-fixed {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 1001;
            padding: 15px 25px;
        }
        
        .hero-section {
            margin-top: 70px;
        }
        
        .menu-grid, .branches-container {
            grid-template-columns: 1fr;
            gap: 25px;
        }
        
        .section {
            padding: 100px 20px;
        }
    }
    
    @media (max-width: 768px) {
        .golden-main {
            font-size: 70px;
            letter-spacing: -3px;
        }
        
        .hero-subtitle {
            font-size: 20px;
            padding: 0 20px;
        }
        
        .section {
            padding: 80px 15px;
        }
        
        .menu-container {
            padding: 30px 20px;
            border-radius: 20px;
        }
        
        .branch-card {
            padding: 30px 20px;
        }
        
        .hero-buttons {
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .hero-btn {
            width: 100%;
            max-width: 350px;
            justify-content: center;
            padding: 16px 35px;
        }
        
        .footer-contact {
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .contact-item {
            width: 100%;
            max-width: 300px;
            justify-content: center;
        }
        
        .section-number {
            font-size: 120px;
            top: 10px;
            right: 20px;
        }
    }
    
    @media (max-width: 576px) {
        .golden-main {
            font-size: 50px;
        }
        
        .section-title {
            font-size: 32px;
        }
        
        .section-description {
            font-size: 17px;
        }
        
        .section-number {
            font-size: 90px;
            right: 15px;
        }
        
        .hero-subtitle {
            font-size: 18px;
        }
        
        .footer-info {
            font-size: 16px;
        }
        
        .contact-item {
            font-size: 17px;
            padding: 12px 25px;
        }
        
        .category-title {
            font-size: 19px;
            padding: 15px;
        }
        
        .item-name, .item-price {
            font-size: 16px;
        }
        
        .branch-title {
            font-size: 26px;
        }
        
        .branch-info p {
            font-size: 17px;
        }
    }
</style>

GOLDEN

الرئيسية المنيو الشرقي المنيو الغربي الفروع واتساب للحجز

<!-- Hero Section -->
<section class="hero-section" id="home">
    <div class="hero-content">
        <h1 class="golden-main">GOLDEN</h1>
        <p class="hero-subtitle">
            أجود أنواع الحلويات الشرقية والغربية بأيدي أمهر الحلوانيين.<br>
            نقدم لكم طعم الذهب في كل قطعة، بسعر يناسب الجميع
        </p>
        <div class="hero-buttons">
            <a href="#eastern" class="hero-btn btn-primary">
                <i class="fas fa-moon"></i>
                المنيو الشرقي
            </a>
            <a href="#western" class="hero-btn btn-secondary">
                <i class="fas fa-birthday-cake"></i>
                المنيو الغربي
            </a>
        </div>
    </div>
</section>

<!-- Eastern Menu Section -->
<section class="section eastern-section" id="eastern">
    <div class="section-number">01</div>
    <h2 class="section-title">منيو <span class="golden-accent">الشرقي</span></h2>
    <p class="section-description">
        أجود أنواع الحلويات الشرقية المصنوعة بأيدي أمهر الحلوانيين.<br>
        كل قطعة تُحضر بعناية فائقة باستخدام أفضل المكونات الطبيعية.
    </p>
    
    <div class="menu-container">
        <div class="menu-grid">
            <!-- البسبوسة -->
            <div class="category-card">
                <div class="category-title">البسبوسة</div>
                <div class="menu-item">
                    <div class="item-name">بسبوسة تركي</div>
                    <div class="item-price">180 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">بسبوسة سادة</div>
                    <div class="item-price">150 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">بسبوسة بندق</div>
                    <div class="item-price">220 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">بسبوسة فستق</div>
                    <div class="item-price">350 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">بسبوسة قشطة</div>
                    <div class="item-price">200 ج.م</div>
                </div>
            </div>
            
            <!-- الكنافة -->
            <div class="category-card">
                <div class="category-title">الكنافة</div>
                <div class="menu-item">
                    <div class="item-name">كنافة قشطة</div>
                    <div class="item-price">200 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">كنافة كريمة</div>
                    <div class="item-price">150 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">كنافة مكسرات</div>
                    <div class="item-price">250 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">كنافة نوتيلا</div>
                    <div class="item-price">220 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">كنافة يورمة</div>
                    <div class="item-price">350 ج.م</div>
                </div>
            </div>
            
            <!-- حلويات أخرى -->
            <div class="category-card">
                <div class="category-title">حلويات أخرى</div>
                <div class="menu-item">
                    <div class="item-name">جلاش كريمة</div>
                    <div class="item-price">150 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">جلاش مكسرات</div>
                    <div class="item-price">220 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">بقلاوة</div>
                    <div class="item-price">250 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">بلح الشام</div>
                    <div class="item-price">150 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">معمول بالتمر</div>
                    <div class="item-price">200 ج.م</div>
                </div>
            </div>
        </div>
        
        <div style="text-align: center; margin-top: 50px;">
            <a href="https://wa.me/201201068500?text=مرحباً، أريد الحجز على الحلويات الشرقية" 
               class="whatsapp-branch" target="_blank">
                <i class="fab fa-whatsapp"></i>
                احجز الآن عبر واتساب
            </a>
        </div>
    </div>
</section>

<!-- Western Menu Section -->
<section class="section western-section" id="western">
    <div class="section-number">02</div>
    <h2 class="section-title">منيو <span class="golden-accent">الغربي</span></h2>
    <p class="section-description">
        تشكيلة فاخرة من التورت والكيكات بتصاميم مذهلة وطعم لا يقاوم.<br>
        تورت وكيك لكل المناسبات بأيدي خبراء الحلويات.
    </p>
    
    <div class="menu-container">
        <div class="menu-grid">
            <!-- تورته مدورة -->
            <div class="category-card">
                <div class="category-title">🎂 تورته مدورة</div>
                <div class="menu-item">
                    <div class="item-name">مقاس 18 سم</div>
                    <div class="item-price">200 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">مقاس 20 سم</div>
                    <div class="item-price">250 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">مقاس 22 سم</div>
                    <div class="item-price">300 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">مقاس 24 سم</div>
                    <div class="item-price">350 ج.م</div>
                </div>
            </div>
            
            <!-- تابع المدورة وقلب -->
            <div class="category-card">
                <div class="category-title">🎂 تابع المدورة</div>
                <div class="menu-item">
                    <div class="item-name">مقاس 26 سم</div>
                    <div class="item-price">400 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">مقاس 28 سم</div>
                    <div class="item-price">430 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">مقاس 30 سم</div>
                    <div class="item-price">500 ج.م</div>
                </div>
                
                <div class="category-title" style="margin-top: 30px; margin-bottom: 20px;">❤️ تورته قلب</div>
                <div class="menu-item">
                    <div class="item-name">قلب صغير</div>
                    <div class="item-price">220 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">قلب وسط</div>
                    <div class="item-price">320 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">قلب كبير</div>
                    <div class="item-price">450 ج.م</div>
                </div>
            </div>
            
            <!-- عجين السكر -->
            <div class="category-card">
                <div class="category-title">📏 عجين السكر</div>
                <div class="menu-item">
                    <div class="item-name">20 × 20 سم</div>
                    <div class="item-price">280 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">25 × 25 سم</div>
                    <div class="item-price">380 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">30 × 30 سم</div>
                    <div class="item-price">500 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">30 × 40 سم</div>
                    <div class="item-price">600 ج.م</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">40 × 40 سم</div>
                    <div class="item-price">750 ج.م</div>
                </div>
            </div>
        </div>
        
        <div style="text-align: center; margin-top: 50px;">
            <a href="https://wa.me/201201068500?text=مرحباً، أريد الحجز على التورت والكيكات" 
               class="whatsapp-branch" target="_blank">
                <i class="fab fa-whatsapp"></i>
                احجز الآن عبر واتساب
            </a>
        </div>
    </div>
</section>

<!-- Branches Section -->
<section class="section branches-section" id="branches">
    <div class="section-number">03</div>
    <h2 class="section-title">الفروع <span class="golden-accent">والتواصل</span></h2>
    <p class="section-description">
        توجد لدينا فرعين في المنصورة للحصول على أفضل خدمة.<br>
        يمكنك الاتصال أو التواصل عبر واتساب للحجز والاستفسارات.
    </p>
    
    <div class="branches-container">
        <!-- الفرع الأول -->
        <div class="branch-card">
            <div class="branch-icon">
                <i class="fas fa-store"></i>
            </div>
            <h3 class="branch-title">الفرع الأول</h3>
            
            <div class="branch-details">
                <div class="branch-info">
                    <i class="fas fa-map-marker-alt"></i>
                    <div>
                        <h4>العنوان:</h4>
                        <p>طريق موقف المنصورة - أمام شركة حسونة للأدوات الكهربائية</p>
                    </div>
                </div>
                
                <div class="branch-info">
                    <i class="fas fa-phone-alt"></i>
                    <div>
                        <h4>رقم الهاتف:</h4>
                        <p>01201068500</p>
                    </div>
                </div>
                
                <button class="whatsapp-branch" onclick="openWhatsApp('201201068500', 'مرحباً، أريد التواصل مع فرع المنصورة الأول')">
                    <i class="fab fa-whatsapp"></i>
                    تواصل عبر واتساب - الفرع الأول
                </button>
            </div>
        </div>
        
        <!-- الفرع الثاني -->
        <div class="branch-card">
            <div class="branch-icon">
                <i class="fas fa-store"></i>
            </div>
            <h3 class="branch-title">الفرع الثاني</h3>
            
            <div class="branch-details">
                <div class="branch-info">
                    <i class="fas fa-map-marker-alt"></i>
                    <div>
                        <h4>العنوان:</h4>
                        <p>طريق الغشام - بجوار صيدلية العزبي</p>
                    </div>
                </div>
                
                <div class="branch-info">
                    <i class="fas fa-phone-alt"></i>
                    <div>
                        <h4>رقم الهاتف:</h4>
                        <p>01019123164</p>
                    </div>
                </div>
                
                <button class="whatsapp-branch" onclick="openWhatsApp('2010019123164', 'مرحباً، أريد التواصل مع فرع المنصورة الثاني')">
                    <i class="fab fa-whatsapp"></i>
                    تواصل عبر واتساب - الفرع الثاني
                </button>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="footer-content">
        <div class="footer-logo">GOLDEN</div>
        <p class="footer-info">
            منذ عام 2010 ونحن نقدم أجود أنواع الحلويات الشرقية والغربية بأيدي أمهر الحلوانيين،<br>
            باستخدام أفضل المكونات الطبيعية وبتقنيات حديثة تضمن الجودة والطعم المميز.
        </p>
        
        <div class="footer-contact">
            <div class="contact-item">
                <i class="fas fa-phone"></i>
                <span>01201068500</span>
            </div>
            <div class="contact-item">
                <i class="fas fa-phone"></i>
                <span>01019123164</span>
            </div>
            <div class="contact-item">
                <i class="fab fa-whatsapp"></i>
                <span>واتساب للحجز</span>
            </div>
        </div>
        
        <p class="copyright">
            © 2024 GOLDEN - جميع الحقوق محفوظة | القاهرة - مصر<br>
            تم التصميم بعناية لضمان تجربة استخدام ممتازة على جميع الأجهزة
        </p>
    </div>
</footer>

<script>
    // Function to open WhatsApp
    function openWhatsApp(phoneNumber, message) {
        const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
        window.open(whatsappUrl, '_blank');
    }
    
    // Make phone numbers clickable
    document.querySelectorAll('.branch-info p').forEach(phone => {
        if (phone.textContent.match(/\d{11}/)) {
            phone.style.cursor = 'pointer';
            phone.addEventListener('click', function() {
                const phoneNumber = this.textContent.trim();
                if (/Mobi|Android/i.test(navigator.userAgent)) {
                    window.location.href = `tel:${phoneNumber}`;
                } else {
                    navigator.clipboard.writeText(phoneNumber).then(() => {
                        const originalText = this.textContent;
                        this.textContent = 'تم نسخ الرقم!';
                        setTimeout(() => {
                            this.textContent = originalText;
                        }, 2000);
                    });
                }
            });
        }
    });
    
    // Smooth scrolling for navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 70,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Header scroll effect
    window.addEventListener('scroll', function() {
        const header = document.querySelector('.fixed-header');
        if (window.scrollY > 100) {
            header.style.background = 'rgba(10, 10, 10, 0.98)';
            header.style.backdropFilter = 'blur(15px)';
        } else {
            header.style.background = 'rgba(10, 10, 10, 0.98)';
            header.style.backdropFilter = 'blur(15px)';
        }
    });
    
    // Create floating golden particles
    document.addEventListener('DOMContentLoaded', function() {
        createFloatingParticles();
    });
    
    function createFloatingParticles() {
        const particlesContainer = document.createElement('div');
        particlesContainer.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
        `;
        
        document.body.appendChild(particlesContainer);
        
        // Create particles
        for (let i = 0; i < 25; i++) {
            const particle = document.createElement('div');
            particle.style.cssText = `
                position: absolute;
                width: ${Math.random() * 4 + 2}px;
                height: ${Math.random() * 4 + 2}px;
                background: var(--gold);
                border-radius: 50%;
                opacity: ${Math.random() * 0.2 + 0.05};
            `;
            
            particle.style.left = Math.random() * 100 + 'vw';
            particle.style.top = Math.random() * 100 + 'vh';
            particle.style.animation = `
                float ${Math.random() * 25 + 15}s linear infinite,
                pulse ${Math.random() * 4 + 3}s ease-in-out infinite
            `;
            particle.style.animationDelay = Math.random() * 5 + 's';
            
            particlesContainer.appendChild(particle);
        }
        
        // Add CSS for animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes float {
                0% { transform: translate(0, 0) rotate(0deg); }
                100% { transform: translate(${Math.random() * 300 - 150}px, ${Math.random() * 300 - 150}px) rotate(360deg); }
            }
            @keyframes pulse {
                0%, 100% { opacity: 0.1; }
                50% { opacity: 0.4; }
            }
        `;
        document.head.appendChild(style);
    }
    
    // Mobile menu toggle
    function toggleMobileMenu() {
        const navLinks = document.querySelector('.nav-links');
        navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
    }
    
    // Add click event to phone numbers in footer
    document.querySelectorAll('.contact-item').forEach(item => {
        if (item.textContent.includes('01201068500') || item.textContent.includes('01019123164')) {
            item.style.cursor = 'pointer';
            item.addEventListener('click', function(e) {
                if (!this.querySelector('i.fab')) { // Not whatsapp
                    const phoneNumber = this.textContent.replace(/\D/g, '');
                    if (/Mobi|Android/i.test(navigator.userAgent)) {
                        window.location.href = `tel:${phoneNumber}`;
                    } else {
                        navigator.clipboard.writeText(this.textContent.trim()).then(() => {
                            const originalHTML = this.innerHTML;
                            this.innerHTML = '<i class="fas fa-check"></i> <span>تم نسخ الرقم!</span>';
                            setTimeout(() => {
                                this.innerHTML = originalHTML;
                            }, 2000);
                        });
                    }
                    e.stopPropagation();
                }
            });
        }
    });
</script>