/* ============================================
   Islamic Website - Main Stylesheet
   ============================================ */

/* Fonts */
@font-face {
    font-family: 'Rabar';
    src: url('../fonts/kurdish/rabar.woff2') format('woff2'),
         url('../fonts/kurdish/rabar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables - Default Theme (Navy & Gold) */
:root {
    --primary-color: #1a3a5c;
    --primary-dark: #0d2340;
    --primary-light: #2d5a8a;
    --secondary-color: #c9a227;
    --gold-color: #d4af37;
    --text-dark: #2c3e50;
    --text-light: #6c757d;
    --bg-light: #f8f9fa;
    --bg-cream: #fef9f3;
    --white: #ffffff;
    /* --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.25); */

        --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-lg:  0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 4px 15px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --transition: all 0.3s ease;
    
    /* Overlay colors for gradients */
    --primary-overlay-light: rgba(26, 58, 92, 0.25);
    --primary-overlay: rgba(26, 58, 92, 0.90);
    --primary-overlay-medium: rgba(13, 35, 64, 0.93);
    --primary-overlay-dark: rgba(7, 18, 33, 0.96);
    --primary-bg-subtle: rgba(26, 58, 92, 0.08);
    --primary-border-subtle: rgba(26, 58, 92, 0.15);
    
    /* Islamic Pattern SVG - Geometric Star */
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%231a3a5c' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    
    /* Islamic Arabesque Pattern */
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231a3a5c' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Islamic Crescent Moon */
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%231a3a5c' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    
    /* Islamic 8-Point Star */
    --islamic-star8: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,5 45,30 70,25 50,40 70,55 45,50 40,75 35,50 10,55 30,40 10,25 35,30' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.1'/%3E%3C/svg%3E");
    
    /* Islamic Mosque Dome */
    --islamic-dome: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 20 Q30 40 30 70 L90 70 Q90 40 60 20' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.08'/%3E%3Cpath d='M60 10 L60 20 M55 12 Q60 8 65 12' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.08'/%3E%3C/svg%3E");
    
    /* Islamic Geometric Hexagon */
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%231a3a5c' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    
    /* Islamic Lantern */
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23d4af37' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    
    /* Islamic Border Pattern */
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23d4af37' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Blue - Deep Blue Islamic Style
   ============================================ */
[data-theme="blue"] {
    --primary-color: #1565c0;
    --primary-dark: #0d47a1;
    --primary-light: #42a5f5;
    --secondary-color: #ffc107;
    --gold-color: #ffca28;
    --primary-overlay-light: rgba(21, 101, 192, 0.25);
    --primary-overlay: rgba(21, 101, 192, 0.90);
    --primary-overlay-medium: rgba(13, 71, 161, 0.93);
    --primary-overlay-dark: rgba(7, 40, 90, 0.96);
    --primary-bg-subtle: rgba(21, 101, 192, 0.08);
    --primary-border-subtle: rgba(21, 101, 192, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%231565c0' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231565c0' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%231565c0' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%231565c0' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23ffc107' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23ffc107' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Purple - Royal Purple
   ============================================ */
[data-theme="purple"] {
    --primary-color: #6a1b9a;
    --primary-dark: #4a148c;
    --primary-light: #9c4dcc;
    --secondary-color: #ffd54f;
    --gold-color: #ffe082;
    --primary-overlay-light: rgba(106, 27, 154, 0.25);
    --primary-overlay: rgba(106, 27, 154, 0.90);
    --primary-overlay-medium: rgba(74, 20, 140, 0.93);
    --primary-overlay-dark: rgba(40, 10, 75, 0.96);
    --primary-bg-subtle: rgba(106, 27, 154, 0.08);
    --primary-border-subtle: rgba(106, 27, 154, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%236a1b9a' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%236a1b9a' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%236a1b9a' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%236a1b9a' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23ffd54f' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23ffd54f' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Burgundy - Deep Red/Maroon
   ============================================ */
[data-theme="burgundy"] {
    --primary-color: #880e4f;
    --primary-dark: #560027;
    --primary-light: #bc477b;
    --secondary-color: #ffc400;
    --gold-color: #ffd740;
    --primary-overlay-light: rgba(136, 14, 79, 0.25);
    --primary-overlay: rgba(136, 14, 79, 0.90);
    --primary-overlay-medium: rgba(86, 0, 39, 0.93);
    --primary-overlay-dark: rgba(45, 0, 20, 0.96);
    --primary-bg-subtle: rgba(136, 14, 79, 0.08);
    --primary-border-subtle: rgba(136, 14, 79, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%23880e4f' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23880e4f' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%23880e4f' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%23880e4f' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23ffc400' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23ffc400' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Navy - Navy & Gold (Default)
   ============================================ */
[data-theme="navy"] {
    --primary-color: #1a3a5c;
    --primary-dark: #0d2340;
    --primary-light: #2d5a8a;
    --secondary-color: #c9a227;
    --gold-color: #d4af37;
    --primary-overlay-light: rgba(26, 58, 92, 0.25);
    --primary-overlay: rgba(26, 58, 92, 0.90);
    --primary-overlay-medium: rgba(13, 35, 64, 0.93);
    --primary-overlay-dark: rgba(7, 18, 33, 0.96);
    --primary-bg-subtle: rgba(26, 58, 92, 0.08);
    --primary-border-subtle: rgba(26, 58, 92, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%231a3a5c' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231a3a5c' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%231a3a5c' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%231a3a5c' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23d4af37' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23d4af37' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Green - Islamic Green
   ============================================ */
[data-theme="green"] {
    --primary-color: #1a5f4a;
    --primary-dark: #0d3d2e;
    --primary-light: #2d8a6a;
    --secondary-color: #c9a227;
    --gold-color: #d4af37;
    --primary-overlay-light: rgba(26, 95, 74, 0.25);
    --primary-overlay: rgba(26, 95, 74, 0.90);
    --primary-overlay-medium: rgba(13, 61, 46, 0.93);
    --primary-overlay-dark: rgba(7, 28, 23, 0.96);
    --primary-bg-subtle: rgba(26, 95, 74, 0.08);
    --primary-border-subtle: rgba(26, 95, 74, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%232d8f6f' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%232d8f6f' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%232d8f6f' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%232d8f6f' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23d4af37' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23d4af37' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Emerald - Rich Emerald Green
   ============================================ */
[data-theme="emerald"] {
    --primary-color: #00695c;
    --primary-dark: #004d40;
    --primary-light: #00897b;
    --secondary-color: #ffb300;
    --gold-color: #ffc107;
    --primary-overlay-light: rgba(0, 105, 92, 0.25);
    --primary-overlay: rgba(0, 105, 92, 0.90);
    --primary-overlay-medium: rgba(0, 77, 64, 0.93);
    --primary-overlay-dark: rgba(0, 40, 35, 0.96);
    --primary-bg-subtle: rgba(0, 105, 92, 0.08);
    --primary-border-subtle: rgba(0, 105, 92, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%2300695c' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2300695c' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%2300695c' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%2300695c' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23ffb300' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23ffb300' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Indigo - Deep Indigo
   ============================================ */
[data-theme="indigo"] {
    --primary-color: #283593;
    --primary-dark: #1a237e;
    --primary-light: #3949ab;
    --secondary-color: #ffc107;
    --gold-color: #ffca28;
    --primary-overlay-light: rgba(40, 53, 147, 0.25);
    --primary-overlay: rgba(40, 53, 147, 0.90);
    --primary-overlay-medium: rgba(26, 35, 126, 0.93);
    --primary-overlay-dark: rgba(15, 20, 70, 0.96);
    --primary-bg-subtle: rgba(40, 53, 147, 0.08);
    --primary-border-subtle: rgba(40, 53, 147, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%23283593' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23283593' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%23283593' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%23283593' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23ffc107' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23ffc107' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Slate - Dark Slate Gray
   ============================================ */
[data-theme="slate"] {
    --primary-color: #455a64;
    --primary-dark: #263238;
    --primary-light: #607d8b;
    --secondary-color: #ffa726;
    --gold-color: #ffb74d;
    --primary-overlay-light: rgba(69, 90, 100, 0.25);
    --primary-overlay: rgba(69, 90, 100, 0.90);
    --primary-overlay-medium: rgba(38, 50, 56, 0.93);
    --primary-overlay-dark: rgba(20, 25, 30, 0.96);
    --primary-bg-subtle: rgba(69, 90, 100, 0.08);
    --primary-border-subtle: rgba(69, 90, 100, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%23455a64' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23455a64' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%23455a64' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%23455a64' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23ffa726' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23ffa726' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Azure - Light Professional Blue
   ============================================ */
[data-theme="azure"] {
    --primary-color: #5C9FD5;
    --primary-dark: #3B7FB5;
    --primary-light: #7CB5E0;
    --secondary-color: #F5A623;
    --gold-color: #C9A961;
    --primary-overlay-light: rgba(92, 159, 213, 0.25);
    --primary-overlay: rgba(92, 159, 213, 0.90);
    --primary-overlay-medium: rgba(59, 127, 181, 0.93);
    --primary-overlay-dark: rgba(40, 85, 120, 0.96);
    --primary-bg-subtle: rgba(92, 159, 213, 0.08);
    --primary-border-subtle: rgba(92, 159, 213, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%235C9FD5' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%235C9FD5' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%235C9FD5' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%235C9FD5' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23C9A961' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23C9A961' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Sage - Soft Natural Green
   ============================================ */
[data-theme="sage"] {
    --primary-color: #8BA888;
    --primary-dark: #6B886A;
    --primary-light: #A5BDA3;
    --secondary-color: #D4A574;
    --gold-color: #C9A961;
    --primary-overlay-light: rgba(139, 168, 136, 0.25);
    --primary-overlay: rgba(139, 168, 136, 0.90);
    --primary-overlay-medium: rgba(107, 136, 106, 0.93);
    --primary-overlay-dark: rgba(70, 90, 70, 0.96);
    --primary-bg-subtle: rgba(139, 168, 136, 0.08);
    --primary-border-subtle: rgba(139, 168, 136, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%238BA888' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%238BA888' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%238BA888' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%238BA888' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23C9A961' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23C9A961' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Sand - Warm Elegant Beige
   ============================================ */
[data-theme="sand"] {
    --primary-color: #B8956A;
    --primary-dark: #9A7A54;
    --primary-light: #CCB088;
    --secondary-color: #8B7355;
    --gold-color: #C9A961;
    --primary-overlay-light: rgba(184, 149, 106, 0.25);
    --primary-overlay: rgba(184, 149, 106, 0.90);
    --primary-overlay-medium: rgba(154, 122, 84, 0.93);
    --primary-overlay-dark: rgba(100, 80, 55, 0.96);
    --primary-bg-subtle: rgba(184, 149, 106, 0.08);
    --primary-border-subtle: rgba(184, 149, 106, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%23B8956A' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23B8956A' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%23B8956A' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%23B8956A' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23C9A961' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23C9A961' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Mauve - Soft Professional Purple
   ============================================ */
[data-theme="mauve"] {
    --primary-color: #9B89B3;
    --primary-dark: #7B6A93;
    --primary-light: #B5A3CD;
    --secondary-color: #D4A574;
    --gold-color: #C9A961;
    --primary-overlay-light: rgba(155, 137, 179, 0.25);
    --primary-overlay: rgba(155, 137, 179, 0.90);
    --primary-overlay-medium: rgba(123, 106, 147, 0.93);
    --primary-overlay-dark: rgba(80, 70, 95, 0.96);
    --primary-bg-subtle: rgba(155, 137, 179, 0.08);
    --primary-border-subtle: rgba(155, 137, 179, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%239B89B3' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%239B89B3' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%239B89B3' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%239B89B3' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23C9A961' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23C9A961' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme: Coral - Warm Coral Peach
   ============================================ */
[data-theme="coral"] {
    --primary-color: #ff7043;
    --primary-dark: #e64a19;
    --primary-light: #ff8a65;
    --secondary-color: #ffd54f;
    --gold-color: #ffe082;
    --primary-overlay-light: rgba(255, 112, 67, 0.25);
    --primary-overlay: rgba(255, 112, 67, 0.90);
    --primary-overlay-medium: rgba(230, 74, 25, 0.93);
    --primary-overlay-dark: rgba(191, 54, 12, 0.96);
    --primary-bg-subtle: rgba(255, 112, 67, 0.08);
    --primary-border-subtle: rgba(255, 112, 67, 0.15);
    --islamic-pattern: 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 5L35 20H50L38 30L43 45L30 35L17 45L22 30L10 20H25L30 5Z' fill='none' stroke='%23ff7043' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    --islamic-arabesque: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ff7043' stroke-width='0.5' opacity='0.06'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Cpath d='M40 10 Q55 25 40 40 Q25 55 40 70'/%3E%3Cpath d='M10 40 Q25 25 40 40 Q55 55 70 40'/%3E%3Cpath d='M40 10 Q25 25 40 40 Q55 55 40 70'/%3E%3Cpath d='M10 40 Q25 55 40 40 Q55 25 70 40'/%3E%3C/g%3E%3C/svg%3E");
    --islamic-moon: 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 10 A40 40 0 1 1 50 90 A30 30 0 1 0 50 10' fill='none' stroke='%23ff7043' stroke-width='0.8' opacity='0.04'/%3E%3C/svg%3E");
    --islamic-hexagon: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z M30 10 L50 20 L50 32 L30 42 L10 32 L10 20 Z' fill='none' stroke='%23ff7043' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --islamic-lantern: url("data:image/svg+xml,%3Csvg width='60' height='100' viewBox='0 0 60 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L40 15 L40 25 Q50 35 50 50 Q50 75 40 85 L40 95 L20 95 L20 85 Q10 75 10 50 Q10 35 20 25 L20 15 L25 15 Z' fill='none' stroke='%23ffd54f' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
    --islamic-border: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 0 20 10 Q30 20 40 10' fill='none' stroke='%23ffd54f' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
}

/* ============================================
   Theme Switcher Styles
   ============================================ */
.theme-switcher {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9999;
}

.theme-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: 3px solid var(--gold-color);
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: var(--shadow-xl);
}

.theme-options {
    position: absolute;
    bottom: 60px;
    left: 0;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    width: 300px;
}

.theme-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 10px;
}

.theme-options.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-options-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bg-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-options-title i {
    color: var(--primary-color);
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.theme-option:hover {
    background: var(--bg-light);
}

.theme-option.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
}

.theme-option.active .theme-color {
    border-color: var(--white);
}

.theme-color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--bg-light);
    flex-shrink: 0;
    display: block;
}

.theme-color.blue { background: linear-gradient(135deg, #1565c0, #0d47a1); }
.theme-color.purple { background: linear-gradient(135deg, #6a1b9a, #4a148c); }
.theme-color.burgundy { background: linear-gradient(135deg, #880e4f, #560027); }
.theme-color.navy { background: linear-gradient(135deg, #1a3a5c, #0d2340); }
.theme-color.green { background: linear-gradient(135deg, #2d8f6f, #1a5f4a); }
.theme-color.emerald { background: linear-gradient(135deg, #00695c, #004d40); }
.theme-color.indigo { background: linear-gradient(135deg, #283593, #1a237e); }
.theme-color.slate { background: linear-gradient(135deg, #455a64, #263238); }
.theme-color.azure { background: linear-gradient(135deg, #5C9FD5, #3B7FB5); }

.theme-name {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* RTL Support for Theme Switcher */
[dir="rtl"] .theme-switcher {
    left: auto;
    right: 20px;
}

[dir="rtl"] .theme-options {
    left: auto;
    right: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .theme-switcher {
        left: 15px;
        bottom: 80px;
    }
    
    [dir="rtl"] .theme-switcher {
        left: auto;
        right: 15px;
    }
    
    .theme-toggle-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .theme-options {
        width: 300px;
    }

    .theme-options-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .theme-option {
        padding: 8px 6px;
    }

    .theme-color {
        width: 28px;
        height: 28px;
    }

    .theme-name {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .theme-options {
        width: 280px;
    }

    .theme-options-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .theme-option {
        padding: 6px 4px;
    }

    .theme-color {
        width: 24px;
        height: 24px;
        border: 2px solid var(--bg-light);
    }

    .theme-name {
        font-size: 9px;
    }
}

/* ============================================
   Professional Page Loader
   ============================================ */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--islamic-pattern);
    background-size: 60px 60px;
    opacity: 0.1;
    animation: patternMove 20s linear infinite;
}

@keyframes patternMove {
    0% { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.mosque-icon {
    display: none;
}

.loader-spinner {
    display: none;
}

.spinner-ring {
    display: none;
}

@keyframes spinRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.loader-text {
    color: var(--white);
    font-size:32px;
    font-weight: 600;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: textFade 2s ease-in-out infinite;
    font-family: 'Amiri', serif !important;
}

@keyframes textFade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.loader-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.loader-dots .dot {
    width: 12px;
    height: 12px;
    background-color: var(--gold-color);
    border-radius: 50%;
    animation: dotBounce 1.4s ease-in-out infinite;
}

.loader-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loader-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes dotBounce {
    0%, 80%, 100% { 
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% { 
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Responsive Design for Loader */
@media (max-width: 768px) {
    .page-loader {
        height: 100%;
    }
    
    .loader-content {
        transform: scale(0.85);
    }
    
    .loader-text {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .loader-dots .dot {
        width: 10px;
        height: 10px;
    }
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Kurdish Language Font Support */
html[lang="ku"] body {
    font-family: 'Rabar', 'Cairo', 'Amiri', sans-serif;
}

body {
    font-family: 'Cairo', 'Amiri', sans-serif;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--white);
    background-image: var(--islamic-hexagon) !important;
    direction: rtl;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   Site Header (Fixed Wrapper)
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Scrolled state - hide top header bar, show only navbar */
.site-header.scrolled .top-header-bar {
    transform: translateY(-100%);
    opacity: 0;
}

.site-header.scrolled .navbar {
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    transform: translateY(-58px);
}

/* ============================================
   Top Header Bar (Language & Social Links)
   ============================================ */
.top-header-bar {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    padding: 10px 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* Left Side - Date & Language */
.header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-date {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.header-date i {
    color: var(--gold-color);
    font-size: 1rem;
}

.header-date .date-label {
    color: var(--gold-color);
    font-weight: 600;
    font-size: 0.8rem;
}

.header-date .date-separator {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 5px;
}

/* Language Switcher */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 25px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

[dir="rtl"] .language-switcher {
    padding-right: 0;
    padding-left: 25px;
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.lang-icon {
    color: var(--gold-color);
    font-size: 1rem;
}

.language-switcher a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-weight: 600;
    position: relative;
}

.language-switcher a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.15);
}

.language-switcher a.active {
    color: var(--primary-dark);
    background: var(--gold-color);
}

/* Right Side - Social Links */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a:hover {
    background: var(--gold-color);
    color: var(--primary-dark);
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-hover);
    border-color: var(--gold-color);
}

/* Social Links Column Layout (Footer) */
.social-links-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-links-column .social-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    /* background: rgba(255, 255, 255, 0.05); */
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links-column .social-link-item:hover {

    transform: translateX(-5px);
}

.social-links-column .social-link-item i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.social-links-column .social-link-item span {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Social Platform Colors */
.social-link-facebook i { background: #1877f2; color: #fff; }
.social-link-youtube i { background: #ff0000; color: #fff; }
.social-link-telegram i { background: #0088cc; color: #fff; }
.social-link-whatsapp i { background: #25d366; color: #fff; }
.social-link-tiktok i { background: #000; color: #fff; }
.social-link-instagram i { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.social-link-twitter i { background: #1da1f2; color: #fff; }

.social-link-facebook:hover { color: #1877f2; }
.social-link-youtube:hover { color: #ff0000; }
.social-link-telegram:hover { color: #0088cc; }
.social-link-whatsapp:hover { color: #25d366; }
.social-link-tiktok:hover { color: #69c9d0; }
.social-link-instagram:hover { color: #e1306c; }
.social-link-twitter:hover { color: #1da1f2; }

/* Top Header Bar - Responsive */
@media (max-width: 992px) {
    .header-left {
        gap: 15px;
    }
    
    .header-info {
        display: flex;
    }
    
    .header-date {
        font-size: 0.75rem;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .social-label {
        display: none;
    }
}

@media (max-width: 768px) {
    .top-header-bar {
        padding: 8px 0;
    }
    
    .language-switcher {
        padding-right: 0;
        border-right: none;
        gap: 8px;
    }
    
    [dir="rtl"] .language-switcher {
        padding-left: 0;
        border-left: none;
    }
    
    .language-switcher a {
        font-size: 0.85rem;
        padding: 3px 10px;
    }
    
    .social-links {
        gap: 4px;
    }
    
    .social-links a {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .top-header-bar {
        display: block !important;
        padding: 10px 0;
    }
    
    .top-header-bar .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }
    
    .header-left {
        width: 100%;
        justify-content: center;
    }
    
    .header-info {
        justify-content: center;
    }
    
    .header-date {
        font-size: 0.8rem;
        text-align: center;
        justify-content: center;
        gap: 5px;
    }
    
    .header-date i {
        font-size: 0.8rem;
    }
    
    .header-date .date-separator {
        display: inline;
        margin: 0 3px;
    }
    
    .header-right {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    
    .social-label {
        font-size: 0.75rem;
    }
    
    .social-links {
        gap: 6px;
    }
    
    .social-links a {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .language-switcher a {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
    background: var(--white);
    /* box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); */
    padding: 12px 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.4s ease, 
                background 0.4s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

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

.logo i {
    font-size: 2.2rem;
    color: var(--gold-color);
    transition: all 0.3s ease;
}

.logo:hover i {
    transform: rotate(-5deg);
}

.nav-menu {
    padding: 0;
    display: flex;
    gap: 5px;
    align-items: center;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

}

.nav-menu a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--gold-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 3px 3px 0 0;
}

.nav-menu a:hover::before,
.nav-menu a.active::before {
    width: 80%;
}

.nav-menu a:hover {
    color: var(--primary-color);
    background: var(--primary-bg-subtle);
}

.nav-menu a.active {
    color: var(--primary-color);
    background: var(--primary-bg-subtle);
}

.nav-menu a i {
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.nav-menu a:hover i {
    transform: scale(1.1);
}

/* Nav Toggle Button - Animated Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-toggle:hover {
    background: var(--primary-bg-subtle);
}

.toggle-line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-line:nth-child(1) {
    margin-bottom: 6px;
}

.toggle-line:nth-child(3) {
    margin-top: 6px;
}

/* Nav Toggle Active State */
.nav-toggle.active .toggle-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.nav-toggle.active .toggle-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.nav-toggle.active .toggle-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu - Hidden on Desktop */
.mobile-menu,
.mobile-overlay {
    display: none;
}

/* Mobile Navigation */
@media (max-width: 992px) {
    .nav-toggle {
        display: flex;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    /* Mobile Overlay */
    .mobile-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }
    
    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Mobile Menu */
    .mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        background: var(--white);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1002;
        overflow-y: auto;
    }
    
    .mobile-menu.active {
        right: 0;
    }
    
    /* Mobile Menu Header */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 25px;
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
        border-bottom: 3px solid var(--gold-color);
    }
    
    .mobile-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--white);
        font-size: 1.3rem;
        font-weight: 700;
    }
    
    .mobile-logo i {
        font-size: 1.8rem;
        color: var(--gold-color);
    }
    
    .mobile-close {
        width: 40px;
        height: 40px;
        border: none;
        background: rgba(255, 255, 255, 0.15);
        color: var(--white);
        font-size: 1.2rem;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-close:hover {
        background: var(--gold-color);
        color: var(--primary-dark);
        transform: rotate(90deg);
    }
    
    /* Mobile Nav Links */
    .mobile-nav-links {
        flex: 1;
        padding: 20px 15px;
        list-style: none;
    }
    
    .mobile-nav-links li {
        margin-bottom: 5px;
    }
    
    .mobile-nav-links a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        color: var(--text-dark);
        font-size: 1rem;
        font-weight: 500;
        border-radius: 12px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .mobile-nav-links a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: var(--gold-color);
        transform: scaleY(0);
        transition: transform 0.3s ease;
        border-radius: 0 4px 4px 0;
    }
    
    .mobile-nav-links a:hover,
    .mobile-nav-links a.active {
        background: var(--primary-bg-subtle);
        color: var(--primary-color);
        padding-right: 25px;
    }
    
    .mobile-nav-links a:hover::before,
    .mobile-nav-links a.active::before {
        transform: scaleY(1);
    }
    
    .mobile-nav-links a i {
        width: 22px;
        text-align: center;
        font-size: 1.1rem;
        color: var(--primary-color);
    }
    
    /* Mobile Menu Footer */
    .mobile-menu-footer {
        padding: 20px;
        background: var(--bg-light);
        background-image: var(--islamic-hexagon) !important;
        border-top: 1px solid #eee;
    }
    
    /* Mobile Language Switcher */
    .mobile-lang {
        margin-bottom: 20px;
    }
    
    .mobile-lang-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        color: var(--text-light);
        margin-bottom: 10px;
        font-weight: 600;
    }
    
    .mobile-lang-label i {
        color: var(--primary-color);
    }
    
    .mobile-lang-links {
        display: flex;
        gap: 10px;
    }
    
    .mobile-lang-links a {
        padding: 8px 20px;
        background: var(--white);
        border: 2px solid #eee;
        border-radius: 25px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-dark);
        transition: all 0.3s ease;
    }
    
    .mobile-lang-links a:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    
    .mobile-lang-links a.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--white);
    }
    
    /* Mobile Social Links */
    .mobile-social-label {
        display: block;
        font-size: 0.9rem;
        color: var(--text-light);
        margin-bottom: 12px;
        font-weight: 600;
    }
    
    .mobile-social-links {
        display: flex;
        gap: 10px;
    }
    
    .mobile-social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: var(--white);
        border: 2px solid #eee;
        border-radius: 50%;
        color: var(--text-dark);
        font-size: 1rem;
        transition: all 0.3s ease;
    }
    
    .mobile-social-links a:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--white);
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
    }
    
    .mobile-social-links a:nth-child(1):hover { background: #1877f2; border-color: #1877f2; }
    .mobile-social-links a:nth-child(2):hover { background: #ff0000; border-color: #ff0000; }
    .mobile-social-links a:nth-child(3):hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: #e6683c; }
    .mobile-social-links a:nth-child(4):hover { background: #0088cc; border-color: #0088cc; }
    .mobile-social-links a:nth-child(5):hover { background: #25d366; border-color: #25d366; }
}

/* ============================================
   Hero Section
   ============================================ */
/* ============================================
   Hero Section - Clean & Professional
   ============================================ */
/* Hero Section - Ultra Professional Premium Design */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* Background Image Layer */
.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.6) contrast(1.1);
    animation: zoomInOut 25s ease-in-out infinite alternate;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}

/* Advanced Multi-Layer Gradient Overlay */
.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 20%, var(--primary-overlay-light) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, var(--primary-overlay-light) 0%, transparent 50%),
        linear-gradient(135deg, 
            var(--primary-overlay-dark) 0%,
            var(--primary-overlay-medium) 25%,
            var(--primary-overlay) 50%,
            var(--primary-overlay-medium) 75%,
            var(--primary-overlay-dark) 100%
        );
    backdrop-filter: blur(1px);
}

.hero-gradient-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='rg'%3E%3Cstop offset='0%25' stop-color='%231a5f4a' stop-opacity='0.08'/%3E%3Cstop offset='100%25' stop-color='%231a5f4a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.06'%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Ccircle cx='100' cy='100' r='60'/%3E%3Cpath d='M100 20 L115 70 L165 70 L125 100 L140 150 L100 120 L60 150 L75 100 L35 70 L85 70 Z'/%3E%3C/g%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);
    background-size: 200px 200px, 4px 4px;
    animation: patternFloat 60s linear infinite;
}

.hero-gradient-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
        linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 30%);
}

@keyframes patternFloat {
    0% { 
        background-position: 0 0, 0 0; 
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% { 
        background-position: 200px 200px, 4px 4px; 
        opacity: 0.7;
    }
}

/* Floating Islamic Elements */
.hero-pattern-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.floating-element {
    position: absolute;
    font-size: 4rem;
    color: rgba(45, 138, 106, 0.12);
    filter: blur(0.5px);
    animation: floatElegant 15s ease-in-out infinite;
}

.floating-element:nth-child(1) {
    top: 12%;
    left: 8%;
    animation-duration: 18s;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    top: 20%;
    right: 12%;
    font-size: 3.5rem;
    animation-duration: 20s;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    bottom: 18%;
    left: 12%;
    font-size: 3.8rem;
    animation-duration: 16s;
    animation-delay: 4s;
}

.floating-element:nth-child(4) {
    bottom: 25%;
    right: 8%;
    animation-duration: 19s;
    animation-delay: 1s;
}

@keyframes floatElegant {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
        opacity: 0.08;
    }
    25% {
        transform: translateY(-20px) translateX(10px) rotate(45deg) scale(1.1);
        opacity: 0.15;
    }
    50% {
        transform: translateY(-35px) translateX(-10px) rotate(90deg) scale(1.05);
        opacity: 0.12;
    }
    75% {
        transform: translateY(-20px) translateX(10px) rotate(135deg) scale(1.08);
        opacity: 0.15;
    }
}

/* Hero Content Container */
.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    padding: 60px 30px;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(150vh - 120px);
}

/* Bismillah Section - Elegant Design */
.hero-bismillah {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 45px;
}

.bismillah-ornament {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(45, 138, 106, 0.4) 20%, 
        rgba(45, 138, 106, 0.95) 50%, 
        rgba(45, 138, 106, 0.4) 80%, 
        transparent 100%
    );
    position: relative;
}

.bismillah-ornament::before,
.bismillah-ornament::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-light);
    border-radius: 50%;
    box-shadow: 
        0 0 20px rgba(45, 138, 106, 0.7),
        0 0 40px rgba(45, 138, 106, 0.4);
}

.bismillah-ornament::before {
    left: 0;
    width: 10px;
    height: 10px;
}

.bismillah-ornament::after {
    right: 0;
    width: 10px;
    height: 10px;
}

/* Bismillah Heading - Stunning Typography */
.hero-content h1 {
    font-family: 'Amiri', serif;
    font-size: 5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 3px;
    position: relative;
    color: #ffffff;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(45, 138, 106, 0.3);
}

@keyframes shimmer {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* Hero Verse - Beautiful Quranic Text */
.hero-verse {
    font-family: 'Amiri', serif;
    font-size: 2rem;
    line-height: 2.5;
    /* margin: 35px auto; */
    font-weight: 500;
    color: #f5f5f5;
    max-width: 850px;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3);
    padding: 0 20px;
    position: relative;
}

/* Elegant Divider */
.hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
}

.hero-divider span {
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(45, 138, 106, 0.6), 
        rgba(45, 138, 106, 0.95), 
        rgba(45, 138, 106, 0.6), 
        transparent
    );
}

.hero-divider i {
    color: var(--primary-light);
    font-size: 1.1rem;
    filter: drop-shadow(0 0 10px rgba(45, 138, 106, 0.9));
    animation: rotatePulse 4s ease-in-out infinite;
}

@keyframes rotatePulse {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg) scale(1.3);
        opacity: 0.8;
    }
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 50px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.4);
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

/* Hero CTA Buttons - Premium Design */
.hero-cta {
    display: flex;
    gap: 25px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 50px;
}

.btn-hero {
    padding: 20px 50px;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 60px;
    background: linear-gradient(135deg, 
        var(--primary-light) 0%, 
        #a8d5c8 50%, 
        var(--primary-light) 100%
    );
    background-size: 200% auto;
    color: #ffffff;
    border: none;
    box-shadow: 
        0 10px 30px rgba(45, 138, 106, 0.5),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-hero:hover::before {
    transform: translateX(100%);
}

.btn-hero:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 15px 40px rgba(45, 138, 106, 0.7),
        0 8px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background-position: 100% center;
}

.btn-hero:active {
    transform: translateY(-2px) scale(1);
}

.btn-secondary-hero {
    padding: 20px 45px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-secondary-hero:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 35px rgba(255, 255, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-secondary-hero:active {
    transform: translateY(-2px) scale(1);
}

/* Scroll Indicator - Modern Design */
.hero-scroll-indicator {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    animation: floatUpDown 3s ease-in-out infinite;
}

.scroll-mouse {
    width: 32px;
    height: 55px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 25px;
    margin: 0 auto 12px;
    position: relative;
    box-shadow: 
        0 0 0 4px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

.scroll-wheel {
    width: 4px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 2px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollMove 2.5s ease-in-out infinite;
    box-shadow: var(--shadow);
}

@keyframes scrollMove {
    0% {
        top: 10px;
        opacity: 1;
    }
    100% {
        top: 30px;
        opacity: 0;
    }
}

@keyframes floatUpDown {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-12px);
    }
}

.hero-scroll-indicator span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Animation Classes */
.animate-fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUpSmooth 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUpSmooth {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design - Mobile Optimization */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 4rem;
    }
    
    .hero-verse {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 0;
    }
    
    .hero-content {
        padding: 40px 20px;
    }
    
    .hero-content h1 {
        font-size: 3rem;
        letter-spacing: 1px;
    }
    
    .hero-verse {
        font-size: 1.35rem;
        line-height: 2.2;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        line-height: 1.8;
    }
    
    .bismillah-ornament {
        width: 50px;
    }
    
    .bismillah-ornament::before,
    .bismillah-ornament::after {
        width: 8px;
        height: 8px;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 0 20px;
    }
    
    .btn-hero,
    .btn-secondary-hero {
        width: 100%;
        justify-content: center;
        padding: 18px 35px;
        font-size: 1rem;
    }
    
    .floating-element {
        font-size: 2.5rem;
    }
    
    .hero-scroll-indicator {
        bottom: 15px;
    }
    .hero-content {

    min-height: calc(110vh - 120px);
}
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }
    
    .hero-verse {
        font-size: 1.15rem;
        line-height: 2;
    }
    
    .hero-bismillah {
        gap: 15px;
    }
    
    .bismillah-ornament {
        width: 35px;
    }
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 45px;
    opacity: 0.95;
    font-weight: 400;
    line-height: 1.6;
}

.hero-content .btn {
    padding: 16px 40px;
    font-size: 1.1rem;
    box-shadow: var(--shadow-hover);
}

.hero-content .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

@media screen and (max-width: 600px) {
    .hero-content .btn {
   
        font-size: 0.9rem;
        padding: 12px 25px;
    }
    .btn-hero {
    font-size: 0.7rem;
    padding: 12px 25px;
}

    
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--gold-color);
    color: var(--text-dark);
}

.btn-primary:hover {
    background: #e6c04a;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--white);
}

.btn-block {
    width: 100%;
}

.btn-large {
    padding: 15px 40px;
    font-size: 1.1rem;
}

.btn-play {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    padding: 0;
}

.btn-play:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.btn-youtube {
    background: #ff0000;
    color: var(--white);
}

.btn-youtube:hover {
    background: #cc0000;
}

/* ============================================
   Section Styles
   ============================================ */
.section-title {
    text-align: center;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 40px;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--gold-color);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* ============================================
   Features Section
   ============================================ */
.features {
    padding: 80px 0;
    /* background: var(--bg-light); */
    /* background-image: var(--islamic-hexagon); */
    position: relative;
    overflow: hidden;
}

.features::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background-image: var(--islamic-arabesque);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
    pointer-events: none;
}

.features::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 350px;
    height: 350px;
    background-image: var(--islamic-moon);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.3;
    pointer-events: none;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
}

/* First row: 3 cards, each spanning 2 columns */
.feature-card:nth-child(1),
.feature-card:nth-child(2) {
    grid-column: span 3;
}

/* Second row: 2 cards, each spanning 3 columns (full width) */
.feature-card:nth-child(3),
.feature-card:nth-child(4),
.feature-card:nth-child(5) {
    grid-column: span 2;
}

.feature-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feature-icon i {
    font-size: 2rem;
    color: var(--white);
}

.feature-card h3 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.feature-card p {
    color: var(--text-light);
    margin-bottom: 20px;
}

/* ============================================
   Quran Quote Section
   ============================================ */
.quran-quote {
    padding: 80px 0;
background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    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%3Cg fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.1'%3E%3Cpath d='M30 0 L30 60 M0 30 L60 30'/%3E%3Cpath d='M0 0 L60 60 M60 0 L0 60'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg, var(--primary-dark), var(--primary-color));    color: var(--white);
    position: relative;
    overflow: hidden;
}

.quote-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.quote-content i {
    font-size: 4rem;
    color: var(--gold-color);
    margin-bottom: 30px;
}

.quote-content blockquote {
    font-family: 'Amiri', serif;
    font-size: 1.8rem;
    line-height: 2;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
    .quote-content blockquote {
        font-size: 1.4rem;
    }
    
}

.quote-content cite {
    font-size: 1.1rem;
    color: var(--gold-color);
}

/* ============================================
   Latest Videos Section
   ============================================ */
.latest-section {
    padding: 80px 0;
    position: relative;
    background-image: var(--islamic-pattern);
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.video-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.video-thumbnail {
    position: relative;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: var(--transition);
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.05);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.video-card:hover .play-overlay {
    opacity: 1;
}

.play-overlay i {
    width: 60px;
    height: 60px;
    background: var(--gold-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-dark);
}

.video-info {
    padding: 20px;
}

.video-info h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.video-info p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
    min-height: 60vh;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    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%3Cg fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.1'%3E%3Cpath d='M30 0 L30 60 M0 30 L60 30'/%3E%3Cpath d='M0 0 L60 60 M60 0 L0 60'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding-top: 110px;
}

.page-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.page-header-content {
    position: relative;
    z-index: 1;
    color: var(--white);
}

/* .page-header-content h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
} */

.page-header-content h1 i {
    color: var(--gold-color);
    margin-left: 10px;
}

.page-header-content p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* ============================================
   Professional Page Header Section Component
   ============================================ */
.page-header-section {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 80px;
}

/* Background with Pattern Overlay */
.page-header-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, #0a2818 100%);
    z-index: 0;
}

.header-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        var(--islamic-pattern),
        var(--islamic-hexagon);
    background-size: 60px 60px, 120px 104px;
    opacity: 0.15;
    animation: patternFloat 30s linear infinite;
}

@keyframes patternFloat {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 60px 60px, 120px 104px; }
}

.header-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* Animated Geometric Shapes */
.geometric-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shape {
    position: absolute;
    opacity: 0.4;
}

.shape-1 {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.4);
    top: 10%;
    left: 10%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent);
}

.shape-2 {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    border: 2px solid rgba(255, 255, 255, 0.3);
    top: 60%;
    right: 15%;
    background: rgba(255, 255, 255, 0.05);
}

.shape-3 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(201, 162, 39, 0.4);
    bottom: 20%;
    left: 20%;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.15), transparent);
}

.shape-4 {
    width: 120px;
    height: 120px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border: 2px solid rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.1);
    top: 30%;
    right: 25%;
}

/* Islamic Shapes Background Pattern */
.islamic-shapes-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
       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%3Cg fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.1'%3E%3Cpath d='M30 0 L30 60 M0 30 L60 30'/%3E%3Cpath d='M0 0 L60 60 M60 0 L0 60'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg, var(--primary-dark), var(--primary-color));

    opacity: 0.6;
}

/* Header Content Wrapper */
.page-header-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 130px 20px 100px;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    margin-bottom: 30px;
    animation: fadeInDown 0.6s ease-out;
    display: flex;
    justify-content: center;
}

.breadcrumb-wrapper {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    border-radius: 30px;
    padding: 5px 10px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--white);
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 600;
}

.breadcrumb-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    transform: translateY(-1px);
}

.breadcrumb-link:hover .breadcrumb-icon {
    transform: scale(1.1);
    color: var(--gold-color);
}

.breadcrumb-current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 20px;
}

.breadcrumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.breadcrumb-icon i {
    font-size: 0.75rem;
}

.breadcrumb-current .breadcrumb-icon {
    background: rgba(212, 175, 55, 0.3);
    color: var(--gold-color);
}

.breadcrumb-text {
    white-space: nowrap;
}

.breadcrumb-separator {
    display: flex;
    align-items: center;
    color: var(--white);
    font-size: 0.7rem;
    margin: 0 2px;
    opacity: 0.7;
}

.breadcrumb-separator i {
    font-size: 0.65rem;
}

/* Old breadcrumb styles for backward compatibility */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    display: inline-flex;
    gap: 8px;
}



.breadcrumb-item a {
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    padding: 4px 8px;
    border-radius: 6px;
}

.breadcrumb-item a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);

}

.breadcrumb-item a i {
    font-size: 0.9rem;
}

.breadcrumb-item.active {
    color: var(--white);
    font-weight: 600;
}

.breadcrumb-item.active i {
    color: var(--gold-color);
}

/* Page Header Content */
.page-header-content {
    text-align: center;
    color: var(--white);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Header Icon */
.header-icon {
    display: inline-block;
    margin-bottom: 34px;
    /* animation: iconBounce 1s ease-out 0.4s both; */
}

.icon-wrapper {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--gold-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.icon-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-color), var(--secondary-color));
    /* animation: iconPulseRing 2s ease-out infinite; */
}

@keyframes iconPulseRing {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.icon-wrapper i {
    font-size: 42px;
    color: var(--white);
    position: relative;
    z-index: 1;
}

@keyframes iconBounce {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    60% {
        transform: translateY(10px);
        opacity: 1;
    }
    80% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Page Title */
.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.title-underline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.underline-dot {
    width: 8px;
    height: 8px;
    background: var(--gold-color);
    border-radius: 50%;
    animation: dotPulse 2s ease-in-out infinite;
}

.underline-line {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-color), transparent);
    border-radius: 3px;
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.6;
    }
}

/* Page Description */
.page-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.8;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Header Divider */
.header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.divider-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.divider-ornament {
    color: var(--gold-color);
    font-size: 1rem;
    animation: rotateStar 10s linear infinite;
}

@keyframes rotateStar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Bottom Wave Decoration */
.header-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    z-index: 3;
    line-height: 0;
}

.header-wave svg {
    width: 100%;
    height: 80px;
    display: block;
}

/* Fade In Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Responsive Design */
@media (max-width: 1024px) {
    .page-header-section {
        min-height: 350px;
    }
    
    .page-title {
        font-size: 2.8rem;
    }
    
    .icon-wrapper {
        width: 80px;
        height: 80px;
    }
    
    .icon-wrapper i {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .page-header-section {
        min-height: 320px;
        margin-top: 70px;
    }
    
    .page-header-wrapper {
        padding: 150px 15px 100px;
    }
    
    .page-title {
        font-size: 2.2rem;
    }
    
    .page-description {
        font-size: 1.1rem;
    }
    
    .icon-wrapper {
        width: 70px;
        height: 70px;
    }
    
    .icon-wrapper i {
        font-size: 32px;
    }
    
    .breadcrumb {
        font-size: 0.85rem;
        padding: 10px 18px;
    }
    
    /* Hide breadcrumb on mobile */
    .breadcrumb-nav {
        display: none;
    }
    
    .header-wave svg {
        height: 60px;
    }
    
    .shape {
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .page-header-section {
        min-height: 280px;
    }
    
    .page-title {
        font-size: 1.8rem;
    }
    
    .page-description {
        font-size: 1rem;
    }
    
    .icon-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .icon-wrapper i {
        font-size: 28px;
    }
    
    .breadcrumb {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
    
    /* New Breadcrumb Mobile */
    .breadcrumb-wrapper {
        padding: 6px 10px;
    }
    
    .breadcrumb-container {
        gap: 2px;
    }
    
    .breadcrumb-link,
    .breadcrumb-current {
        padding: 4px 8px;
        gap: 4px;
    }
    
    .breadcrumb-icon {
        width: 20px;
        height: 20px;
    }
    
    .breadcrumb-icon i {
        font-size: 0.7rem;
    }
    
    .breadcrumb-separator i {
        font-size: 0.6rem;
    }
    
    .title-underline {
        gap: 8px;
    }
    
    .underline-line {
        width: 50px;
    }
}

/* Custom Header Classes */
.page-header-section.primary-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.page-header-section.gold-gradient {
    background: linear-gradient(135deg, var(--gold-color), var(--secondary-color));
}

.page-header-section.dark-gradient {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

/* ============================================
   Teacher Page
   ============================================ */
.teacher-profile {
    padding: 80px 0;
    background: var(--bg-light);
}

.profile-card {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.profile-image {
    position: relative;
    flex: 0 0 250px;
}

.profile-image img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--gold-color);
}

.profile-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-color);
    font-size: 1.5rem;
    border: 3px solid var(--white);
}

.profile-info {
    flex: 1;
}

.profile-info h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.profile-title {
    color: var(--text-light);
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.profile-stats {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Biography */
.biography {
    padding: 80px 0;
}

.bio-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.bio-text {
    background: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.bio-text h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bio-text h3 i {
    color: var(--gold-color);
}

.bio-list li {
    padding: 10px 0;
    padding-right: 25px;
    position: relative;
    border-bottom: 1px solid #eee;
}

.bio-list li:last-child {
    border-bottom: none;
}

.bio-list li::before {
    content: '✓';
    position: absolute;
    right: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Contact Teacher */
.contact-teacher {
    padding: 80px 0;
    background: var(--bg-light);
}

.contact-methods {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    min-width: 200px;
    transition: var(--transition);
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.contact-card i {
    font-size: 3rem;
    color: var(--primary-color);
}

.contact-card span {
    font-weight: 600;
    color: var(--text-dark);
}

/* ============================================
   Mosque Location Page
   ============================================ */
.mosque-info {
    padding: 80px 0;
}

.mosque-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.mosque-icon {
    width: 200px;
    height: 200px;
    /* background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
@media screen and (max-width: 600px) {
    .mosque-icon {
        width: 170px;
        height: 170px;
    }
}

.mosque-icon i {
    font-size: 3rem;
    color: var(--gold-color);
}

.mosque-card h2 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 15px;
}

.mosque-description {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* Prayer Times */
.prayer-times {
    padding: 80px 0;
    background: var(--bg-light);
}

.prayer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.prayer-card {
    background: var(--white);
    padding: 30px 20px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.prayer-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.prayer-card i {
    font-size: 2rem;
    color: var(--gold-color);
    margin-bottom: 15px;
}

.prayer-card h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.prayer-card p {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
}

.friday-prayer {
    background: var(--primary-color);
}

.friday-prayer i,
.friday-prayer h3,
.friday-prayer p {
    color: var(--white);
}

.friday-prayer i {
    color: var(--gold-color);
}

/* Location Map */
.location-map {
    padding: 80px 0;
}

.map-container {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
}

.map-container iframe {
    display: block;
}

.address-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.address-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--white);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.address-card i {
    font-size: 2rem;
    color: var(--primary-color);
}

.address-card h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.address-card p {
    color: var(--text-light);
    margin: 0;
}

/* Friday Schedule */
.friday-schedule {
    padding: 80px 0;
    background: var(--bg-light);
}

.schedule-timeline {
    max-width: 600px;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

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

.timeline-time {
    flex: 0 0 80px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
}

.timeline-content h4 {
    color: var(--text-dark);
    margin-bottom: 5px;
}

.timeline-content p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* ============================================
   Courses Page
   ============================================ */
.course-categories {
    padding: 40px 0;
    background: var(--bg-light);
}

.categories-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    border: 2px solid var(--primary-color);
    background: var(--white);
    color: var(--primary-color);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.category-btn:hover,
.category-btn.active {
    background: var(--primary-color);
    color: var(--white);
}

/* Courses Section */
.courses-section {
    padding: 80px 0;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.course-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.course-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.course-card:hover .course-image img {
    transform: scale(1.05);
}

.course-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 15px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.course-badge.new {
    background: #27ae60;
}

.course-badge.upcoming {
    background: #e67e22;
}

.course-content {
    padding: 25px;
}

.course-category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.course-content h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.course-content p {
    color: var(--text-light);
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.course-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.course-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

.cta-content {
    text-align: center;
    color: var(--white);
}

.cta-content h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.cta-content p {
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-form {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    max-width: 500px;
    margin: 0 auto;
}

.cta-form input {
    flex: 1;
    min-width: 250px;
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
}

.cta-form input:focus {
    outline: 2px solid var(--gold-color);
}

/* ============================================
   Record Course Page
   ============================================ */
.search-filter {
    padding: 30px 0;
    background: var(--bg-light);
}

.search-filter .container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box {
    flex: 1;
    min-width: 250px;
    display: flex;
    align-items: center;
    background: var(--white);
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: var(--shadow);
}

.search-box i {
    color: var(--text-light);
    margin-left: 10px;
}

.search-box input {
    flex: 1;
    border: none;
    font-size: 1rem;
    background: transparent;
}

.search-box input:focus {
    outline: none;
}

.search-box.small {
    min-width: 200px;
    flex: 0;
}

.filter-options {
    display: flex;
    gap: 15px;
}

.filter-options select {
    padding: 12px 25px;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    font-size: 1rem;
    background: var(--white);
    color: var(--primary-color);
    cursor: pointer;
}

/* Recorded Courses */
.recorded-courses {
    padding: 80px 0;
}

.playlist-section {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 40px;
    overflow: hidden;
}

.playlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    background: var(--primary-color);
    color: var(--white);
}

.playlist-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.playlist-header h3 i {
    color: var(--gold-color);
}

.playlist-info {
    font-size: 0.9rem;
    opacity: 0.9;
}

.videos-list {
    padding: 20px;
}

.video-item {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
    transition: var(--transition);
}

.video-item:hover {
    background: var(--bg-light);
}

.video-thumbnail-small {
    position: relative;
    flex: 0 0 150px;
    border-radius: 10px;
    overflow: hidden;
}

.video-thumbnail-small img {
    width: 150px;
    height: 85px;
    object-fit: cover;
}

.video-thumbnail-small .duration {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.video-details {
    flex: 1;
}

.video-details h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.video-details p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.video-meta {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.video-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.see-all {
    display: block;
    text-align: center;
    margin: 20px;
}

/* ============================================
   Important Courses Page
   ============================================ */
.featured-course {
    padding: 80px 0;
    background: var(--bg-cream);
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold-color);
    color: var(--text-dark);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 30px;
}

.featured-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 768px) {
    .featured-content {
        grid-template-columns: 1fr;
    }
}

.featured-video {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.featured-video img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.play-btn-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--gold-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.play-btn-large:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-btn-large i {
    font-size: 2rem;
    color: var(--text-dark);
    margin-right: -5px;
}

.featured-info h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.featured-description {
    color: var(--text-light);
    margin-bottom: 25px;
    line-height: 1.8;
}

.featured-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dark);
}

.stat-item i {
    color: var(--gold-color);
}

/* Important Courses Grid */
.important-courses {
    padding: 80px 0;
}

.important-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.important-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    transition: var(--transition);
}

.important-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.card-ribbon {
    position: absolute;
    top: 15px;
    right: -35px;
    background: #e74c3c;
    color: var(--white);
    padding: 5px 40px;
    transform: rotate(45deg);
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 1;
}

.card-ribbon.essential {
    background: var(--primary-color);
}

.card-ribbon.new {
    background: #27ae60;
}

.important-image {
    height: 180px;
    overflow: hidden;
}

.important-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.important-card:hover .important-image img {
    transform: scale(1.05);
}

.important-content {
    padding: 25px;
}

.course-rating {
    margin-bottom: 15px;
}

.course-rating i {
    color: var(--gold-color);
    font-size: 0.9rem;
}

.course-rating span {
    margin-right: 10px;
    font-weight: 700;
    color: var(--text-dark);
}

.important-content h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.important-content p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.course-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.course-features span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.course-features i {
    color: var(--primary-color);
}

/* YouTube Playlists */
.youtube-playlists {
    padding: 80px 0;
    background: var(--bg-light);
}

.playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.playlist-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.playlist-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.playlist-thumbnail {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.playlist-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.playlist-card:hover .playlist-thumbnail img {
    transform: scale(1.05);
}

.playlist-thumbnail .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    opacity: 0;
    transition: var(--transition);
}

.playlist-card:hover .playlist-thumbnail .play-overlay {
    opacity: 1;
}

.playlist-count {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.playlist-info {
    padding: 20px;
}

.playlist-info h4 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

.playlist-info p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* ============================================
   Friday Videos Page
   ============================================ */
.latest-sermon {
    padding: 80px 0;
    /* background: var(--bg-cream); */
}

.sermon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 30px;
}

.latest-sermon-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 768px) {
    .latest-sermon-content {
        grid-template-columns: 1fr;
    }
}

.sermon-video-container {
    position: relative;
}

.video-wrapper {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.video-wrapper img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.video-duration {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
}

.sermon-details {
    padding: 20px 0;
}

.sermon-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    margin-bottom: 15px;
}

.sermon-details h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.sermon-description {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
}

.sermon-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.topic-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-light);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.sermon-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Sermons Archive */
.sermons-archive {
    padding: 80px 0;
    /* background: var(--bg-light); */
}

/* Archive Filter - Simple & Clean */
.archive-filter {
    margin-bottom: 40px;
}

.filter-wrapper {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    padding: 14px 40px 14px 20px;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Cairo', sans-serif;
    font-weight: 500;
    background: var(--white);
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 250px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a5f4a' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.filter-select:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-alpha);
}

.search-box-filter {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.search-box-filter input {
    width: 100%;
    padding: 14px 45px 14px 20px;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Cairo', sans-serif;
    background: var(--white);
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.search-box-filter input::placeholder {
    color: #aaa;
}

.search-box-filter input:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow);
}

.search-box-filter input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-alpha);
}

.search-box-filter i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 1rem;
    pointer-events: none;
}

.archive-filter select {
    padding: 12px 25px;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    font-size: 1rem;
    background: var(--white);
    color: var(--primary-color);
    cursor: pointer;
}

.sermons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.sermon-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.sermon-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.sermon-thumbnail {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.sermon-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.sermon-card:hover .sermon-thumbnail img {
    transform: scale(1.05);
}

.sermon-thumbnail .play-overlay {
    opacity: 0;
}

.sermon-card:hover .sermon-thumbnail .play-overlay {
    opacity: 1;
}

.sermon-duration {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.sermon-info {
    padding: 20px;
}

.sermon-date-small {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.sermon-date-small i {
    color: var(--secondary-color);
}

.sermon-info h4 {
    color: var(--primary-color);
    margin-bottom: 12px;
    font-size: 1.05rem;
    line-height: 1.6;
    min-height: 50px;
}

.sermon-info p {
    color: var(--text-light);
    font-size: 0.9rem;
}

.sermon-meta {
    /* margin: 12px 0; */
    padding: 8px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.sermon-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--primary-color);
    background: var(--primary-bg-subtle);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.sermon-topic i {
    color: var(--secondary-color);
}

.sermon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
}

.sermon-action {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.sermon-action i {
    color: var(--secondary-color);
    font-size: 1.1rem;
}

.sermon-source {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #ff0000;
    font-weight: 500;
}

.sermon-card:hover .sermon-action {
    color: var(--primary-dark);
}

.sermon-card:hover .sermon-action i {
    transform: scale(1.15);
    transition: var(--transition);
}

/* YouTube CTA Section */
.youtube-cta {
    margin: 50px 0 30px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.youtube-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 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 20L40 30L30 40L20 30Z' fill='%23ffffff' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
}

.youtube-cta-content {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 1;
}

.youtube-cta-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.youtube-cta-icon i {
    font-size: 3rem;
    color: white;
}

.youtube-cta-text {
    flex: 1;
    color: white;
}

.youtube-cta-text h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.youtube-cta-text p {
    font-size: 1.05rem;
    opacity: 0.95;
    margin: 0;
}

.youtube-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: white;
    color: #ff0000;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.youtube-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: #f8f8f8;
}

.youtube-btn i:first-child {
    font-size: 1.4rem;
}

.youtube-btn i:last-child {
    transition: transform 0.3s ease;
}

.youtube-btn:hover i:last-child {
    transform: translateX(-5px);
}

.sermon-stats {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.sermon-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.load-more {
    text-align: center;
    margin-top: 40px;
}

/* Subscribe Section */
.subscribe-section {
    padding: 80px 0;
    background: #1a1a1a;
}

.subscribe-content {
    text-align: center;
    color: var(--white);
}

.subscribe-content i {
    font-size: 4rem;
    color: #ff0000;
    margin-bottom: 20px;
}

.subscribe-content h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.subscribe-content p {
    margin-bottom: 30px;
    opacity: 0.8;
}

/* ============================================
   Footer
   ============================================ */
.footer {
     background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    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%3Cg fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.1'%3E%3Cpath d='M30 0 L30 60 M0 30 L60 30'/%3E%3Cpath d='M0 0 L60 60 M60 0 L0 60'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    color: var(--white);
    padding: 60px 0 20px;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background-image: var(--islamic-arabesque);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.08;
    filter: brightness(10);
    pointer-events: none;
}

.footer::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    background-image: var(--islamic-moon);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.06;
    filter: brightness(10);
    pointer-events: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--white);
}
.footer-section img {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 150px;
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--white);
}

.footer-section p {
    opacity: 0.8;
    line-height: 1.8;
}

.footer-section ul li {
    padding: 8px 0;
}

.footer-section ul a {
    opacity: 0.8;
    transition: var(--transition);
}

.footer-section ul a:hover {
    opacity: 1;
    color: var(--gold-color);
    padding-right: 10px;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--gold-color);
    color: var(--text-dark);
}

/* Footer Social Links Column */
.footer-section .social-links-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-section .social-links-column .social-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-section .social-links-column .social-link-item:hover {
  
    transform: translateX(-5px);



    color: var(--gold-color);
}

.footer-section .social-links-column .social-link-item:hover span {
    color: var(--gold-color);
}

.footer-section .social-links-column .social-link-item i {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.9rem;
}

.footer-section .social-links-column .social-link-item span {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Footer Social Platform Colors - White Icons */
.footer-section .social-link-facebook i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-youtube i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-telegram i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-whatsapp i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-tiktok i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-instagram i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-twitter i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-linkedin i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-snapchat i { background: rgba(255, 255, 255, 0.15); color: #fff; }
.footer-section .social-link-location i { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* Hover effect for white icons */
.footer-section .social-links-column .social-link-item:hover i {
    background: var(--gold-color);
    transform: scale(1.1);
}

/* Footer Map Section */
.footer-map-section {
    min-width: 350px;
}

.footer-map {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
    height: 250px;
}

.footer-map iframe {
    display: block;
    filter: grayscale(30%) contrast(1.1);
    transition: filter 0.3s ease;
    height: 100%;
}

.footer-map:hover iframe {
    filter: grayscale(0%) contrast(1);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    opacity: 0.7;
}

/* ============================================
   Search and Filter Section
   ============================================ */
.search-filter {
    padding: 30px 0;
    background: var(--bg-light);
}

.search-filter .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-box i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.search-box input {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
}

.search-box input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.search-box.small {
    max-width: 250px;
}

.filter-options {
    display: flex;
    gap: 15px;
}

.filter-options select {
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: inherit;
    background: var(--white);
    cursor: pointer;
    transition: var(--transition);
}

.filter-options select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* ============================================
   Recorded Courses / Playlist Section
   ============================================ */
.recorded-courses {
    padding: 60px 0;
}

.playlist-section {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    overflow: hidden;
}

.playlist-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
}

.playlist-header h3 {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.playlist-header h3 i {
    color: var(--gold-color);
}

.playlist-info {
    font-size: 0.9rem;
    opacity: 0.9;
}

.videos-list {
    padding: 20px;
}

.video-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border-radius: var(--border-radius);
    transition: var(--transition);
    margin-bottom: 10px;
}

.video-item:hover {
    background: var(--bg-light);
}

.video-thumbnail-small {
    position: relative;
    flex-shrink: 0;
    width: 150px;
    border-radius: 8px;
    overflow: hidden;
}

.video-thumbnail-small img {
    width: 100%;
    height: 85px;
    object-fit: cover;
}

.video-thumbnail-small .duration {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.video-details {
    flex: 1;
}

.video-details h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.video-details p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.video-meta {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    color: var(--text-light);
}

.video-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-play {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition);
}

.btn-play:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.see-all {
    margin: 15px 25px 25px;
    display: inline-block;
}

/* ============================================
   Featured / Important Course Section
   ============================================ */
.featured-course {
    padding: 60px 0;
    background: linear-gradient(135deg, var(--bg-cream), var(--bg-light));
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold-color), #f4c542);
    color: var(--primary-dark);
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 30px;
}

.featured-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.featured-video {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-hover);
}

.featured-video img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.play-btn-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.play-btn-large i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-right: -5px;
}

.play-btn-large:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.featured-info h2 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.featured-description {
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.8;
}

.featured-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-dark);
}

.stat-item i {
    color: var(--gold-color);
}

.btn-large {
    padding: 15px 35px;
    font-size: 1.1rem;
}

/* Important Courses Grid */
.important-courses {
    padding: 60px 0;
}

.important-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.important-card {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
    transition: var(--transition);
}

.important-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.card-ribbon {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 1;
}

.card-ribbon.essential {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.card-ribbon.new {
    background: linear-gradient(135deg, var(--gold-color), #f4c542);
    color: var(--primary-dark);
}

.important-image {
    height: 180px;
    overflow: hidden;
}

.important-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.important-card:hover .important-image img {
    transform: scale(1.1);
}

.important-content {
    padding: 20px;
}

.course-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 10px;
}

.course-rating i {
    color: var(--gold-color);
    font-size: 0.9rem;
}

.course-rating span {
    margin-right: 8px;
    font-weight: 700;
    color: var(--text-dark);
}

.important-content h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.important-content p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 15px;
}

.course-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.course-features span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-light);
    background: var(--bg-light);
    padding: 5px 10px;
    border-radius: 15px;
}

.course-features span i {
    color: var(--primary-color);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* YouTube Playlists */
.youtube-playlists {
    padding: 60px 0;
    background: var(--bg-light);
}

.playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.playlist-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.playlist-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.playlist-thumbnail {
    position: relative;
    height: 170px;
}

.playlist-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-count {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.85);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.playlist-info {
    padding: 15px 20px;
}

.playlist-info h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.playlist-info p {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* ============================================
   Friday Sermons Section
   ============================================ */
.latest-sermon {
    padding: 60px 0;
}

.sermon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 600;
    margin-bottom: 30px;
}

.latest-sermon-content {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
}

.sermon-video-container {
    position: relative;
}

.video-wrapper {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-hover);
}

.video-wrapper img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.video-duration {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 5px;
    font-weight: 600;
}

.sermon-details .sermon-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.sermon-details h2 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.sermon-description {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
}

.sermon-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.topic-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-light);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.topic-tag i {
    color: var(--primary-color);
}

.sermon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Sermons Archive */
.sermons-archive {
    padding: 60px 0;
    /* background: var(--bg-light); */
}

.archive-filter {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.archive-filter select {
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: inherit;
    background: var(--white);
    cursor: pointer;
}

.sermons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.sermon-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
}

.sermon-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.sermon-thumbnail {
    position: relative;
    height: 200px;
}

.sermon-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.sermon-card:hover .play-overlay {
    opacity: 1;
}

.play-overlay i {
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.sermon-duration {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.sermon-info {
    padding: 20px;
}

.sermon-date-small {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.sermon-info h4 {
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.sermon-info p {
    font-size: 0.9rem;
    color: var(--text-light);
}

.sermon-stats {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.sermon-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.load-more {
    text-align: center;
    margin-top: 40px;
}

/* Subscribe Section */
.subscribe-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #c4302b, #ff0000);
    text-align: center;
}

.subscribe-content {
    max-width: 600px;
    margin: 0 auto;
    color: var(--white);
}

.subscribe-content > i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.subscribe-content h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.subscribe-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

.btn-youtube {
    background: var(--white);
    color: #c4302b;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.btn-youtube:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 992px) {
    .featured-content,
    .latest-sermon-content {
        grid-template-columns: 1fr;
    }
    
    .featured-video img,
    .video-wrapper img {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .hero, .page-header {
        padding-top: 100px;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
    }

    .hero-verse {
        font-size: 1.3rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .profile-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats {
        justify-content: center;
    }

    .video-item {
        flex-direction: column;
        text-align: center;
    }

    .video-thumbnail-small {
        flex: none;
        width: 100%;
    }
    
    .video-thumbnail-small img {
        height: 150px;
    }

    .sermon-actions {
        justify-content: center;
    }
    
    .search-filter .container {
        flex-direction: column;
    }
    
    .search-box {
        max-width: 100%;
    }
    
    .filter-options {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Archive Filter Responsive */
    .filter-wrapper {
        flex-direction: column;
    }
    
    .filter-select,
    .search-box-filter {
        width: 100%;
        min-width: 100%;
    }
    
    /* YouTube CTA Responsive */
    .youtube-cta {
        padding: 30px 20px;
    }
    
    .youtube-cta-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .youtube-cta-text h3 {
        font-size: 1.4rem;
    }
    
    .youtube-cta-text p {
        font-size: 0.95rem;
    }
    
    .youtube-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
 
    .features-grid,
    .courses-grid,
    .important-grid,
    .sermons-grid,
    .playlists-grid {
        grid-template-columns: 1fr;
    }
    
    /* Reset features grid for mobile */
    .feature-card:nth-child(1),
    .feature-card:nth-child(2),
    .feature-card:nth-child(3),
    .feature-card:nth-child(4),
    .feature-card:nth-child(5) {
        grid-column: span 1;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .cta-form {
        flex-direction: column;
    }

    .cta-form input {
        min-width: 100%;
    }
    
    .featured-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .sermon-actions {
        flex-direction: column;
    }
    
    .sermon-actions .btn {
        width: 100%;
        justify-content: center;
    }
}
/* ============================================
   Detail Pages Styles
   ============================================ */

/* Breadcrumb */
.breadcrumb-section {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    padding: 20px 0;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

.breadcrumb-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 200px;
    height: 200px;
    background-image: var(--islamic-arabesque);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.15;
    filter: brightness(10);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--gold-color);
}

.breadcrumb .current {
    color: var(--white);
    font-weight: 600;
}

/* Detail Page Layout */
.detail-page-content {
    padding: 60px 0;
    background-color: var(--bg-light);
    background-image: var(--islamic-pattern);
    position: relative;
}

.detail-page-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background-image: var(--islamic-arabesque);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    pointer-events: none;
}

.detail-page-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    height: 250px;
    background-image: var(--islamic-moon);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
    pointer-events: none;
}

.detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
}

.video-layout {
    grid-template-columns: 1fr 320px;
}

/* Detail Main Content */
.detail-main {
    background: var(--white);
}

.detail-header {
    margin-bottom: 30px;
}

.detail-badge {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.detail-badge.featured {
    background: linear-gradient(135deg, var(--gold-color), var(--secondary-color));
    color: var(--white);
}

.detail-title {
    font-size: 2.2rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.3;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    color: var(--text-light);
    font-size: 0.95rem;
}

.detail-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-meta i {
    color: var(--primary-color);
}

.detail-image {
    width: 100%;
    margin: 30px 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Tabs */
.detail-tabs {
    margin-top: 40px;
}

.tabs-header {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid var(--bg-light);
    margin-bottom: 30px;
    overflow-x: auto;
}

.tab-btn {
    padding: 15px 25px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--primary-color);
}

.tab-btn.active {
    color: var(--primary-color);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--primary-color);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

.tab-content h2 {
    color: var(--text-dark);
    margin-bottom: 20px;
}

.tab-content h3 {
    color: var(--text-dark);
    margin-top: 30px;
    margin-bottom: 15px;
}

.tab-content p {
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 15px;
}

.learning-list, .requirements-list, .topics-list, .key-lessons-list {
    list-style: none;
    padding: 0;
}

.learning-list li, .topics-list li, .key-lessons-list li {
    padding: 12px 0;
    display: flex;
    align-items: start;
    gap: 15px;
    border-bottom: 1px solid var(--bg-light);
}

.learning-list i, .topics-list i, .key-lessons-list i {
    color: var(--primary-color);
    margin-top: 3px;
}

.requirements-list li {
    padding: 10px 0 10px 25px;
    position: relative;
}

.requirements-list i {
    position: absolute;
    right: 0;
    top: 13px;
    color: var(--text-light);
}

/* Curriculum */
.curriculum-accordion {
    margin-top: 20px;
}

.curriculum-item {
    border: 1px solid var(--bg-light);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    overflow: hidden;
}

.curriculum-header {
    padding: 20px;
    background: var(--bg-light);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.curriculum-header:hover {
    background: #e9ecef;
}

.curriculum-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.curriculum-header span {
    color: var(--text-light);
    font-size: 0.9rem;
}

.curriculum-content {
    padding: 0 20px 20px 20px;
}

.lesson-item {
    padding: 15px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--bg-light);
}

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

.lesson-item i {
    color: var(--primary-color);
}

/* .lesson-item span:first-of-type {
    flex: 1;
} */

.lesson-duration {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Instructor Profile */
.instructor-profile {
    display: flex;
    gap: 30px;
    padding: 30px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.instructor-image {
    flex-shrink: 0;
}

.instructor-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: var(--shadow);
}

.instructor-info h2 {
    margin: 0 0 5px 0;
    color: var(--text-dark);
}

.instructor-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.instructor-stats {
    display: flex;
    gap: 25px;
    margin: 20px 0;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.stat-item i {
    color: var(--gold-color);
}

.instructor-bio {
    line-height: 1.7;
    color: var(--text-light);
}

/* Reviews */
.reviews-summary {
    padding: 30px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
    margin-bottom: 30px;
}

.rating-overview {
    text-align: center;
}

.rating-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.rating-stars {
    color: var(--gold-color);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.reviews-list {
    margin-top: 30px;
}

.review-item {
    padding: 25px;
    background: var(--white);
    border: 1px solid var(--bg-light);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.review-header {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.review-header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.review-info h4 {
    margin: 0 0 5px 0;
    color: var(--text-dark);
}

.review-stars {
    color: var(--gold-color);
    font-size: 0.9rem;
}

.review-text {
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 10px;
}

.review-date {
    color: var(--text-light);
    font-size: 0.85rem;
}

/* Sidebar */
.detail-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}

.sidebar-card {
    background: var(--white);
    border: 1px solid var(--bg-light);
    border-radius: var(--border-radius);
    padding: 0;
    margin-bottom: 25px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sidebar-card-simple {
    padding: 20px;
}

.sidebar-card-simple .sidebar-actions {
    padding: 0;
}



/* Sidebar Preview Image */
.sidebar-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.sidebar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sidebar-card:hover .sidebar-preview img {
    transform: scale(1.05);
}

.preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-card:hover .preview-overlay {
    opacity: 1;
}

.preview-overlay i {
    font-size: 3rem;
    color: #ff0000;
    background: white;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-hover);
    transition: transform 0.3s ease;
}

.sidebar-card:hover .preview-overlay i {
    transform: scale(1.1);
}

/* Sidebar Actions */
.sidebar-actions {
    padding: 20px;
}

.btn-youtube {
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: white;
    border: none;
    padding: 14px 25px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-hover);
}

.btn-youtube:hover {
    background: linear-gradient(135deg, #cc0000, #990000);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-youtube i {
    font-size: 1.2rem;
}

.btn-share {
    background: var(--bg-light);
    color: var(--text-dark);
    border: 2px solid var(--border-color);
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-share:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.course-price {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 20px;
}

.price-label {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.btn-block {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

.course-features {
    display: flex;
    flex-direction: column;
    /* padding: 20px; */
    /* background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); */
    /* border-top: 1px solid var(--bg-light); */
}

.course-features h4 {
    padding: 0;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
}

.course-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.course-features li {
    padding: 14px 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.95rem;
    background: var(--white);
    border-radius: 10px;
    /* margin-bottom: 10px; */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.04); */
    transition: all 0.3s ease;
    border: 1px solid transparent;
}


[dir="ltr"] .course-features li:hover {
    transform: translateX(5px);
}

.course-features li:last-child {
    margin-bottom: 0;
}

.course-features i {
    color: var(--white);
    background: var(--primary-color);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    padding: 5px;
}

.related-course-item, .teacher-course-item {
    display: flex;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--bg-light);
    transition: background 0.3s ease;
}

.related-course-item:hover {
    background: var(--bg-light);
}

.related-course-item:last-child, .teacher-course-item:last-child {
    border-bottom: none;
}

.related-course-item img, .teacher-course-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.related-course-info h5, .teacher-course-info h5 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.course-teacher {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 5px;
}

.course-rating {
    color: var(--gold-color);
    font-size: 0.9rem;
}

.course-stats-mini {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.course-stats-mini span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Video Player */
.video-player-container {
    width: 100%;
    margin: 30px 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.video-placeholder {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 100px 20px;
    text-align: center;
    color: var(--white);
}

.video-placeholder i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.video-placeholder p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Video Actions */
.lesson-actions {
    display: flex;
    gap: 15px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-light);
    border: none;
    border-radius: var(--border-radius);
    color: var(--text-dark);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.action-btn:hover {
    background: var(--primary-color);
    color: var(--white);
}

.action-btn.liked {
    background: var(--primary-color);
    color: var(--white);
}

/* Video Metadata */
.video-duration {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.video-meta {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.video-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Comments Section */
.comments-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid var(--bg-light);
}

.comments-section h2 {
    margin-bottom: 25px;
}

.comment-count {
    color: var(--text-light);
    font-weight: normal;
    font-size: 1.2rem;
}

.comment-form {
    margin-bottom: 30px;
}

.comment-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--bg-light);
    border-radius: var(--border-radius);
    font-family: inherit;
    resize: vertical;
    margin-bottom: 15px;
}

.comment-form button {
    float: left;
}

.comments-list {
    clear: both;
}

.comment-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bg-light);
}

.comment-item img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.comment-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-dark);
}

.comment-date {
    color: var(--text-light);
    font-size: 0.85rem;
}

.comment-content > p {
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 10px;
}

.comment-actions {
    display: flex;
    gap: 15px;
}

.comment-actions button {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}

.comment-actions button:hover {
    color: var(--primary-color);
}

/* Playlist Items */
.playlist-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--bg-light);
    cursor: pointer;
    transition: var(--transition);
}

.playlist-item:hover {
    background: var(--bg-light);
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
    border-radius: var(--border-radius);
}

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

.playlist-thumbnail {
    position: relative;
    flex-shrink: 0;
}

.playlist-thumbnail img {
    width: 120px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
}

.playlist-duration {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.playlist-info h5 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.playlist-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Instructor Mini */
.instructor-mini {
    display: flex;
    gap: 15px;
    align-items: start;
}

.instructor-mini img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.instructor-mini-info h5 {
    margin: 0 0 5px 0;
    color: var(--text-dark);
}

.instructor-mini-info p {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

.instructor-stats-mini {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.instructor-stats-mini span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Related Lessons */
.related-lesson-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-light);
}

.related-lesson-item:last-child {
    border-bottom: none;
}

.related-lesson-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.related-lesson-info h5 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.related-lesson-info p {
    margin: 0 0 3px 0;
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Statistics Section */
.statistics-section {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    padding: 60px 0;
    color: var(--white);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.stat-card {
    text-align: center;
    padding: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--gold-color);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 10px 0;
    color: var(--white);
}

.stat-card p {
    font-size: 1rem;
    opacity: 0.9;
}

/* Upcoming Courses */
.upcoming-courses {
    padding: 60px 0;
    background: var(--bg-cream);
}

.courses-timeline {
    max-width: 900px;
    margin: 0 auto;
}

.course-timeline-item {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 2px solid var(--bg-light);
}

.course-timeline-item:last-child {
    border-bottom: none;
}

.timeline-date {
    flex-shrink: 0;
    text-align: center;
    padding: 15px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: var(--border-radius);
    min-width: 80px;
}

.date-day {
    display: block;
    font-size: 2rem;
    font-weight: 700;
}

.date-month {
    display: block;
    font-size: 0.9rem;
}

.timeline-content {
    flex: 1;
    background: var(--white);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.timeline-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.timeline-content > p {
    color: var(--text-light);
    margin-bottom: 15px;
}

.course-info {
    display: flex;
    gap: 20px;
    margin: 15px 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.course-info span {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Testimonials */
.testimonials-section {
    padding: 60px 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.testimonial-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-5px);
}

.testimonial-stars {
    color: var(--gold-color);
    margin-bottom: 15px;
}

.testimonial-text {
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.author-info h4 {
    margin: 0 0 5px 0;
    color: var(--text-dark);
    font-size: 1rem;
}

.author-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Sermon Details */
.sermon-badge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.sermon-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    font-size: 0.95rem;
}

.sermon-content-section {
    margin-top: 40px;
}

.sermon-verse {
    display: flex;
    gap: 20px;
    padding: 30px;
    background: var(--bg-cream);
    border-right: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    margin: 30px 0;
}

.verse-icon {
    flex-shrink: 0;
    color: var(--primary-color);
    font-size: 2rem;
}

.verse-text blockquote {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-dark);
    font-family: 'Amiri', serif;
}

.verse-text cite {
    color: var(--primary-color);
    font-style: normal;
    font-weight: 600;
    font-size: 0.9rem;
}

.sermon-points {
    margin: 30px 0;
}

.point-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 25px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.point-number {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 700;
}

.point-content h4 {
    margin: 0 0 10px 0;
    color: var(--text-dark);
}

.point-content p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-light);
}

.sermon-resources {
    margin: 40px 0;
    padding: 30px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.resource-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.resource-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--white);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--primary-color);
    font-weight: 600;
    transition: var(--transition);
}

.resource-btn:hover {
    background: var(--primary-color);
    color: var(--white);
}

.mosque-info {
    background: var(--bg-cream);
}

.mosque-details p {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Teacher Biography */
.teacher-bio-section {
    padding: 60px 0;
}

.bio-header {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    margin-bottom: 50px;
    padding: 40px;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.bio-image-container {
    position: relative;
}

.bio-image {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.bio-badge {
    position: absolute;
    bottom: -15px;
    right: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold-color);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow);
}

.bio-header-content h1 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.bio-title {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.bio-contact {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition);
}

.contact-btn:hover {
    background: var(--primary-dark);
}

.teacher-achievements {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.achievement-item i {
    font-size: 2rem;
    color: var(--primary-color);
}

.achievement-item h4 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--text-dark);
}

.achievement-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

.bio-content-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
}

.bio-section {
    background: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}

.bio-section h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--text-dark);
    padding-bottom: 15px;
    border-bottom: 2px solid var(--bg-light);
}

.bio-section h2 i {
    color: var(--primary-color);
}

.bio-section p {
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 15px;
}

/* Timeline */
.timeline {
    position: relative;
    padding-right: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    background: var(--bg-light);
}

.timeline-item {
    position: relative;
    padding-bottom: 30px;
}

.timeline-marker {
    position: absolute;
    right: -9px;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 3px var(--bg-light);
}

.timeline-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.timeline-institution {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 5px;
}

.timeline-date {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.timeline-content p {
    color: var(--text-light);
    line-height: 1.7;
}

/* Experience List */
.experience-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.experience-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.experience-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--white);
    border-radius: var(--border-radius);
    font-size: 1.5rem;
}

.experience-content h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.experience-place {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 5px;
}

.experience-date {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.experience-content p {
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
}

/* Certifications */
.certifications-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.certification-card {
    text-align: center;
    padding: 25px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.certification-card:hover {
    background: var(--bg-cream);
    transform: translateY(-5px);
}

.certification-card i {
    font-size: 2.5rem;
    color: var(--gold-color);
    margin-bottom: 15px;
}

.certification-card h4 {
    margin: 0 0 8px 0;
    color: var(--text-dark);
    font-size: 1rem;
}

.certification-card p {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

.cert-year {
    display: inline-block;
    padding: 4px 12px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Publications */
.publications-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.publication-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.publication-item i {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-top: 3px;
}

.publication-content h4 {
    margin: 0 0 8px 0;
    color: var(--text-dark);
}

.publication-content p {
    margin: 0 0 10px 0;
    color: var(--text-light);
    line-height: 1.6;
}

.publication-year {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Specializations */
.specializations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.specialization-card {
    text-align: center;
    padding: 20px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.specialization-card:hover {
    background: var(--primary-color);
    color: var(--white);
}

.specialization-card i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.specialization-card:hover i {
    color: var(--white);
}

.specialization-card h4 {
    margin: 0;
    font-size: 0.95rem;
}

/* Schedule */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.schedule-item {
    padding: 15px;
    background: var(--bg-light);
    border-radius: var(--border-radius);
}

.schedule-day {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.schedule-time {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 3px;
}

.schedule-course {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Contact Form Mini */
.contact-form-mini {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form-mini input,
.contact-form-mini textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--bg-light);
    border-radius: var(--border-radius);
    font-family: inherit;
}

.contact-form-mini textarea {
    resize: vertical;
}

/* Responsive for Detail Pages */
@media (max-width: 992px) {
    .detail-layout,
    .bio-content-layout {
        grid-template-columns: 1fr;
    }
    
    .detail-sidebar,
    .bio-sidebar {
        position: static;
    }
    
    .bio-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .bio-image-container {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .bio-contact {
        justify-content: center;
    }
    
    .certifications-grid {
        grid-template-columns: 1fr;
    }
    
    .specializations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .detail-title {
        font-size: 1.6rem;
    }
    
    .tabs-header {
        flex-wrap: wrap;
    }
    
    .instructor-profile {
        flex-direction: column;
        text-align: center;
    }
    
    .instructor-stats {
        justify-content: center;
    }
    
    .course-timeline-item {
        flex-direction: column;
    }
    
    .teacher-achievements {
        grid-template-columns: 1fr;
    }
    
    .sermon-verse {
        flex-direction: column;
        text-align: center;
    }
    
    .point-item {
        flex-direction: column;
        text-align: center;
    }
    
    .experience-item {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .detail-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .lesson-actions {
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
        justify-content: center;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .resource-links {
        flex-direction: column;
    }
    
    .specializations-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Clickable Elements Styling
   ============================================ */
a.sermon-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.sermon-card:hover {
    transform: translateY(-5px);
}

a.video-item {
    display: flex;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.video-item:hover {
    background: var(--bg-light);
}

a.playlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    transition: var(--transition);
}

a.playlist-header:hover {
    background: var(--primary-dark);
}

a.latest-sermon-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.latest-sermon-card:hover {
    transform: scale(1.01);
}

a.course-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.course-card:hover {
    transform: translateY(-5px);
}

a.profile-card {
    display: flex;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.profile-card:hover {
    transform: scale(1.02);
}

a.video-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.video-card:hover {
    transform: translateY(-5px);
}

/* ============================================
   Video Player Styles
   ============================================ */
.first-lesson-preview {
    background: var(--bg-light);
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 30px;
}

.first-lesson-preview h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.first-lesson-preview h3 i {
    color: var(--gold-color);
}

.first-lesson-info {
    margin-top: 15px;
    padding: 15px;
    background: var(--white);
    border-radius: 8px;
    border-right: 4px solid var(--gold-color);
}

.first-lesson-info p {
    margin: 0;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.first-lesson-info i {
    color: var(--gold-color);
}

.video-player-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.video-player-container video {
    width: 100%;
    display: block;
}

.video-player-container.youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-player-container.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.website-video {
    position: relative;
}

.website-video video {
    width: 100%;
    display: block;
}

.video-source-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.video-source-badge.youtube {
    background: #ff0000;
    color: white;
}

.video-source-badge.website {
    background: var(--primary-color);
    color: white;
}

.video-source-badge i {
    font-size: 1rem;
}

/* Video Badge on Cards */
.sermon-thumbnail .video-badge,
.video-thumbnail .video-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    z-index: 5;
}

.video-badge.youtube {
    background: #ff0000;
    color: white;
}

.video-badge.website {
    background: var(--primary-color);
    color: white;
}

.video-thumbnail-small {
    position: relative;
}

.video-thumbnail-small .video-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    z-index: 5;
}

/* ============================================
   Record Course Accordion Styles
   ============================================ */
.record-course-accordion {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.record-course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    cursor: pointer;
    transition: var(--transition);
}

.record-course-header:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
}

.course-title-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.course-icon {
    font-size: 2rem;
    color: var(--gold-color);
}

.course-title-info h3 {
    margin: 0;
    font-size: 1.2rem;
}

.course-meta-info {
    font-size: 0.85rem;
    opacity: 0.9;
}

.course-toggle {
    font-size: 1.2rem;
    transition: var(--transition);
}

.record-course-header.active .course-toggle {
    transform: rotate(180deg);
}

.record-lessons-list {
    padding: 0;
}

.record-lesson-item {
    border-bottom: 1px solid var(--bg-light);
    cursor: pointer;
    transition: var(--transition);
}

.record-lesson-item:last-child {
    border-bottom: none;
}

.record-lesson-item:hover {
    background: var(--bg-light);
}

.lesson-header {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    gap: 15px;
}

.lesson-number {
    width: 35px;
    height: 35px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.lesson-title-info {
    flex: 1;
}

.lesson-title-info h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
    color: var(--text-dark);
}

.lesson-title-info span {
    font-size: 0.85rem;
    color: var(--text-light);
}

.lesson-toggle-icon {
    color: var(--text-light);
    transition: var(--transition);
}

.record-lesson-item.active .lesson-toggle-icon {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.lesson-audio-content {
    display: none;
    padding: 0 25px 20px 75px;
    animation: slideDown 0.3s ease;
}

.record-lesson-item.active .lesson-audio-content {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lesson-description {
    color: var(--text-light);
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.audio-player-wrapper {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

.audio-player-wrapper audio {
    width: 100%;
    height: 50px;
}

.lesson-actions-bar {
    display: flex;
    gap: 10px;
}

.action-btn-small {
    padding: 8px 15px;
    background: var(--white);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

.action-btn-small:hover {
    background: var(--primary-color);
    color: var(--white);
}

.action-btn-small i {
    font-size: 0.9rem;
}

/* Active lesson styling */
.record-lesson-item.active .lesson-number {
    background: var(--gold-color);
}

.record-lesson-item.active .lesson-title-info h4 {
    color: var(--primary-color);
}

/* Highlighted lesson from home page link */
.record-lesson-item.highlighted {
    background: linear-gradient(135deg, var(--primary-bg-subtle), rgba(212, 175, 55, 0.1));
    border-right: 4px solid var(--gold-color);
    animation: highlightPulse 2s ease-in-out;
}

.record-lesson-item.highlighted .lesson-number {
    background: var(--gold-color);
    animation: pulse 1s ease-in-out 3;
}

@keyframes highlightPulse {
    0% { background: rgba(212, 175, 55, 0.3); }
    50% { background: rgba(212, 175, 55, 0.1); }
    100% { background: linear-gradient(135deg, var(--primary-bg-subtle), rgba(212, 175, 55, 0.1)); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Responsive */
@media (max-width: 768px) {
    .record-course-header {
        padding: 15px;
    }
    
    .course-icon {
        font-size: 1.5rem;
    }
    
    .course-title-info h3 {
        font-size: 1rem;
    }
    
    .lesson-header {
        padding: 12px 15px;
    }
    
    .lesson-audio-content {
        padding: 0 15px 15px 50px;
    }
    
    .lesson-actions-bar {
        flex-direction: column;
    }
    
    .action-btn-small {
        justify-content: center;
    }
}

/* ============================================
   Course Video Player & Playlist Styles
   ============================================ */
.course-video-player {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 25px;
}

.current-lesson-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.lesson-badge {
    background: var(--gold-color);
    color: var(--primary-dark);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
}

.current-lesson-header h3 {
    color: var(--white);
    margin: 0;
    font-size: 1.1rem;
}

.video-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg-light);
}

.video-action-btn {
    padding: 10px 25px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.video-action-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.lessons-playlist {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 25px;
    overflow: hidden;
}

.lessons-playlist > h3 {
    background: var(--bg-light);
    padding: 15px 20px;
    margin: 0;
    font-size: 1rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.lessons-playlist > h3 i {
    color: var(--gold-color);
}

.total-lessons {
    font-weight: 400;
    color: var(--text-light);
    font-size: 0.9rem;
}

.playlist-items {
    max-height: 400px;
    overflow-y: auto;
}

.playlist-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    gap: 15px;
    border-bottom: 1px solid var(--bg-light);
    cursor: pointer;
    transition: var(--transition);
}

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

.playlist-item:hover {
    background: var(--bg-light);
}

.playlist-item.active {
    background: var(--primary-bg-subtle);
    border-right: 4px solid var(--primary-color);
}

.playlist-item-num {
    width: 30px;
    height: 30px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-light);
    flex-shrink: 0;
}

.playlist-item.active .playlist-item-num {
    background: var(--primary-color);
    color: var(--white);
}

.playlist-item-thumb {
    width: 80px;
    height: 45px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}

.playlist-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-item-info {
    flex: 1;
}

.playlist-item-info h4 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.playlist-item-info span {
    font-size: 0.8rem;
    color: var(--text-light);
}

.playlist-play-icon {
    font-size: 1.5rem;
    color: var(--text-light);
    transition: var(--transition);
}

.playlist-item:hover .playlist-play-icon,
.playlist-item.active .playlist-play-icon {
    color: var(--primary-color);
}

/* Scrollbar styling for playlist */
.playlist-items::-webkit-scrollbar {
    width: 6px;
}

.playlist-items::-webkit-scrollbar-track {
    background: var(--bg-light);
}

.playlist-items::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

@media (max-width: 768px) {
    .current-lesson-header {
        flex-direction: column;
        text-align: center;
    }
    
    .video-actions {
        flex-direction: column;
    }
    
    .video-action-btn {
        justify-content: center;
    }
    
    .playlist-items {
        max-height: 300px;
    }
}

/* ============================================
   Home Page - Current Course Section
   ============================================ */
.current-course-section {
    padding: 80px 0;
}
/* 
.current-course-card {
    background: var(--white);
    border-radius: 15px;
    border: 2px solid var(--primary-color);
    padding: 50px;
    position: relative;
} */

.course-live-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
[dir="ltr"] .course-live-badge {
    right: auto;
    left: 40px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.current-course-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.current-course-info {
    flex: 1;
}

.current-course-info h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1.4;
}

.current-course-info > p {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 35px;
}

.course-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-item i {
    font-size: 1.3rem;
    color: var(--primary-color);
}

.detail-item .label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 2px;
}

.detail-item .value {
    display: block;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 600;
}

.current-course-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.btn-lg {
    padding: 18px 40px !important;
    font-size: 1.2rem !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .current-course-content {
        flex-direction: column;
        text-align: center;
    }
    
    .course-details-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-item {
        justify-content: center;
        text-align: right;
    }
    
    [dir="ltr"] .detail-item {
        text-align: left;
    }
}

@media (max-width: 576px) {
    .current-course-card {
        border-radius: 15px;
    }
 
    .course-live-badge {
        display: none;
        top: 10px;
        right: 10px;
        padding: 8px 15px;
        font-size: 0.85rem;
    }
    
    .current-course-info h2 {
        font-size: 1.4rem;
    }
}

/* ============================================
   Home Page - Friday Sermon Section
   ============================================ */
.friday-sermon-home {
    padding: 80px 0;
    /* background: var(--bg-light); */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0,0,0,0.05);
}

.section-header .section-title {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-header .section-title::after {
    display: none;
}

.section-header .section-title i {
    color: var(--gold-color);
    margin-left: 10px;
}

[dir="ltr"] .section-header .section-title i {
    margin-left: 0;
    margin-right: 10px;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 20px;
    background: var(--white);
    border-radius: 25px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.view-all-link:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateX(-5px);
}

[dir="ltr"] .view-all-link:hover {
    transform: translateX(5px);
}

.view-all-link i {
    transition: var(--transition);
}

[dir="ltr"] .view-all-link i {
    transform: rotate(180deg);
}

.sermon-featured-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-hover);
    border: 1px solid rgba(0,0,0,0.05);
}

.sermon-video {
    position: relative;
    min-height: 350px;
}

.sermon-video .youtube-embed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.sermon-video .youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.sermon-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

[dir="ltr"] .sermon-info {
    padding: 20px;
}

.sermon-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    width: fit-content;
    /* margin-bottom: 20px; */
    height: fit-content;
}

.sermon-info h3 {
    font-size: 1.6rem;
    color: var(--text-dark);
    line-height: 1.5;
}

.sermon-info > p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
}

.sermon-meta {
    display: flex;
    gap: 20px;
    /* margin-bottom: 25px; */
    flex-wrap: wrap;
}

.sermon-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    font-size: 0.95rem;
}

.sermon-meta i {
    color: var(--primary-color);
}

@media (max-width: 992px) {
    .sermon-featured-card {
        grid-template-columns: 1fr;
    }
    
    .sermon-info {
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .section-header {
        flex-direction: column;
        text-align: center;
    }
    
    .sermon-info h3 {
        font-size: 1.3rem;
    }
}

/* ============================================
   Home Page - Important Courses Section
   ============================================ */
/* ============================================
   Important Courses Home Section
   ============================================ */

.important-courses-home {
    padding: 80px 0;
    position: relative;
}

.important-courses-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--islamic-hexagon);
    opacity: 0.4;
    pointer-events: none;
}

.section-header-modern {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.section-header-modern h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.section-header-modern h2 i {
    color: var(--gold-color);
    margin-left: 12px;
    filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.section-header-modern p {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.important-courses-grid-home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
}

.important-course-card-home {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

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

.course-card-link-home {
    display: block;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    height: 100%;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.05);
}

.course-card-link-home:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.course-card-thumbnail-home {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.course-card-thumbnail-home img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.course-card-link-home:hover .course-card-thumbnail-home img {
    transform: scale(1.1);
}

.thumbnail-overlay-home {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.course-card-link-home:hover .thumbnail-overlay-home {
    opacity: 1;
}

.play-button-wrapper-home {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: playPulse 2s infinite;
    box-shadow: var(--shadow-lg);
}

.play-button-wrapper-home i {
    font-size: 3rem;
    color: #ff0000;
}

@keyframes playPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-lg);
    }
    50% {
        transform: scale(1.05);
        box-shadow: var(--shadow-xl);
    }
}

.course-badge-top-home {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
}

.badge-category-home {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-hover);
}

.badge-category-home i {
    font-size: 0.75rem;
}

.course-badge-bottom-home {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 2;
}

.badge-lessons-home {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.badge-lessons-home i {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.course-card-body-home {
    padding: 25px;
}

.course-card-title-home {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.5;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-author-home {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-card-author-home i {
    color: var(--primary-color);
    font-size: 1rem;
}

.course-card-footer-home {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.footer-action-home {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.course-card-link-home:hover .footer-action-home {
    color: var(--primary-dark);
    gap: 12px;
}

.footer-action-home i {
    font-size: 1rem;
}

.footer-platform-home {
    color: #ff0000;
    font-size: 1.3rem;
    opacity: 0.8;
    transition: var(--transition);
}

.course-card-link-home:hover .footer-platform-home {
    opacity: 1;
    transform: scale(1.1);
}

.view-all-section-home {
    text-align: center;
    margin-top: 50px;
    position: relative;
}

.btn-view-all-home {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-view-all-home::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.5s ease;
}

.btn-view-all-home:hover::before {
    left: 100%;
}

.btn-view-all-home:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.btn-view-all-home i {
    font-size: 1rem;
    transition: var(--transition);
}

.btn-view-all-home:hover i {
    transform: translateX(-5px);
}

/* Responsive Design */
@media (max-width: 992px) {
    .important-courses-grid-home {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .section-header-modern h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .important-courses-home {
        padding: 60px 0;
    }
    
    .section-header-modern h2 {
        font-size: 1.75rem;
    }
    
    .course-card-thumbnail-home {
        height: 220px;
    }
    
    .course-card-body-home {
        padding: 20px;
    }
    
    .btn-view-all-home {
        padding: 14px 30px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .section-header-modern h2 {
        font-size: 1.5rem;
    }
    
    .section-header-modern p {
        font-size: 0.95rem;
    }
    
    .course-card-thumbnail-home {
        height: 200px;
    }
    
    .play-button-wrapper-home {
        width: 60px;
        height: 60px;
    }
    
    .play-button-wrapper-home i {
        font-size: 2rem;
    }
    
    .course-card-title-home {
        font-size: 1.1rem;
    }
    
    .btn-view-all-home {
        padding: 12px 25px;
        font-size: 0.95rem;
    }
}

.important-course-card .course-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.important-course-card .course-meta i {
    color: var(--gold-color);
}

@media (max-width: 768px) {
    .important-courses-grid {
        grid-template-columns: 1fr;
    }
    
    .important-course-card .course-thumb {
        height: 180px;
    }


}

/* ============================================
   Home Page - Recorded Lessons Section (Audio)
   ============================================ */
.recorded-lessons-home {
    padding: 80px 0;
    /* background: var(--bg-light); */
}

.audio-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.audio-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--white);
    padding: 25px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.05);
}

.audio-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-color);
}

.audio-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.audio-card:hover .audio-icon {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
}

.audio-icon i {
    font-size: 1.8rem;
    color: var(--white);
}

.audio-info {
    flex: 1;
}

.audio-info h4 {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.4;
}

.audio-info p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 12px;
    line-height: 1.5;
}

.audio-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.audio-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-light);
    background: var(--bg-light);
    padding: 4px 10px;
    border-radius: 15px;
}

.audio-meta i {
    color: var(--primary-color);
    font-size: 0.75rem;
}

.audio-play-btn {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: var(--gold-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.audio-card:hover .audio-play-btn {
    transform: scale(1.1);
    background: var(--primary-color);
}

.audio-play-btn i {
    font-size: 1rem;
    color: var(--text-dark);
    margin-right: -2px;
}

[dir="ltr"] .audio-play-btn i {
    margin-right: 0;
    margin-left: -2px;
}

.audio-card:hover .audio-play-btn i {
    color: var(--white);
}

@media (max-width: 992px) {
    .audio-cards-grid {
        grid-template-columns: 1fr;
    }
        .site-header.scrolled .navbar {
    
    transform: translateY(-50px);
}
}

@media (max-width: 576px) {
    .audio-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .audio-meta {
        justify-content: center;
    }
    
    .audio-play-btn {
        margin-top: 10px;
    }
            .site-header.scrolled .navbar {
    
    transform: translateY(-85px);
}
}

/* ============================================
   Home Page General Fixes
   ============================================ */
.friday-sermon-home .view-all-link,
.important-courses-home .view-all-link,
.recorded-lessons-home .view-all-link {
    background: var(--white);
}

.friday-sermon-home .view-all-link:hover,
.important-courses-home .view-all-link:hover,
.recorded-lessons-home .view-all-link:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* ============================================
   Important Courses Page - Professional Design
   ============================================ */

/* Featured Important Course Section */
.featured-important-course {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.featured-important-course::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--islamic-pattern);
    background-size: 60px 60px;
    opacity: 0.03;
    pointer-events: none;
}

.featured-course-wrapper {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.featured-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--gold-color) 0%, #c9a227 100%);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--shadow-hover);
    z-index: 10;
    animation: pulse 2s infinite;
}

html[dir="rtl"] .featured-badge {
    right: auto;
    left: 20px;
}

.featured-badge i {
    font-size: 1.1rem;
    animation: rotate 3s linear infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.featured-course-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.featured-course-image {
    position: relative;
    overflow: hidden;
    background: #000;
}

.featured-course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-course-image:hover img {
    transform: scale(1.05);
}

.featured-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.featured-course-image:hover .featured-play-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.play-circle {
    width: 90px;
    height: 90px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);
    animation: playPulse 2s infinite;
}

@keyframes playPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); }
    70% { box-shadow: 0 0 0 20px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.featured-course-image:hover .play-circle {
    transform: scale(1.1);
}

.play-circle i {
    color: var(--white);
    font-size: 2.5rem;
}

.featured-course-labels {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.label-lessons,
.label-platform {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.label-platform {
    background: rgba(255, 0, 0, 0.95);
    color: var(--white);
}

.featured-course-content {
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-category {
    display: flex;
     width: fit-content;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
}
@media screen and (max-width: 768px) {
    .featured-category {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

.featured-title {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 20px;
        margin-top: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.featured-description {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
}

.featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.tag-item {
    background: var(--bg-light);
    color: var(--primary-color);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.tag-item:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
}

.featured-action {
    display: flex;
}

.btn-start-learning {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.btn-start-learning:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.btn-start-learning i {
    font-size: 1.3rem;
}

/* Important Courses Section */
.important-courses-section {
    padding: 80px 0;
}

.section-header-modern {
    text-align: center;
    margin-bottom: 60px;
}

.section-header-modern h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.section-header-modern h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, var(--primary-color), var(--gold-color));
    border-radius: 2px;
}

.section-header-modern p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-top: 20px;
}

.important-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 35px;
    margin-bottom: 50px;
}

.important-course-card {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

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

.course-card-link {
    display: block;
    text-decoration: none;
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    height: 100%;
}

.course-card-link:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.course-card-thumbnail {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background: #000;
}

.course-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.course-card-link:hover .course-card-thumbnail img {
    transform: scale(1.1);
}

.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.course-card-link:hover .thumbnail-overlay {
    opacity: 1;
}

.play-button-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.course-card-link:hover .play-button-wrapper {
    transform: scale(1.1);
}

.play-button-wrapper i {
    color: var(--white);
    font-size: 2rem;
}

.course-badge-top {
    position: absolute;
    top: 15px;
    left: 15px;
}

html[dir="rtl"] .course-badge-top {
    left: auto;
    right: 15px;
}

.badge-category {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.course-badge-bottom {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

html[dir="rtl"] .course-badge-bottom {
    right: auto;
    left: 15px;
}

.badge-lessons {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.course-card-body {
    padding: 25px;
}

.course-card-title {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.4;
    /* min-height: 60px; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-author {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-card-author i {
    color: var(--primary-color);
}

.course-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.footer-action {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.course-card-link:hover .footer-action {
    color: var(--primary-dark);
    transform: translateX(5px);
}

html[dir="rtl"] .course-card-link:hover .footer-action {
    transform: translateX(-5px);
}

.footer-platform {
    color: #ff0000;
    font-size: 1.3rem;
}

/* YouTube Link Section */
.youtube-link-section {
    text-align: center;
    margin-top: 50px;
    padding-top: 40px;
    border-top: 2px solid #f0f0f0;
}

.btn-youtube-large {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: var(--white);
    padding: 18px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-hover);
}

.btn-youtube-large:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.btn-youtube-large i {
    font-size: 1.5rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .featured-course-grid {
        grid-template-columns: 1fr;
    }

    .featured-course-image {
        min-height: 350px;
    }

    .featured-course-content {
        padding: 40px 30px;
    }

    .featured-title {
        font-size: 1.8rem;
    }

    .important-courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .featured-important-course {
        padding: 50px 0;
    }

    .featured-badge {
        top: 15px;
        right: 15px;
        left: 15px;
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    html[dir="rtl"] .featured-badge {
        right: 15px;
        left: 15px;
    }

    .featured-course-content {
        padding: 30px 20px;
    }

    .featured-title {
        font-size: 1.5rem;
    }

    .featured-description {
        font-size: 1rem;
    }

    .section-header-modern h2 {
        font-size: 2rem;
    }

    .important-courses-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .btn-start-learning {
        width: 100%;
        justify-content: center;
        padding: 8px 16px;
        font-size: 1rem;
    }

    .btn-youtube-large {
        width: 100%;
        justify-content: center;
        padding: 16px 30px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .featured-course-image {
        min-height: 250px;
    }

    .play-circle {
        width: 70px;
        height: 70px;
    }

    .play-circle i {
        font-size: 2rem;
    }

    .featured-title {
        font-size: 1.3rem;
    }

    .course-card-title {
        font-size: 1.1rem;
        min-height: auto;
    }
}

/* ============================================
   Friday Sermons Page - Professional Design
   ============================================ */

/* Featured Friday Sermon Section */
.featured-friday-sermon {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.featured-friday-sermon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--islamic-pattern);
    background-size: 60px 60px;
    opacity: 0.03;
    pointer-events: none;
}

.featured-sermon-wrapper {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.featured-sermon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.featured-sermon-image {
    position: relative;
    overflow: hidden;
    background: #000;
}

.featured-sermon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-sermon-image:hover img {
    transform: scale(1.05);
}

.featured-sermon-labels {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.label-duration {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.featured-sermon-content {
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-meta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
    flex-wrap: wrap;
}

.featured-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
}

.featured-date i {
    color: var(--white);
}

.btn-watch-sermon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.btn-watch-sermon:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.btn-watch-sermon i {
    font-size: 1.3rem;
}

/* Friday Sermons Section */
.friday-sermons-section {
    padding: 80px 0;
}

/* Archive Filter Modern */
.archive-filter-modern {
    margin-bottom: 50px;
}

.filter-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.filter-item:hover {
    border-color: var(--primary-color);
}

.filter-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.filter-select-modern {
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    outline: none;
    padding: 0;
    min-width: 180px;
}

.search-box-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    flex: 1;
    max-width: 400px;
    transition: all 0.3s ease;
}

.search-box-modern:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-alpha);
}

.search-box-modern i {
    color: var(--text-light);
    font-size: 1rem;
}

.search-box-modern input {
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--text-dark);
    outline: none;
    width: 100%;
}

/* Friday Sermons Grid */
.friday-sermons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 35px;
    margin-bottom: 50px;
}

.friday-sermon-card {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.sermon-card-link {
    display: block;
    text-decoration: none;
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    height: 100%;
}

.sermon-card-link:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.sermon-card-thumbnail {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background: #000;
}

.sermon-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sermon-card-link:hover .sermon-card-thumbnail img {
    transform: scale(1.1);
}

.sermon-card-thumbnail .thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sermon-card-link:hover .sermon-card-thumbnail .thumbnail-overlay {
    opacity: 1;
}

.sermon-card-thumbnail .play-button-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.sermon-card-link:hover .sermon-card-thumbnail .play-button-wrapper {
    transform: scale(1.1);
}

.sermon-card-thumbnail .play-button-wrapper i {
    color: var(--white);
    font-size: 2rem;
}

.sermon-badge-top {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
}

html[dir="rtl"] .sermon-badge-top {
    left: 15px;
    right: 15px;
}

.badge-date {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.sermon-badge-bottom {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

html[dir="rtl"] .sermon-badge-bottom {
    right: auto;
    left: 15px;
}

.badge-duration {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.sermon-card-body {
    padding: 25px;
}

.sermon-card-title {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.4;
    /* min-height: 60px; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sermon-card-meta {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.meta-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-light);
    color: var(--primary-color);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.meta-date-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 0.8rem;
    font-weight: 500;
}

.meta-date-inline i {
    font-size: 0.75rem;
    color: var(--text-light);
}

.sermon-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* YouTube CTA Modern */
.youtube-link-section {
    margin-top: 60px;
}

.youtube-cta-modern {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 40px;
    align-items: center;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    /* border: 2px solid #f0f0f0; */
}

.youtube-cta-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 0, 0, 0.02) 100%);
    pointer-events: none;
}

.youtube-icon-large {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--white);
    position: relative;
    flex-shrink: 0;
    border-radius: 20px 0 0 20px;
}

html[dir="rtl"] .youtube-icon-large {
    border-radius: 0 20px 20px 0;
}

.youtube-icon-large::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: ytPulse 2s infinite;
}

@keyframes ytPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

.youtube-icon-large i {
    position: relative;
    z-index: 1;
}

.youtube-text-content {
    padding: 30px 0;
    color: var(--text-dark);
}

.youtube-text-content h3 {
    font-size: 1.8rem;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text-dark);
}

.youtube-text-content p {
    font-size: 1rem;
    color: var(--text-light);
    margin: 0;
}

.btn-youtube-large {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: var(--white);
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-hover);
    margin-right: 30px;
    white-space: nowrap;
}

html[dir="rtl"] .btn-youtube-large {
    margin-right: 0;
    margin-left: 30px;
}

.btn-youtube-large:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-xl);
}

.btn-youtube-large i:first-child {
    font-size: 1.4rem;
}

.btn-youtube-large i:last-child {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-youtube-large:hover i:last-child {
    transform: translateX(5px);
}

html[dir="rtl"] .btn-youtube-large:hover i:last-child {
    transform: translateX(-5px);
}

/* Responsive Design */
@media (max-width: 992px) {
    .featured-sermon-grid {
        grid-template-columns: 1fr;
    }

    .featured-sermon-image {
        min-height: 350px;
    }

    .featured-sermon-content {
        padding: 40px 30px;
    }

    .friday-sermons-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 25px;
    }

    .youtube-cta-modern {
        grid-template-columns: 120px 1fr;
        gap: 30px;
    }

    .youtube-icon-large {
        width: 120px;
        height: 120px;
        font-size: 3.5rem;
    }

    .btn-youtube-large {
        grid-column: 1 / -1;
        margin: 0 30px 30px 30px;
        justify-content: center;
    }

    html[dir="rtl"] .btn-youtube-large {
        margin: 0 30px 30px 30px;
    }
}

@media (max-width: 768px) {
    .featured-friday-sermon {
        padding: 50px 0;
    }

    .featured-sermon-content {
        padding: 30px 20px;
    }

    .filter-group {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-item {
        width: 100%;
    }

    .filter-select-modern {
        width: 100%;
    }

    .search-box-modern {
        max-width: 100%;
    }

    .friday-sermons-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .btn-watch-sermon {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 1rem;
    }

    .youtube-cta-modern {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .youtube-icon-large {
        width: 100%;
        height: 100px;
        border-radius: 20px 20px 0 0;
        font-size: 3.5rem;
    }

    html[dir="rtl"] .youtube-icon-large {
        border-radius: 20px 20px 0 0;
    }

    .youtube-text-content {
        padding: 30px 25px;
        text-align: center;
    }

    .youtube-text-content h3 {
        font-size: 1.5rem;
    }

    .youtube-text-content p {
        font-size: 1rem;
    }

    .btn-youtube-large {
        font-size: 1rem;
        padding: 16px 30px;
        margin: 0 25px 25px 25px;
    }

    html[dir="rtl"] .btn-youtube-large {
        margin: 0 25px 25px 25px;
    }
}

@media (max-width: 480px) {
    .featured-sermon-image {
        min-height: 250px;
    }

    .sermon-card-title {
        font-size: 1.1rem;
        min-height: auto;
    }

    .youtube-icon-large {
        font-size: 2.8rem;
        height: 85px;
    }

    .youtube-text-content {
        padding: 25px 20px;
    }

    .youtube-text-content h3 {
        font-size: 1.3rem;
    }

    .youtube-text-content p {
        font-size: 0.95rem;
    }

    .btn-youtube-large {
        margin: 0 20px 20px 20px;
        width: calc(100% - 40px);
        padding: 14px 25px;
        font-size: 0.95rem;
    }

    html[dir="rtl"] .btn-youtube-large {
        margin: 0 20px 20px 20px;
    }

    .sermon-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .meta-date {
        align-items: flex-start;
        text-align: left;
    }

    html[dir="rtl"] .meta-date {
        align-items: flex-end;
        text-align: right;
    }
}


/* ============================================
   Two Mosque Locations Styling
   ============================================ */

/* Friday Mosque Section */
.friday-mosque-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.friday-mosque-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--gold-color));
}

.friday-mosque-section .section-header i {
    font-size: 3rem;
    color: var(--gold-color);
    margin-bottom: 15px;
    display: block;
}

/* Courses Mosque Section */
.courses-mosque-section {
    background: linear-gradient(135deg, #fff9f0 0%, #fef5e7 100%);
    position: relative;
}

.courses-mosque-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-light));
}

.courses-mosque-section .section-header i {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
    display: block;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header .section-title {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.section-header .section-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Prayer Times Inline */
.prayer-times-inline {
    margin-bottom: 40px;
}

.prayer-times-inline .prayer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.prayer-times-inline .prayer-card {
    background: var(--white);
    padding: 20px 15px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.prayer-times-inline .prayer-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.prayer-times-inline .prayer-card i {
    font-size: 1.8rem;
    color: var(--gold-color);
    margin-bottom: 10px;
}

.prayer-times-inline .prayer-card h3 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 1rem;
}

.prayer-times-inline .prayer-card p {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.prayer-times-inline .friday-prayer {
    background: var(--primary-color);
}

.prayer-times-inline .friday-prayer i,
.prayer-times-inline .friday-prayer h3,
.prayer-times-inline .friday-prayer p {
    color: var(--white);
}

.prayer-times-inline .friday-prayer i {
    color: var(--gold-color);
}

/* Enhanced Address Cards */
.friday-mosque-section .address-card,
.courses-mosque-section .address-card {
    transition: var(--transition);
    border-left: 4px solid transparent;
}

.friday-mosque-section .address-card:hover {
    border-left-color: var(--gold-color);
    transform: translateX(5px);
}

.courses-mosque-section .address-card:hover {
    border-left-color: var(--secondary-color);
    transform: translateX(5px);
}

/* RTL Support */
html[dir="rtl"] .friday-mosque-section .address-card,
html[dir="rtl"] .courses-mosque-section .address-card {
    border-left: none;
    border-right: 4px solid transparent;
}

html[dir="rtl"] .friday-mosque-section .address-card:hover,
html[dir="rtl"] .courses-mosque-section .address-card:hover {
    transform: translateX(-5px);
}

html[dir="rtl"] .friday-mosque-section .address-card:hover {
    border-right-color: var(--gold-color);
}

html[dir="rtl"] .courses-mosque-section .address-card:hover {
    border-right-color: var(--secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .section-header .section-title {
        font-size: 1.6rem;
    }
    
    .section-header .section-subtitle {
        font-size: 0.95rem;
    }
    
    .section-header i {
        font-size: 2.5rem !important;
    }
    
    .prayer-times-inline .prayer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== Current Course Home Section ==================== */
.current-course-home {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.current-course-header {
    text-align: center;
    margin-bottom: 50px;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #c59d5f;
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.live-indicator {
    width: 10px;
    height: 10px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse-live 1.5s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.current-course-header h2 {
    font-size: 2.2rem;
    color: #1a1a2e;
    font-weight: 700;
    margin: 0;
}

.current-course-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.course-image-side {
    position: relative;
    min-height: 400px;
}

.course-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.course-image-side:hover .image-overlay {
    opacity: 1;
}

.play-btn {
    width: 80px;
    height: 80px;
    background: #ff0000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.play-btn:hover {
    transform: scale(1.1);
    color: #fff;
}

.course-status {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #4ade80;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-info-side {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.course-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(197, 157, 95, 0.1);
    color: #c59d5f;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 15px;
}

.course-title {
    font-size: 1.8rem;
    color: #1a1a2e;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}

.course-author {
    color: #666;
    font-size: 1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-author i {
    color: #c59d5f;
}

.course-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

.course-details-row {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.detail-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f9fa;
    padding: 12px 18px;
    border-radius: 12px;
}

.detail-box i {
    font-size: 1.3rem;
    color: #c59d5f;
}

.detail-label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
}

.detail-value {
    display: block;
    font-size: 0.95rem;
    color: #1a1a2e;
    font-weight: 600;
}

.course-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-primary-course {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #c59d5f;
    color: #fff;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-primary-course:hover {
    background: #b38a4c;
    color: #fff;
    transform: translateY(-2px);
}

.btn-secondary-course {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #1a1a2e;
    padding: 14px 28px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-secondary-course:hover {
    border-color: #c59d5f;
    color: #c59d5f;
}

/* Responsive */
@media (max-width: 992px) {
    .current-course-main {
        grid-template-columns: 1fr;
    }
    
    .course-image-side {
        min-height: 300px;
    }
    
    .course-info-side {
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .current-course-header h2 {
        font-size: 1.6rem;
    }
    
    .course-title {
        font-size: 1.4rem;
    }
    
    .course-details-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .course-actions {
        flex-direction: column;
    }
    
    .btn-primary-course,
    .btn-secondary-course {
        justify-content: center;
    }
}

/* ==================== Current Course Simple (No Video) ==================== */
.current-course-card-simple {
    background: #fff;
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
}

.course-icon-wrapper {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #c59d5f 0%, #d4af7a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.course-icon-wrapper i {
    font-size: 2rem;
    color: #fff;
}

.course-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    animation: pulse-live 1.5s ease-in-out infinite;
}

.course-title-main {
    font-size: 1.8rem;
    color: #1a1a2e;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}

.course-author-main {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.course-author-main i {
    color: #c59d5f;
}

.course-info-boxes {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.info-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #333;
}

.info-box i {
    color: #c59d5f;
}

.course-notice {
    background: #fff3cd;
    color: #856404;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.course-notice i {
    font-size: 1.1rem;
}

.btn-mosque-location {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #c59d5f;
    color: #fff;
    padding: 14px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-mosque-location:hover {
    background: #b38a4c;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .current-course-card-simple {
        padding: 30px 20px;
    }
    
    .course-title-main {
        font-size: 1.4rem;
    }
    
    .course-info-boxes {
        flex-direction: column;
        align-items: center;
    }
}

/* ==================== Now Course Section - Professional ==================== */
.now-course-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.now-course-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
    box-shadow: var(--shadow);
    border: 1px solid #eee;
}

.now-course-icon {
    width: 70px;
    height: 70px;
    background: #c59d5f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.now-course-icon i {
    font-size: 1.8rem;
    color: #fff;
}

.now-course-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 18px;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.now-course-title {
    font-size: 1.6rem;
    color: #1a1a2e;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.5;
}

.now-course-author {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.now-course-author i {
    color: #c59d5f;
}

.now-course-info-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.now-course-info-row .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #333;
}

.now-course-info-row .info-item i {
    color: #c59d5f;
    font-size: 1rem;
}

.now-course-notice {
    background: #fff8e1;
    color: #8a6d3b;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 25px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.now-course-notice i {
    color: #f9a825;
}

.now-course-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #c59d5f;
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.now-course-btn:hover {
    background: #b38a4c;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

@media (max-width: 768px) {
    .now-course-wrapper {
        padding: 30px 20px;
    }
    
    .now-course-title {
        font-size: 1.3rem;
    }
    
    .now-course-info-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* ============================================
   Active Course Professional Design
   ============================================ */
.active-course-pro {
    padding: 70px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.active-course-pro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a5f4a' fill-opacity='0.03'%3E%3Cpath d='M30 30l15-15v30L30 30zm0 0L15 15v30l15-15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.active-course-wrapper {
    background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
    border-radius: 24px;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--primary-border-subtle);
    position: relative;
    overflow: hidden;
}

.active-course-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(197, 157, 95, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.active-course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-radius: 24px 24px 0 0;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 20px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
}

.live-dot {
    width: 10px;
    height: 10px;
    background: #ff4757;
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
    box-shadow: var(--shadow);
}

@keyframes live-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.live-text {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.course-category-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(197, 157, 95, 0.2);
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(197, 157, 95, 0.3);
}

.course-category-tag i {
    color: #c59d5f;
}

.active-course-body {
    padding: 40px;
}

.course-main-info {
    text-align: center;
    margin-bottom: 35px;
}

.course-icon-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: var(--shadow-lg);
}

.course-icon-circle i {
    font-size: 2rem;
    color: #fff;
}

.course-title-pro {
    font-size: 1.8rem;
    color: #1a1a2e;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.4;
}

.course-author-pro {
    color: #666;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.course-author-pro i {
    color: #c59d5f;
}

.course-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.meta-card {
    background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    padding: 20px 15px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.meta-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-border-subtle);
}

.meta-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-bg-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.meta-icon i {
    font-size: 1.3rem;
    color: var(--primary-color);
}

.meta-label {
    display: block;
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-value {
    display: block;
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
}

.course-progress-section {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
}

.progress-bar-pro {
    height: 10px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--gold-color) 100%);
    border-radius: 10px;
    transition: width 1s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.active-course-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 25px 40px 35px;
    background: #fafafa;
    border-top: 1px solid #eee;
}

.btn-course-location,
.btn-course-details {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-course-location {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.btn-course-location:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    color: #fff;
}

.btn-course-details {
    background: #fff;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-course-details:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
}

/* Mosque Page Specific Styles */
.mosque-page-course {
    padding: 50px 0;
    background: linear-gradient(135deg, #f0f4f2 0%, #e8ece9 100%);
}

/* Responsive Design */
@media (max-width: 992px) {
    .course-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .active-course-pro {
        padding: 50px 0;
    }
    
    .active-course-header {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }
    
    .active-course-body {
        padding: 25px 20px;
    }
    
    .course-icon-circle {
        width: 70px;
        height: 70px;
    }
    
    .course-icon-circle i {
        font-size: 1.6rem;
    }
    
    .course-title-pro {
        font-size: 1.4rem;
    }
    
    .course-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .meta-card {
        padding: 15px 10px;
    }
    
    .meta-icon {
        width: 40px;
        height: 40px;
    }
    
    .meta-icon i {
        font-size: 1.1rem;
    }
    
    .meta-value {
        font-size: 0.85rem;
    }
    
    .active-course-footer {
        flex-direction: column;
        padding: 20px;
        gap: 12px;
    }
    
    .btn-course-location,
    .btn-course-details {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .live-indicator {
        padding: 8px 15px;
    }
    
    .live-text {
        font-size: 0.85rem;
    }
    
    .course-category-tag {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    .course-title-pro {
        font-size: 1.2rem;
    }
    
    .course-author-pro {
        font-size: 0.9rem;
    }
}
/* ============================================
   Clean & Professional Mosque Locations
   Simple, Elegant Design
   ============================================ */

/* Simple Hero Section */
.mosque-locations-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 80px 0 100px;
    text-align: center;
    position: relative;
}

.mosque-locations-hero .hero-background,
.mosque-locations-hero .hero-pattern,
.mosque-locations-hero .hero-gradient {
    display: none;
}

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

.hero-icon-wrapper {
    margin-bottom: 25px;
}

.hero-icon-circle {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid var(--gold-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-icon-pulse {
    display: none;
}

.hero-icon-circle i {
    font-size: 2.5rem;
    color: var(--gold-color);
}

.hero-title {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 12px;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
}

.hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.hero-divider span {
    width: 50px;
    height: 2px;
    background: var(--gold-color);
}

.hero-divider i {
    color: var(--gold-color);
    font-size: 0.8rem;
}

.hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
}

.hero-wave svg {
    width: 100%;
    height: 50px;
    fill: #ffffff;
}

/* Clean Section Design */
.mosque-section-pro {
    padding: 80px 0;
}

.section-bg-pattern {
    display: none;
}

.friday-section {
    /* background: #ffffff; */
}

.courses-section {
    /* background: #f9f9f9; */
}

/* Simple Section Header */
.section-header-pro {
    text-align: center;
    margin-bottom: 50px;
}

.section-icon-badge {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-icon-badge::before {
    display: none;
}

.friday-badge {
    background: var(--primary-color);
}

.courses-badge {
    background: var(--secondary-color);
}

.section-icon-badge i {
    font-size: 1.8rem;
    color: var(--white);
}

.section-label {
    display: inline-block;
    padding: 6px 20px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.section-title-pro {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}

.section-desc-pro {
    font-size: 1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.section-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* margin-top: 20px; */
}

.line-dot {
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
}

.line {
    width: 80px;
    height: 2px;
    background: var(--gold-color);
}

/* Simple Prayer Cards */
.prayer-showcase {
    margin-bottom: 50px;
}

.prayer-cards-modern {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.prayer-card-pro {
    background: var(--white);
    padding: 25px 15px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.prayer-card-pro::before {
    display: none;
}

.prayer-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.prayer-icon-wrapper {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fajr-icon { background: #FFF3E0; }
.dhuhr-icon { background: #E3F2FD; }
.asr-icon { background: #FFF8E1; }
.maghrib-icon { background: #F3E5F5; }
.isha-icon { background: #E8EAF6; }
.friday-icon { background: var(--primary-color); }

.fajr-icon i { color: #FF9800; }
.dhuhr-icon i { color: #2196F3; }
.asr-icon i { color: #FFC107; }
.maghrib-icon i { color: #9C27B0; }
.isha-icon i { color: #3F51B5; }
.friday-icon i { color: var(--white); }

.prayer-icon-wrapper i {
    font-size: 1.4rem;
}

.prayer-card-pro h3 {
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 8px;
    font-weight: 600;
}

.prayer-time-display {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.prayer-tag {
    display: inline-block;
    padding: 4px 12px;
    background: #f5f5f5;
    color: var(--text-light);
    border-radius: 12px;
    font-size: 0.75rem;
}

/* Featured Card */
.featured-card {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.featured-card h3,
.featured-card .prayer-time-display {
    color: var(--white);
}

.featured-badge-corner {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 25px;
    height: 25px;
    background: var(--gold-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-badge-corner i {
    font-size: 0.7rem;
    color: var(--white);
}

.featured-tag {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

/* Simple Map Container */
.map-location-wrapper {
    margin-bottom: 40px;
}

.map-container-pro {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.map-frame-border {
    border-radius: 16px;
    overflow: hidden;
}

.map-frame-border iframe {
    display: block;
    height: 400px;
}

.map-decorative-corners {
    display: none;
}

/* Simple Contact Cards */
.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.contact-card-pro {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid #eee;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.3s ease;
}

.contact-card-pro::before {
    display: none;
}

.contact-card-pro:hover {
    box-shadow: var(--shadow-lg);
}

.contact-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-icon { background: #FFEBEE; }
.phone-icon { background: #E8F5E9; }
.time-icon { background: #E3F2FD; }
.courses-icon { background: #FFF8E1; }

.location-icon i { color: #E53935; }
.phone-icon i { color: #43A047; }
.time-icon i { color: #1E88E5; }
.courses-icon i { color: #FFB300; }

.contact-icon-box i {
    font-size: 1.2rem;
}

.contact-info h4 {
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 5px;
    font-weight: 600;
}

.contact-detail {
    color: var(--text-light);
    margin: 3px 0;
    font-size: 0.9rem;
}

.time-highlight {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
}

.contact-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.contact-link:hover {
    color: var(--gold-color);
}

/* Responsive */
@media (max-width: 992px) {
    .prayer-cards-modern {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .contact-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mosque-locations-hero {
        padding: 60px 0 80px;
    }
    
    .hero-title {
        font-size: 1.3rem;
    }
    
    .hero-icon-circle {
        width: 70px;
        height: 70px;
    }
    
    .hero-icon-circle i {
        font-size: 2rem;
    }
    
    .section-title-pro {
        font-size: 1.5rem;
    }
    
    .prayer-cards-modern {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-card-pro {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    .section-title-pro {
        font-size: 1.3rem;
    }
    
    .prayer-cards-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .prayer-card-pro {
        padding: 20px 10px;
    }
    
    .prayer-time-display {
        font-size: 1.2rem;
    }
}


/* ============================================
   Current Time Display - Duhok Iraq
   ============================================ */
.current-time-display {
    margin-bottom: 40px;
}

.time-card-modern {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-radius: 20px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

.time-card-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.time-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.time-icon i {
    font-size: 1.8rem;
    color: #fff;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.time-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.time-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.time-value {
    font-size: 2.2rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Cairo', sans-serif;
}

.time-date {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

@media (max-width: 576px) {
    .time-card-modern {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
        gap: 15px;
    }
    
    .time-icon {
        width: 60px;
        height: 60px;
    }
    
    .time-icon i {
        font-size: 1.5rem;
    }
    
    .time-value {
        font-size: 1.8rem;
    }
}

/* ============================================
   Next Prayer Indicator
   ============================================ */
.next-prayer-indicator {
    background: linear-gradient(135deg, #c59d5f 0%, #d4af61 100%);
    border-radius: 16px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 450px;
    margin: 30px auto 0;
    box-shadow: var(--shadow-lg);
}

.next-prayer-icon {
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.next-prayer-icon i {
    font-size: 1.5rem;
    color: #fff;
    animation: bell-ring 2s ease-in-out infinite;
}

@keyframes bell-ring {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(10deg); }
    20%, 40% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
}

.next-prayer-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.next-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.next-prayer-name {
    font-size: 1.4rem;
    color: #fff;
    font-weight: 700;
}

.next-prayer-countdown {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    font-family: 'Cairo', monospace;
    letter-spacing: 1px;
}

/* Active Prayer Card Highlight */
.prayer-card-pro.active-prayer {
    border: 3px solid #c59d5f;
    transform: scale(1.05);
    box-shadow: var(--shadow-xl);
}

.prayer-card-pro.active-prayer::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--gold-color), var(--primary-color), var(--gold-color));
    border-radius: inherit;
    z-index: -1;
    animation: glow-border 2s ease-in-out infinite;
}

@keyframes glow-border {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@media (max-width: 576px) {
    .next-prayer-indicator {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }
    
    .next-prayer-icon {
        width: 50px;
        height: 50px;
    }
    
    .next-prayer-name {
        font-size: 1.2rem;
    }
}

/* ============================================
   Time & Prayer Row - Professional Design
   ============================================ */
.time-prayer-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 50px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.time-card-pro {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--primary-border-subtle);
    transition: all 0.4s ease;
}

.time-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, var(--primary-bg-subtle) 0%, transparent 50%);
    pointer-events: none;
}

.card-glow.gold-glow {
    background: radial-gradient(circle, rgba(197, 157, 95, 0.1) 0%, transparent 50%);
}

.card-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.time-icon-bg {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    box-shadow: var(--shadow-hover);
}

.prayer-icon-bg {
    background: linear-gradient(135deg, #c59d5f 0%, #d4af61 100%);
    box-shadow: var(--shadow-hover);
}

.card-icon-wrapper i {
    font-size: 1.6rem;
    color: #fff;
}

.time-icon-bg i {
    animation: pulse-rotate 3s ease-in-out infinite;
}

.prayer-icon-bg i {
    animation: bell-swing 2s ease-in-out infinite;
}

@keyframes pulse-rotate {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes bell-swing {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    75% { transform: rotate(0deg); }
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.card-label {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-main-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
    font-family: 'Cairo', sans-serif;
}

.card-sub-value {
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

.countdown-value {
    font-family: 'Cairo', monospace;
    font-size: 1.1rem;
    color: #c59d5f;
    font-weight: 700;
    letter-spacing: 1px;
}

.countdown-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, rgba(197, 157, 95, 0.15) 0%, rgba(197, 157, 95, 0.05) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[dir="ltr"] .countdown-badge {
    left: auto;
    right: 15px;
}

.countdown-badge i {
    font-size: 0.9rem;
    color: #c59d5f;
    animation: hourglass-flip 2s ease-in-out infinite;
}

@keyframes hourglass-flip {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.next-prayer-card {
    background: linear-gradient(145deg, #fffdf8 0%, #fff9f0 100%);
    border: 1px solid rgba(197, 157, 95, 0.2);
}

.next-prayer-card:hover {
    border-color: rgba(197, 157, 95, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .time-prayer-row {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 10px;
    }
    
    .time-card-pro {
        padding: 25px 20px;
    }
    
    .card-icon-wrapper {
        width: 60px;
        height: 60px;
        border-radius: 15px;
    }
    
    .card-icon-wrapper i {
        font-size: 1.4rem;
    }
    
    .card-main-value {
        font-size: 1.5rem;
    }
    
    .card-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .time-card-pro {
        flex-direction: column;
        text-align: center;
        padding: 25px 15px;
    }
    
    .card-content {
        align-items: center;
    }
    
    .countdown-badge {
        top: 10px;
        left: 10px;
    }
    
    [dir="ltr"] .countdown-badge {
        left: auto;
        right: 10px;
    }
}

/* Override - Full Width Time Prayer Row */
.time-prayer-row {
    max-width: 100% !important;
    width: 100%;
}

.time-card-pro {
    min-height: 140px;
}

.card-main-value {
    font-size: 2rem;
}

/* Course Map Row - 9col/3col Grid Layout */
.course-map-row {
    display: grid;
    grid-template-columns: 9fr 3fr;
    gap: 20px;
    align-items: stretch;
    margin-top: 30px;
}

.course-info-col {
    flex: 0 0 75%;
}

.course-info-col .current-course-card {
    height: 100%;
    margin: 0;
}

.map-col {
    flex: 0 0 25%;
}

.map-col .map-container-pro {
    height: 100%;
    min-height: 300px;
}

.map-col .map-container-pro.compact-map {
    height: 100%;
}

.map-col .map-frame-border {
    height: 100%;
}

.map-col .map-frame-border iframe {
    height: 100%;
    min-height: 300px;
}

/* RTL Support */
[dir="rtl"] .course-map-row {
    grid-template-columns: 3fr 9fr;
}

/* Responsive */
@media (max-width: 992px) {
    .course-map-row {
        grid-template-columns: 1fr;
    }
    
    [dir="rtl"] .course-map-row {
        grid-template-columns: 1fr;
    }
    
    .map-col .map-container-pro {
        min-height: 350px;
    }
}

/* Course Map Row - 60/40 Layout (Desktop) */
.course-map-row {
    grid-template-columns: 60% 40%;
}

[dir="rtl"] .course-map-row {
    grid-template-columns: 60% 40%;
}

/* ================================================
   MOSQUE LOCATION - PROFESSIONAL SIMPLE DESIGN
   ================================================ */

/* Clean Hero Section */
.mosque-locations-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
}

.mosque-locations-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 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='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.5;
}

.mosque-locations-hero .hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.mosque-locations-hero .hero-icon-wrapper {
    margin-bottom: 20px;
}

.mosque-locations-hero .hero-icon-circle {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.3);
}

.mosque-locations-hero .hero-icon-circle i {
    font-size: 32px;
    color: #d4af37;
}

.mosque-locations-hero .hero-title {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
}

.mosque-locations-hero .hero-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    margin-bottom: 0;
}

.mosque-locations-hero .hero-divider {
    display: none;
}

/* Clean Section Styling */
.mosque-section-pro {
    padding: 50px 0;
    /* background: #f8f9fa; */
    position: relative;
}


.mosque-section-pro .section-bg-pattern {
    display: none;
}

.section-header-pro {
    text-align: center;
    margin-bottom: 40px;
}

.section-header-pro .section-label {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.section-header-pro .section-title-pro {
    color: #1a1a2e;
    margin-bottom: 10px;
    font-weight: 700;
}

.section-header-pro .section-desc-pro {
    color: #666;
    font-size: 1rem;
    margin-bottom: 15px;
}

.section-header-pro .section-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-header-pro .line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--gold-color));
    border-radius: 3px;
}

.section-header-pro .line-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
}

/* Clean Time & Prayer Row */
.time-prayer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.time-card-pro {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.time-card-pro:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.time-card-pro .card-glow {
    display: none;
}

.time-card-pro .card-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.time-card-pro .card-icon-wrapper.time-icon-bg {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.time-card-pro .card-icon-wrapper.prayer-icon-bg {
    background: linear-gradient(135deg, #d4af37, #c9a227);
}

.time-card-pro .card-icon-wrapper i {
    font-size: 24px;
    color: #fff;
}

.time-card-pro .card-content {
    display: flex;
    flex-direction: column;
}

.time-card-pro .card-label {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
}

.time-card-pro .card-main-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}

.time-card-pro .card-sub-value {
    font-size: 0.85rem;
    color: #666;
    margin-top: 3px;
}

.time-card-pro .countdown-badge {
    display: none;
}

/* Clean Prayer Cards */
.prayer-showcase {
    margin-bottom: 40px;
}

.prayer-cards-modern {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.prayer-card-pro {
    background: #fff;
    border-radius: 16px;
    padding: 20px 15px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.prayer-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.prayer-card-pro.active-prayer {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-color: transparent;
}

.prayer-card-pro.active-prayer h3,
.prayer-card-pro.active-prayer .prayer-time-display,
.prayer-card-pro.active-prayer .prayer-tag {
    color: #fff !important;
}

.prayer-card-pro.active-prayer .prayer-icon-wrapper {
    background: rgba(255,255,255,0.2) !important;
}

.prayer-card-pro.active-prayer .prayer-icon-wrapper i {
    color: #fff !important;
}

.prayer-card-pro .prayer-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #f0f7f4;
}

.prayer-card-pro .prayer-icon-wrapper i {
    font-size: 20px;
    color: var(--primary-color);
}

.prayer-card-pro h3 {
    font-size: 1rem;
    color: #1a1a2e;
    margin-bottom: 8px;
    font-weight: 600;
}

.prayer-card-pro .prayer-time-display {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.prayer-card-pro .prayer-tag {
    font-size: 0.75rem;
    color: #888;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 10px;
    display: inline-block;
}

.prayer-card-pro.featured-card {
    background: linear-gradient(135deg, #d4af37, #c9a227);
    border-color: transparent;
}

.prayer-card-pro.featured-card h3,
.prayer-card-pro.featured-card .prayer-time-display {
    color: #fff;
}

.prayer-card-pro.featured-card .prayer-tag {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.prayer-card-pro.featured-card .prayer-icon-wrapper {
    background: rgba(255,255,255,0.2);
}

.prayer-card-pro.featured-card .prayer-icon-wrapper i {
    color: #fff;
}

.prayer-card-pro .featured-badge-corner {
    display: none;
}

/* Clean Map Container */
.map-location-wrapper {
    margin-top: 30px;
}

.map-container-pro {
    border-radius: 20px;
    overflow: hidden;
    /* box-shadow: var(--shadow-xl); */
    position: relative;
}

.map-container-pro .map-frame-border {
    border-radius: 20px;
    overflow: hidden;
}

.map-container-pro .map-decorative-corners {
    display: none;
}

/* Clean Course Card */
.course-map-row {
    display: grid;
    grid-template-columns: 60% 40%;
    background-color: var(--white);
    padding: 25px;
    border-radius: var(--border-radius);
    gap: 25px;
    align-items: stretch;
    box-shadow: var(--shadow);
}

.course-info-col .current-course-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    /* box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.05); */
    position: relative;
    overflow: hidden;
}



.current-course-card .pulse-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.current-course-card .current-course-info h2 {
    font-size: 1.4rem;
    color: #1a1a2e;
    margin-bottom: 15px;
    font-weight: 700;
}

.current-course-card .current-course-info > p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

.current-course-card .course-details-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.current-course-card .detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 12px;
}

.current-course-card .detail-item i {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.current-course-card .detail-item div {
    display: flex;
    flex-direction: column;
}

.current-course-card .detail-item .label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 2px;
}

.current-course-card .detail-item .value {
    font-size: 0.95rem;
    color: #1a1a2e;
    font-weight: 600;
}

.map-col .map-container-pro {
    height: 100%;
    min-height: 350px;
    border-radius: 20px;
}

.map-col .map-frame-border {
    height: 100%;
}

.map-col .map-frame-border iframe {
    height: 100%;
    min-height: 350px;
}

/* Responsive */
@media (max-width: 992px) {
    .prayer-cards-modern {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .time-prayer-row {
        grid-template-columns: 1fr;
    }
    
    .course-map-row {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    [dir="rtl"] .course-map-row {
        grid-template-columns: 1fr !important;
    }
    
    .map-col {
        order: 2;
    }
    
    .course-info-col {
        order: 1;
    }
}

@media (max-width: 768px) {
    .course-map-row {
        grid-template-columns: 1fr !important;
    }
    
    [dir="rtl"] .course-map-row {
        grid-template-columns: 1fr !important;
    }
    
    .map-col .map-container-pro {
        min-height: 300px;
    }
    
    .map-col .map-frame-border iframe {
        min-height: 300px;
    }
    .current-course-card .detail-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 12px;
}
.course-info-col .current-course-card {
    padding: 0px;

}
}

@media (max-width: 576px) {
    .prayer-cards-modern {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mosque-locations-hero .hero-title {
        font-size: 1.6rem;
    }
}

/* Hide extra elements for clean look */
/* .hero-icon-pulse,
.hero-background {
    display: none !important;
} */

.mosque-locations-hero .hero-background + .container {
    position: relative;
}

/* ================================================
   PRAYER DASHBOARD - ULTRA CLEAN PROFESSIONAL
   ================================================ */

.prayer-dashboard {
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    box-shadow: var(--shadow-xl);
    margin-bottom: 40px;
}

/* Main Time Display Row */
.time-display-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 20px;
}

.current-time-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.current-time-box > i {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.current-time-box .time-info {
    display: flex;
    flex-direction: column;
}

.current-time-box .time-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}

.current-time-box .time-label {
    font-size: 0.8rem;
    color: #888;
    margin: 5px 0 3px;
}

.current-time-box .date-value {
    font-size: 0.9rem;
    color: #666;
}

.next-prayer-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 15px 25px;
    border-radius: 16px;
}

.next-prayer-info {
    display: flex;
    flex-direction: column;
}

.next-prayer-info .next-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.next-prayer-info .next-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.countdown-timer {
    font-size: 1.8rem;
    font-weight: 700;
    color: #d4af37;
    font-family: 'Cairo', monospace;
    background: rgba(0,0,0,0.2);
    padding: 8px 15px;
    border-radius: 10px;
}

/* Prayer Times Grid */
.prayer-times-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.prayer-item {
    background: #f8f9fa;
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: default;
}

.prayer-item:hover {
    background: #f0f7f4;
    transform: translateY(-3px);
}

.prayer-item.active-prayer {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-color: var(--primary-color);
}

.prayer-item.active-prayer .prayer-icon,
.prayer-item.active-prayer .prayer-name,
.prayer-item.active-prayer .prayer-time {
    color: #fff !important;
}

.prayer-item.active-prayer .prayer-icon {
    background: rgba(255,255,255,0.2) !important;
}

.prayer-item .prayer-icon {
    width: 45px;
    height: 45px;
    background: #e8f5f0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.prayer-item .prayer-icon i {
    font-size: 18px;
    color: var(--primary-color);
}

.prayer-item.active-prayer .prayer-icon i {
    color: #fff;
}

.prayer-item .prayer-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prayer-item .prayer-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
}

.prayer-item .prayer-time {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Friday Special */
.prayer-item.friday-item {
    background: linear-gradient(135deg, #d4af37, #c9a227);
}

.prayer-item.friday-item .prayer-icon {
    background: rgba(255,255,255,0.25);
}

.prayer-item.friday-item .prayer-icon i {
    color: #fff;
}

.prayer-item.friday-item .prayer-name,
.prayer-item.friday-item .prayer-time {
    color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
    .prayer-times-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .time-display-main {
        flex-direction: column;
        align-items: stretch;
    }
    
    .next-prayer-box {
        justify-content: space-between;
    }
}

@media (max-width: 576px) {
    .prayer-times-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .prayer-dashboard {
        padding: 20px;
    }
    
    .current-time-box .time-value {
        font-size: 1.5rem;
    }
    
    .countdown-timer {
        font-size: 1.3rem;
    }
}

/* ================================================
   TIME DISPLAY - NEW BETTER DESIGN
   ================================================ */

.time-display-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.current-time-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #e0e0e0;
}

.current-time-box > i {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
}

.current-time-box .time-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.current-time-box .time-label {
    font-size: 0.8rem;
    color: #666;
    order: 1;
}

.current-time-box .time-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    order: 2;
}

.current-time-box .date-value {
    font-size: 0.85rem;
    color: #888;
    order: 3;
}

.next-prayer-box {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.next-prayer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.next-prayer-info .next-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}

.next-prayer-info .next-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.countdown-timer {
    font-size: 1.6rem;
    font-weight: 700;
    color: #d4af37;
    background: rgba(0,0,0,0.25);
    padding: 12px 18px;
    border-radius: 12px;
    letter-spacing: 1px;
}

/* RTL Fix */
[dir="rtl"] .time-display-main {
    direction: rtl;
}

/* Responsive */
@media (max-width: 768px) {
    .time-display-main {
        grid-template-columns: 1fr;
    }
    
    .current-time-box .time-value {
        font-size: 1.5rem;
    }
    
    .next-prayer-info .next-name {
        font-size: 1.3rem;
    }
    
    .countdown-timer {
        font-size: 1.3rem;
        padding: 10px 14px;
    }
}

/* ================================================
   FRIDAY LOCATION - CLEAN SIMPLE DESIGN
   ================================================ */

.friday-location-section {
    padding: 60px 0;
    /* background: #f5f7f9; */
}

/* Section Header */
.section-header-simple {
    text-align: center;
    margin-bottom: 40px;
}

.section-header-simple .section-badge {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: 8px 24px;
    border-radius: 25px;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.section-header-simple h2 {
    font-size: 2rem;
    color: #1a1a2e;
    font-weight: 700;
    margin: 0;
}

/* Time & Prayer Row */
.time-prayer-simple {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.time-box-simple,
.prayer-box-simple {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow);
}

.time-icon-simple,
.prayer-icon-simple {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.time-icon-simple {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.prayer-icon-simple {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.time-icon-simple i,
.prayer-icon-simple i {
    font-size: 24px;
    color: #fff;
}

.time-content,
.prayer-content {
    display: flex;
    flex-direction: column;
}

.time-title,
.prayer-title {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
}

.time-big {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.time-date {
    font-size: 0.85rem;
    color: #666;
    margin-top: 3px;
}

.prayer-name-big {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}

.prayer-countdown {
    font-size: 1.2rem;
    font-weight: 600;
    color: #d4af37;
    margin-top: 3px;
}

/* Prayer Times List */
.prayer-list-simple {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.prayer-list-item {
    background: #fff;
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.prayer-list-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.prayer-list-item.active-prayer {
    background: var(--primary-color);
}

.prayer-list-item.active-prayer i,
.prayer-list-item.active-prayer .p-name,
.prayer-list-item.active-prayer .p-time {
    color: #fff !important;
}

.prayer-list-item i {
    font-size: 22px;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
}

.prayer-list-item .p-name {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.prayer-list-item .p-time {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
}

.prayer-list-item.friday-special {
    background: linear-gradient(135deg, #d4af37, #c9a227);
}

.prayer-list-item.friday-special i,
.prayer-list-item.friday-special .p-name,
.prayer-list-item.friday-special .p-time {
    color: #fff;
}

/* Map */
.map-simple {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-hover);
}

.map-simple iframe {
    display: block;
}

/* ================================================
   FRIDAY COURSE CARD - ELEGANT DESIGN
   ================================================ */

.friday-course-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.friday-course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.friday-course-header {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.friday-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #d4af37, #c9a227);
    color: #fff;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
    box-shadow: var(--shadow);
}

.friday-badge i {
    font-size: 0.85rem;
}

.friday-course-header h3 {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.friday-course-header h3 i {
    color: #d4af37;
    font-size: 1.4rem;
}

.friday-description {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

.friday-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.friday-detail-item {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.friday-detail-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-3px);
}

.detail-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-icon i {
    font-size: 1.3rem;
    color: #fff;
}

.detail-icon.mosque-icon {
    background: linear-gradient(135deg, #d4af37, #c9a227);
}

.detail-icon.time-icon {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.detail-icon.teacher-icon {
    background: linear-gradient(135deg, #27ae60, #1e8449);
}

.detail-content {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
}

/* Responsive Friday Card */
@media (max-width: 992px) {
    .friday-details-grid {
        grid-template-columns: 1fr;
    }
    
    .friday-course-header h3 {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .friday-course-card {
        padding: 20px;
    }
    
    .friday-detail-item {
        padding: 15px;
    }
    
    .detail-icon {
        width: 45px;
        height: 45px;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .prayer-list-simple {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .time-prayer-simple {
        grid-template-columns: 1fr;
    }
    
    .prayer-list-simple {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .section-header-simple h2 {
        font-size: 1.5rem;
    }
}

/* ================================================
   HERO SIMPLE - PROFESSIONAL CLEAN DESIGN
   ================================================ */

.hero-simple {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 50px 0;
    text-align: center;
}

.hero-simple-content {
    max-width: 600px;
    margin: 0 auto;
}

.hero-icon-box {
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 2px solid rgba(255,255,255,0.25);
}

.hero-icon-box i {
    font-size: 28px;
    color: #d4af37;
}

.hero-simple h1 {
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    margin: 0 0 10px;
}

.hero-simple p {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

@media (max-width: 576px) {
    .hero-simple {
        padding: 40px 0;
    }
    
    .hero-simple h1 {
        font-size: 1.5rem;
    }
    
    .hero-icon-box {
        width: 60px;
        height: 60px;
    }
    
    .hero-icon-box i {
        font-size: 24px;
    }
}

/* Back to Top Button */
#backToTop {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
        border: 3px solid var(--gold-color);

}

#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTop:hover {

    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

#backToTop:active {
    transform: translateY(-1px);
}

#backToTop i {
    animation: bounceUp 2s infinite;
}

@keyframes bounceUp {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #backToTop {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    #backToTop {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}

/* ================================================
   FRIDAY LOCATION CARD - NEW DESIGN
   ================================================ */

.friday-location-card {
    background: #ffffff;
    border-radius: 25px;
    padding: 40px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(0,0,0,0.08);
}

.friday-location-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a5f4a' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.location-card-header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    z-index: 1;
}

.location-card-header h3 {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.location-card-header h3 i {
    color: #d4af37;
    font-size: 1.8rem;
}

.location-description {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
    max-width: 700px;
    margin: 0 auto;
}

.location-details-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    position: relative;
    z-index: 1;
}

.location-detail-box {
    background: #f8f9fa;
    backdrop-filter: blur(15px);
    border-radius: 18px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.location-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.location-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-label {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.info-value {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.3;
}

.friday-map-container {
    border-radius: 8px;
    overflow: hidden;
    margin-top: 30px;
    position: relative;
}

.friday-map-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;

}

/* Responsive Location Card */
@media (max-width: 1200px) {
    .location-details-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .friday-location-card {
        padding: 25px;
    }
    
    .location-card-header h3 {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 10px;
    }
    
    .location-card-header h3 i {
        font-size: 1.4rem;
    }
    
    .location-details-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .location-detail-box {
        padding: 20px;
    }
    
    .location-icon {
        width: 50px;
        height: 50px;
    }
    
    .location-icon i {
        font-size: 1.3rem;
    }
    
    .info-value {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .friday-location-card {
        padding: 20px;
        border-radius: 15px;
    }
    
    .location-card-header h3 {
        font-size: 1.3rem;
    }
    
    .location-detail-box {
        padding: 15px;
        gap: 12px;
    }
    
    .location-icon {
        width: 45px;
        height: 45px;
    }
    
    .location-icon i {
        font-size: 1.1rem;
    }
    
    .info-label {
        font-size: 0.75rem;
    }
    
    .info-value {
        font-size: 0.95rem;
    }
}

/* ============================================
   Detail Pages - Unified Styling
   (record-course-details, friday-sermon-details, important-course-details)
   ============================================ */

/* Detail Page Wrapper */
.course-detail-wrapper,
.sermon-detail-wrapper {
    min-height: 100vh;
}

.course-detail-section,
.sermon-detail-section {
    padding: 40px 0 60px;
}

.course-detail-grid,
.sermon-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Main Content Area */
.course-main-content,
.sermon-main-content {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* Course/Sermon Header */
.course-header-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 32px;
    color: #fff;
}

.course-header-section h1 {
    font-size: 1.8rem;
    margin: 0 0 16px;
    font-weight: 700;
}

.course-header-section p {
    opacity: 0.9;
    font-size: 1rem;
    margin: 0 0 20px;
    line-height: 1.6;
}

.course-header-clean,
.sermon-header-clean {
    padding: 28px 32px;
    border-bottom: 1px solid #eef2f5;
}

.course-title-clean,
.sermon-title-clean {
    font-size: 1.65rem;
    color: #1a2b3c;
    margin: 0 0 16px;
    font-weight: 700;
    line-height: 1.4;
}

.course-meta-clean,
.sermon-meta-clean {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.meta-item-clean {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5a6b7c;
    font-size: 0.9rem;
}

.meta-item-clean i {
    color: var(--primary-color);
    font-size: 0.85rem;
}

/* Stats Bar */
.course-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--white);
}

.stat-item i {
    opacity: 0.9;
}

/* Now Playing Section (Audio) */
.now-playing-section {
    background: var(--white);
    padding: 24px;
}

.now-playing-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.playing-indicator {
    width: 12px;
    height: 12px;
    background: #4ade80;
    border-radius: 50%;
    animation: detailPulse 1.5s ease-in-out infinite;
}

@keyframes detailPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.now-playing-header span {
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 500;
}

.now-playing-title {
    color: var(--text-dark);
    font-size: 1.1rem;
    margin: 0 0 16px;
    font-weight: 600;
}

.audio-player-container {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px 0px;
}

.audio-player-container audio {
    width: 100%;
    height: 50px;
}

.audio-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.audio-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    font-family: 'Rabar', 'Cairo', 'Amiri', sans-serif !important ;
}
@media screen and (max-width: 768px) {
    .audio-action-btn {
        font-size: 0.8rem;
        padding: 8px;
    }   
    
}

.audio-action-btn.download {
    background: var(--primary-color);
    color: var(--white);
}

.audio-action-btn.download:hover {
    background: var(--primary-dark);
}

.audio-action-btn.share {
    background: var(--primary-color);
    color: var(--white);
}

.audio-action-btn.share:hover {
    background: var(--primary-dark);
}

/* Video Section */
.video-section-clean {
    background: #000;
}

.video-info-bar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lesson-number-badge,
.lesson-title-badge,
.sermon-number-badge,
.sermon-date-badge {
    background: rgba(255,255,255,0.12);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    height: fit-content;
    box-sizing: border-box;
 
}
@media screen and (max-width: 768px) {
    .lesson-number-badge,
.lesson-title-badge,
.sermon-number-badge,
.sermon-date-badge {
 
    font-size: 0.7rem;
       width: 100%;
   
}
}

.lesson-number-badge span,
/* .sermon-number-badge span {
    background: rgba(255,255,255,0.2);
    padding: 3px 10px;
    border-radius: 4px;
} */

.lesson-title-badge i,
.sermon-date-badge i {
    opacity: 0.9;
}

.video-container-clean {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-container-clean iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-nav-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--primary-color);
    border-bottom: 1px solid #eef2f5;
}

.nav-btn-clean {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
        font-family: 'Rabar', 'Cairo', 'Amiri', sans-serif !important;

}

.nav-btn-clean:hover:not(:disabled) {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.nav-btn-clean:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Lessons/Playlist Section */
.lessons-section,
.playlist-section-clean {
    padding: 0;
}

.lessons-header,
.playlist-header-clean {
    padding: 20px 24px;
    background: #f8fafb;
    border-bottom: 1px solid #eef2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lessons-header h3,
.playlist-header-clean h3 {
    margin: 0;
    font-size: 1rem;
    color: #1a2b3c;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lessons-header h3 i,
.playlist-header-clean h3 i {
    color: var(--primary-color);
}

.lessons-count-badge,
.sermons-count-badge {
    background: var(--primary-bg-subtle);
    color: var(--primary-color);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.lessons-list,
.playlist-list-clean {
    max-height: 500px;
    overflow-y: auto;
}

.lessons-list::-webkit-scrollbar,
.playlist-list-clean::-webkit-scrollbar {
    width: 5px;
}

.lessons-list::-webkit-scrollbar-track,
.playlist-list-clean::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.lessons-list::-webkit-scrollbar-thumb,
.playlist-list-clean::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

/* Lesson/Sermon Item */
.lesson-item,
.lesson-item-clean,
.sermon-item-clean {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    gap: 16px;
    border-bottom: 1px solid #f0f3f5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lesson-item:hover,
.lesson-item-clean:hover,
.sermon-item-clean:hover {
    background: #f8fafb;
}

.lesson-item.playing,
.lesson-item-clean.playing,
.sermon-item-clean.playing {
    background: var(--primary-bg-subtle);
    border-right: 4px solid var(--primary-color);
}

.lesson-number,
.lesson-num-clean,
.sermon-num-clean {
    width: 36px;
    height: 36px;
    background: #eef2f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #5a6b7c;
    flex-shrink: 0;
}

.lesson-item.playing .lesson-number,
.lesson-item-clean.playing .lesson-num-clean,
.sermon-item-clean.playing .sermon-num-clean {
    background: var(--primary-color);
    color: #fff;
}

.lesson-item.playing .lesson-icon i {
    color: #fff !important;
}

.lesson-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lesson-icon i {
    color: #fff;
    font-size: 1.2rem;
}

.lesson-thumb-clean,
.sermon-thumb-clean {
    width: 72px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.lesson-thumb-clean img,
.sermon-thumb-clean img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lesson-info,
.lesson-details-clean,
.sermon-details-clean {
    flex: 1;
    min-width: 0;
}

.lesson-info h4,
.lesson-details-clean h4,
.sermon-details-clean h4 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: #1a2b3c;
    font-weight: 500;
}

.lesson-details-clean h4,
.sermon-details-clean h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lesson-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: #8a9bac;
}

.lesson-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lesson-details-clean span,
.sermon-details-clean span {
    font-size: 0.75rem;
    color: #8a9bac;
}

.lesson-play-btn,
.lesson-play-icon,
.sermon-play-icon {
    width: 40px;
    height: 40px;
    background: #eef2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a6b7c;
    transition: all 0.2s;
}

.lesson-play-icon,
.sermon-play-icon {
    width: auto;
    height: auto;
    background: none;
    color: #ccd3db;
    font-size: 1.1rem;
}

.lesson-item:hover .lesson-play-btn,
.lesson-item.playing .lesson-play-btn,
.lesson-item-clean:hover .lesson-play-icon,
.lesson-item-clean.playing .lesson-play-icon,
.sermon-item-clean:hover .sermon-play-icon,
.sermon-item-clean.playing .sermon-play-icon {
    background: var(--primary-color);
    color: #fff;
}

.lesson-item.playing .lesson-play-btn i {
    color: #fff !important;
}

.lesson-item-clean:hover .lesson-play-icon,
.lesson-item-clean.playing .lesson-play-icon,
.sermon-item-clean:hover .sermon-play-icon,
.sermon-item-clean.playing .sermon-play-icon {
    background: none;
    color: var(--primary-color);
}

/* Loading State */
.playlist-loading {
    text-align: center;
    padding: 40px;
    color: #8a9bac;
}

.playlist-loading i {
    font-size: 2rem;
    margin-bottom: 10px;
    animation: detailSpin 1s linear infinite;
}

@keyframes detailSpin {
    100% { transform: rotate(360deg); }
}

/* Sidebar */
.course-sidebar,
.course-sidebar-clean,
.sermon-sidebar-clean {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-card,
.sidebar-card-clean {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    padding: 24px;
    margin-bottom: 20px;
}

.sidebar-card h4,
.sidebar-card-clean h4 {
    font-size: 1rem;
    color: #1a2b3c;
    margin: 0 0 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}



.sidebar-actions,
.sidebar-actions-clean {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.action-btn-youtube {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: #ff0000;
    color: #fff;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.action-btn-youtube:hover {
    background: #cc0000;
    color: #fff;
}

.action-btn-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background:var(--primary-color);
    color: var(--white);

    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
        font-family: 'Rabar', 'Cairo', 'Amiri', sans-serif !important ;

}

.action-btn-share:hover {
    background: var(--primary-dark);
}

/* Course Features List */
.course-features,
.features-list-clean ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list-clean {
    border-top: 1px solid #eef2f5;
    padding-top: 20px;
}

.features-list-clean h4 {
    font-size: 0.95rem;
    color: #1a2b3c;
    margin: 0 0 16px;
    font-weight: 600;
}

.course-features li,
.features-list-clean li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: #5a6b7c;
    font-size: 0.9rem;
    border-bottom: 1px solid #f5f7f9;
}

.course-features li:last-child,
.features-list-clean li:last-child {
    border-bottom: none;
}

.course-features i,
.features-list-clean i {
       color: var(--white);
    background: var(--primary-color);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    padding: 5px;
}

/* Other/Related Courses */
.other-course-item,
.related-item-clean {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f3f5;
    text-decoration: none;
    transition: opacity 0.2s;
}

.other-course-item:last-child,
.related-item-clean:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.other-course-item:hover,
.related-item-clean:hover {
    opacity: 0.8;
}

.other-course-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.other-course-icon i {
    color: #fff;
    font-size: 1.3rem;
}

.related-thumb-clean {
    width: 80px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.related-thumb-clean img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.other-course-info h5,
.related-info-clean h5 {
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: #1a2b3c;
    font-weight: 500;
    line-height: 1.4;
}

.other-course-info p,
.related-info-clean p {
    margin: 0;
    font-size: 0.8rem;
    color: #8a9bac;
    display: flex;
    align-items: center;
    gap: 4px;
}

.related-section-clean h4 {
    font-size: 0.95rem;
    color: #1a2b3c;
    margin: 0 0 16px;
    font-weight: 600;
}

/* Back Button */
.back-to-courses {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 20px;
    transition: gap 0.2s;
}

.back-to-courses:hover {
    gap: 12px;
}

/* Breadcrumb Inline */
.breadcrumb-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 0.9rem;
}

.breadcrumb-inline a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-inline a:hover {
    color: #fff;
}

.breadcrumb-inline span {
    color: rgba(255,255,255,0.5);
}

.breadcrumb-inline .current {
    color: #fff;
    font-weight: 500;
}

/* Detail Pages Responsive */
@media (max-width: 1024px) {
    .course-detail-grid,
    .sermon-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .course-sidebar,
    .course-sidebar-clean,
    .sermon-sidebar-clean {
        position: static;
    }
}

@media (max-width: 768px) {
    .course-detail-section,
    .sermon-detail-section {
        padding: 20px 0 40px;
    }
    
    .course-header-section {
        padding: 24px;
    }
    
    .course-header-section h1 {
        font-size: 1.4rem;
    }
    
    .course-header-clean,
    .sermon-header-clean {
        padding: 20px;
    }
    
    .course-title-clean,
    .sermon-title-clean {
        font-size: 1.35rem;
    }
    
    .course-meta-clean,
    .sermon-meta-clean {
        gap: 14px;
    }
    
    .course-stats-bar {
        gap: 10px;
    }
    
    .stat-item {
        padding: 6px 8px;
        font-size: 0.6rem;
    }
    
    .video-info-bar {
        flex-direction: column;
        gap: 4px;
  
    }
    .video-info-bar  {
        padding: 14px 8px;
    }
    
    .video-nav-bar {
        /* flex-direction: column; */
        justify-content: space-between;
    }
    .nav-btn-clean {
    gap: 8px;
    padding: 6px 12px;
 
    font-size: 0.7rem;


}
   
    .video-nav-bar {
        padding: 14px 8px
    }
    .lesson-item {
        padding: 14px 16px;
    }
    
    .lesson-icon {
        display: none;
    }
}


        /* Professional No Content State */
        .no-content-professional {
            text-align: center;
            padding: 80px 40px;
            background: var(--white);
            border-radius: 20px;
            margin: 40px 0;
            box-shadow: var(--shadow)
        }
        
        .no-content-icon {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            box-shadow: 0 10px 30px rgba(26, 95, 74, 0.2);
            animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 10px 30px rgba(26, 95, 74, 0.2);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 15px 40px rgba(26, 95, 74, 0.3);
            }
        }
        
        .no-content-icon i {
            font-size: 3.5rem;
            color: #fff;
            opacity: 0.9;
        }
        
        .no-content-professional h3 {
            font-size: 1.8rem;
            color: #1a2b3c;
            margin: 0 0 12px;
            font-weight: 700;
        }
        
        .no-content-professional p {
            font-size: 1.1rem;
            color: #6a7b8c;
            margin: 0;
            line-height: 1.6;
        }
        
        @media (max-width: 768px) {
            .no-content-professional {
                padding: 60px 30px;
            }
            
            .no-content-icon {
                width: 100px;
                height: 100px;
            }
            
            .no-content-icon i {
                font-size: 2.5rem;
            }
            
            .no-content-professional h3 {
                font-size: 1.4rem;
            }
            
            .no-content-professional p {
                font-size: 1rem;
            }
        }