/**
 * Al-Ayah Mosque Landing Page Theme
 * Islamic Light Theme with Purple & Gold Color Palette
 * 
 * Theme Colors:
 * Primary Purple: #8B7AB8
 * Primary Gold: #D4AF78
 * Dark Purple: #6B5B8E
 * Light Gold: #E5C896
 * Background: #FAFAFA (Light theme)
 */

/* ============================================
   CSS Variables - Theme Colors
   ============================================ */
:root {
    /* Primary Colors */
    --primary-purple: #8B7AB8;
    --primary-gold: #D4AF78;
    
    /* Secondary Colors */
    --dark-purple: #6B5B8E;
    --light-gold: #E5C896;
    
    /* Extended Palette */
    --purple-1: #8B7AB8;
    --purple-2: #7B6AA8;
    --purple-3: #6B5B8E;
    --gold-1: #E5C896;
    --gold-2: #D4AF78;
    --gold-3: #C49E68;
    
    /* Background & Text */
    --bg-primary: #FAFAFA;
    --bg-secondary: #F5F3F0;
    --bg-card: #FFFFFF;
    --text-primary: #2D2D2D;
    --text-secondary: #5A5A5A;
    --text-light: #FFFFFF;
    
    /* Gradients */
    --gradient-purple: linear-gradient(135deg, #8B7AB8 0%, #6B5B8E 100%);
    --gradient-gold: linear-gradient(135deg, #E5C896 0%, #C49E68 100%);
    --gradient-mixed: linear-gradient(135deg, #8B7AB8 0%, #D4AF78 100%);
    
    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(139, 122, 184, 0.15);
    --shadow-medium: 0 8px 30px rgba(139, 122, 184, 0.2);
    --shadow-gold: 0 4px 20px rgba(212, 175, 120, 0.25);
}

/* ============================================
   Base Styles
   ============================================ */
@font-face {
    font-family: 'main';
    src: url('/fonts/mainfont.ttf');
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

* {
    font-family: 'main', sans-serif;
    direction: rtl;
}

body {
    background-color: var(--bg-primary);
    background-image: 
        /* Islamic Arabesque Pattern - Interlocking geometric shapes */
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%238B7AB8' stroke-width='0.4' opacity='0.07'%3E%3Cpath d='M50 0 L100 50 L50 100 L0 50 Z'/%3E%3Cpath d='M50 15 L85 50 L50 85 L15 50 Z'/%3E%3Cpath d='M50 30 L70 50 L50 70 L30 50 Z'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4AF78' stroke-width='0.3' opacity='0.05'%3E%3Cpath d='M0 0 L50 50 L0 100'/%3E%3Cpath d='M100 0 L50 50 L100 100'/%3E%3C/g%3E%3C/svg%3E"),
        /* Islamic 8-pointed Star (Rub el Hizb) Pattern */
        url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' opacity='0.04'%3E%3Cpath d='M80 20 L95 65 L140 80 L95 95 L80 140 L65 95 L20 80 L65 65 Z' stroke='%238B7AB8' stroke-width='0.5'/%3E%3Cpath d='M80 35 L90 65 L120 80 L90 95 L80 125 L70 95 L40 80 L70 65 Z' stroke='%23D4AF78' stroke-width='0.3'/%3E%3Ccircle cx='80' cy='80' r='15' stroke='%238B7AB8' stroke-width='0.3'/%3E%3Ccircle cx='80' cy='80' r='8' stroke='%23D4AF78' stroke-width='0.2'/%3E%3C/g%3E%3C/svg%3E"),
        /* Subtle corner flourishes */
        radial-gradient(ellipse at 0% 0%, rgba(139, 122, 184, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 0%, rgba(212, 175, 120, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 100%, rgba(139, 122, 184, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 0% 100%, rgba(212, 175, 120, 0.06) 0%, transparent 40%);
    background-size: 100px 100px, 160px 160px, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: 0 0, 50px 50px, 0 0, 100% 0, 100% 100%, 0 100%;
    min-height: 100vh;
    position: relative;
}

/* Beautiful Islamic decorative top border */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: 
        repeating-linear-gradient(
            90deg,
            var(--primary-purple) 0px,
            var(--primary-purple) 8px,
            transparent 8px,
            transparent 10px,
            var(--primary-gold) 10px,
            var(--primary-gold) 18px,
            transparent 18px,
            transparent 20px
        );
    z-index: 9999;
}

/* Islamic Arch Decorative Elements */
.islamic-arch-decoration {
    position: fixed;
    pointer-events: none;
    opacity: 0.06;
    z-index: 0;
}

.islamic-arch-decoration.top-right {
    top: 50px;
    right: 20px;
    width: 120px;
    height: 180px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 150 L10 60 Q10 10 50 10 Q90 10 90 60 L90 150' fill='none' stroke='%238B7AB8' stroke-width='2'/%3E%3Cpath d='M20 150 L20 65 Q20 25 50 25 Q80 25 80 65 L80 150' fill='none' stroke='%23D4AF78' stroke-width='1.5'/%3E%3Cpath d='M30 150 L30 70 Q30 40 50 40 Q70 40 70 70 L70 150' fill='none' stroke='%238B7AB8' stroke-width='1'/%3E%3Ccircle cx='50' cy='55' r='8' fill='none' stroke='%23D4AF78' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.islamic-arch-decoration.bottom-left {
    bottom: 50px;
    left: 20px;
    width: 120px;
    height: 180px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0 L10 90 Q10 140 50 140 Q90 140 90 90 L90 0' fill='none' stroke='%238B7AB8' stroke-width='2'/%3E%3Cpath d='M20 0 L20 85 Q20 125 50 125 Q80 125 80 85 L80 0' fill='none' stroke='%23D4AF78' stroke-width='1.5'/%3E%3Cpath d='M30 0 L30 80 Q30 110 50 110 Q70 110 70 80 L70 0' fill='none' stroke='%238B7AB8' stroke-width='1'/%3E%3Ccircle cx='50' cy='95' r='8' fill='none' stroke='%23D4AF78' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

/* Islamic corner decorations - legacy support */
.islamic-corner-decoration {
    position: fixed;
    width: 150px;
    height: 150px;
    pointer-events: none;
    opacity: 0.08;
    z-index: 0;
}

.islamic-corner-decoration.top-right {
    top: 20px;
    right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 Q50 0 50 50 Q50 100 100 100' fill='none' stroke='%238B7AB8' stroke-width='2'/%3E%3Cpath d='M100 20 Q60 20 60 60 Q60 100 100 100' fill='none' stroke='%23D4AF78' stroke-width='1'/%3E%3Ccircle cx='75' cy='50' r='8' fill='none' stroke='%238B7AB8' stroke-width='1'/%3E%3C/svg%3E");
}

.islamic-corner-decoration.bottom-left {
    bottom: 20px;
    left: 20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 Q50 100 50 50 Q50 0 0 0' fill='none' stroke='%238B7AB8' stroke-width='2'/%3E%3Cpath d='M0 80 Q40 80 40 40 Q40 0 0 0' fill='none' stroke='%23D4AF78' stroke-width='1'/%3E%3Ccircle cx='25' cy='50' r='8' fill='none' stroke='%238B7AB8' stroke-width='1'/%3E%3C/svg%3E");
}

/* ============================================
   Islamic Decorative Elements
   ============================================ */
.islamic-border {
    border: 2px solid var(--primary-gold);
    border-image: repeating-linear-gradient(
        45deg,
        var(--primary-gold),
        var(--primary-gold) 10px,
        var(--primary-purple) 10px,
        var(--primary-purple) 20px
    ) 10;
}

.islamic-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='%238B7AB8' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ============================================
   Header Styles
   ============================================ */
.header {
    padding: 0;
    background: var(--bg-card);
    box-shadow: var(--shadow-soft);
    position: relative;
}

.header-scope {
    background: var(--gradient-gold);
    width: 100%;
    height: 6px;
}

.header-top-bar {
    background: var(--gradient-purple);
    padding: 8px 0;
}

.header-main {
    padding: 15px 20px;
}

.header .items {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 75px;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo_and_Languages {
    display: flex;
    width: 65%;
    justify-content: space-around;
    align-items: center;
}

.logo-area {
    text-align: center;
}

.logo-area a {
    display: inline-block;
}

/* ============================================
   Navigation & Links
   ============================================ */
.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a:hover {
    color: var(--primary-purple);
    background: rgba(139, 122, 184, 0.1);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-gold);
    transition: all 0.3s ease;
    transform: translateX(50%);
}

.nav-links a:hover::after {
    width: 80%;
}

/* ============================================
   Social Links
   ============================================ */
.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    text-decoration: none;
    width: 36px;
    height: 36px;
    background: var(--gradient-purple);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}

.social-links a:hover {
    background: var(--gradient-gold);
    transform: translateY(-3px);
    box-shadow: var(--shadow-gold);
}

.social-links a svg {
    fill: var(--text-light);
    height: 18px;
    width: 18px;
}

/* ============================================
   Language Dropdown
   ============================================ */
.language .dropdown-toggle {
    background: transparent;
    border: 2px solid var(--primary-purple);
    border-radius: 25px;
    padding: 8px 20px;
    color: var(--primary-purple);
    font-weight: 500;
    transition: all 0.3s ease;
}

.language .dropdown-toggle:hover {
    background: var(--primary-purple);
    color: var(--text-light);
}

.language .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    padding: 0;
}

.language .dropdown-item {
    padding: 12px 25px;
    text-align: center;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.language .dropdown-item:last-child {
    border-bottom: none;
}

.language .dropdown-item:hover {
    background: rgba(139, 122, 184, 0.1);
    color: var(--primary-purple);
}

.language .dropdown-item.active {
    background: var(--gradient-purple) !important;
    color: var(--text-light);
}

/* ============================================
   Buttons
   ============================================ */
.btn-main {
    border-radius: 8px;
    padding: 12px 30px;
    background: var(--gradient-purple);
    font-size: 16px;
    line-height: 19px;
    color: var(--text-light);
    border: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}

.btn-main:hover {
    background: var(--dark-purple);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    color: var(--text-light);
}

.btn-orange,
.btn-gold {
    background: var(--gradient-gold);
    color: var(--text-primary);
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-gold);
}

.btn-orange:hover,
.btn-gold:hover {
    background: var(--gold-3);
    transform: translateY(-2px);
    color: var(--text-primary);
}

.btn-outline-purple {
    background: transparent;
    border: 2px solid var(--primary-purple);
    color: var(--primary-purple);
    padding: 10px 28px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-outline-purple:hover {
    background: var(--primary-purple);
    color: var(--text-light);
}

/* ============================================
   Modal Styles
   ============================================ */
.modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.modal-header {
    background: var(--gradient-purple);
    color: var(--text-light);
    border: none;
    padding: 20px;
}

.modal-header .modal-title {
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 32px !important;
    text-align: center !important;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-language-list {
    padding: 10px;
}

.modal-language-list a {
    display: block;
    text-align: center;
    padding: 18px;
    color: var(--text-secondary);
    border-bottom: 1px solid #E3E3E3;
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 5px 0;
}

.modal-language-list a:hover {
    background: rgba(139, 122, 184, 0.1);
    color: var(--primary-purple);
    border-color: transparent;
}

.modal-language-list a:last-child {
    border: unset;
}

#appModal p {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: var(--text-secondary);
}

#appModal .stores-link h4 {
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: var(--primary-purple);
}

#appModal .stores-link p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--text-secondary);
    margin: 20px 0;
}

#appModal .stores-link .app-images {
    display: flex;
    justify-content: center;
    gap: 15px;
}

#appModal .stores-link .app-images img {
    max-width: 154px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

#appModal .stores-link .app-images img:hover {
    transform: scale(1.05);
}

/* ============================================
   Footer Styles
   ============================================ */
.footer-scope {
    background: var(--gradient-gold);
    padding: 8px !important;
}

.footer {
    background: var(--gradient-purple) !important;
    color: var(--text-light);
    padding: 25px !important;
    font-size: 15px;
}

/* ============================================
   Slider Styles
   ============================================ */
.slider {
    margin-bottom: 50px !important;
    position: relative;
}

.slider .carousel-item img {
    border-radius: 0;
    max-height: 600px;
    object-fit: cover;
}

.slider .carousel-control-prev,
.slider .carousel-control-next {
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    margin: 0 15px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}

.slider .carousel-control-prev:hover,
.slider .carousel-control-next:hover {
    background: var(--primary-purple);
}

.slider .carousel-control-prev-icon,
.slider .carousel-control-next-icon {
    filter: invert(50%) sepia(20%) saturate(800%) hue-rotate(220deg);
    width: 20px;
    height: 20px;
}

.slider .carousel-control-prev:hover .carousel-control-prev-icon,
.slider .carousel-control-next:hover .carousel-control-next-icon {
    filter: brightness(0) invert(1);
}

.slider .carousel-indicators {
    margin-bottom: 20px;
}

.slider .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bg-card);
    border: 2px solid var(--primary-purple);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.slider .carousel-indicators button.active {
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
    opacity: 1;
    transform: scale(1.2);
}

/* Slider CTA Button Overlay */
.slider-cta-overlay {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
}

.btn-slider-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--dark-purple) 100%);
    color: #fff !important;
    padding: 18px 40px;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: 0 8px 32px rgba(139, 122, 184, 0.5), 
                0 4px 16px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 3px solid var(--primary-gold);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulse-cta 2s infinite;
    position: relative;
    overflow: hidden;
}

