/* Import Tajawal font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;600;700;800&display=swap');

        /* --- Enhanced Global Styles & Variables --- */
        :root {
            --primary-glow-start: #a855f7; /* Vibrant Purple */
            --primary-glow-end: #06b6d4;   /* Vibrant Cyan */
            --secondary-glow: #ec4899; /* Vibrant Pink */
            --accent-glow: #f59e0b; /* Vibrant Orange */
            --dark-bg: #0a0a0f;
            --card-bg: #1a1a1f;
            --card-hover-bg: #252530;
            --text-primary: #f0f0f5;
            --text-secondary: #a0a0b0;
            --border-color: #2c2c33;
            --success-color: #10b981;
            --warning-color: #f59e0b;
        }

        /* Enhanced Animations */
        @keyframes gradient-animation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); }
            50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.6), 0 0 40px rgba(6, 182, 212, 0.4); }
        }

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

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

        html { 
            scroll-behavior: smooth; 
            font-size: 16px;
        }

        body {
            /* Apply the Tajawal font across the entire site. Tajawal supports both Arabic and Latin scripts and offers a balanced modern look. */
            font-family: 'Tajawal', sans-serif;
            /* Use a light weight for regular body text */
            font-weight: 300;
            background-color: var(--dark-bg);
            color: var(--text-primary);
            line-height: 1.7;
            overflow-x: hidden;
            position: relative;
        }

        /* Enhanced Background with Particles Effect */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }

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

        section {
            padding: 100px 0;
            position: relative;
        }

        /* Enhanced Typography */
        h1, h2, h3 {
            /* Light weight for headings */
            font-weight: 300;
            margin-bottom: 20px;
            color: var(--text-primary);
        }
        
        h1 { 
            font-size: clamp(2.5rem, 5vw, 4rem); 
            line-height: 1.2; 
        }
        h2 { 
            font-size: clamp(2rem, 4vw, 3rem); 
            text-align: center; 
            margin-bottom: 30px;
        }
        h3 { 
            font-size: clamp(1.2rem, 2.5vw, 1.8rem); 
        }

        /* Enhanced Glowing Gradient Text */
        h1 span, h2 span {
            background: linear-gradient(90deg, var(--primary-glow-start), var(--secondary-glow), var(--primary-glow-end));
            background-size: 200% auto;
            color: #fff;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient-animation 5s ease infinite;
            display: inline-block;
        }

        p {
            color: var(--text-secondary);
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        /* Enhanced Glowing Gradient Button */
        .btn {
            display: inline-block;
            background: linear-gradient(135deg, var(--primary-glow-start), var(--primary-glow-end));
            color: var(--text-primary);
            padding: 16px 32px;
            border-radius: 50px;
            text-decoration: none;
            /* Light weight for button text to complement the overall thin design */
            font-weight: 300;
            transition: all 0.4s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
            text-align: center;
            position: relative;
            overflow: hidden;
            min-width: 200px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), 0 0 50px rgba(6, 182, 212, 0.4);
        }

        .btn:active {
            transform: translateY(-1px) scale(1.02);
        }
        
        /* Enhanced Hero Section */
/*
 * The main hero section features a bold image with enough top padding
 * to accommodate the floating navigation bar. Overflow is hidden so
 * that the fade-out gradient (implemented via ::after) stays within
 * the hero boundaries.
 */
