/* Highlights Website Styles */
/*body {
    background-color: var(--white) !important;
}*/
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
/* CSS Variables */
:root {
    --primary-color: #00677F;
    --secondary-color: #004165;
    --accent-color: #F6F6F6;
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --white: #ffffff;
    --border-color: #e0e0e0;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
    --transition: all 0.3s ease;
    --border-light: #e5e5e5;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
    --footer-bg: #004165;
    --footer-text: #E6ECEF;
    --footer-links: #FFFFFF;
    --footer-hover: #00677F;
    --footer-divider: rgba(230, 236, 239, 0.1);
           --primary-teal: #00677F;
            --primary-navy: #004165;
            --light-gray: #F6F6F6;
            --white: #FFFFFF;
            --text-dark: #1a1a1a;
            --text-gray: #666666;
            --border-light: #e5e5e5;
            --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
            --footer-bg: #004165;
            --footer-text: #E6ECEF;
            --footer-links: #FFFFFF;
            --footer-hover: #00677F;
            --footer-divider: rgba(230, 236, 239, 0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}

/* Language-specific typography and direction */
html[lang="ar"] {
    --bs-body-font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-sans-serif: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[lang="en"] {
    --bs-body-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-sans-serif: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

html[lang="ar"] body {
    direction: rtl !important;
    text-align: right;
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html[lang="en"] body {
    direction: ltr !important;
    text-align: left;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

html[lang="ar"] body *:not(svg):not(path) {
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html[lang="en"] body *:not(svg):not(path) {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Arabic Language Styles */
body[dir="rtl"],


/* Language Toggle */
.language-toggle {
            background: none;
            border: 1px solid var(--border-light);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }

.language-toggle:hover {
            border-color: var(--primary-teal);
            color: var(--primary-teal);
        }

/* Hidden content for language switching */
.ar-content { display: block; }
.en-content { display: none; }

.en .ar-content { display: none; }
.en .en-content { display: block; }

body.arabic .en-content {
    display: none;
}

body.arabic .ar-content {
    display: block;
}

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

/* Header */
.header {
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-light);
        }

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 2rem;
}
        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.logo-img {
    height: 50px;
    width: auto;
}

.nav {
     display: flex;
     gap: 2rem;
     align-items: center;
}
.nav-link.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px; /* Adjust spacing between the text and the arrow */
}

.nav-link {
     text-decoration: none;
     color: var(--text-dark);
     font-weight: 500;
     font-size: 1rem;
     transition: color 0.3s ease;
     padding: 0.5rem 0;
        }

.nav-link:hover {
     color: var(--primary-teal);
        }
.nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: var(--transition);
}

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

/* Hero Section */
.hero {
            background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
            padding: 4rem 0;
            text-align: center;
        }

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

        .hero-headline {
            font-size: 3rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }


        .hero-description {
            font-size: 1.25rem;
            color: var(--text-gray);
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        .hero-slogan {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-teal);
            margin-bottom: 2rem;
        }

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
        .cta-button {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

.cta-button.primary {
            background: var(--primary-teal);
            color: var(--white);
        }

.cta-button.primary:hover {
            background: var(--primary-navy);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }


.cta-button.secondary {
            background: transparent;
            color: var(--primary-teal);
            border: 2px solid var(--primary-teal);
        }

.cta-button.secondary:hover {
            background: var(--primary-teal);
            color: var(--white);
        }

.cta-button.white {
    background: var(--white);
    color: var(--primary-color);
}

.cta-button.white:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
}

/* Sections */
section {
            padding: 4rem 0;
        }
.section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }
.section-subtitle {
            font-size: 1.25rem;
            color: var(--text-gray);
            text-align: center;
            margin-bottom: 3rem;
        }
.section.bg-light {
    background: var(--accent-color);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.section-header p {
    font-size: 1.125rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

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

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

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

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

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.feature-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.stat-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: center;
        }

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.125rem;
    color: var(--text-light);
    font-weight: 500;
}
/* How We Work */
/* How We Work - force styling */
.how-we-work .steps-grid {
  display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.how-we-work .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 1rem;
        }


.how-we-work .step-number {
            background: var(--primary-navy);
            color: var(--white);
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1.25rem;
        }

.how-we-work .step-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-dark);
        }

.how-we-work .step-description {
            font-size: 0.875rem;
            color: var(--text-gray);
            line-height: 1.4;
        }

/* Title + subtitle */
.how-we-work .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75rem;
  color: var(--text-dark);
}
.how-we-work .section-subtitle {
  font-size: 1.125rem;
  color: var(--text-gray);
  text-align: center;
  margin-bottom: 2.5rem;
}
/* Services Grid */



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

.service-icon {
    width: 32px;
            height: 32px;
            color: var(--primary-teal);
            margin: 0 auto 1rem;
            opacity: 0.85;
            filter: drop-shadow(0 0 8px rgba(0, 103, 127, 0.3));
}

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