.btn-slider-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

.btn-slider-cta .cta-icon {
    font-size: 1.5rem;
    color: var(--primary-gold);
}

.btn-slider-cta:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 40px rgba(139, 122, 184, 0.6), 
                0 6px 20px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--primary-purple) 100%);
}

.btn-slider-cta:active {
    transform: translateY(-2px) scale(1.02);
}

@keyframes pulse-cta {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(139, 122, 184, 0.5), 
                    0 4px 16px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 8px 48px rgba(139, 122, 184, 0.7), 
                    0 4px 24px rgba(212, 175, 120, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Responsive slider CTA */
@media (max-width: 768px) {
    .slider-cta-overlay {
        bottom: 60px;
    }
    
    .btn-slider-cta {
        padding: 14px 28px;
        font-size: 1rem;
        gap: 8px;
    }
    
    .btn-slider-cta .cta-icon {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .slider-cta-overlay {
        bottom: 50px;
        width: 90%;
    }
    
    .btn-slider-cta {
        padding: 12px 20px;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Section Titles - Islamic Style
   ============================================ */
.title_heading {
    font-weight: 700;
    font-size: 32px;
    color: var(--primary-purple);
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 25px;
}

.title_heading::after {
    content: '۞';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: var(--primary-gold);
    text-shadow: 0 2px 4px rgba(212, 175, 120, 0.3);
}

.title_heading::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 3px;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        var(--primary-gold) 20%,
        var(--primary-purple) 50%,
        var(--primary-gold) 80%,
        transparent 100%
    );
    border-radius: 2px;
}

/* Islamic Section Divider - Decorative Line */
.islamic-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    gap: 15px;
}

.islamic-divider::before,
.islamic-divider::after {
    content: '';
    flex: 1;
    max-width: 200px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--primary-gold) 50%,
        transparent 100%
    );
}