.hero {
    text-align: center;
    padding: 150px 0;
    background: linear-gradient(135deg, rgba(15, 15, 18, 0.9), rgba(15, 15, 18, 0.7)),
                url('images/hero.jpg') no-repeat center center/cover;
    position: relative;
    overflow: hidden;
}

    /* Fade-out effect at the bottom of hero section to blend with the body */
    .hero::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 200px;
        background: linear-gradient(to bottom, rgba(10, 10, 15, 0), var(--dark-bg));
        z-index: 1;
        pointer-events: none;
    }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(168, 85, 247, 0.1), rgba(6, 182, 212, 0.1));
            animation: gradient-animation 8s ease infinite;
        }

        .hero .container { 
            max-width: 900px; 
            position: relative;
            z-index: 2;
        }

        .hero h1 {
            animation: slideInUp 1s ease-out;
        }

        .hero p {
            font-size: 1.3rem;
            max-width: 700px;
            margin: 30px auto 50px auto;
            animation: slideInUp 1s ease-out 0.2s both;
        }

        .hero .btn {
            animation: slideInUp 1s ease-out 0.4s both, pulse-glow 3s ease-in-out infinite 2s;
        }
        
        /* Enhanced Contact Form Section */
        .contact-form {
            background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg));
            padding: 50px;
            border-radius: 20px;
            max-width: 800px;
            margin: -100px auto 0 auto;
            position: relative;
            z-index: 10;
            border: 1px solid var(--border-color);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

        .contact-form::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 182, 212, 0.1));
            border-radius: 20px;
            z-index: -1;
        }

        .contact-form h3 { 
            text-align: center; 
            margin-bottom: 40px;
            font-size: 1.8rem;
        }

        .form-group { 
            margin-bottom: 25px; 
            position: relative;
        }

        .form-group input, .form-group textarea {
            width: 100%; 
            padding: 18px 20px; 
            background-color: var(--dark-bg); 
            border: 2px solid var(--border-color);
            border-radius: 10px; 
            color: var(--text-primary); 
            font-family: inherit; 
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .form-group input:focus, .form-group textarea:focus { 
            outline: none; 
            border-color: var(--primary-glow-start);
            box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
            transform: translateY(-2px);
        }

        .form-group textarea { 
            resize: vertical; 
            height: 140px; 
        }

        .form-group .btn { 
            width: 100%; 
            font-size: 1rem;
            padding: 16px 32px;
            height: 50px;
            min-width: auto;
        }

        /* Enhanced Quick Services */
        .quick-services-grid {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px; 
            text-align: center; 
            margin-top: 60px;
        }

        .quick-service-item {
            background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg)); 
            padding: 40px 25px; 
            border-radius: 15px;
            transition: all 0.4s ease; 
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
        }

        .quick-service-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(6, 182, 212, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .quick-service-item:hover::before {
            opacity: 1;
        }

        .quick-service-item:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 30px rgba(168, 85, 247, 0.2);
            border-color: var(--primary-glow-start);
        }

        .quick-service-item i {
            font-size: 3rem; 
            margin-bottom: 20px;
            background: linear-gradient(135deg, var(--primary-glow-start), var(--secondary-glow));
            -webkit-background-clip: text; 
            background-clip: text; 
            color: transparent;
            display: block;
            animation: float 3s ease-in-out infinite;
        }

        .quick-service-item p { 
            margin: 0; 
            color: var(--text-primary); 
            /* Use extra-light weight for service item descriptions */
            font-weight: 100; 
            font-size: 1.2rem;
            position: relative;
            z-index: 2;
        }
        
        /* Enhanced Services Section */
        .services-grid {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 35px; 
            margin-top: 60px;
        }

        .service-card {
            background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg)); 
            padding: 45px; 
            border-radius: 15px; 
            border: 1px solid var(--border-color);
            display: flex; 
            flex-direction: column; 
            transition: all 0.4s ease;
            position: relative; 
            overflow: hidden;
        }

        .service-card:hover { 
            transform: translateY(-8px); 
            border-color: transparent;
            box-shadow: 0 20px 40px rgba(168, 85, 247, 0.2);
        }

        .service-card::before {
            content: ''; 
            position: absolute; 
            top: 0; 
            right: 0; 
            bottom: 0; 
            left: 0;
            background: linear-gradient(135deg, var(--primary-glow-start), var(--primary-glow-end));
            z-index: 0; 
            transition: opacity 0.4s ease-in-out; 
            opacity: 0;
        }

        .service-card:hover::before { 
            opacity: 1; 
        }

        .service-card > * { 
            position: relative; 
            z-index: 2; 
        }

        .service-card::after {
            content: ''; 
            position: absolute; 
            top: 2px; 
            right: 2px; 
            bottom: 2px; 
            left: 2px;
            background: var(--card-bg); 
            border-radius: 13px; 
            z-index: 1;
        }

        .service-card .icon {
            font-size: 3.5rem; 
            margin-bottom: 25px;
            background: linear-gradient(135deg, var(--primary-glow-start), var(--secondary-glow));
            -webkit-background-clip: text; 
            background-clip: text; 
            color: transparent;
        }

        .service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .service-card p {
            font-size: 1rem;
            line-height: 1.6;
        }

        .service-card .tagline {
            /* Light weight tagline to complement the thin typographic style */
            font-weight: 300; 
            color: var(--text-primary); 
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(6, 182, 212, 0.2));
            padding: 12px 16px; 
            border-radius: 8px; 
            margin-top: auto; 
            margin-bottom: 30px; 
            text-align: center;
            font-size: 1rem;
        }

        .service-card .btn { 
            width: 100%; 
            z-index: 5;
            min-width: auto;
            height: 50px;
            font-size: 1rem;
            padding: 16px 32px;
        }

        /* Enhanced Why Us & Testimonials */
        .why-us-grid, .testimonials-grid {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 35px; 
            margin-top: 60px;
        }

        .why-us-item, .testimonial-card { 
            background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg)); 
            padding: 35px; 
            border-radius: 15px; 
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .why-us-item:hover, .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(168, 85, 247, 0.15);
        }

        .why-us-item i {
            margin-left: 15px;
            background: linear-gradient(135deg, var(--primary-glow-start), var(--primary-glow-end));
            -webkit-background-clip: text; 
            background-clip: text; 
            color: transparent;
            font-size: 1.3rem;
        }

        .testimonial-card blockquote {
            font-style: italic; 
            border-right: 3px solid var(--primary-glow-start);
            padding-right: 20px; 
            margin-bottom: 25px;
            font-size: 1.1rem;
        }

        .testimonial-card .author { 
            font-weight: 600; 
            color: var(--text-primary); 
            margin: 0; 
        }

        /* Enhanced Portfolio Section */
        .portfolio-grid {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px; 
            margin-top: 60px;
        }

        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            aspect-ratio: 1;
        }

        .portfolio-grid img {
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            border-radius: 12px;
            transition: all 0.4s ease; 
            border: 1px solid var(--border-color);
        }

        .portfolio-item:hover img { 
            transform: scale(1.1); 
        }

        .portfolio-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(6, 182, 212, 0.3));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .portfolio-item:hover::after {
            opacity: 1;
        }

        /* Enhanced FAQ Section */
        .faq-container { 
            max-width: 900px; 
            margin: 60px auto 0 auto; 
        }

        .faq-item { 
            background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg)); 
            margin-bottom: 15px; 
            border-radius: 10px; 
            overflow: hidden; 
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            box-shadow: 0 5px 15px rgba(168, 85, 247, 0.1);
        }

        .faq-question {
            padding: 25px; 
            cursor: pointer; 
            display: flex; 
            justify-content: space-between;
            align-items: center; 
            /* Lighten the FAQ question text weight to maintain consistency with overall typography */
            font-weight: 300; 
            color: var(--text-primary);
            transition: all 0.3s ease;
            font-size: 1.1rem;
        }

        .faq-question:hover {
            background: rgba(168, 85, 247, 0.05);
        }

        .faq-question::after {
            content: '\f067'; 
            font-family: 'Font Awesome 6 Free'; 
            font-weight: 900;
            transition: all 0.3s ease;
            font-size: 1rem;
        }

        .faq-item.active .faq-question { 
            color: var(--primary-glow-start); 
        }

        .faq-item.active .faq-question::after { 
            transform: rotate(45deg); 
            color: var(--primary-glow-start); 
        }

        .faq-answer { 
            max-height: 0; 
            overflow: hidden; 
            transition: max-height 0.4s ease-in-out; 
        }

        .faq-answer p { 
            padding: 0 25px 25px 25px; 
            margin-bottom: 0; 
            font-size: 1rem;
        }

        /* Enhanced Footer */
        footer { 
            text-align: center; 
            padding: 80px 0; 
            background: linear-gradient(135deg, var(--card-bg), var(--dark-bg));
            border-top: 1px solid var(--border-color);
        }

        .social-links a { 
            color: var(--text-secondary); 
            font-size: 1.8rem; 
            margin: 0 20px; 
            transition: all 0.3s ease;
            display: inline-block;
        }

        .social-links a:hover { 
            color: var(--primary-glow-start);
            transform: translateY(-3px) scale(1.2);
        }

        .footer-contact p { 
            margin: 8px 0; 
            font-size: 1.1rem;
        }

        .copyright { 
            margin-top: 40px; 
            font-size: 1rem; 
            color: #666; 
        }

        /* Success Message Styles */
        .success-message {
            background: linear-gradient(135deg, var(--success-color), #059669);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-top: 20px;
            display: none;
            animation: slideInUp 0.5s ease-out;
        }

        .success-message.show {
            display: block;
        }

        /* Loading Animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Language Switcher Styles - Floating circular button at bottom */
        .language-switcher {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            background: rgba(168, 85, 247, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(168, 85, 247, 0.3);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            box-shadow: 0 8px 32px rgba(168, 85, 247, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 1rem;
        }

        .language-switcher:hover {
            transform: translateY(-3px) scale(1.05);
            background: rgba(168, 85, 247, 0.3);
            box-shadow: 0 12px 40px rgba(168, 85, 247, 0.4);
            border-color: rgba(168, 85, 247, 0.5);
        }

        .language-switcher i {
            display: none; /* Hide the globe icon to keep it clean */
        }

/* ==============================
   Theme Switcher Button Styles
   ============================== */
.theme-switcher {
    position: fixed;
    /* Place above the language switcher */
    bottom: 100px;
    right: 20px;
    z-index: 1000;
    background: rgba(168, 85, 247, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.theme-switcher:hover {
    transform: translateY(-3px) scale(1.05);
    background: rgba(168, 85, 247, 0.3);
    box-shadow: 0 12px 40px rgba(168, 85, 247, 0.4);
    border-color: rgba(168, 85, 247, 0.5);
}

/* Ensure the icon inside the theme switcher is always visible */
.theme-switcher i {
    display: inline-block;
}

/* Adjust the appearance of the theme switcher icon when using unicode symbols */
.theme-switcher span {
    font-size: 1.4rem;
    line-height: 1;
    display: inline-block;
}

/* ==============================
   Light Theme Variables
   ============================== */
.light-theme {
    --primary-glow-start: #c084fc;
    --primary-glow-end: #7dd3fc;
    --secondary-glow: #f9a8d4;
    --accent-glow: #fde047;
    --dark-bg: #f3f4f8;
    --card-bg: rgba(255, 255, 255, 0.6);
    --card-hover-bg: rgba(255, 255, 255, 0.8);
    --text-primary: #13141a;
    --text-secondary: #4a4a5a;
    --border-color: rgba(255, 255, 255, 0.4);
    --success-color: #16a34a;
    --warning-color: #f59e0b;
}

.light-theme body {
    background-color: var(--dark-bg);
    color: var(--text-primary);
}

.light-theme body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 80% 20%, rgba(125, 211, 252, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 50% 50%, rgba(249, 168, 212, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}

/* Ensure buttons remain legible on light backgrounds */
.light-theme .btn {
    color: #ffffff;
}

/* ==============================
   Portfolio A4 Gallery
   ============================== */

/* Display store portfolio images in three columns by default */
.a4-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Style portfolio images consistently with a responsive aspect ratio and subtle hover effect. */
.a4-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.a4-gallery img:hover {
    transform: scale(1.05);
}

/* Responsive adjustment: on small screens, display the A4 gallery in two columns */
@media (max-width: 768px) {
    .a4-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==============================
   Square Logo Portfolio Gallery
   ============================== */
.square-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.square-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: block;
}

.square-gallery img:hover {
    transform: scale(1.05);
}

/* Responsive: 2 columns on medium and small screens for square gallery */
@media (max-width: 768px) {
    .square-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

.a4-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Modal for enlarging store portfolio images */
.store-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.store-modal.show {
    display: flex;
}

.store-modal img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

.store-modal .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
}

        /* Multi-language content visibility */
        .lang-content {
            display: none;
        }

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

        /* RTL/LTR direction handling */
        html[dir="rtl"] {
            direction: rtl;
        }

        html[dir="ltr"] {
            direction: ltr;
        }

        html[dir="ltr"] .container {
            text-align: left;
        }

        html[dir="ltr"] .hero {
            text-align: center;
        }

        html[dir="ltr"] h2 {
            text-align: center;
        }

        html[dir="ltr"] .testimonial-card blockquote {
            border-left: 3px solid var(--primary-glow-start);
            border-right: none;
            padding-left: 20px;
            padding-right: 0;
        }

        html[dir="ltr"] .why-us-item i {
            margin-right: 15px;
            margin-left: 0;
        }

        html[dir="ltr"] .language-switcher {
            left: 20px;
            right: auto;
        }

/* In left‑to‑right layouts (English), move the theme switcher to the left as well so it stays grouped
   with the language switcher. Without this rule the two buttons end up on opposite sides of the screen. */
html[dir="ltr"] .theme-switcher {
    left: 20px;
    right: auto;
}

/* Override positioning for LTR to keep both the language and theme buttons grouped on the right.
   Without this override the language switcher would move to the left side while the theme
   switcher stays on the right, splitting them apart. */
html[dir="ltr"] .language-switcher,
html[dir="ltr"] .theme-switcher {
    right: 20px;
    left: auto;
}

        /* Enhanced Responsive Design */
        @media (max-width: 768px) {
            h1 { font-size: 2.5rem; }
            h2 { font-size: 2rem; }
            section { padding: 80px 0; }
            .hero { padding: 120px 0; }
            .contact-form { 
                margin: -80px auto 0 auto; 
                padding: 35px; 
            }
            .service-card, .why-us-item, .testimonial-card {
                padding: 30px;
            }
            .quick-service-item {
                padding: 30px 20px;
            }
            .btn {
                padding: 16px 35px;
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 15px;
            }
            .contact-form {
                padding: 25px;
            }
            .services-grid {
                grid-template-columns: 1fr;
            }
            .quick-services-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
        }

        /* Scroll animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

/* AI Chat Styles */
.ai-input {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    background-color: var(--dark-bg);
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1rem;
    resize: vertical;
    min-height: 100px;
}

/* ----- Custom: More Work Button ----- */
.more-work-button {
    text-align: center;
    margin-top: 40px;
}

.more-work-button .btn {
    padding: 14px 28px;
    font-size: 1rem;
    min-width: 160px;
}

/* ----- Custom: Gaming Banner Section ----- */
.gaming-banner {
    background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg));
    padding: 80px 20px;
    border-radius: 20px;
    text-align: center;
    margin: 80px auto;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
}
.gaming-banner h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 20px;
}
.gaming-banner p {
    margin: 0 auto 30px auto;
    max-width: 800px;
    color: var(--text-secondary);
    font-size: 1.2rem;
}
.gaming-banner .btn {
    margin-top: 20px;
}

/* ----- Success Modal Styles ----- */
/*
 * Success modal overlay
 *
 * Increase the opacity of the dark background and intensify the blur to
 * provide a stronger separation between the page and the modal content.
 * When the modal is displayed, the rest of the page appears blurred and
 * dimmed, drawing the user's focus to the popup.
 */
.success-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Darken the overlay and apply a heavier blur */
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.success-modal.show {
    display: flex;
}

/*
 * Modal content
 *
 * Set position relative so the close button can be absolutely positioned
 * relative to its container. Keep the glowing halo effect but adjust
 * the shadows for a softer, luminous appearance.
 */
.modal-content {
    position: relative;
    background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg));
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid var(--border-color);
    max-width: 600px;
    width: 90%;
    /* Glowing halo around the modal */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(168, 85, 247, 0.4),
                0 0 60px rgba(6, 182, 212, 0.3);
}

.modal-content p {
    margin-bottom: 25px;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.modal-content .modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

/* Telegram and WhatsApp button gradients */
.telegram-btn {
    background: linear-gradient(135deg, #00b5d4, #00aaff);
    color: #fff;
}
.whatsapp-btn {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
}

.modal-content .btn {
    min-width: 180px;
    height: auto;
    padding: 14px 24px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-ok-btn {
    background: linear-gradient(135deg, var(--primary-glow-start), var(--primary-glow-end));
    color: var(--text-primary);
    border: none;
    border-radius: 50px;
    padding: 14px 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Use a lighter weight for testimonial authors to align with thin design */
    font-weight: 300; 
}
.modal-ok-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4), 0 0 50px rgba(6, 182, 212, 0.3);
}

/* Success icon inside the modal */
.success-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--primary-glow-start), var(--primary-glow-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Close button inside the success modal */
/*
 * Close button styles
 *
 * Place the button in the top-left of the modal content, enlarge it
 * slightly and use the primary gradient colors to make it stand out.
 */
.modal-close-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    background: transparent;
    border: none;
    color: var(--primary-glow-end);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease;
}
.modal-close-btn:hover {
    color: var(--primary-glow-start);
}

.ai-response {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg));
    border-radius: 10px;
    border: 1px solid var(--border-color);
    min-height: 80px;
    white-space: pre-line;
    color: var(--text-primary);
}