.service-card h3 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-card p {
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Service Detail Pages */
.service-detail {
    padding: 80px 0;
}

.service-intro {
    text-align: center;
    margin-bottom: 4rem;
}

.service-intro h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-intro p {
    font-size: 1.125rem;
    color: var(--text-light);
    max-width: 800px;
    margin: 0 auto;
}

.services-list {
    display: grid;
    gap: 2rem;
}

.service-item {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.service-item:hover {
    box-shadow: var(--shadow-hover);
}

.service-item h3 {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-item h3 i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.service-item p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.service-cta {
    text-align: right;
}

/* Testimonials */
.testimonials-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-slide {
    display: none;
    text-align: center;
    padding: 2rem;
}

.testimonial-slide.active {
    display: block;
}

.testimonial-content p {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.testimonial-author {
    color: var(--text-dark);
}

.testimonial-author strong {
    display: block;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.testimonials-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.testimonial-prev,
.testimonial-next {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.testimonial-prev:hover,
.testimonial-next:hover {
    background: var(--secondary-color);
}

.testimonials-dots {
    display: flex;
    gap: 0.5rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background: var(--primary-color);
}

/* Partners Grid */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    align-items: center;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.partner-logo img {
    max-width: 150px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Contact Form */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-item i {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.contact-item h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.contact-item a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

.contact-item a:hover {
    color: var(--secondary-color);
}

.contact-form {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.contact-form h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
}

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

/* Footer */
.footer {
    background: var(--secondary-color);
    color: var(--white);
    padding: 3rem 0 1rem;
}

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

.footer-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-section p,
.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    line-height: 1.6;
}

.footer-section a:hover {
    color: var(--white);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

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

.social-links a:hover {
    background: var(--primary-color);
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .hero-headline {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .features-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav {
        display: none;
    }

    .language-toggle {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .section {
        padding: 60px 0;
    }

    .hero {
        padding: 100px 0 60px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .partners-grid {
        grid-template-columns: 1fr;
    }
}

/* RTL Adjustments */
body.arabic {
    direction: rtl;
}

body.arabic .contact-item {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: right;
}

body.arabic .contact-item > div {
    text-align: right;
}
body.arabic .hero-actions {
    flex-direction: row-reverse;
}

body.arabic .service-item h3 {
    flex-direction: row-reverse;
}

body.arabic .service-cta {
    text-align: left;
}

body.arabic .social-links {
    flex-direction: row-reverse;
}

/* Lucide Icons */
[data-lucide] {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Why Eda2at */
        .why-eda2at {
            background: var(--white);
            text-align: center;
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .why-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: center;
            transition: all 0.3s ease;
        }

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

        .why-icon {
            width: 32px;
            height: 32px;
            color: var(--primary-teal);
            margin: 0 auto 1rem;
            opacity: 0.85;
            filter: drop-shadow(0 0 8px rgba(0, 103, 127, 0.3));
        }

        .why-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

        .why-description {
            font-size: 1rem;
            color: var(--text-gray);
            line-height: 1.5;
        }

/* Testimonials */
        .testimonials {
            background: var(--light-gray);
            text-align: center;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: right;
        }

        .en .testimonial-card {
            text-align: left;
        }

        .testimonial-quote {
            font-size: 1.125rem;
            font-style: italic;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
            line-height: 1.6;
        }

        .testimonial-author {
            font-weight: 600;
            color: var(--primary-teal);
            margin-bottom: 0.25rem;
        }

        .testimonial-company {
            font-size: 0.875rem;
            color: var(--text-gray);
        }
/* Consultation CTA */
        .consultation {
            background: var(--primary-navy);
            color: var(--white);
            text-align: center;
        }

        .consultation h2 {
            color: var(--white);
            margin-bottom: 1rem;
        }
/* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
            padding: 4rem 0;
            text-align: center;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero-headline {
            font-size: 3rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero-description {
            font-size: 1.25rem;
            color: var(--text-gray);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .hero-slogan {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-teal);
            margin-bottom: 2rem;
        }

        .hero-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--white);

        }

        body.en {
            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            direction: ltr;
            text-align: left;
        }

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

        /* Header */
        .header {
            background: var(--white);
            border-bottom: 1px solid var(--border-light);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-light);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 0;
            gap: 2rem;
        }

        .logo-img {
            height: 50px;
            width: auto;
        }

        .nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }



        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .language-toggle {
            background: none;
            border: 1px solid var(--border-light);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }

        .language-toggle:hover {
            border-color: var(--primary-teal);
            color: var(--primary-teal);
        }

        /* Buttons */
        .cta-button {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .cta-button.primary {
            background: var(--primary-teal);
            color: var(--white);
        }

        .cta-button.primary:hover {
            background: var(--primary-navy);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        .cta-button.secondary {
            background: transparent;
            color: var(--primary-teal);
            border: 2px solid var(--primary-teal);
        }

        .cta-button.secondary:hover {
            background: var(--primary-teal);
            color: var(--white);
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
            padding: 4rem 0;
            text-align: center;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero-headline {
            font-size: 3rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero-description {
            font-size: 1.25rem;
            color: var(--text-gray);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .hero-slogan {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-teal);
            margin-bottom: 2rem;
        }

        .hero-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Sections */
        section {
            padding: 4rem 0;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .section-subtitle {
            font-size: 1.25rem;
            color: var(--text-gray);
            text-align: center;
            margin-bottom: 3rem;
        }

        /* Why Eda2at */
        .why-eda2at {
            background: var(--white);
            text-align: center;
        }

.why-grid {
  display: flex; /* Use flexbox to make child items equal height */
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch; /* This is the key property for equal heights */
}

.why-card {
  display: flex; /* Make the card a flex container */
  flex-direction: column; /* Stack the content vertically */
  justify-content: space-between; /* This will push the content to the top and the button to the bottom */
  flex: 1; /* This makes all cards grow to fill the available space */
  /* Add your existing card styles here */
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.why-card .cta-button {
  margin-top: auto; /* This pushes the button down, aligning it with others */
}

        .why-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: center;
            transition: all 0.3s ease;
        }

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

        .why-icon {
            width: 32px;
            height: 32px;
            color: var(--primary-teal);
            margin: 0 auto 1rem;
            opacity: 0.85;
            filter: drop-shadow(0 0 8px rgba(0, 103, 127, 0.3));
        }

        .why-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

        .why-description {
            font-size: 1rem;
            color: var(--text-gray);
            line-height: 1.5;
        }

        /* Track Record */
        .track-record {
            background: var(--light-gray);
            text-align: center;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .metric-item {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: center;
        }

        .metric-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-teal);
            margin-bottom: 0.5rem;
        }

        .metric-label {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

        .metric-description {
            font-size: 0.875rem;
            color: var(--text-gray);
            line-height: 1.4;
        }

        /* How We Work */
        .how-we-work {
            background: var(--white);
            text-align: center;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 1rem;
        }

        .step-number {
            background: var(--primary-navy);
            color: var(--white);
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1.25rem;
        }

        .step-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        .step-description {
            font-size: 0.875rem;
            color: var(--text-gray);
            line-height: 1.4;
        }

        /* Testimonials */
        .testimonials {
            background: var(--light-gray);
            text-align: center;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: right;
        }

        .en .testimonial-card {
            text-align: left;
        }

        .testimonial-quote {
            font-size: 1.125rem;
            font-style: italic;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
            line-height: 1.6;
        }

        .testimonial-author {
            font-weight: 600;
            color: var(--primary-teal);
            margin-bottom: 0.25rem;
        }

        .testimonial-company {
            font-size: 0.875rem;
            color: var(--text-gray);
        }

        /* Consultation CTA */
        .consultation {
            background: var(--primary-navy);
            color: var(--white);
            text-align: center;
        }

        .consultation h2 {
            color: var(--white);
            margin-bottom: 1rem;
        }

        /* Footer */
        .footer {
            background: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0 1rem;
        }

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

        .footer-section h3 {
            color: var(--footer-links);
            margin-bottom: 1rem;
            font-size: 1.125rem;
            font-weight: 600;
        }

        .footer-tagline {
            color: var(--footer-text);
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .footer-links a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 0.875rem;
        }

        .footer-links a:hover {
            color: var(--footer-links);
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .contact-info p {
            color: var(--footer-text);
            margin: 0;
            font-size: 0.875rem;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            color: var(--footer-text);
            transition: color 0.3s ease;
            text-decoration: none;
        }

        .social-links a:hover {
            color: var(--footer-links);
        }

        .footer-bottom {
            border-top: 1px solid var(--footer-divider);
            padding-top: 1rem;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-bottom p {
            color: var(--footer-text);
            font-size: 0.875rem;
            margin: 0;
        }

        .language-switcher {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .language-switcher a {
            color: var(--footer-text);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.3s ease;
        }

        .language-switcher a:hover,
        .language-switcher a.active {
            color: var(--footer-links);
        }

        /* Hidden content for language switching */
        .ar-content { display: block; }
        .en-content { display: none; }

        .en .ar-content { display: none; }
        .en .en-content { display: block; }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            .nav {
                gap: 1rem;
            }

            .hero-headline {
                font-size: 2rem;
            }

            .hero-actions {
                flex-direction: column;
                align-items: center;
            }

            .why-grid,
            .metrics-grid,
            .steps-grid,
            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .why-icon {
                width: 24px;
                height: 24px;
            }
        }        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--white);

        }

        body.en {
            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            direction: ltr;
            text-align: left;
        }

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

        /* Header */
        .header {
            background: var(--white);
            border-bottom: 1px solid var(--border-light);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-light);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 0;
            gap: 2rem;
        }

        .logo-img {
            height: 50px;
            width: auto;
        }

        .nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }


        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .language-toggle {
            background: none;
            border: 1px solid var(--border-light);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }

        .language-toggle:hover {
            border-color: var(--primary-teal);
            color: var(--primary-teal);
        }

        /* Buttons */
        .cta-button {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .cta-button.primary {
            background: var(--primary-teal);
            color: var(--white);
        }

        .cta-button.primary:hover {
            background: var(--primary-navy);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        .cta-button.secondary {
            background: transparent;
            color: var(--primary-teal);
            border: 2px solid var(--primary-teal);
        }

        .cta-button.secondary:hover {
            background: var(--primary-teal);
            color: var(--white);
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
            padding: 4rem 0;
            text-align: center;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero-headline {
            font-size: 3rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero-description {
            font-size: 1.25rem;
            color: var(--text-gray);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .hero-slogan {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-teal);
            margin-bottom: 2rem;
        }

        .hero-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Sections */
        section {
            padding: 4rem 0;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .section-subtitle {
            font-size: 1.25rem;
            color: var(--text-gray);
            text-align: center;
            margin-bottom: 3rem;
        }

        /* Why Eda2at */
        .why-eda2at {
            background: var(--white);
            text-align: center;
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .why-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: center;
            transition: all 0.3s ease;
        }

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

        .why-icon {
            width: 32px;
            height: 32px;
            color: var(--primary-teal);
            margin: 0 auto 1rem;
            opacity: 0.85;
            filter: drop-shadow(0 0 8px rgba(0, 103, 127, 0.3));
        }

        .why-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

        .why-description {
            font-size: 1rem;
            color: var(--text-gray);
            line-height: 1.5;
        }

        /* Track Record */
        .track-record {
            background: var(--light-gray);
            text-align: center;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .metric-item {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: center;
        }

        .metric-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-teal);
            margin-bottom: 0.5rem;
        }

        .metric-label {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

        .metric-description {
            font-size: 0.875rem;
            color: var(--text-gray);
            line-height: 1.4;
        }

        /* How We Work */
        .how-we-work {
            background: var(--white);
            text-align: center;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 1rem;
        }

        .step-number {
            background: var(--primary-navy);
            color: var(--white);
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1.25rem;
        }

        .step-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        .step-description {
            font-size: 0.875rem;
            color: var(--text-gray);
            line-height: 1.4;
        }

        /* Testimonials */
        .testimonials {
            background: var(--light-gray);
            text-align: center;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: var(--shadow-light);
            text-align: right;
        }

        .en .testimonial-card {
            text-align: left;
        }

        .testimonial-quote {
            font-size: 1.125rem;
            font-style: italic;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
            line-height: 1.6;
        }

        .testimonial-author {
            font-weight: 600;
            color: var(--primary-teal);
            margin-bottom: 0.25rem;
        }

        .testimonial-company {
            font-size: 0.875rem;
            color: var(--text-gray);
        }

        /* Consultation CTA */
        .consultation {
            background: var(--primary-navy);
            color: var(--white);
            text-align: center;
        }

        .consultation h2 {
            color: var(--white);
            margin-bottom: 1rem;
        }

        /* Footer */
        .footer {
            background: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0 1rem;
        }

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

        .footer-section h3 {
            color: var(--footer-links);
            margin-bottom: 1rem;
            font-size: 1.125rem;
            font-weight: 600;
        }

        .footer-tagline {
            color: var(--footer-text);
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .footer-links a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 0.875rem;
        }

        .footer-links a:hover {
            color: var(--footer-links);
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .contact-info p {
            color: var(--footer-text);
            margin: 0;
            font-size: 0.875rem;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            color: var(--footer-text);
            transition: color 0.3s ease;
            text-decoration: none;
        }

        .social-links a:hover {
            color: var(--footer-links);
        }

        .footer-bottom {
            border-top: 1px solid var(--footer-divider);
            padding-top: 1rem;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-bottom p {
            color: var(--footer-text);
            font-size: 0.875rem;
            margin: 0;
        }

        .language-switcher {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .language-switcher a {
            color: var(--footer-text);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.3s ease;
        }

        .language-switcher a:hover,
        .language-switcher a.active {
            color: var(--footer-links);
        }

        /* Hidden content for language switching */
        .ar-content { display: block; }
        .en-content { display: none; }

        .en .ar-content { display: none; }
        .en .en-content { display: block; }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            .nav {
                gap: 1rem;
            }

            .hero-headline {
                font-size: 2rem;
            }

            .hero-actions {
                flex-direction: column;
                align-items: center;
            }

            .why-grid,
            .metrics-grid,
            .steps-grid,
            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .why-icon {
                width: 24px;
                height: 24px;
            }
        }
/* Complience  Page*/
:root {
            --primary-teal: #00677F;
            --primary-navy: #004165;
            --light-gray: #F6F6F6;
            --white: #FFFFFF;
            --text-dark: #1a1a1a;
            --text-gray: #666666;
            --border-light: #e5e5e5;
            --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
            --footer-bg: #004165;
            --footer-text: #E6ECEF;
            --footer-links: #FFFFFF;
            --footer-hover: #00677F;
            --footer-divider: rgba(230, 236, 239, 0.1);
        }

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

        body {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--white);

        }

        body.en {
            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            direction: ltr;
            text-align: left;
        }

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

        /* Header */
        .header {
            background: var(--white);
            border-bottom: 1px solid var(--border-light);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-light);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 0;
            gap: 2rem;
        }

        .logo-img {
            height: 50px;
            width: auto;
        }

        .nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }



        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .language-toggle {
            background: none;
            border: 1px solid var(--border-light);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }

        .language-toggle:hover {
            border-color: var(--primary-teal);
            color: var(--primary-teal);
        }

        /* Buttons */
        .cta-button {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .cta-button.primary {
            background: var(--primary-teal);
            color: var(--white);
        }

        .cta-button.primary:hover {
            background: var(--primary-navy);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        .cta-button.secondary {
            background: transparent;
            color: var(--primary-teal);
            border: 2px solid var(--primary-teal);
        }

        .cta-button.secondary:hover {
            background: var(--primary-teal);
            color: var(--white);
        }

        /* Page Header */
        .page-header {
            background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-teal) 100%);
            color: var(--white);
            padding: 4rem 0;
            text-align: center;
        }

        .page-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .page-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Services Grid */
        .services-section {
            padding: 4rem 0;
            background: var(--white);
        }

        .services-intro {
            text-align: center;
            margin-bottom: 3rem;
        }

        .services-intro h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .services-intro p {
            font-size: 1.125rem;
            color: var(--text-gray);
            max-width: 800px;
            margin: 0 auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }



        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
            border-color: var(--primary-teal);
        }

        .service-icon {
            width: 48px;
            height: 48px;
            color: var(--primary-teal);
            margin-bottom: 1rem;
        }
    .service-title,
    .service-description {
    /* Align text to the start of the container */
        align-self: flex-start;
    }
        .service-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 1rem;
            text-align: center
        }

.service-card {
    /* Existing styles */
            background: var(--white);
            border: 1px solid var(--border-light);
            border-radius: 0.75rem;
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;

    /* Add these lines to make it a flex container */
    display: flex;
    flex-direction: column;
}

.service-description {
    /* Existing styles */
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;

    /* This is the key. It makes the description fill available space. */
    flex-grow: 2;
}

.service-order-btn {
    /* This will push the button to the bottom of the card */
    margin-top: auto;
}

        /* Use Case Section */
        .use-case {
            background: var(--light-gray);
            padding: 4rem 0;
            text-align: center;
        }

        .use-case-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .use-case h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 2rem;
        }

        .use-case-quote {
            font-size: 1.5rem;
            font-style: italic;
            color: var(--primary-teal);
            margin-bottom: 2rem;
            line-height: 1.4;
        }

        .use-case-description {
            font-size: 1.125rem;
            color: var(--text-gray);
            line-height: 1.6;
        }

        /* CTA Section */
        .cta-section {
            background: var(--primary-navy);
            color: var(--white);
            padding: 4rem 0;
            text-align: center;
        }

        .cta-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .cta-section p {
            font-size: 1.125rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        /* Footer */
        .footer {
            background: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0 1rem;
        }

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

        .footer-section h3 {
            color: var(--footer-links);
            margin-bottom: 1rem;
            font-size: 1.125rem;
            font-weight: 600;
        }

        .footer-tagline {
            color: var(--footer-text);
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .footer-links a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 0.875rem;
        }

        .footer-links a:hover {
            color: var(--footer-links);
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .contact-info p {
            color: var(--footer-text);
            margin: 0;
            font-size: 0.875rem;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            color: var(--footer-text);
            transition: color 0.3s ease;
            text-decoration: none;
        }

        .social-links a:hover {
            color: var(--footer-links);
        }

        .footer-bottom {
            border-top: 1px solid var(--footer-divider);
            padding-top: 1rem;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-bottom p {
            color: var(--footer-text);
            font-size: 0.875rem;
            margin: 0;
        }

        .language-switcher {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .language-switcher a {
            color: var(--footer-text);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.3s ease;
        }

        .language-switcher a:hover,
        .language-switcher a.active {
            color: var(--footer-links);
        }

        /* Hidden content for language switching */
        .ar-content { display: block; }
        .en-content { display: none; }

        .en .ar-content { display: none; }
        .en .en-content { display: block; }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            .nav {
                gap: 1rem;
            }

            .page-title {
                font-size: 2rem;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }
        :root {
            --primary-teal: #00677F;
            --primary-navy: #004165;
            --light-gray: #F6F6F6;
            --white: #FFFFFF;
            --text-dark: #1a1a1a;
            --text-gray: #666666;
            --border-light: #e5e5e5;
            --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
            --footer-bg: #004165;
            --footer-text: #E6ECEF;
            --footer-links: #FFFFFF;
            --footer-hover: #00677F;
            --footer-divider: rgba(230, 236, 239, 0.1);
        }

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

        body {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background-color: var(--white);
        }

        body.en {
            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            direction: ltr;
            text-align: left;
        }

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

        /* Header */
        .header {
            background: var(--white);
            border-bottom: 1px solid var(--border-light);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-light);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 0;
            gap: 2rem;
        }

        .logo-img {
            height: 50px;
            width: auto;
        }

        .nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }



        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .language-toggle {
            background: none;
            border: 1px solid var(--border-light);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }

        .language-toggle:hover {
            border-color: var(--primary-teal);
            color: var(--primary-teal);
        }

        /* Buttons */
        .cta-button {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .cta-button.primary {
            background: var(--primary-teal);
            color: var(--white);
        }

        .cta-button.primary:hover {
            background: var(--primary-navy);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        .cta-button.secondary {
            background: transparent;
            color: var(--primary-teal);
            border: 2px solid var(--primary-teal);
                        margin-top: 4 rem;

        }

        .cta-button.secondary:hover {
            background: var(--primary-teal);
            color: var(--white);
        }

        /* Page Header */
        .page-header {
            background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-teal) 100%);
            color: var(--white);
            padding: 4rem 0;
            text-align: center;
        }

        .page-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .page-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Services Grid */
        .services-section {
            padding: 4rem 0;
            background: var(--white);
        }

        .services-intro {
            text-align: center;
            margin-bottom: 3rem;
        }

        .services-intro h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .services-intro p {
            font-size: 1.125rem;
            color: var(--text-gray);
            max-width: 800px;
            margin: 0 auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }



        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
            border-color: var(--primary-teal);
        }

        .service-icon {
            width: 48px;
            height: 48px;
            color: var(--primary-teal);
            margin-bottom: 1rem;
        }




        /* Use Case Section */
        .use-case {
            background: var(--light-gray);
            padding: 4rem 0;
            text-align: center;
        }

        .use-case-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .use-case h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 2rem;
        }

        .use-case-quote {
            font-size: 1.5rem;
            font-style: italic;
            color: var(--primary-teal);
            margin-bottom: 2rem;
            line-height: 1.4;
        }

        .use-case-description {
            font-size: 1.125rem;
            color: var(--text-gray);
            line-height: 1.6;
        }

        /* CTA Section */
        .cta-section {
            background: var(--primary-navy);
            color: var(--white);
            padding: 4rem 0;
            text-align: center;
        }

        .cta-section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .cta-section p {
            font-size: 1.125rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        /* Footer */
        .footer {
            background: var(--footer-bg);
            color: var(--footer-text);
            padding: 3rem 0 1rem;
        }

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

        .footer-section h3 {
            color: var(--footer-links);
            margin-bottom: 1rem;
            font-size: 1.125rem;
            font-weight: 600;
        }

        .footer-tagline {
            color: var(--footer-text);
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .footer-links a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 0.875rem;
        }

        .footer-links a:hover {
            color: var(--footer-links);
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .contact-info p {
            color: var(--footer-text);
            margin: 0;
            font-size: 0.875rem;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            color: var(--footer-text);
            transition: color 0.3s ease;
            text-decoration: none;
        }

        .social-links a:hover {
            color: var(--footer-links);
        }

        .footer-bottom {
            border-top: 1px solid var(--footer-divider);
            padding-top: 1rem;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-bottom p {
            color: var(--footer-text);
            font-size: 0.875rem;
            margin: 0;
        }

        .language-switcher {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .language-switcher a {
            color: var(--footer-text);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.3s ease;
        }

        .language-switcher a:hover,
        .language-switcher a.active {
            color: var(--footer-links);
        }

        /* Hidden content for language switching */
        .ar-content { display: block; }
        .en-content { display: none; }

        .en .ar-content { display: none; }
        .en .en-content { display: block; }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            .nav {
                gap: 1rem;
            }

            .page-title {
                font-size: 2rem;
            }

            .services-grid {
                grid-template-columns: 1fr;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }
        /* Form Styles */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
            font-size: 1rem;
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-light);
            border-radius: 0.5rem;
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s ease;
            background: var(--white);
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--primary-teal);
            box-shadow: 0 0 0 3px rgba(0, 103, 127, 0.1);
        }

        .form-textarea {
            resize: vertical;
            min-height: 120px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

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

        /* Buttons */
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            text-align: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-family: inherit;
        }

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

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

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

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

        .form-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
        }

        /* Success/Error Messages */
        .message {
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            display: none;
        }

        .message.success {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid var(--success-green);
            color: var(--success-green);
        }

        .message.error {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid var(--error-red);
            color: var(--error-red);
        }

        .message.show {
            display: block;
        }

        /* Service Info */
        .service-info {
            background: var(--light-gray);
            padding: 1.5rem;
            border-radius: 0.5rem;
            margin-bottom: 2rem;
        }

        .service-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-teal);
            margin-bottom: 0.5rem;
        }

        .service-description {
            color: var(--text-gray);
            font-size: 0.875rem;
        }

        /* Hidden content for language switching */
        .ar-content { display: block; }
        .en-content { display: none; }

        .en .ar-content { display: none; }
        .en .en-content { display: block; }

        /* Loading State */
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .loading {
            display: none;
        }

        .loading.show {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
            border-top: 2px solid currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 0.5rem;
        }

        .en .loading.show {
            margin-left: 0;
            margin-right: 0.5rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
@keyframes slides {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 30px 0px;
  white-space: nowrap;
  position: relative;
}

.logos:before, .logos:after {
  position: absolute;
  top: 0;
  content: '';
  width: 250px;
  height: 100%;
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255,255,255,0), rgb(255, 255, 255));
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255,255,255,0), rgb(255, 255, 255));
}

.logo_items {
  display: inline-block;
  animation: 35s slides infinite linear;
}

/*.logos:hover .logo_items {
  animation-play-state: paused;
}*/

.logo_items img{
  height: 100px;
  margin-right: 50px;

}
/* Partnerships logos row */
#partnerships .logos {
  overflow: hidden;
  padding: 30px 0;
}

#partnerships .logo_items {
  display: flex;                /* avoid RTL inline-flow quirks */
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  justify-content: center;
  min-width: 100%;
}

/* Keep the logos’ visual order consistent even in RTL */
html[dir="rtl"] #partnerships .logo_items {
  direction: ltr !important;    /* neutralize bidi on the strip */
  text-align: left !important;
}

/* Logo sizing/hover (optional) */
#partnerships .logo_items img {
  height: 100px;
  object-fit: contain;
  display: block;
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
}
/*#partnerships .logo_items img:hover {
  opacity: 1;
  transform: scale(1.05);
}*/

/* If something upstream forced LTR on the whole section, crush it */
html[dir="rtl"] #partnerships,
html[dir="rtl"] #partnerships .container {
  direction: rtl !important;
  text-align: right !important;
}
/*
* Eda2at · Accessible Auto-Slider · RTL-first · Pure CSS
*/
:root{
/* ====== Tokens from Highlights / Eda2at brand ====== */
--brand-teal:#00677F;
--brand-blue:#004165;
--surface:#FFFFFF;
--surface-2:#F6F6F6;
--text:#0f172a;
--muted:#475569;
--ring:rgba(0,103,127,.18);
--radius:22px;
--shadow:0 10px 30px rgba(2,8,23,.10);

/* motion + timing */
--autoplay: 24s;
--easing: cubic-bezier(.25,.8,.25,1);
}
@media (prefers-color-scheme: dark){
:root{
--surface:#0f172a;
--surface-2:#111827;
--text:#e5e7eb;
--muted:#94a3b8;
--ring:rgba(0,103,127,.35);
--shadow:0 14px 36px rgba(0,0,0,.35);
}
}
@media (prefers-reduced-motion: reduce){
:root{ --autoplay: 0s; }
}

/* ====== Section ====== */
.ed-testimonials{
font-family:'Tajawal','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
background:var(--surface-2);
color:var(--text);
padding:54px 0;
direction:ltr;
}
.ed-testimonials.is-rtl{ direction:rtl; }
.ed-wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }

.ed-head{ text-align:center; margin-bottom:26px; }
.ed-kicker{ margin:0 0 6px; color:var(--brand-teal); font-weight:700; font-size:.95rem; letter-spacing:.2px; }
.ed-title{ margin:0; font-weight:800; font-size:2.5rem; line-height:1.2; }
.ed-sub{ margin:8px auto 0; max-width:720px; color:var(--muted); font-weight:500; font-size:1.125rem; }

/* ====== Slider core (radio-controlled + autoplay) ====== */
.ed-slider{ position:relative; overflow:hidden; border-radius:24px; }
.ed-track{
display:flex; width:400%;
transform:translateX(0%);
animation:edAuto var(--autoplay) var(--easing) infinite;
}
/* Pause autoplay when user interacts */
.ed-slider:hover .ed-track,
.ed-slider:focus-within .ed-track{ animation-play-state:paused; }

/* one slide visible */
.ed-slide{ flex:0 0 25%; display:flex; }
.ed-card{
background: radial-gradient(circle at top left, var(--brand-teal) 0%, transparent 60%) padding-box,
linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%) padding-box;
border:1px solid var(--ring);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:28px; margin:12px; width:100%;
display:flex; flex-direction:column; gap:16px;
transition:transform .2s ease, box-shadow .2s ease;
}
.ed-card:hover, .ed-card:focus-within{ transform:translateY(-3px); box-shadow:0 18px 46px rgba(2,8,23,.14); }

.ed-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ed-client{ display:flex; align-items:center; gap:14px; min-width:0; }
.ed-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:3px solid var(--brand-teal); flex-shrink:0; }
.ed-meta{ min-width:0; }
.ed-name{ margin:0; font-weight:700; font-size:1.05rem; }
.ed-role{ margin:4px 0 0; font-size:.9rem; color:var(--muted); }

.ed-quote{ margin:0; font-size:1rem; line-height:1.75; }
.ed-ar{ font-weight:600; direction:rtl; text-align:right; }
.ed-en{ color:var(--muted); margin-top:8px; direction:ltr; text-align:left; }
.ed-testimonials.is-rtl .ed-en{ text-align:right; }
.ed-testimonials.is-rtl .ed-client{ direction:rtl; }

/* ====== Radio controls for a11y + manual nav */
.ed-nav{ position:absolute; inset-inline:12px; inset-block-end:12px; display:flex; gap:10px; z-index:2; }
.ed-dot{
inline-size:12px; block-size:12px; border-radius:50%;
background:rgba(0,0,0,.16);
border:2px solid transparent;
cursor:pointer;
}
.ed-dot:focus-visible{ outline:2px solid var(--brand-teal); outline-offset:2px; }

/* visually hidden radios */
.ed-r{ position:absolute; opacity:0; pointer-events:none; }

/* sync track with radios when user clicks a dot */
#ed-r1:checked ~ .ed-viewport .ed-track{ transform:translateX(0%); animation: none; }
#ed-r2:checked ~ .ed-viewport .ed-track{ transform:translateX(-25%); animation: none; }
#ed-r3:checked ~ .ed-viewport .ed-track{ transform:translateX(-50%); animation: none; }
#ed-r4:checked ~ .ed-viewport .ed-track{ transform:translateX(-75%); animation: none; }

/* style active dot via sibling combinator */
#ed-r1:checked ~ .ed-nav label[for="ed-r1"],
#ed-r2:checked ~ .ed-nav label[for="ed-r2"],
#ed-r3:checked ~ .ed-nav label[for="ed-r3"],
#ed-r4:checked ~ .ed-nav label[for="ed-r4"]{
background:var(--brand-teal);
border-color:rgba(255,255,255,.8);
}