.islamic-divider-icon {
    color: var(--primary-purple);
    font-size: 24px;
    text-shadow: 0 2px 4px rgba(139, 122, 184, 0.2);
}

/* Ornate Islamic Section Divider */
.islamic-divider-ornate {
    position: relative;
    height: 60px;
    margin: 50px auto;
    max-width: 600px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpath d='M0 30 H230 Q250 30 260 20 Q270 10 280 10 Q290 10 300 20 Q310 30 320 30 Q330 30 340 20 Q350 10 360 10 Q370 10 380 20 Q390 30 400 30 H600' stroke='%238B7AB8' stroke-width='1.5' opacity='0.5'/%3E%3Cpath d='M50 30 H220 Q240 30 250 25 Q260 20 270 20 Q280 20 290 25 Q300 30 310 30 Q320 30 330 25 Q340 20 350 20 Q360 20 370 25 Q380 30 390 30 H550' stroke='%23D4AF78' stroke-width='1' opacity='0.4'/%3E%3Ccircle cx='300' cy='30' r='8' stroke='%238B7AB8' stroke-width='1' fill='none' opacity='0.5'/%3E%3Ccircle cx='300' cy='30' r='4' fill='%23D4AF78' opacity='0.6'/%3E%3Cpath d='M290 30 L300 20 L310 30 L300 40 Z' stroke='%238B7AB8' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Mosque Dome Divider */
.islamic-divider-dome {
    position: relative;
    height: 40px;
    margin: 40px auto;
    max-width: 400px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpath d='M0 35 H150 Q175 35 185 25 Q195 15 200 10 Q205 15 215 25 Q225 35 250 35 H400' stroke='%238B7AB8' stroke-width='1.5' opacity='0.4'/%3E%3Cpath d='M195 10 L200 3 L205 10' stroke='%23D4AF78' stroke-width='1' stroke-linecap='round' opacity='0.6'/%3E%3Ccircle cx='200' cy='3' r='2' fill='%23D4AF78' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ============================================
   About Us Section
   ============================================ */
.about-us {
    padding: 60px 0;
}

.about-us .content {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 50px;
}

.about-text h2 {
    color: var(--primary-purple);
}

.about-text p {
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.9;
}

.about-us-image img {
    border-radius: 16px;
    box-shadow: var(--shadow-medium);
}

.about-us-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    height: 100%;
    border: 2px solid transparent;
}

.about-us-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-gold);
}