/* ------------------------------------------------------------------ */
/* Projects page styles                                             */
/*
 * The "our works" page displays a grid of projects. Each project
 * consists of four thumbnail images arranged in a 2x2 grid with a
 * caption beneath. When viewed on larger screens, the projects are
 * displayed three per row; on smaller screens they stack vertically.
 * A modal overlay allows users to view a larger version of the
 * project images and switch between them.
 */

/* Hero background specific to the projects page */
.projects-hero {
    /* Overlay the hero image with a dark gradient to ensure text legibility */
    background: linear-gradient(135deg, rgba(15, 15, 18, 0.9), rgba(15, 15, 18, 0.7)),
                url('images/projects/projects cover images.jpg') no-repeat center center/cover;
}

/* Projects section */
.projects-section h2 {
    text-align: center;
    margin-bottom: 40px;
}

/* Grid for projects */
.projects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

/* Individual project item */
.project-item {
    background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg));
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    width: calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* Container for the four images of a project */
.project-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}

.project-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-images img:hover {
    transform: scale(1.05);
}

.project-item h3 {
    margin-top: 15px;
    font-size: 1.1rem;
    color: var(--text-primary);
    text-align: center;
}

/* Responsive adjustments for projects grid */
@media (max-width: 991px) {
    .project-item {
        width: calc(50% - 20px);
    }
}