/* ====== Keyframes: hold each slide, then move ====== */
@keyframes edAuto{
0%, 20% { transform: translateX(0%); }
25%, 45% { transform: translateX(-25%); }
50%, 70% { transform: translateX(-50%); }
75%, 95% { transform: translateX(-75%); }
100% { transform: translateX(0%); }
}

/* ====== Optional: swipeable snap rail on small screens ====== */
@media (max-width: 640px){
/* switch to snap scrolling for a native feel */
.ed-track{ width:100%; animation:none; }
.ed-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.ed-slide{ flex:0 0 100%; scroll-snap-align:center; }
.ed-nav{ position:static; justify-content:center; margin-top:12px; }
}

/* ====== Tighten small devices ====== */
@media (max-width: 480px){
.ed-title{ font-size:1.6rem; }
.ed-card{ padding:22px; }
.ed-avatar{ width:52px; height:52px; }
}
/* Text-size tweaks only */
.ed-testimonials .ed-kicker { font-size: 1.25rem; }  /* was .95rem */
.ed-testimonials .ed-title  { font-size: 2.5rem; }   /* keep same, just reaffirm */
/* Fonts-only override for testimonials */
.ed-testimonials .ed-title.en-content,
.ed-testimonials .ed-kicker.en-content,
.ed-testimonials .ed-quote.ed-en,
.ed-testimonials .ed-role,
.ed-testimonials .ed-name.en-content {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

.ed-testimonials .ed-title.ar-content,
.ed-testimonials .ed-kicker.ar-content,
.ed-testimonials .ed-quote.ed-ar,
.ed-testimonials .ed-name,
.ed-testimonials .ar-content {
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
/* 1) Register Neue Montreal (regular + bold) */
@font-face {
  font-family: "Neue Montreal";
  src: url("/highlights_website_individual/static/src/fonts/neue-montreal/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("/highlights_website_individual/static/src/fonts/neue-montreal/NeueMontreal-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2) English-only override (works with your <html class="en" lang="en">) */
/* English pages use Montserrat */
html.en body,
html[lang="en"] body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-synthesis: none; /* prevents faux bold/italic */
}


/* (Optional) If you ever add class="en" to <body>, keep Neue Montreal anyway */
html.en body.en,
html[lang="en"] body.en {
  font-family: "Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Packages Section Styles */
.packages-section {
    padding: 80px 0;
    background-color: #F6F6F6;
}

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

.package-card {
    background: white;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.package-card.featured {
    border: 2px solid #00677F;
    transform: scale(1.05);
}

.package-card.featured::before {
    content: "الأكثر شعبية";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #00677F;
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
}

.en .package-card.featured::before {
    content: "Most Popular";
}

.package-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #004165;
}

.package-price {
    margin-bottom: 30px;
}

.price-amount {
    font-size: 48px;
    font-weight: bold;
    color: #00677F;
}

.price-currency {
    font-size: 18px;
    color: #666;
    margin-left: 5px;
}

.price-period {
    display: block;
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

.package-features {
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    padding: 10px;
    background: #F6F6F6;
    border-radius: 8px;
}

.feature-number {
    background: #00677F;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.ar .feature-number {
    margin-right: 0;
    margin-left: 15px;
}

.feature-text {
    font-weight: 500;
    color: #004165;
}

/* Services Description Section */
.services-description {
    padding: 80px 0;
    background: white;
}

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

.service-item {
    padding: 30px;
    border-radius: 12px;
    background: #F6F6F6;
    border-left: 4px solid #00677F;
}

.ar .service-item {
    border-left: none;
    border-right: 4px solid #00677F;
}

.service-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #004165;
}

.service-description {
    color: #666;
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #00677F, #004165);
    color: white;
    text-align: center;
}

.cta-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.cta-description {
    font-size: 18px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}


.package-price{
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;              /* spacing between amount, icon, and period */
}

.price-amount{ font-weight:700; }

.price-currency{
  display:inline-flex;
  line-height:1;
}

.price-currency .riyalsvg{
  height:1em;              /* matches text height */
  width:auto;              /* keeps aspect ratio */
  flex:0 0 auto;
  transform: translateY(0.06em); /* subtle baseline nudge */
}

.price-period{
  margin-inline-start:.15rem;   /* works RTL/LTR */
  font-size:.875em;
  opacity:.8;
}

/* Accessible, visually hidden text */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* CSS Variables (Add to :root) */
:root {
    --primary-color: #00677F;
    --secondary-color: #004165;
    --accent-color: #F6F6F6;
    --text-light: #666666;
    --border-color: #e0e0e0;
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
    --transition: all 0.3s ease;
    --primary-teal: #00677F;
    --primary-navy: #004165;
    --light-gray: #F6F6F6;
    --white: #FFFFFF;
    --text-dark: #1a1a1a;
    --text-gray: #666666;
    --border-light: #e5e5e5;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
    --footer-bg: #004165;
    --footer-text: #E6ECEF;
    --footer-links: #FFFFFF;
    --footer-hover: #00677F;
    --footer-divider: rgba(230, 236, 239, 0.1);
    --brand-teal: #00677F;
    --brand-blue: #004165;
    --radius: 22px;
}

/* Packages Section Styles */
.packages-section {
    padding: 80px 0;
    background-color: var(--light-gray);
}

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

.package-card {
    background: var(--white);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.package-card.featured {
    border: 2px solid var(--primary-teal);
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 103, 127, 0.2);
}

.package-card.featured::before {
    content: "الأكثر شعبية";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-teal);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    z-index: 2;
}

.en .package-card.featured::before {
    content: "Most Popular";
}

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

.package-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--primary-navy);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-features {
    flex-grow: 1;
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    padding: 15px;
    background: var(--light-gray);
    border-radius: var(--border-radius);
    text-align: left;
    min-height: 60px;
}

.ar .feature-item {
    text-align: right;
}

.feature-text {
    font-weight: 500;
    color: var(--primary-navy);
    line-height: 1.4;
    font-size: 14px;
    width: 100%;
}

.package-action {
    margin-top: auto;
}



/* Services Description Section */
.services-description {
    padding: 80px 0;
    background: var(--white);
}

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

.service-item {
    padding: 30px;
    border-radius: 12px;
    background: var(--light-gray);
    border-left: 4px solid var(--primary-teal);
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.ar .service-item {
    border-left: none;
    border-right: 4px solid var(--primary-teal);
}

.service-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--primary-navy);
}

