/* ================= VARIABLES ================= */
:root {
    --color-text-primary: #000000;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9f9f9;
    --color-bg-footer: #fafafa;
    --color-text-footer: #333333;
    --font-main: 'Inter', sans-serif;
}

/* ================= RESET & GLOBAL ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 150px; /* Offset for sticky header */
}

body {
    font-family: var(--font-main);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* Typography Utilities */
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

/* ================= HEADER STYLES (Desktop) ================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 60px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: transparent;
    transition: background 0.3s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header.hide-up {
    transform: translateY(-100%);
}

.logo {
    height: 80px;
    width: auto;
    display: block;
}

/* DESKTOP NAV: Horizontal */
.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 50px;
    opacity: 1;
    pointer-events: all;
    background: transparent;
    height: auto;
    width: auto;
}

.nav-item {
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease;
    opacity: 0.7;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

.nav-item:hover,
.nav-item.active,
.dropdown-trigger:hover {
    opacity: 1;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: black;
}

/* Dropdown Navigation Styles (Desktop) */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
}

.nav-dropdown:hover .dropdown-trigger svg {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #ffffff;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1000;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(15px);
}

/* Bridge for hover */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
}

.dropdown-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.2s;
    white-space: nowrap;
}

.dropdown-link:hover {
    background-color: #f5f5f5;
    color: #000;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
}