/* ================================================================
   Light Theme Hero Adjustments
   When the site is in light mode (light-theme class on the <html>), the
   dark overlay used on hero background images can make dark text
   illegible. The following overrides replace the dark overlay with a
   semi‑transparent white gradient and adjust the fade‑out gradients at
   the bottom of hero sections to blend smoothly into the light page
   background. These rules apply to the main hero and all service
   page hero sections (projects, store, logo) as well as the smaller
   hero headers.  Keeping the images intact ensures the visual
   identity remains consistent while improving contrast for dark
   typography.
================================================================ */

/* Light theme: use a light overlay on the main hero image */
.light-theme .hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)),
                url('images/hero.jpg') no-repeat center center/cover;
}

/* Light theme: soften the decorative gradient overlay on the main hero
 *
 * The ::before pseudo‑element on each hero section draws a subtle
 * colored gradient that adds depth and interest on dark backgrounds. In
 * light mode this layer can appear too dark, making the header text
 * hard to read. To address this, we override the gradient colors with
 * lower opacity and lighter hues when the `light-theme` class is applied
 * to the <html> element. This change applies to all hero variants so
 * that every banner on the site uses a pale, washed‑out overlay in
 * light mode.
 */
.light-theme .hero::before,
.light-theme .projects-hero::before,
.light-theme .store-hero::before,
.light-theme .logo-hero::before {
    background: linear-gradient(45deg, rgba(168, 85, 247, 0.05), rgba(6, 182, 212, 0.05));
}