.service-description {
    color: var(--text-gray);
    line-height: 1.6;
    flex-grow: 1;
}


/* Responsive Design */
@media (max-width: 768px) {
    .packages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .package-card.featured {
        transform: none;
    }

    .package-card {
        min-height: auto;
    }

    .feature-item {
        min-height: auto;
        padding: 12px;
    }

    .package-title {
        font-size: 24px;
        min-height: auto;
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-button {
        width: 100%;
        max-width: 300px;
    }
/* 1. Make the main container a flexbox */
.packages-cards {
  display: flex;
  justify-content: center; /* Optional: centers the cards if there's space */
  gap: 2rem; /* Creates nice spacing between cards */
  align-items: stretch; /* This makes all cards the same height */
}

/* 2. Make each card a vertical flexbox */
.package-card {
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  width: 33.3%; /* Gives each card a third of the space, adjust as needed */
  border: 1px solid #e0e0e0; /* Example border */
  border-radius: 8px; /* Example rounded corners */
}

/* 3. Make the content area grow to push the button down */
.package-highlights {
  flex-grow: 1; /* This is the magic! It tells this section to take up all available empty space. */
}

/* 4. Style the button container */
.action-buttons {
  padding: 1.5rem; /* Give the button some breathing room */
  text-align: center;
}

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

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #323130;
    background-color: #ffffff;
}

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

/* ===== PACKAGES SECTION ===== */
.packages-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8fdff 0%, #ffffff 100%);
}

