/* CSS Variables */
:root {
    --primary-color: #1565C0;
    /* Deep Blue */
    --primary-light: #1E88E5;
    /* Lighter Blue */
    --accent-color: #FFD700;
    /* Gold */
    --text-dark: #1F2937;
    /* Dark Gray */
    --text-light: #6B7280;
    /* Light Gray */
    --white: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.5);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --font-main: 'Tajawal', sans-serif;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #f3f6f9;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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

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

/* Utilities */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(21, 101, 192, 0.3);
}

.btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
}

.btn-whatsapp {
    background: #25D366;
    color: var(--white);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
    background: #20BA5A;
    transform: translateY(-2px);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px;
    transition: transform 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
}

/* Header */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    transition: all 0.3s ease;
}

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

.logo h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
}

.desktop-nav ul {
    display: flex;
    gap: 30px;
}

.desktop-nav a {
    font-weight: 500;
    color: var(--text-dark);
    transition: color 0.3s ease;
    position: relative;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--primary-color);
}

/* Hero Section */
#hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    /* Moved content to bottom */
    overflow: hidden;
    margin-top: 0;
    /* Since header is fixed */
    padding-bottom: 80px;
    /* Spacing from bottom edge */
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Soften the bottom edge */
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* More transparent "watery" effect */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* Mask to make center clear and edges glassy */
    -webkit-mask-image: radial-gradient(circle at center, transparent 30%, black 100%);
    mask-image: radial-gradient(circle at center, transparent 30%, black 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin-right: 0;
    /* RTL alignment */
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 16px;
    margin-top: 32px;
    /* Added spacing from buttons */
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    /* Added spacing below buttons */
}

/* Animations */
.animate-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

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

/* Features Section */
#features {
    padding: 60px 0;
    margin-top: -80px;
    /* Pull up over hero */
    position: relative;
    z-index: 2;
}

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

.feature-card {
    text-align: center;
    padding: 30px 20px;
    background: var(--white);
}

.feature-card i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 16px;
}

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

/* Services Section */
#services {
    padding: 80px 0;
    background-color: #f9fafb;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.section-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

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

.service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    border-top: 4px solid transparent;
    transition: all 0.3s ease;
}

.service-card:hover {
    border-top-color: var(--primary-color);
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(21, 101, 192, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.icon-wrapper i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

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

.service-card p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 0.95rem;
    flex-grow: 1;
}

.service-link {
    color: var(--primary-color);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: gap 0.2s ease;
}

.service-link:hover {
    gap: 12px;
}

/* Brands Section (Marquee) */
#brands {
    padding: 60px 0;
    background-color: var(--white);
    text-align: center;
    overflow: hidden;
}

.brands-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Fade effect on sides */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.brands-wrapper {
    display: flex;
    gap: 40px;
    padding: 20px 0;
    width: max-content;
    animation: scroll 30s linear infinite;
    /* Ensure it doesn't wrap */
    flex-wrap: nowrap;
}

.brand-logo {
    width: 300px;
    height: 180px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background-color: transparent;
    padding: 15px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
        /* Move right (since it's RTL context, or check direction) */
        /* Actually, for infinite scroll it's usually 0 to -50% or -50% to 0 depending on direction. 
           Since it's RTL page (dir="rtl"), standard negative translate might behave differently?
           Usually translateX(-50%) moves left. 
           Let's try standard sliding left. 
           If the items are [1...10][1...10], moving -50% shows the second set.
        */
        transform: translateX(50%);
        /* In RTL, positive runs left to right? or elements are laid out right to left?
           flex-direction is row by default. 
           In dir="rtl", 1st item is on Right. 
           So scrolling should probably move from Right to Left to show next items?
           TranslateX(50%) moves it to the Right. 
           TranslateX(-50%) moves it to the Left.
           If items start on the Right, valid content is to the Left. We want to slide content to the Right to show what is on the Left?
           
           Wait, flex container in RTL:
           [Item 1] [Item 2] ... [Item 10] (Right to Left)
           
           The user sees Item 1. Item 2 is to the left of Item 1.
           So to reveal Item 2, we need to push everything to the Right (translateX > 0).
           
           So 0 -> 50% should be correct for RTL infinite scroll if we duplicated the set.
        */
    }
}

.brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-logo:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    animation-play-state: paused;
    /* Pause rotation on hover */
}



/* Contact Section */
#contact {
    padding: 80px 0;
    background-color: #f3f6f9;
}

.contact-container {
    display: flex;
    justify-content: center;
}

.contact-info {
    width: 100%;
    max-width: 600px;
    background: var(--white);
}

.contact-info h2 {
    color: var(--primary-color);
    margin-bottom: 30px;
    text-align: center;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.contact-item i {
    font-size: 1.25rem;
    color: var(--primary-color);
    background: rgba(21, 101, 192, 0.1);
    padding: 12px;
    border-radius: 50%;
}

.contact-item h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.contact-item p,
.contact-item a {
    color: var(--text-light);
}

.full-width {
    width: 100%;
    margin-top: 20px;
}

/* Footer */
footer {
    background: var(--primary-color);
    color: var(--white);
    text-align: center;
    padding: 30px 0;
}

/* Floating WhatsApp */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
}

/* Mobile Responsive */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary-color);
    cursor: pointer;
}

.mobile-nav {
    display: none;
    background: white;
    padding: 20px;
    border-top: 1px solid #eee;
}

.mobile-nav ul {
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .mobile-nav.active {
        display: block;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-bg {
        /* Make hero image centered on mobile */
        width: 100%;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.5) 100%);
    }

    .hero-content {
        padding-top: 80px;
        text-align: center;
        margin: 0 auto;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        /* Constrain width slightly */
        margin: 0 auto;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        /* Full width buttons */
    }

    #features {
        margin-top: 0;
        padding-top: 30px;
    }

    /* Reduce section padding */
    section {
        padding: 40px 0 !important;
    }

    /* Brands Mobile Grid 2x2 */
    .brands-wrapper {
        gap: 15px;
        padding: 10px;
        /* Ensure horizontal flow for marquee */
        display: flex;
    }

    .brand-logo {
        /* Fixed width for marquee items on mobile */
        width: 240px;
        height: 160px;
    }
}