/* Header Action Button */
/* 1. The Normal Button */
.order-btn {
    text-decoration: none !important; /* REMOVES THE BLACK LINE */
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid #1da1f2;
    padding: 10px 20px;
    border-radius: 50px;
    
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

/* 2. The Hover Effect */
.order-btn:hover {
    background-color: #1da1f2 !important;
    color: #ffffff !important;
    border-color: #1da1f2 !important;
    text-decoration: none !important; /* Ensures the line doesn't appear when you hover */
}

/* Mobile Button */
.mobile-menu-btn {
    display: none;
}

/* ================= HERO SECTION ================= */
.hero-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 80px;
    background-image: url('imgs/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    height: 100vh;
}

.hero-section.internal-hero {
    height: 60vh;
    min-height: 450px;
}

.hero-subtitle {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: 0.6;
}

.hero-title {
    font-size: 64px;
    font-weight: 600;
    margin-bottom: 32px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.section-text {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

.deposit-text {
    margin-top: 20px;
    font-size: 12px;
    opacity: 0.5;
}

.btn-primary {
    display: inline-block;
    background-color:#1da1f2;
    color: var(--color-bg-primary);
    padding: 18px 48px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ================= SHARED SECTION STYLES ================= */
main {
    flex: 1;
    min-height: 80vh;
}

.content-section, .trust-section, .work-section, .method-section, .reviews-section, .impact-section, .process-section, .faq-section, .contact-section {
    width: 100%;
}

.content-section {
    padding: 120px 60px;
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
.content-section:nth-child(even) { background-color: var(--color-bg-secondary); }

.content-section .section-title { margin-bottom: 24px; font-size: 36px; letter-spacing: -0.5px; }
.content-section .section-text { margin: 0 0 40px 0; text-align: left; }

.service-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 100px;
}

.service-text-col { flex: 1; text-align: left; order: 1; }
.service-media-col { flex: 1; order: 2; position: relative; height: 450px; width: 100%; overflow: hidden; border-radius: 8px; }

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s ease, transform 0.5s ease;
}
.service-media-col:hover .service-img { transform: scale(1.03); }

.service-icon { margin-bottom: 24px; color: var(--color-text-primary); opacity: 0.8; }

.content-section:nth-child(even) .service-text-col { order: 2; }
.content-section:nth-child(even) .service-media-col { order: 1; }

.service-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 24px;
    position: relative;
}

.btn-small {
    display: inline-block;
    background-color: #1da1f2; /* Changed to Blue */
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.btn-small:hover { 
    background-color: #0c85d0; /* Slightly darker blue on hover */
    transform: translateY(-2px); 
}

/* ================= COMPONENT STYLES ================= */

/* Services Nav (Sticky) */
.services-nav.stick-top {
    top: 0 !important;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.services-nav {
    transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Learn More Dropdown */
.learn-more-dropdown { position: relative; display: block; margin-top: 10px; }
.learn-more-dropdown summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-primary); display: inline-block; padding: 10px 0; opacity: 0.6; transition: opacity 0.3s ease; }
.learn-more-dropdown summary:hover { opacity: 1; text-decoration: underline; }
.learn-more-dropdown summary::-webkit-details-marker { display: none; }
.toggle-icon { display: none; }

.learn-more-dropdown .dropdown-content {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    margin-top: 15px;
    width: 320px; /* Fixed width */
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: 1px solid #eee;
    z-index: 100;
    pointer-events: none;
}

.learn-more-dropdown[open] .dropdown-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.learn-more-dropdown .dropdown-content ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.learn-more-dropdown .dropdown-content li {
    font-size: 14px;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    font-weight: 400;
}
.learn-more-dropdown .dropdown-content li:last-child { border-bottom: none; padding-bottom: 0; }
.learn-more-dropdown .dropdown-content li::before { content: "•"; color: black; font-weight: bold; display: inline-block; width: 15px; margin-left: -5px; }

/* Trust Section */
.trust-section { padding: 60px 24px; border-bottom: 1px solid rgba(0,0,0,0.05); text-align: center; }
.trust-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #888; margin-bottom: 40px; text-transform: uppercase; }
.logo-grid { display: flex; justify-content: center; align-items: center; gap: 40px 60px; flex-wrap: wrap; opacity: 0.5; max-width: 1000px; margin: 0 auto; }
.client-logo { height: 35px; width: auto; opacity: 0.5; transition: all 0.3s ease; cursor: pointer; }
.client-logo:hover { opacity: 1; transform: translateY(-2px); }

/* Work Section */
.work-section { padding: 120px 60px; background-color: var(--color-bg-primary); }
.work-container { max-width: 1200px; margin: 0 auto; }
.work-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
.work-link { text-decoration: none; color: var(--color-text-primary); font-size: 14px; font-weight: 500; border-bottom: 1px solid #000; padding-bottom: 2px; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.work-img-wrap { width: 100%; height: 500px; overflow: hidden; border-radius: 4px; margin-bottom: 20px; background-color: #f0f0f0; }
.work-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.work-card:hover .work-img { transform: scale(1.03); }
.work-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 5px; }
.work-info p { font-size: 14px; color: #666; }

/* Method Section */
.method-section { padding: 120px 60px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.method-container { max-width: 1200px; margin: 0 auto; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.method-step { padding-right: 20px; }
.step-number { display: block; font-size: 12px; font-weight: 700; color: #888; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.method-step h3 { font-size: 24px; font-weight: 600; margin-bottom: 15px; }
.method-step p { font-size: 16px; color: #555; line-height: 1.6; }

/* Reviews Section */
.reviews-section { padding: 120px 60px; background-color: var(--color-bg-secondary); }
.reviews-container { max-width: 1200px; margin: 0 auto; }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.review-text { font-size: 24px; line-height: 1.4; font-weight: 500; margin-bottom: 30px; }
.review-author strong { display: block; margin-bottom: 4px; }
.review-author span { color: #666; font-size: 14px; }

/* Impact Section */
.impact-section { padding: 60px 24px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.impact-grid { display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; gap: 40px; }
.impact-item { text-align: center; }
.impact-number { display: block; font-size: 36px; font-weight: 700; margin-bottom: 5px; }
.impact-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; }

/* Process Section */
.process-section { padding: 120px 24px; background-color: var(--color-bg-secondary); }
.process-steps { display: flex; justify-content: space-between; gap: 40px; margin-top: 60px; flex-wrap: wrap; }
.step { flex: 1; min-width: 200px; text-align: center; }
.step-icon { font-size: 18px; font-weight: 700; border: 1px solid #000; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; }
.step h3 { margin-bottom: 10px; font-size: 18px; }
.step p { font-size: 14px; opacity: 0.7; line-height: 1.5; }

/* FAQ Section */
.faq-section { padding: 120px 24px; }
.faq-grid { max-width: 800px; margin: 0 auto; height: 450px; overflow-y: auto; padding-right: 15px; border: 1px solid #eee; border-radius: 12px; padding: 20px; background-color: #fff; }
.faq-grid::-webkit-scrollbar { width: 6px; }
.faq-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.faq-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 20px; padding-bottom: 20px; }
.faq-item summary { font-size: 18px; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-content { margin-top: 15px; font-size: 15px; line-height: 1.6; opacity: 0.7; padding-right: 40px; }

/* About Page Styles */
.story-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; max-width: 1200px; margin: 0 auto; }
.story-right .section-text { margin-bottom: 30px; font-size: 20px; line-height: 1.6; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.team-img-wrapper { width: 100%; aspect-ratio: 3/4; overflow: hidden; border-radius: 4px; margin-bottom: 20px; background-color: #f0f0f0; }
.team-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.team-card:hover .team-img { transform: scale(1.03); }
.team-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.team-info p { font-size: 14px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; max-width: 1200px; margin: 0 auto; text-align: center; }
.value-item h3 { font-size: 24px; margin-bottom: 20px; }
.value-item p { font-size: 16px; opacity: 0.7; line-height: 1.6; }

/* Contact Page Styles */
.contact-section { padding: 100px 60px; background-color: var(--color-bg-primary); min-height: 60vh; }
.contact-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: 100px; }
.info-block { margin-bottom: 60px; }
.info-block h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; opacity: 0.5; font-weight: 700; }
.info-block p { font-size: 20px; font-weight: 500; margin-bottom: 10px; line-height: 1.4; }
.contact-link { font-size: 18px; text-decoration: none; color: var(--color-text-primary); border-bottom: 1px solid rgba(0,0,0,0.2); transition: all 0.2s ease; }
.contact-link:hover { border-color: black; opacity: 0.7; }
.minimal-form { display: flex; flex-direction: column; gap: 40px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.form-group { display: flex; flex-direction: column; position: relative; }
.form-group label { font-size: 12px; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; opacity: 0.6; }
.minimal-form input, .minimal-form textarea, .minimal-form select { background: transparent; border: none; border-bottom: 1px solid rgba(0,0,0,0.2); padding: 10px 0; font-size: 18px; font-family: 'Inter', sans-serif; color: var(--color-text-primary); border-radius: 0; transition: border-color 0.3s ease; outline: none; }
.minimal-form input:focus, .minimal-form textarea:focus, .minimal-form select:focus { border-bottom-color: black; }
.minimal-form textarea { resize: vertical; }
.submit-btn { align-self: flex-start; margin-top: 20px; background-color: black; color: white; border: none; }
.submit-btn:hover { background-color: #333; transform: translateY(-2px); }

/* Custom Dropdown (Form) */
.custom-select-container { position: relative; display: flex; flex-direction: column; }
.custom-select-wrapper { position: relative; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.custom-select-trigger { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.2); font-size: 18px; color: var(--color-text-primary); transition: border-color 0.3s ease; }
.custom-select-wrapper:hover .custom-select-trigger, .custom-select-wrapper.open .custom-select-trigger { border-bottom-color: black; }
.trigger-arrow { transition: transform 0.3s ease; opacity: 0.5; }
.custom-select-wrapper.open .trigger-arrow { transform: rotate(180deg); opacity: 1; }
.custom-options { position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 15px 30px rgba(0,0,0,0.1); z-index: 100; margin-top: 10px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 4px; padding: 8px 0; }
.custom-select-wrapper.open .custom-options { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-option { padding: 12px 20px; font-size: 15px; color: #555; cursor: pointer; transition: background 0.2s, color 0.2s; }
.custom-option:hover { background-color: #f9f9f9; color: black; }
.custom-option.selected { color: black; font-weight: 600; background-color: #f5f5f5; }

/* Final CTA */
.final-cta { background-color: #000000; color: #ffffff; padding: 140px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cta-title { font-size: 48px; font-weight: 500; margin-bottom: 20px; letter-spacing: -1px; }
.cta-text { font-size: 18px; opacity: 0.7; margin-bottom: 40px; }

/* Footer */
.site-footer { background-color: var(--color-bg-footer); color: var(--color-text-footer); padding: 80px 60px 40px; font-size: 14px; position: relative; margin-top: auto; }
.footer-content-wrapper { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 80px; flex-wrap: wrap; gap: 60px; }
.footer-branding { flex: 1; min-width: 200px; }
.footer-logo { height: 40px; width: auto; opacity: 0.9; }
.footer-links-grid { flex: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.footer-heading { font-size: 11px; margin-bottom: 20px; opacity: 0.4; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.footer-link { display: block; text-decoration: none; color: var(--color-text-footer); margin-bottom: 12px; transition: opacity 0.2s ease; }
.footer-link:hover { opacity: 0.6; }
.footer-bottom { font-size: 12px; opacity: 0.4; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 30px; display: flex; justify-content: space-between; }

/* Page Transitions */
#page-content { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#page-content.fade-in { opacity: 1; transform: translateY(0); }
#page-content.fade-out { opacity: 0; transform: translateY(-20px); }

/* ================================================================= */
/* ================= MOBILE RESPONSIVENESS ================= */
/* ================================================================= */

@media (max-width: 900px) {
    /* 1. Mobile Menu (Clean, Flat, Centered) */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        
        padding-top: 100px; /* Space for close button */
        padding-bottom: 50px;
        gap: 0; 
        z-index: 999;
        
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    .nav-links.active {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    /* 2. Main Nav Items */
    .nav-item {
        font-size: 24px;
        font-weight: 700;
        color: #000;
        opacity: 1;
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
        display: block;
        text-transform: none; /* Optional: Remove uppercase */
    }

    /* 3. Handle Dropdowns (Flatten them) */
    .nav-dropdown {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    /* Hide the parent trigger (e.g. "Playground") */
    .dropdown-trigger {
        display: none !important; 
    }

    /* Show links directly */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; 
    }

    /* Style sub-links to look like main links */
    .dropdown-link {
        font-size: 20px; 
        font-weight: 500;
        color: #555;
        padding: 5px 0;
        width: 100%;
        text-align: center;
        border: none;
        display: block;
    }
    
    /* Separator line between groups */
    .nav-dropdown::after {
        content: '';
        display: block;
        width: 40px;
        height: 2px;
        background: #eee;
        margin: 20px auto;
    }
    
    .nav-dropdown:last-child::after { display: none; }

    /* Hide dots in mobile menu */
    .dropdown-link .dot {
        display: none;
    }

    /* 4. Layout Fixes */
    .header { padding: 15px 20px; background: #ffffff; }
    .logo { height: 32px; }
    
    .mobile-menu-btn {
        display: block !important;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1000;
        padding: 5px;
    }
    
    .header-actions { display: none; }

    /* General Page Fixes */
    .hero-title { font-size: 36px; }
    .content-section, .work-section, .trust-section, .final-cta, .reviews-section, .impact-section, .process-section, .faq-section, .contact-section { padding: 60px 20px; }
    
    .service-grid, .story-grid, .values-grid, .method-grid, .reviews-grid, .impact-grid, .contact-container, .form-row, .calc-container, .project-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
        display: flex;
        flex-direction: column;
    }
    
    .service-text-col { order: 2 !important; text-align: center; }
    .service-media-col { order: 1 !important; height: 300px; width: 100%; }
    .content-section .section-text { margin: 0 auto 30px auto; text-align: center; }
    .service-actions { justify-content: center; }
    .work-grid, .team-grid { grid-template-columns: 1fr !important; }
    .work-img-wrap, .team-img-wrapper { height: 350px; }
    .work-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .footer-content-wrapper { flex-direction: column; gap: 40px; }
    .footer-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
    .result-card { position: static; }
    .client-logo { height: 28px; }
    .logo-grid { gap: 2rem; }
}

/* ================= FOOTER STYLES (Fixed Alignment) ================= */
.site-footer {
    background-color: var(--color-bg-footer);
    color: var(--color-text-footer);
    padding: 80px 60px 40px;
    font-size: 14px;
    position: relative;
    margin-top: auto;
}

.footer-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
    flex-wrap: wrap;
    gap: 60px;
}

.footer-branding {
    flex: 1;
    min-width: 200px;
}

.footer-logo {
    height: 40px;
    width: auto;
    opacity: 0.9;
}

.footer-links-grid {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

/* --- التعديل السحري هنا --- */
.footer-column {
    display: flex;
    flex-direction: column; /* يرص العناصر تحت بعض */
    gap: 12px; /* مسافة ثابتة وموحدة بين كل رابط والتاني */
    align-items: flex-start; /* محاذاة لليسار */
}

.footer-heading {
    font-size: 11px;
    /* margin-bottom مش محتاجينها أوي لأن الـ gap هيقوم بالواجب، بس ممكن نسيبها لو عايز مسافة أكبر للعنوان */
    margin-bottom: 10px; 
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.footer-link {
    text-decoration: none;
    color: var(--color-text-footer);
    font-weight: 500;
    transition: opacity 0.2s ease;
    
    /* شيلنا أي margins عشان الـ gap هو اللي يتحكم */
    margin: 0; 
    display: block;
    line-height: 1.4; /* ضبط ارتفاع السطر */
}

.footer-link:hover {
    opacity: 0.6;
}

/* تنسيق خاص للجزء بتاع السوشيال ميديا اللي فيه خط فاصل */
.footer-column > div {
    display: flex;
    flex-direction: column;
    gap: 12px; /* نفس المسافة بين الروابط */
    width: 100%;
}

.footer-bottom {
    font-size: 12px;
    opacity: 0.4;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
}

/* تعديل للموبايل */
@media (max-width: 900px) {
    .footer-content-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .footer-links-grid {
        grid-template-columns: 1fr 1fr; /* عمودين في الموبايل */
        width: 100%;
        text-align: left; /* محاذاة لليسار في الموبايل أشيك */
    }
}






/* تعديل سرعة الترانزيشن */
.header {
    /* ... الخصائص القديمة ... */
    /* غير السطر ده بس */
    transition: transform 0.2s ease-out, background 0.2s ease; 
}

.header.hide-up {
    transform: translateY(-100%);
}



/* ================= Modern Smooth Accordion ================= */
.learn-more-dropdown {
    /* لا نحتاج لأي ستايل هنا */
}

.learn-more-dropdown summary {
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 0;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.learn-more-dropdown summary:hover { opacity: 1; text-decoration: underline; }
.learn-more-dropdown summary::-webkit-details-marker { display: none; }

/* الحاوية الخارجية (المسؤولة عن الأنيميشن) */
.dropdown-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    
    /* ستايل البوكس العائم */
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px; 
    z-index: 100;
}

/* حالة الفتح */
.learn-more-dropdown[open] .dropdown-wrapper {
    grid-template-rows: 1fr;
}

/* المحتوى الداخلي (لازم يكون جواه overflow: hidden) */
.dropdown-inner {
    overflow: hidden;
    background: white;
    border-radius: 12px;
    /* الظل والبوردر هنا عشان يختفوا لما الطول يكون صفر */
    box-shadow: 0 10px 40px rgba(0,0,0,0.15); 
    border: 1px solid #eee;
}

/* محتوى القائمة */
.dropdown-content {
    padding: 20px; /* البادينج هنا */
}

/* باقي التنسيقات (ul, li) زي ما هي */
.dropdown-content ul { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.dropdown-content li { font-size: 14px; color: #333; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; text-align: left; }
.dropdown-content li:last-child { border-bottom: none; padding-bottom: 0; }



/* تعديل في CSS */
.dropdown-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

/* لما نضيف الكلاس ده بالـ JS، القائمة تفتح */
.learn-more-dropdown.expanding .dropdown-wrapper {
    grid-template-rows: 1fr;
}




/* Add this to styles.css */
.work-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}





@media (max-width: 900px) {
    /* الكود ده هيخلي الزرار واللينك يترصوا فوق بعض */
    .service-actions {
        flex-direction: column; /* يخليهم عمودي بدل أفقي */
        gap: 20px; /* مسافة بين الزرار وكلمة Learn More */
        width: 100%; /* عشان ياخدوا راحتهم في السنتر */
    }

    /* تعديل إضافي عشان القائمة لما تفتح تظبط مكانها في الموبايل */
    .learn-more-dropdown {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
    }

    /* عشان القائمة اللي بتنزل تفتح في نص الشاشة بالظبط */
    .dropdown-wrapper {
        left: 50% !important;
        transform: translateX(-50%);
        width: 90vw; /* عرض القائمة 90% من عرض الشاشة */
        max-width: 320px;
    }
}


/* ================= MOBILE DROPDOWN CENTERING ================= */
@media (max-width: 900px) {
    
    /* 1. تجهيز الحاوية الأب */
    /* لازم نتأكد ان العنصر اللي شايل القائمة واخد عرض كامل عشان السنترة تظبط */
    .learn-more-dropdown {
        width: 100%;
        position: relative; /* مهم جداً عشان القائمة تتمحور بالنسبة ليه */
        display: flex;
        justify-content: center; /* عشان كلمة Learn More نفسها تيجي في النص */
    }

    /* 2. سنترة القائمة المنسدلة نفسها */
    /* بنستهدف الـ wrapper عشان هو اللي واخد الـ position absolute في الكود بتاعك */
    .dropdown-wrapper {
        /* تحريك العنصر لمنتصف الشاشة */
        left: 50% !important; 
        /* إزاحة العنصر لليسار بمقدار نصف عرضه عشان يتركز بالظبط */
        transform: translateX(-50%) !important; 
        
        /* تظبيط العرض على الموبايل */
        width: 90vw !important; /* العرض يكون 90% من عرض شاشة التليفون */
        max-width: 320px !important; /* بس ميزدش عن 320 بيكسل عشان الموبايلات الكبيرة */
        
        /* تظبيط المكان الرأسي */
        top: 100% !important; /* تحت كلمة Learn More */
        margin-top: 15px; /* مسافة صغيرة زيادة */
    }
}

@media (max-width: 900px) {
    /* 1. الكونتينر الكبير: يرص العناصر عمودي ويسنترهم */
    .service-actions {
        display: flex;
        flex-direction: column;
        align-items: center; /* دي أهم سطر عشان يخلي كل حاجة في النص */
        width: 100%;
        position: relative; /* مرجع للأمان */
    }

    /* 2. زرار الطلب */
    .btn-small {
        width: auto;
        min-width: 200px; /* شكل أحلى في الموبايل */
        text-align: center;
    }

    /* 3. حاوية القائمة المنسدلة */
    .learn-more-dropdown {
        width: 100%; /* لازم تاخد العرض كله عشان الـ absolute يعرف النص فين */
        display: flex;
        justify-content: center; /* يسنتر كلمة Learn More */
        position: static; /* تغيير مهم: بنخليها static عشان القائمة تحسب مكانها بالنسبة للكونتينر الكبير */
    }

    /* 4. القائمة نفسها */
    /* زودت كلاس .dropdown-wrapper احتياطي لو انت مستخدمه */
    .dropdown-content, .dropdown-wrapper {
        position: absolute;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* الأبعاد */
        width: 90vw !important; /* 90% من عرض الشاشة */
        max-width: 350px !important;
        
        /* المكان */
        top: auto !important; /* يلغي الـ top القديم */
        margin-top: 10px; /* مسافة تحت كلمة Learn More */
        z-index: 1000;
        background: white; /* تأكيد للخلفية */
    }
}




/* كلاس جديد هنضيفه بالـ JS لما ننزل تحت */
.services-nav.stick-top {
    top: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}



@media (max-width: 900px) {
    /* ... أكوادك القديمة ... */

    .learn-more-dropdown {
        width: 100%;
        display: flex;
        justify-content: center;
        position: static;
    }

    /* تنسيق القائمة والأنيميشن */
    .dropdown-content, .dropdown-wrapper {
        position: absolute;
        left: 50% !important;
        /* مكان البداية (وهي مقفولة) */
        transform: translateX(-50%) translateY(10px) !important; 
        width: 90vw !important;
        max-width: 350px !important;
        top: auto !important;
        margin-top: 10px;
        z-index: 1000;
        background: white;
        opacity: 0; /* مخفية في البداية */
    }

    /* حالة الفتح: شغل انيميشن الدخول */
    details[open] .dropdown-content, 
    details[open] .dropdown-wrapper {
        animation: mobileSlideIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    /* حالة القفل (بالجافاسكريبت): شغل انيميشن الخروج */
    details.is-closing .dropdown-content,
    details.is-closing .dropdown-wrapper {
        animation: mobileSlideOut 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    /* تعريف الأنيميشن عشان يحافظ على التمركز */
    @keyframes mobileSlideIn {
        0% { 
            opacity: 0; 
            transform: translateX(-50%) translateY(10px); 
        }
        100% { 
            opacity: 1; 
            transform: translateX(-50%) translateY(0); 
        }
    }

    @keyframes mobileSlideOut {
        0% { 
            opacity: 1; 
            transform: translateX(-50%) translateY(0); 
        }
        100% { 
            opacity: 0; 
            transform: translateX(-50%) translateY(10px); 
        }
    }
}



/* styles.css - داخل الـ Media Query للموبايل */
@media (max-width: 900px) {
    
    .learn-more-dropdown {
        width: 100%;
        display: flex;
        justify-content: center;
        position: static;
    }

    .dropdown-content, .dropdown-wrapper {
        position: absolute;
        
        /* السنترة */
        left: 50% !important;
        width: 90vw !important;
        max-width: 350px !important;
        top: auto !important;
        margin-top: 10px;
        z-index: 1000;
        background: white;
        
        /* نقطة البداية (وهي مخفية) */
        opacity: 0;
        transform: translateX(-50%) translateY(10px); /* تحت شوية */
    }

    /* حالة الفتح: انيميشن سريع */
    details[open] .dropdown-content, 
    details[open] .dropdown-wrapper {
        animation: menuPopUp 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* حالة القفل: انيميشن سريع */
    details.closing .dropdown-content,
    details.closing .dropdown-wrapper {
        animation: menuPopDown 0.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* تعريف الحركات */
    @keyframes menuPopUp {
        from { opacity: 0; transform: translateX(-50%) translateY(10px); }
        to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    @keyframes menuPopDown {
        from { opacity: 1; transform: translateX(-50%) translateY(0); }
        to { opacity: 0; transform: translateX(-50%) translateY(10px); }
    }
}



/* تنسيق الشاشات الكبيرة (الكمبيوتر) */
.sim-grid {
    grid-template-columns: 1fr 1fr; /* عمودين جنب بعض */
}
.sim-card {
    height: 300px; /* طول ثابت عشان الشكل يبقى متناسق */
}

/* تنسيق الموبايل (جوه الـ Media Query الموجودة عندك) */
@media (max-width: 900px) {
    .sim-grid {
        grid-template-columns: 1fr !important; /* يخلي الصناديق تحت بعض */
    }
    
    .sim-card {
        height: auto !important; /* يلغي الطول الثابت ويخليه يطول براحته مع الكلام */
        min-height: 250px; /* عشان ميبقاش قصير أوي لو فاضي */
    }
}

/* ================= MOBILE MENU FIX ================= */
@media (max-width: 900px) {
    /* 1. الحاوية الرئيسية للقائمة (الشاشة الكاملة) */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* واخدة طول الشاشة كله */
        background: rgba(255, 255, 255, 0.98); /* خلفية بيضاء شبه شفافة */
        backdrop-filter: blur(10px);
        
        /* السنترة السحرية */
        display: flex;
        flex-direction: column;
        justify-content: center; /* سنترة رأسية (فوق وتحت) */
        align-items: center;     /* سنترة أفقية (يمين وشمال) */
        gap: 15px;               /* مسافة بين كل عنصر والتاني */
        
        /* إعدادات الأنيميشن */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0.95); /* تأثير زووم خفيف بدل الحركة */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
        padding: 0; /* الغاء أي حواف */
        margin: 0;
    }

    /* حالة الفتح */
    .nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: scale(1); /* يرجع لحجمه الطبيعي بثبات */
    }

    /* 2. تظبيط العناصر عشان مفيش حاجة تتحرك يمين وشمال */
    .nav-dropdown, 
    .nav-item {
        width: 100%;
        text-align: center;
        display: block;
        padding: 0;
        margin: 0;
        position: static;
    }

    /* إخفاء زرار القائمة الفرعية وعرض الروابط مباشرة */
    .dropdown-trigger { display: none !important; }

    /* 3. القوائم الفرعية (تظهر تحت بعضها بانتظام) */
    .dropdown-menu {
        position: static; /* تلغي الـ absolute عشان تنزل تحت بعض */
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 5px 0 20px 0; /* مسافة تحت كل مجموعة */
        
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    /* 4. تنسيق النصوص */
    /* العناوين الرئيسية (زي Work) */
    .nav-item {
        font-size: 24px;
        font-weight: 700;
        color: #000;
        margin-bottom: 10px;
    }

    /* الروابط الفرعية */
    .dropdown-link {
        font-size: 18px;
        font-weight: 500;
        color: #555;
        text-align: center;
        display: block;
        width: 100%;
    }

    /* إخفاء العناصر الزائدة */
    .dot, .nav-dropdown svg { display: none; }
    .nav-dropdown::after { display: none; }
    
    /* تنسيق زرار القائمة (X) عشان يفضل ظاهر فوق */
    .mobile-menu-btn {
        display: block;
        z-index: 1001; /* رقم أعلى من القائمة نفسها */
        position: relative;
    }
}





@media (max-width: 900px) {
    /* 1. تثبيت الخلفية والحاوية */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh; /* dvh بيحل مشكلة شريط العنوان في الموبايل */
        background: #ffffff; /* خلفية بيضاء صريحة لمنع التداخل */
        
        /* السنترة */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        /* إلغاء أي حركة أو أنيميشن */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease; /* نغير الشفافية بس، بلاش all */
        z-index: 999;
        
        /* منع السكرول لو القائمة طويلة */
        overflow-y: auto; 
        padding: 40px 0;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
    }

    /* 2. تثبيت العناصر (عشان مفيش حاجة تتهز لما تدوس) */
    .nav-dropdown, 
    .nav-item {
        width: 100%;
        text-align: center;
        display: block;
        margin: 0;
        /* إلغاء أي ترانزيشن يسبب حركة */
        transition: none !important;
        transform: none !important;
    }

    /* 3. القوائم الفرعية مفتوحة وثابتة */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 10px 0 25px 0;
        
        display: flex;
        flex-direction: column;
        gap: 15px; /* مسافة ثابتة بين اللينكات */
    }

    /* إخفاء أزرار الفتح والقفل */
    .dropdown-trigger { display: none !important; }

    /* 4. تنسيق النصوص (عناوين ولينكات) */
    .nav-item {
        font-size: 22px;
        font-weight: 700;
        color: #000;
        margin-bottom: 5px;
        border: none !important; /* مهم جداً: إلغاء البوردر عشان ميعملش "نطة" */
    }

    /* عشان لو عايز تميز العنصر النشط من غير ما تحرك المكان، غير اللون بس */
    .nav-item.active {
        color: #555; /* تغيير لون بس */
        border-bottom: none; 
    }

    .dropdown-link {
        font-size: 16px;
        color: #666;
        font-weight: 500;
        display: block;
        padding: 5px 0;
    }

    /* إخفاء العناصر الزيادة */
    .dot, .nav-dropdown svg { display: none; }
    .nav-dropdown::after { display: none; }

    /* زرار القائمة X */
    .mobile-menu-btn {
        display: block;
        z-index: 1001;
        position: fixed; /* تثبيت الزرار عشان ميروحش مع السكرول */
        top: 20px;
        right: 20px;
    }
}



@media (max-width: 900px) {
    .nav-links {
        /* الخصائص الأساسية */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        background: #ffffff;
        
        /* التغيير هنا: التثبيت من الأعلى بدلاً من المنتصف */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* خليناها تبدأ من فوق */
        align-items: center; /* سنترة بالعرض بس */
        
        /* نعمل مسافة من فوق عشان الكلام ميبقاش لازق في سقف الموبايل */
        padding-top: 120px; 
        padding-bottom: 50px; /* مسافة من تحت عشان السكرول */
        
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
        z-index: 999;
        overflow-y: auto; /* السماح بالسكرول لو القائمة طويلة */
    }

    /* باقي الكود زي ما هو ... */

    /* إضافة مهمة: تثبيت حالة اللمس (Hover/Active) عشان مفيش خلفية تظهر وتزق الكلام */
    .dropdown-link:hover,
    .dropdown-link:active,
    .dropdown-link:focus {
        background-color: transparent !important; /* إلغاء الخلفية الرمادية في الموبايل */
        transform: none !important; /* ممنوع الحركة */
        padding: 5px 0; /* تثبيت الحجم */
    }
}



/* ================= MOBILE MENU FIX (NO JITTER) ================= */
@media (max-width: 900px) {
    /* 1. الحاوية الرئيسية */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh; /* dvh مهم جداً للموبايل */
        background: #ffffff;
        
        /* التغيير الجذري هنا: التثبيت من الأعلى */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* إلغاء السنترة الرأسية */
        align-items: center;         /* سنترة أفقية فقط */
        
        /* مسافة ثابتة من فوق عشان الكلام يثبت */
        padding-top: 140px; 
        padding-bottom: 50px;
        gap: 25px; /* مسافة بين المجموعات الرئيسية */
        
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease; /* نغير الشفافية بس */
        z-index: 999;
        overflow-y: auto;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
    }

    /* 2. تثبيت الحاويات الفرعية */
    .nav-dropdown, 
    .nav-item {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 0;
        position: static;
        transform: none !important; /* ممنوع الحركة */
    }

    /* 3. العناوين الرئيسية (Industries, etc.) */
    .nav-item, 
    .dropdown-trigger {
        font-size: 14px; /* حجم أصغر شوية للعنوان */
        font-weight: 700;
        color: #999; /* لون باهت عشان يبان إنه عنوان */
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 15px;
        border: none !important;
        pointer-events: none; /* عشان محدش يدوس عليه بالغلط */
    }

    /* 4. القوائم الفرعية (اللينكات نفسها) */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        
        display: flex;
        flex-direction: column;
        gap: 15px; /* مسافة بين اللينكات */
        width: 100%;
        margin-bottom: 20px; /* مسافة بين كل مجموعة والتانية */
    }

    /* 5. تنسيق الروابط عشان تكون كبيرة وواضحة */
    .dropdown-link {
        font-size: 24px; /* تكبير الخط للينكات المهمة */
        font-weight: 600;
        color: #000;
        text-decoration: none;
        display: block;
        padding: 5px 0;
        width: 100%;
    }

    /* إلغاء أي تأثير عند اللمس بيعمل رعشة */
    .dropdown-link:hover,
    .dropdown-link:active,
    .dropdown-link:focus {
        background-color: transparent !important;
        color: #000 !important;
        transform: none !important;
    }

    /* إخفاء العناصر الزائدة */
    .dot, .nav-dropdown svg { display: none; }
    .nav-dropdown::after { display: none; }
    .dropdown-trigger svg { display: none; }

    /* زرار القائمة X */
    .mobile-menu-btn {
        display: block;
        z-index: 1001;
        position: fixed;
        top: 25px;
        right: 25px;
    }
}



/* ================= FIXED MOBILE MENU (ROCK SOLID) ================= */
@media (max-width: 900px) {
    /* 1. الحاوية الأساسية: تثبيت من الأعلى */
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh; /* مهم جداً للموبايل */
        background: #ffffff;
        
        /* التغيير الجذري: إلغاء الـ Flex Center الرأسي */
        display: block; /* استبدال flex بـ block لمنع الحركة */
        padding-top: 130px; /* بداية الكلام من مسافة ثابتة */
        padding-bottom: 80px; /* مسافة للسكرول تحت */
        
        overflow-y: auto; /* سكرول ناعم للمحتوى */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
        z-index: 999;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
    }

    /* 2. حاويات الأقسام (تثبيت الهوامش) */
    .nav-dropdown, 
    .nav-item {
        width: 100%;
        text-align: center;
        display: block;
        margin: 0 0 30px 0; /* مسافة ثابتة تحت كل مجموعة */
        padding: 0;
        position: static;
        transform: none !important;
        border: none !important; /* ضمان عدم ظهور خطوط */
    }

    /* 3. العناوين الرئيسية (Labels) - تجميدها */
    .dropdown-trigger {
        display: block;
        width: 100%;
        font-size: 13px;
        font-weight: 800;
        color: #b0b0b0; /* لون رمادي فاتح */
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 15px;
        border: none !important;
        background: transparent;
        pointer-events: none; /* ممنوع الضغط عليها نهائياً */
        padding: 0;
    }
    
    /* إخفاء الأسهم والنقط */
    .dropdown-trigger svg, .nav-dropdown svg, .dot { display: none !important; }
    .nav-item.active::after { display: none !important; } /* إلغاء الخط المتحرك */

    /* 4. القوائم الفرعية (اللينكات) - ثبات تام */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 15px; /* مسافة ثابتة بين كل لينك والتاني */
        align-items: center;
        width: 100%;
    }

    /* 5. تصميم اللينك نفسه */
    .dropdown-link, 
    a.nav-item {
        font-size: 22px; /* خط كبير وواضح */
        font-weight: 600;
        color: #000000;
        text-decoration: none;
        display: block;
        width: 100%;
        padding: 5px 0; /* مسافة للأصبع */
        /* تجميد الحالة */
        transition: none !important; 
        transform: none !important;
    }

    /* 6. إلغاء أي تأثير عند الضغط (هو ده سبب الرعشة) */
    .dropdown-link:active,
    .dropdown-link:focus,
    .dropdown-link:hover,
    a.nav-item:active {
        background: transparent !important;
        color: #000000 !important;
        border: none !important;
        outline: none !important;
        transform: none !important;
    }

    /* زرار القائمة X */
    .mobile-menu-btn {
        display: block;
        z-index: 1001;
        position: fixed;
        top: 25px;
        right: 25px;
        background: transparent; /* خلفية شفافة */
        border-radius: 50%; /* شكل دائري لو فيه خلفية */
    }
}



/* هذا الكلاس سيتم إضافته أوتوماتيكياً بواسطة الجافاسكريبت */
.active-link {
    background-color: #1da1f2 !important; /* لون الخلفية أزرق غصب */
    color: #ffffff !important; /* لون الكلام أبيض غصب */
    border: 1px solid #1da1f2 !important;
}

/* 1. تنعيم حركة الصفحة بالكامل (لما تدوس على الزرار) */
html {
    scroll-behavior: smooth;
}

.services-nav a {
    /* الشكل الأساسي */
    background-color: #f5f5f5;
    color: #333;
    
    /* السر هنا: 0.2s وقت مثالي للعين، و ease-out بيخلي الحركة تبدأ بسرعة وتهدى في الآخر */
    transition: all 0.2s ease-out; 
    
    text-decoration: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
}

.active-link {
    background-color: #1da1f2 !important;
    color: #ffffff !important;
    /* إلغاء أي ظل ثقيل قد يبطئ المتصفح */
    box-shadow: 0 2px 10px rgba(29, 161, 242, 0.2); 
}