/* Light theme: projects page hero overlay */
.light-theme .projects-hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)),
                url('images/projects/projects cover images.jpg') no-repeat center center/cover;
}

/* Light theme: store design page hero overlay */
.light-theme .store-hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)),
                url('images/projects/store_cover.jpg') no-repeat center center/cover;
}

/* Light theme: logo design page hero overlay */
.light-theme .logo-hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)),
                url('images/projects/logo_cover.jpg') no-repeat center center/cover;
}

/* Light theme: adjust fade‑out gradient on all hero sections to blend into light backgrounds */
.light-theme .hero::after,
.light-theme .hero-small::after,
.light-theme .projects-hero::after,
.light-theme .store-hero::after,
.light-theme .logo-hero::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f7f7f9);
}

@media (max-width: 600px) {
    .project-item {
        /* On small screens show two items side-by-side instead of one.
           Slightly reduce the subtraction to account for the gap between items so
           both cards fit comfortably on narrow viewports. */
        width: calc(50% - 15px);
    }
}

/* Modal for project images */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.project-modal.show {
    display: flex;
}

.project-modal-content {
    background: linear-gradient(135deg, var(--card-bg), var(--card-hover-bg));
    padding: 30px;
    border-radius: 15px;
    max-width: 90%;
    width: 700px;
    position: relative;
    /* Soften and clarify the glow around the modal content box.
       Reduced the dark drop shadow and increased the spread/brightness of the coloured glows
       for a more subtle yet defined effect. */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(168, 85, 247, 0.5),
                0 0 80px rgba(6, 182, 212, 0.4);
}