.about-us-card .about-us-image-back {
    width: 80px;
    height: 80px;
    background: var(--gradient-purple);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.about-us-card .about-us-image-back img {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
}

.about-us-card h3 {
    color: var(--primary-purple);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.about-us-card p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

/* ============================================
   Contact Us Section
   ============================================ */
.contact-us {
    background: var(--gradient-purple);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.contact-us::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L100 50L50 100L0 50z' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
}

.contact-us h2.title_heading {
    color: var(--text-light);
}

.contact-us h2.title_heading::after {
    color: var(--light-gold);
}

.contact-us h2.title_heading::before {
    background: var(--gradient-gold);
}

.contact-form {
    position: relative;
    z-index: 1;
}

.contact-form .form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: var(--text-light);
    padding: 15px 20px;
    transition: all 0.3s ease;
}

.contact-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.contact-form .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 120, 0.3);
}

.contact-form .btn-orange {
    margin-top: 10px;
}

/* ============================================
   Registration Form
   ============================================ */
.register-form {
    padding: 60px 0;
}

.register-form h1 {
    font-weight: 700;
    font-size: 32px;
    color: var(--primary-purple);
    text-align: center;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.register-form h1::after {
    content: '۞';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: var(--primary-gold);
}

.register-inputs {
    background: var(--bg-card);
    padding: 50px;
    border-radius: 20px;
    box-shadow: var(--shadow-medium);
    border: 2px solid var(--light-gold);
    position: relative;
}

.register-inputs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-gold);
    border-radius: 20px 20px 0 0;
}