.packages-header {
    text-align: center;
    margin-bottom: 60px;
}

.packages-header h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #004165;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.packages-header p {
    font-size: 1.25rem;
    color: #605e5c;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
}

.packages-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 32px;
    align-items: stretch;
}

.package-card {
    background: #ffffff;
    border: 2px solid #f6f6f6;
    border-radius: 16px;
    padding: 40px 32px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 103, 127, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 700px;
}

.package-card:hover {
    box-shadow: 0 16px 40px rgba(0, 103, 127, 0.15);
    transform: translateY(-8px);
    border-color: #00677F;
}

.package-card.featured {
    border: 3px solid #00677F;
    transform: scale(1.05);
    background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);
    box-shadow: 0 12px 32px rgba(0, 103, 127, 0.2);
}

.package-card.featured:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 103, 127, 0.25);
}

.popular-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #00677F 0%, #004165 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 103, 127, 0.3);
}

.card-header {
    margin-bottom: 32px;
    flex-shrink: 0;
    min-height: 140px;
}

.package-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #004165;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.package-subtitle {
    font-size: 1.1rem;
    color: #605e5c;
    line-height: 1.6;
    font-weight: 400;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
    flex-shrink: 0;
}

.btn {
    padding: 16px 32px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: linear-gradient(135deg, #00677F 0%, #004165 100%);
    color: white;
    box-shadow: 0 6px 16px rgba(0, 103, 127, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #004165 0%, #003050 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 103, 127, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #00677F;
    border: 2px solid #00677F;
}

.btn-secondary:hover {
    background: #00677F;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 103, 127, 0.3);
}

.package-highlights {
    flex-grow: 1;
    margin-bottom: 32px;
}

.package-highlights h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #004165;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.features-list {
    list-style: none;
    min-height: 320px;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}

.checkmark {
    color: #00677F;
    font-weight: bold;
    margin-right: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.recommended-for {
    background: linear-gradient(135deg, #f6f6f6 0%, #e8f4f8 100%);
    padding: 24px;
    border-radius: 12px;
    font-size: 1rem;
    color: #323130;
    border-left: 6px solid #00677F;
    flex-shrink: 0;
}

.recommended-for strong {
    color: #004165;
    font-weight: 600;
}

/* ===== COMPARE PLANS SECTION ===== */
.compare-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.compare-header {
    text-align: center;
    margin-bottom: 60px;
}

.compare-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #004165;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.compare-header p {
    font-size: 1.2rem;
    color: #605e5c;
    max-width: 600px;
    margin: 0 auto;
}

.comparison-table-wrapper {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 103, 127, 0.1);
    background: white;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.comparison-table th,
.comparison-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e1dfdd;
}

.comparison-table th {
    background: linear-gradient(135deg, #004165 0%, #00677F 100%);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.comparison-table th.featured {
    background: linear-gradient(135deg, #00677F 0%, #004165 100%);
    position: relative;
}

.comparison-table th.featured::after {
    content: "Most Popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #004165;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.feature-column {
    text-align: left !important;
    background: #f6f6f6 !important;
    color: #004165 !important;
    font-weight: 600;
}

.feature-name {
    font-weight: 600;
    color: #004165;
    text-align: left;
    background: #f8f9fa;
}

.feature-value {
    font-weight: 500;
    color: #323130;
}

.comparison-table tr:hover {
    background-color: #f8fdff;
}

/* ===== SELECT SERVICE SECTION ===== */
.select-service-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);
}

.service-header {
    text-align: center;
    margin-bottom: 60px;
}

.service-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #004165;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.service-header p {
    font-size: 1.2rem;
    color: #605e5c;
    max-width: 700px;
    margin: 0 auto;
}