/* Close button styling for project modal */
.project-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid #ef4444;
    color: #ef4444;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
    /* Convert the close control from a circular icon to a rectangular button with text.
       Use padding and flexible sizing to accommodate the label, remove the full border radius,
       and center the text. */
    min-width: 60px;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    /* Use a lighter weight for the modal close button text */
    font-weight: 300;
}

.project-modal-close:hover {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.1);
}

/* Large image inside modal */
#project-modal-large {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    object-fit: contain;
}

/* Thumbnails container */
.project-modal-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.project-modal-thumbnails img {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-modal-thumbnails img:hover {
    opacity: 1;
    transform: scale(1.05);
}

.project-modal-thumbnails img.active {
    opacity: 1;
    border: 2px solid var(--primary-glow-end);
}

/* ------------------------------------------------------------------ */
/* Additional styles for the project modal header, title and actions    */
/* These definitions ensure the project name and buttons in the modal   */
/* are properly aligned and sized, and that the small buttons use the  */
/* existing gradient colours while being more compact.                  */

/* Header inside project modal: holds the title and close button */
.project-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/* Title styling for project modal */
.project-modal-title {
    color: var(--text-primary);
    font-size: 1.4rem;
    margin: 0;
    flex: 1;
    text-align: center;
}

/* Action buttons container in project modal */
.project-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

/* Smaller variant of the gradient buttons for modal actions */
.btn-small {
    min-width: 50px;
    padding: 8px 12px;
    font-size: 0.75rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Navbar Hover Effect */
.nav-links li a {
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-links li a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-glow-start);
    transition: width 0.3s ease;
}

.nav-links li a:hover {
    color: var(--primary-glow-start);
    transform: scale(1.05);
}

.nav-links li a:hover::before {
    width: 100%;
}

/* Animated Portfolio Link */
.portfolio-link {
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, var(--primary-glow-start), var(--primary-glow-end), var(--primary-glow-start));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 3s linear infinite;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/*
 * Redesigned navigation bar with pill‑shaped menu items.
 * This styling introduces a semi‑transparent bar behind the navigation links
 * and gives each link a rounded pill appearance. The active page and
 * hovered items receive a vibrant gradient background to stand out. The
 * changes below override the previous underline hover effect and scale
 * transformations to achieve the new look seen in the provided mockup.
 */

/* Simple navigation bar positioned at the top of the page */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--dark-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}