.register-inputs .form-control {
    border-radius: 10px;
    min-height: 55px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.register-inputs .form-control:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(139, 122, 184, 0.2);
}

.register-inputs .col-md-6 {
    margin-bottom: 26px;
}

.register-inputs label {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: var(--primary-purple);
    margin-bottom: 12px;
    display: block;
}

/* ============================================
   Partner Section
   ============================================ */
.partner {
    padding: 80px 0;
    background: var(--bg-secondary);
}

.partner .title_heading {
    color: var(--primary-purple);
}

.list-of-partner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.list-of-partner .image {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 30px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-of-partner .image:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.list-of-partner .image img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    filter: grayscale(30%);
    transition: all 0.3s ease;
}

.list-of-partner .image:hover img {
    filter: grayscale(0%);
}

/* ============================================
   Map Section
   ============================================ */
.map {
    position: relative;
    height: 450px;
}

.map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.work-card {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    background: var(--gradient-purple);
    padding: 35px;
    border-radius: 20px;
    box-shadow: var(--shadow-medium);
    min-width: 320px;
    z-index: 10;
}

.work-card h4 {
    color: var(--text-light);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-gold);
    padding-bottom: 10px;
}

.work-card > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.work-card p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* ============================================
   File Upload Styles
   ============================================ */