.service-categories {
    margin-bottom: 60px;
}

.service-category {
    margin-bottom: 60px;
}

.service-category h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #004165;
    margin-bottom: 32px;
    text-align: center;
    position: relative;
}

.service-category h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #00677F, #004165);
    border-radius: 2px;
}

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

.service-item {
    background: white;
    border: 2px solid #f6f6f6;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 103, 127, 0.08);
}

.service-item:hover {
    border-color: #00677F;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 103, 127, 0.15);
}

.service-item h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #004165;
    margin-bottom: 12px;
}

.service-item p {
    font-size: 1rem;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

.btn-outline {
    background: transparent;
    color: #00677F;
    border: 2px solid #00677F;
    padding: 12px 24px;
    font-size: 1rem;
}

.btn-outline:hover {
    background: #00677F;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 103, 127, 0.3);
}

.service-cta {
    text-align: center;
    background: linear-gradient(135deg, #004165 0%, #00677F 100%);
    color: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 103, 127, 0.2);
}

.service-cta h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.service-cta p {
    font-size: 1.2rem;
    margin-bottom: 32px;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn.large {
    padding: 20px 40px;
    font-size: 1.2rem;
    background: white;
    color: #004165;
}

.btn.large:hover {
    background: #f6f6f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .packages-cards {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    }

    .package-card.featured {
        transform: none;
    }

    .package-card.featured:hover {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {
    .packages-container {
        padding: 60px 16px;
    }

    .packages-header h1 {
        font-size: 2.5rem;
    }

    .compare-header h2,
    .service-header h2 {
        font-size: 2rem;
    }

    .packages-cards {
        /* Tablet tweaks only; phone stacking handled at 576px */
        gap: 24px;
    }

    .package-card {
        padding: 32px 24px;
        min-height: auto;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 16px 12px;
        font-size: 0.9rem;
    }

    .service-cta {
        padding: 40px 24px;
    }

    .service-cta h3 {
        font-size: 1.5rem;
    }
}

/* Phone-only stacking - Force single column layout */
@media (max-width: 576px) {
    .packages-cards {
        /* Force block layout to stack cards vertically on phones */
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        align-items: stretch !important;
    }

    .package-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 480px) {
    .packages-header h1 {
        font-size: 2rem;
    }

    .package-card {
        padding: 24px 20px;
    }

    .btn {
        padding: 14px 24px;
        font-size: 1rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px 8px;
        font-size: 0.8rem;
    }
}

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

.package-card {
    animation: fadeInUp 0.6s ease-out;
}

.package-card:nth-child(2) {
    animation-delay: 0.1s;
}

.package-card:nth-child(3) {
    animation-delay: 0.2s;
}

.service-item {
    animation: fadeInUp 0.6s ease-out;
}

.service-item:nth-child(2) { animation-delay: 0.1s; }
.service-item:nth-child(3) { animation-delay: 0.2s; }
.service-item:nth-child(4) { animation-delay: 0.3s; }

/* ===== BRAND ENHANCEMENTS ===== */
.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #00677F, #004165);
    border-radius: 16px 16px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.package-card.featured::before {
    opacity: 1;
    background: linear-gradient(90deg, #00677F, #004165, #00677F);
    height: 8px;
}

/* ===== ACCESSIBILITY ===== */
.btn:focus {
    outline: 3px solid #00677F;
    outline-offset: 2px;
}

.package-card:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 103, 127, 0.3);
}

.service-item:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 103, 127, 0.3);
}
.compare-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.compare-header {
    text-align: center;
    margin-bottom: 60px;
}

.compare-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #004165;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.compare-header p {
    font-size: 1.2rem;
    color: #605e5c;
    max-width: 600px;
    margin: 0 auto;
}

.comparison-table-wrapper {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 103, 127, 0.1);
    background: white;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.comparison-table th,
.comparison-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e1dfdd;
}

.comparison-table th {
    background: linear-gradient(135deg, #004165 0%, #00677F 100%);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.comparison-table th.featured {
    background: linear-gradient(135deg, #00677F 0%, #004165 100%);
    position: relative;
}

.comparison-table th.featured::after {
    content: "Most Popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #004165;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.feature-column {
    text-align: left !important;
    background: #f6f6f6 !important;
    color: #004165 !important;
    font-weight: 600;
}

.feature-name {
    font-weight: 600;
    color: #004165;
    text-align: left;
    background: #f8f9fa;
}

.feature-value {
    font-weight: 500;
    color: #323130;
}

.comparison-table tr:hover {
    background-color: #f8fdff;
}