/* Container for navigation links with standard layout */
.navbar .nav-links {
    display: flex;
    gap: 30px;
    padding: 0;
    align-items: center;
    list-style: none;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Remove default list styling for nav items */
.navbar .nav-links li {
    list-style: none;
}

/* Simple styling for navigation links */
.navbar .nav-links li a {
    display: block;
    padding: 10px 20px;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    /* Use a lighter weight for navigation links to match the thin typographic style */
    font-weight: 300;
    transition: all 0.3s ease;
    background: transparent;
    border: 1px solid transparent;
}

/* Remove any pseudo elements */
.navbar .nav-links li a::before {
    display: none;
}

/* Hover effect for navigation links */
.navbar .nav-links li a:hover {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
    transform: translateY(-2px);
}

/* Active link styling */
.navbar .nav-links li a.active {
    background: linear-gradient(135deg, var(--primary-glow-start), var(--primary-glow-end));
    color: #ffffff;
    border: none;
}

.portfolio-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    padding: 2px; /* Border thickness */
    background: linear-gradient(90deg, var(--primary-glow-start), var(--primary-glow-end));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pulse-glow 2s infinite alternate;
}

.portfolio-link:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

/* Mobile responsive navigation */
@media (max-width: 768px) {
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--dark-bg);
        border-bottom: 1px solid var(--border-color);
        padding: 10px 0;
    }
    
    .navbar .nav-links {
        gap: 15px;
        padding: 0 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .navbar .nav-links li a {
        padding: 8px 15px;
        font-size: 0.9rem;
        min-width: auto;
        white-space: nowrap;
    }
}

/* Adjust hero sections padding for the new fixed navbar */
.hero,
.hero-small,
.projects-hero {
    padding-top: calc(150px + 80px); /* original 150px plus space for fixed navbar */
}

/* Adjust secondary hero sections */
.hero-small,
.projects-hero,
.store-hero,
.logo-hero {
    padding-bottom: 140px;
    padding-top: 180px; /* Reduced since navbar is now fixed at top */
}

@media (max-width: 768px) {
    /* Mobile adjustments for hero sections */
    .hero,
    .hero-small,
    .projects-hero {
        padding-top: calc(150px + 60px); /* Adjust for mobile navbar height */
    }
    
    .hero-small,
    .projects-hero,
    .store-hero,
    .logo-hero {
        padding-top: 160px;
    }
}

/*
 * Custom cover backgrounds for the service pages.
 * The store design and logo design pages reuse the projects cover art but
 * reference their own file names. To change a cover simply replace
 * `store_cover.jpg` or `logo_cover.jpg` inside the images/projects folder.
 */
.store-hero {
    background: linear-gradient(135deg, rgba(15, 15, 18, 0.9), rgba(15, 15, 18, 0.7)),
                url('images/projects/store_cover.jpg') no-repeat center center/cover;
}

.logo-hero {
    background: linear-gradient(135deg, rgba(15, 15, 18, 0.9), rgba(15, 15, 18, 0.7)),
                url('images/projects/logo_cover.jpg') no-repeat center center/cover;
}

/*
 * Apply a fade‑out gradient to the bottoms of all "small" hero sections so that
 * their background images blend smoothly into the dark page background. Without
 * this, the cover images end abruptly and create a hard edge. We also ensure
 * these sections establish a new stacking context to contain the gradient.
 */
.hero-small,
.projects-hero,
.store-hero,
.logo-hero {
    position: relative;
    overflow: hidden;
}

.hero-small::after,
.projects-hero::after,
.store-hero::after,
.logo-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(10, 10, 15, 0), var(--dark-bg));
    pointer-events: none;
    z-index: 1;
}