.filepond--drop-label {
    background: var(--bg-secondary);
    border-radius: 10px;
}

.filepond--drop-label label {
    color: var(--primary-purple) !important;
    font-weight: 500;
}

.filepond--panel-root {
    border-radius: 10px;
    border: 2px dashed var(--primary-purple);
}

.ltr, .ltr * {
    direction: ltr !important;
}

/* ============================================
   Account Pages
   ============================================ */
.page-header {
    width: 100%;
    position: absolute;
    background: var(--gradient-purple);
    height: 400px;
    z-index: -1;
    overflow: hidden;
}

.page-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0L80 40L40 80L0 40z' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.page {
    margin-top: 150px;
    z-index: 1;
}

.buttons {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.buttons a {
    text-decoration: none;
    background: var(--primary-gold);
    padding: 15px 35px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 16px;
    line-height: 170%;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
}

.buttons a:hover {
    background: var(--light-gold);
}

.buttons a.bg-white {
    background: var(--bg-card) !important;
    color: var(--primary-purple);
}

/* Account Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group .form-control {
    border-radius: 10px;
    padding: 15px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.form-group .form-control:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(139, 122, 184, 0.2);
}

.submit-button {
    margin-top: 20px;
}

/* ============================================
   Info Page / Reservation Data
   ============================================ */
.header-titles {
    min-height: 280px;
    width: 100%;
    background: var(--gradient-purple);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.header-titles::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.header-titles h2 {
    font-weight: 600;
    font-size: 36px;
    color: var(--text-light);
    position: relative;
    z-index: 1;
}

.reservation-data {
    background: var(--bg-card);
    box-shadow: var(--shadow-medium);
    border-radius: 20px;
    overflow: hidden;
}

.info-card {
    background: var(--gradient-purple);
    border-radius: 16px;
    padding: 30px !important;
}

.info-card .name {
    font-weight: 600;
    font-size: 24px;
    color: var(--text-light);
    margin-bottom: 30px;
    padding: 15px;
    border-bottom: 2px solid var(--primary-gold);
}

.info-card p {
    font-size: 15px;
    color: var(--text-light);
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================
   Tables
   ============================================ */
.table {
    border-radius: 10px;
    overflow: hidden;
}

.table th {
    background: var(--primary-purple);
    color: var(--text-light);
    font-weight: 600;
    padding: 15px;
    border: none;
}

.table td {
    padding: 15px;
    vertical-align: middle;
    border-color: #f0f0f0;
}

.table tbody tr:hover {
    background: rgba(139, 122, 184, 0.05);
}

/* ============================================
   Alerts
   ============================================ */
.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: none;
    border-radius: 10px;
    border-right: 4px solid #28a745;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: none;
    border-radius: 10px;
    border-right: 4px solid #dc3545;
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 991px) {
    .work-card {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 20px;
        min-width: auto;
    }
    
    .map {
        height: auto;
    }
}

@media (max-width: 767px) {
    .header .items {
        flex-wrap: wrap;
    }

    .header .items .social-links {
        width: 100%;
        justify-content: center;
        margin-bottom: 15px;
    }

    .header .items .logo_and_Languages {
        justify-content: space-between;
        margin-top: 15px;
        width: 100%;
    }
    
    .title_heading {
        font-size: 26px;
    }
    
    .register-inputs {
        padding: 30px 20px;
    }
    
    .about-us .content {
        padding: 25px;
    }
    
    .buttons a {
        width: 100%;
        text-align: center;
        border-radius: 0;
    }
    
    .buttons a:first-child {
        border-radius: 8px 8px 0 0;
    }
}

/* ============================================
   Utility Classes
   ============================================ */
.text-purple {
    color: var(--primary-purple) !important;
}

.text-gold {
    color: var(--primary-gold) !important;
}

.bg-purple {
    background: var(--primary-purple) !important;
}

.bg-gold {
    background: var(--primary-gold) !important;
}

.bg-gradient-purple {
    background: var(--gradient-purple) !important;
}

.bg-gradient-gold {
    background: var(--gradient-gold) !important;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease forwards;
}

/* Stagger animation delays */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }

/* ============================================
   Select2 Custom Theme - Islamic Style
   ============================================ */
.select2-container--default .select2-selection--single {
    background-color: var(--bg-card);
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    height: 55px;
    padding: 12px 15px;
    transition: all 0.3s ease;
}

.select2-container--default .select2-selection--single:hover {
    border-color: var(--primary-purple);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(139, 122, 184, 0.2);
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    line-height: 28px;
    padding-right: 0;
    padding-left: 30px;
    font-size: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 53px;
    position: absolute;
    top: 1px;
    left: 10px;
    right: auto;
    width: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--primary-purple) transparent transparent transparent;
    border-width: 6px 5px 0 5px;
    margin-top: -3px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--primary-gold) transparent;
    border-width: 0 5px 6px 5px;
}