/*
 * Redesigned contact buttons below the forms. The buttons stretch to
 * fill the available space, display their icon and label side by side and
 * collapse into a stacked column on small screens. The colours are
 * overridden for WhatsApp and Telegram to match their brand palettes.
 */
.contact-buttons {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.contact-buttons a.btn {
    /* Size the contact buttons based on their content rather than forcing
       them to fill the row. This prevents oversized buttons on small
       screens and keeps the design consistent across languages. */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 1rem;
    /* Use a lighter weight for contact button text */
    font-weight: 300;
    gap: 8px;
    border-radius: 40px;
    text-align: center;
}

/* Override base gradient for specific contact channels */
.contact-buttons a.telegram-btn {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: #ffffff;
}

.contact-buttons a.whatsapp-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
}

@media (max-width: 768px) {
    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }
    .contact-buttons a.btn {
        /* Stack vertically but keep natural width; center them */
        margin-bottom: 12px;
        font-size: 0.95rem;
    }
    .contact-buttons a.btn:last-child {
        margin-bottom: 0;
    }
}

/* Further reduce button sizing on very small screens to prevent oversized buttons */
@media (max-width: 480px) {
    .contact-buttons a.btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
}

/*
 * Project modal call-to-action bar. Appears at the bottom of the
 * modal beneath the thumbnails. It provides quick links to
 * Telegram/WhatsApp along with a call‑to‑action text. The links and
 * text are laid out horizontally on larger screens and vertically
 * stacked on narrow screens.
 */
.project-modal-cta {
    margin-top: 20px;
    background: linear-gradient(135deg, var(--primary-glow-start), var(--primary-glow-end));
    border-radius: 15px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
    transition: all 0.3s ease;
}

.project-modal-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(168, 85, 247, 0.4);
}

.project-modal-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-decoration: none;
}

.project-modal-cta a:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.project-modal-cta span {
    /* Lighter weight for CTA text to maintain uniformity with other text elements */
    font-weight: 300;
    font-size: 1.1rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Telegram icon color */
.project-modal-cta .fa-telegram-plane {
    color: #ffffff;
}

/* WhatsApp icon color */
.project-modal-cta .fa-whatsapp {
    color: #ffffff;
}

/*
 * CTA icons in the project modal: styled as circular buttons with
 * white background overlay on the gradient
 */
.project-modal-cta .cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.project-modal-cta .cta-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/*
 * Action area below the CTA: provides a unified button to close the
 * modal and return to the projects section. Align center and use
 * existing button styles for consistency.
 */
.project-modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.project-modal-actions .btn {
    width: auto;
    padding: 12px 24px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 480px) {
    .project-modal-cta {
        flex-direction: column;
        gap: 8px;
    }
    .project-modal-cta a {
        width: auto;
        height: auto;
        font-size: 1.3rem;
        margin-left: 8px;
    }
    .project-modal-cta span {
        text-align: center;
        font-size: 0.85rem;
    }
}

/*
 * Global footer styling. The new footer contains a description, quick
 * links and social/contact icons. It uses the same dark card
 * background and gentle borders as the rest of the site and supports
 * both Arabic and English via lang-content classes.
 */
footer.site-footer {
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    padding: 60px 0 20px;
    margin-top: 100px;
}

footer.site-footer .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
}

footer.site-footer .footer-description {
    max-width: 400px;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

footer.site-footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
footer.site-footer .footer-links ul li {
    margin-bottom: 12px;
}
footer.site-footer .footer-links ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 1rem;

    /* Ensure quick links are clearly clickable.
       Without this some browsers may treat the text as plain since it inherits no pointer or cursor styles. */
    cursor: pointer;
    pointer-events: auto;
}
footer.site-footer .footer-links ul li a:hover {
    color: var(--primary-glow-start);
}

footer.site-footer .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    border-radius: 50%;
    /* Use a subtle semi‑transparent background with no border so the icon doesn’t appear underlined */
    background: rgba(255, 255, 255, 0.08);
    border: none;
    /* Use the primary text colour so icons are visible in both dark and light themes */
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-size: 1.2rem;
    text-decoration: none;
}
footer.site-footer .footer-social a:hover {
    /* On hover, fill the button with our gradient and emit a soft glow */
    background: linear-gradient(135deg, var(--primary-glow-start), var(--primary-glow-end));
    color: #ffffff;
    box-shadow: 0 0 10px var(--primary-glow-start), 0 0 20px var(--primary-glow-end);
    transform: translateY(-3px);
}

footer.site-footer .footer-bottom {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

@media (max-width: 768px) {
    footer.site-footer .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    footer.site-footer .footer-description {
        max-width: 100%;
    }
}