/* Select2 Dropdown */
.select2-dropdown {
    background-color: var(--bg-card);
    border: 2px solid var(--primary-purple);
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    margin-top: 5px;
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown {
    padding: 15px;
    background: var(--bg-secondary);
    border-bottom: 1px solid #e0e0e0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 15px;
    transition: all 0.3s ease;
    direction: rtl;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(139, 122, 184, 0.15);
    outline: none;
}

.select2-results__options {
    max-height: 300px;
    overflow-y: auto;
}

.select2-container--default .select2-results__option {
    padding: 12px 20px;
    font-size: 15px;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.select2-container--default .select2-results__option:last-child {
    border-bottom: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg, rgba(139, 122, 184, 0.15) 0%, rgba(212, 175, 120, 0.1) 100%);
    color: var(--primary-purple);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--gradient-purple);
    color: var(--text-light);
}

.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background: var(--dark-purple);
}

/* Select2 with Islamic decorative icon */
.select2-container--default .select2-results__option::before {
    content: '◇';
    margin-left: 10px;
    color: var(--primary-gold);
    opacity: 0;
    transition: all 0.2s ease;
}

.select2-container--default .select2-results__option--highlighted[aria-selected]::before,
.select2-container--default .select2-results__option[aria-selected=true]::before {
    opacity: 1;
}

.select2-container--default .select2-results__option[aria-selected=true]::before {
    content: '۞';
    color: var(--light-gold);
}

/* Select2 Multiple Selection */
.select2-container--default .select2-selection--multiple {
    background-color: var(--bg-card);
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    min-height: 55px;
    padding: 8px 10px;
    transition: all 0.3s ease;
}

.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--primary-purple);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(139, 122, 184, 0.2);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--gradient-purple);
    border: none;
    border-radius: 20px;
    color: var(--text-light);
    padding: 5px 12px;
    margin: 3px;
    font-size: 14px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--light-gold);
    margin-left: 8px;
    margin-right: 0;
    font-size: 16px;
    transition: all 0.2s ease;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
    background: transparent;
}

/* Select2 Loading */
.select2-container--default .select2-results__option--load-more,
.select2-container--default .select2-results__option--loading {
    color: var(--primary-purple);
    font-style: italic;
}

/* Select2 No Results */
.select2-container--default .select2-results__message {
    color: var(--text-secondary);
    padding: 20px;
    text-align: center;
}

/* RTL Support for Select2 */
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    padding-left: 30px;
}

/* Custom scrollbar for Select2 dropdown */
.select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.select2-results__options::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: var(--primary-purple);
    border-radius: 4px;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: var(--dark-purple);
}

/* Select2 inside register form */
.register-inputs .select2-container--default .select2-selection--single {
    background-color: var(--bg-card);
}

/* Select2 Animation */
.select2-dropdown {
    animation: select2FadeIn 0.2s ease;
}

@keyframes select2FadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width:761px) {
    .btn-slider-cta {
        display: none;
    }
    .register-form {
        padding: 0%;
    }
}