/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. Root Variables
2. Global Styles & Typography
3. Layout (Container, Columns)
4. Utility Classes
5. Header & Navigation
6. Main Content Area
7. Buttons & Forms (Global)
8. Section Specific Styles
    8.1. Hero Section
    8.2. About Intro Section
    8.3. Services Section
    8.4. Statistics Section
    8.5. Team Section
    8.6. Clientele & Partners Section
    8.7. Sustainability Section (Timeline)
    8.8. External Resources Section
    8.9. FAQ Section (Accordion)
    8.10. Contact Section
9. Footer
10. Page Specific Styles
    10.1. Success Page
    10.2. Legal Pages (Privacy, Terms)
11. Components
    11.1. Cards
    11.2. Carousels (Basic Styling)
    11.3. Progress Indicators
12. Responsive Design (Media Queries)
-------------------------------------------------------------------*/

/* 1. Root Variables
-------------------------------------------------------------------*/
:root {
    /* Color Palette (Triad Based) */
    --color-primary: #0A4D68;       /* Deep Blue - Main */
    --color-primary-dark: #07384E;
    --color-primary-light: #0E6483;

    --color-secondary: #088395;     /* Teal - Accent 1 */
    --color-secondary-dark: #06606D;
    --color-secondary-light: #0AA0B3;

    --color-tertiary: #F5A623;      /* Warm Coral/Orange - Accent 2 */
    --color-tertiary-dark: #D48E1E;
    --color-tertiary-light: #F7B84F;

    /* Neutral Colors */
    --color-text: #333333;          /* Dark Gray for body text */
    --color-text-light: #555555;
    --color-text-headings: #222222;  /* Darker gray for strong headings */
    --color-background-light: #f8f9fa; /* Off-white / Very Light Gray */
    --color-background-medium: #e9ecef; /* Light Gray */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-border: #dee2e6;        /* Light Gray for borders */

    /* Fonts (Prioritizing Arabic fonts from HTML, with Latin fallbacks) */
    --font-heading: 'Tajawal', 'Roboto', sans-serif;
    --font-body: 'Cairo', 'Lato', sans-serif;

    /* Typography Sizes (Adaptive - based on root font-size) */
    --font-size-base: 1rem;         /* 16px by default */
    --font-size-sm: 0.875rem;       /* 14px */
    --font-size-lg: 1.125rem;       /* 18px */
    --font-size-xl: 1.25rem;        /* 20px */

    --h1-size: 2.8rem;
    --h2-size: 2.2rem;
    --h3-size: 1.6rem;
    --h4-size: 1.3rem;

    /* Spacing */
    --spacing-xs: 0.5rem;  /* 8px */
    --spacing-sm: 1rem;    /* 16px */
    --spacing-md: 1.5rem;  /* 24px */
    --spacing-lg: 2rem;    /* 32px */
    --spacing-xl: 3rem;    /* 48px */
    --section-padding-y: 4rem; /* Vertical padding for sections */

    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-timing: ease-in-out;

    /* Borders */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;  /* 8px */
    --border-radius-lg: 0.75rem; /* 12px */

    /* Shadows */
    --box-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --box-shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --box-shadow-lg: 0 10px 20px rgba(0,0,0,0.1);
    
    /* Header Height */
    --header-height: 70px; /* Adjust if logo or nav items change height */
}

/* 2. Global Styles & Typography
-------------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* Base font size for rem units */
    scroll-behavior: smooth;
    direction: rtl; /* Right-to-left for Arabic */
    font-family: var(--font-body);
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); } /* Used for section titles */
h3 { font-size: var(--h3-size); } /* Used for card titles, smaller headings */
h4 { font-size: var(--h4-size); }

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-light);
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-timing);
}

a:hover, a:focus {
    color: var(--color-secondary-dark);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes bottom space under images */
}

ul, ol {
    list-style-position: inside; /* Better for RTL */
    padding-right: var(--spacing-sm); /* Indentation for RTL */
}

/* 3. Layout (Container, Columns)
-------------------------------------------------------------------*/
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--spacing-sm)); /* Gutter compensation */
    margin-right: calc(-1 * var(--spacing-sm));
    align-items: flex-start; /* Default vertical alignment */
}

.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: var(--spacing-sm); /* Gutter */
}

.column.is-two-thirds {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 66.6666%;
}
.column.is-one-third { /* For explicit one-third column */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 33.3333%;
}

/* 4. Utility Classes
-------------------------------------------------------------------*/
.section-padding {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.background-light {
    background-color: var(--color-background-light);
}

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

.text-white {
    color: var(--color-white) !important;
}

.section-title {
    text-align: center;
    font-size: var(--h2-size);
    color: var(--color-text-headings);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.section-subtitle {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.read-more-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: bold;
    display: inline-block; /* Allows margin/padding */
    margin-top: var(--spacing-xs);
    transition: color var(--transition-speed-fast) var(--transition-timing), transform var(--transition-speed-fast) var(--transition-timing);
}
.read-more-link:hover, .read-more-link:focus {
    color: var(--color-secondary-dark);
    text-decoration: underline;
    transform: translateX(-3px); /* Subtle movement for RTL, adjust if LTR */
}
html[dir="ltr"] .read-more-link:hover, html[dir="ltr"] .read-more-link:focus {
    transform: translateX(3px);
}


/* 5. Header & Navigation
-------------------------------------------------------------------*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-sm);
    z-index: 1000;
    transition: background-color var(--transition-speed-normal) var(--transition-timing), box-shadow var(--transition-speed-normal) var(--transition-timing);
}

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

.logo img {
    max-height: calc(var(--header-height) - 20px); /* Adjust based on padding */
    width: auto;
}

.main-navigation .nav-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.main-navigation .nav-menu li {
    margin-right: var(--spacing-md); /* For RTL, this is left margin */
}
html[dir="ltr"] .main-navigation .nav-menu li {
    margin-left: var(--spacing-md);
    margin-right: 0;
}


.main-navigation .nav-menu li:last-child {
    margin-right: 0;
}
html[dir="ltr"] .main-navigation .nav-menu li:last-child {
    margin-left: 0;
}

.main-navigation .nav-menu a {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
    padding: var(--spacing-xs) 0;
    position: relative;
    transition: color var(--transition-speed-fast) var(--transition-timing);
}

.main-navigation .nav-menu a:hover,
.main-navigation .nav-menu a:focus,
.main-navigation .nav-menu a.active { /* Add .active class via JS for current page */
    color: var(--color-primary);
}

.main-navigation .nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0; /* For RTL */
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-speed-normal) var(--transition-timing);
}
html[dir="ltr"] .main-navigation .nav-menu a::after {
    left: 0;
    right: auto;
}

.main-navigation .nav-menu a:hover::after,
.main-navigation .nav-menu a:focus::after,
.main-navigation .nav-menu a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--color-text);
    cursor: pointer;
}

/* 6. Main Content Area
-------------------------------------------------------------------*/
main {
    padding-top: var(--header-height); /* Offset for fixed header */
}

/* 7. Buttons & Forms (Global)
-------------------------------------------------------------------*/
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color var(--transition-speed-normal) var(--transition-timing),
                color var(--transition-speed-normal) var(--transition-timing),
                transform var(--transition-speed-fast) var(--transition-timing),
                box-shadow var(--transition-speed-normal) var(--transition-timing);
    border: 2px solid transparent;
    user-select: none; /* Prevent text selection on click */
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-md);
    text-decoration: none;
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-md);
    text-decoration: none;
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}


/* Form Styling */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-headings);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-speed-normal) var(--transition-timing), box-shadow var(--transition-speed-normal) var(--transition-timing);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary), 0.25); /* Focus ring, needs RGB version of primary */
}
/* For box-shadow focus, if primary is #0A4D68 (10, 77, 104) */
:root { --color-primary-rgb: 10, 77, 104; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

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

/* 8. Section Specific Styles
-------------------------------------------------------------------*/

/* 8.1. Hero Section */
.hero-section {
    position: relative;
    color: var(--color-white); /* Ensures text is white */
    padding: calc(var(--section-padding-y) * 1.5) 0; /* More padding for hero */
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex; /* For vertical centering of content */
    align-items: center; /* For vertical centering of content */
    min-height: calc(100vh - var(--header-height)); /* Full viewport height minus header */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)); /* Darkening overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: calc(var(--h1-size) * 1.2); /* Larger for Hero */
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.hero-section .btn-primary {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    background-color: var(--color-tertiary); /* Use accent for hero CTA */
    border-color: var(--color-tertiary);
}
.hero-section .btn-primary:hover {
    background-color: var(--color-tertiary-dark);
    border-color: var(--color-tertiary-dark);
}

/* 8.2. About Intro Section */
.about-intro-section .columns {
    align-items: center; /* Vertically align column content */
}
.about-intro-section .image-column img {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
}

/* 8.3. Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

/* 8.4. Statistics Section */
.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    text-align: center;
}
.statistic-item {
    padding: var(--spacing-md);
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-sm);
    transition: transform var(--transition-speed-normal) var(--transition-timing), box-shadow var(--transition-speed-normal) var(--transition-timing);
}
.statistic-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-md);
}
/* Progress Indicator is styled in Components section */
.statistic-title {
    font-size: 1.4rem;
    color: var(--color-text-headings);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}
.statistic-item p {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}


/* 8.5. Team Section */
.team-carousel { /* Basic styling for a scrollable container, JS for full carousel */
    display: flex;
    overflow-x: auto;
    padding-bottom: var(--spacing-md); /* Space for scrollbar */
    gap: var(--spacing-lg);
}
.team-carousel .team-member-card {
    min-width: 300px; /* Ensure cards don't get too squished */
    flex: 0 0 auto; /* Prevent shrinking/growing */
}
.member-name {
    font-size: var(--h3-size);
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary);
}
.member-role {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    font-weight: bold;
    margin-bottom: var(--spacing-sm);
}
.member-bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* 8.6. Clientele & Partners Section */
.logo-carousel {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens if not a true JS carousel */
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
}
.logo-carousel img {
    max-height: 75px; /* As per HTML */
    width: auto;
    opacity: 0.7;
    transition: opacity var(--transition-speed-normal) var(--transition-timing);
    filter: grayscale(50%); /* Subtle desaturation */
}
.logo-carousel img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* 8.7. Sustainability Section (Timeline) */
.sustainability-section .columns {
    align-items: center;
}
.sustainability-section .image-column img {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
}
.sustainability-timeline {
    list-style: none;
    padding-right: 0; /* Remove default list padding for custom styling */
    position: relative;
    margin-top: var(--spacing-lg);
}
html[dir="ltr"] .sustainability-timeline {
    padding-left: 0;
}

.sustainability-timeline::before { /* The timeline vertical bar */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px; /* Position for RTL */
    width: 3px;
    background-color: var(--color-secondary-light);
    border-radius: 3px;
}
html[dir="ltr"] .sustainability-timeline::before {
    left: 10px;
    right: auto;
}

.sustainability-timeline li {
    margin-bottom: var(--spacing-lg);
    padding-right: var(--spacing-lg); /* Space from timeline bar for RTL */
    position: relative;
}
html[dir="ltr"] .sustainability-timeline li {
    padding-left: var(--spacing-lg);
    padding-right: 0;
}

.sustainability-timeline li::before { /* Dot on the timeline */
    content: '';
    position: absolute;
    top: 5px; /* Align with text */
    right: 0px; /* Position dot on the bar for RTL */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    border: 3px solid var(--color-white); /* Creates a ring effect */
    z-index: 1;
    transform: translateX(calc(-50% + 1.5px)); /* Center dot on the line */
}
html[dir="ltr"] .sustainability-timeline li::before {
    left: 0px;
    right: auto;
    transform: translateX(calc(-50% - 1.5px));
}

.sustainability-timeline li strong {
    display: block;
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-lg);
}
.sustainability-timeline li p {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: 0;
}


/* 8.8. External Resources Section */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}
.resource-card .card-title a {
    color: var(--color-primary);
    text-decoration: none;
}
.resource-card .card-title a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* 8.9. FAQ Section (Accordion) */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden; /* To contain background of question */
}
.faq-question {
    width: 100%;
    background-color: var(--color-background-light);
    padding: var(--spacing-md);
    text-align: right; /* For RTL */
    border: none;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-headings);
    cursor: pointer;
    position: relative; /* For a_rrow icon */
    transition: background-color var(--transition-speed-fast) var(--transition-timing);
}
html[dir="ltr"] .faq-question {
    text-align: left;
}

.faq-question:hover {
    background-color: var(--color-background-medium);
}
.faq-question::after { /* Accordion icon (e.g., plus/minus or arrow) */
    content: '+'; /* Default: plus */
    font-size: 1.5em;
    color: var(--color-secondary);
    position: absolute;
    left: var(--spacing-md); /* For RTL */
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--transition-speed-normal) var(--transition-timing);
}
html[dir="ltr"] .faq-question::after {
    right: var(--spacing-md);
    left: auto;
}

.faq-question[aria-expanded="true"]::after {
    content: '−'; /* Minus when expanded */
    transform: translateY(-50%) rotate(180deg); /* Optional rotation */
}
.faq-answer {
    padding: var(--spacing-md);
    background-color: var(--color-white);
    display: none; /* JS will toggle to block/flex */
    font-size: var(--font-size-base);
}
.faq-answer p {
    margin-bottom: 0;
}


/* 8.10. Contact Section */
.contact-form {
    max-width: 700px;
    margin: 0 auto var(--spacing-xl) auto; /* Center form and add bottom margin */
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
}
.contact-details {
    text-align: center;
    margin-top: var(--spacing-lg);
}
.contact-details h3 {
    color: var(--color-text-headings);
    margin-bottom: var(--spacing-sm);
}
.contact-details p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-light);
}
.contact-details p strong {
    color: var(--color-text-headings);
}
.contact-details a {
    color: var(--color-secondary);
}
.contact-details a:hover {
    color: var(--color-secondary-dark);
}

/* 9. Footer
-------------------------------------------------------------------*/
.site-footer {
    background-color: var(--color-text-headings); /* Dark background for footer */
    color: rgba(255,255,255,0.7);
    padding: var(--section-padding-y) 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
}

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

.footer-widget h4 {
    color: var(--color-white);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-heading);
}

.footer-widget p {
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--spacing-sm);
}

.footer-widget ul {
    list-style: none;
    padding-right: 0; /* Override default list padding */
}
html[dir="ltr"] .footer-widget ul {
    padding-left: 0;
}


.footer-widget ul li {
    margin-bottom: var(--spacing-xs);
}

.footer-widget ul a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-timing), padding-right var(--transition-speed-fast) var(--transition-timing);
}
html[dir="ltr"] .footer-widget ul a {
    transition: color var(--transition-speed-fast) var(--transition-timing), padding-left var(--transition-speed-fast) var(--transition-timing);
}

.footer-widget ul a:hover, .footer-widget ul a:focus {
    color: var(--color-white);
    padding-right: 5px; /* Indent on hover for RTL */
}
html[dir="ltr"] .footer-widget ul a:hover, html[dir="ltr"] .footer-widget ul a:focus {
    padding-left: 5px; /* Indent on hover for LTR */
    padding-right: 0;
}


.footer-widget .social-links a {
    /* Text-based links, no icons needed as per prompt */
    font-weight: bold;
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.6);
}

/* 10. Page Specific Styles
-------------------------------------------------------------------*/

/* 10.1. Success Page */
body.success-page { /* Add this class to body of success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    background-color: var(--color-background-light);
    padding: var(--spacing-lg);
    padding-top: 0; /* Ensure no overlap with fixed header if header is present */
}
.success-page .site-header { /* If header is on success page, ensure it's styled */
    background-color: var(--color-primary); /* Example: different header bg */
}
.success-page .site-header .main-navigation .nav-menu a {
    color: var(--color-white);
}
.success-content {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
    max-width: 600px;
}
.success-content h1 {
    color: var(--color-secondary); /* Success color */
    font-size: calc(var(--h1-size) * 1.1);
    margin-bottom: var(--spacing-md);
}
.success-content p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
}


/* 10.2. Legal Pages (Privacy, Terms) */
body.legal-page main { /* Add class "legal-page" to body of privacy.html & terms.html */
    padding-top: calc(var(--header-height) + var(--section-padding-y)); /* Header + extra top padding */
    padding-bottom: var(--section-padding-y);
}
.legal-page .container h1 { /* Main title of the legal page */
    margin-bottom: var(--spacing-lg);
    text-align: center;
}
.legal-page .container h2 {
    font-size: var(--h3-size); /* Subheadings smaller */
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}
.legal-page .container p,
.legal-page .container ul,
.legal-page .container ol {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}
.legal-page .container ul, .legal-page .container ol {
    padding-right: var(--spacing-lg);
}
html[dir="ltr"] .legal-page .container ul, html[dir="ltr"] .legal-page .container ol {
    padding-left: var(--spacing-lg);
    padding-right: 0;
}


/* 11. Components
-------------------------------------------------------------------*/

/* 11.1. Cards (Services, Team, Resources, etc.) */
.card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
    overflow: hidden; /* Ensures image corners are rounded if card is rounded */
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a grid equal height */
    transition: transform var(--transition-speed-normal) var(--transition-timing), box-shadow var(--transition-speed-normal) var(--transition-timing);
    text-align: center; /* Center text content in the card */
    align-items: center; /* Center items like image block and content block */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-lg);
}

.card-image { /* Container for the image */
    width: 100%;
    height: 220px; /* Fixed height for card images */
    overflow: hidden;
    /* display: flex; already handled by card align-items: center; */
    /* justify-content: center; */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, crop if necessary */
    object-position: center; /* Center the image within its frame */
    transition: transform var(--transition-speed-normal) var(--transition-timing);
}
.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.card-content {
    padding: var(--spacing-md);
    flex-grow: 1; /* Allows content to take up remaining space, useful for equal height cards */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes content and potential actions apart */
}
.card-content p {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm); /* Default, can be overridden */
}
.card-title {
    font-size: var(--h3-size);
    color: var(--color-text-headings);
    margin-bottom: var(--spacing-sm);
}

/* 11.3. Progress Indicators (Statistics Section) */
.progress-indicator {
    font-size: 3.5rem; /* Large number for impact */
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1;
}
.progress-indicator .progress-value { /* The span holding the number */
    display: inline-block; /* Or block if it's on its own line */
}

/* 12. Responsive Design (Media Queries)
-------------------------------------------------------------------*/
@media (max-width: 1024px) {
    :root {
        --h1-size: 2.5rem;
        --h2-size: 2rem;
        --h3-size: 1.5rem;
    }
    .hero-title { font-size: calc(var(--h1-size) * 1.1); }
    .hero-subtitle { font-size: var(--font-size-lg); }
}

@media (max-width: 768px) {
    html {
        font-size: 15px; /* Slightly smaller base for smaller screens */
    }
    :root {
        --h1-size: 2.2rem;
        --h2-size: 1.8rem;
        --h3-size: 1.4rem;
        --section-padding-y: 3rem;
    }
    .hero-section {
        min-height: auto; /* Allow hero to shrink on mobile */
        padding: calc(var(--section-padding-y) * 1.2) 0;
    }

    .columns {
        margin-left: 0;
        margin-right: 0;
    }
    .column,
    .column.is-two-thirds,
    .column.is-one-third {
        flex-basis: 100%; /* Columns stack on mobile */
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .column.image-column {
        margin-top: var(--spacing-lg); /* Add space if image is below text */
    }
    .about-intro-section .image-column { order: -1; margin-bottom: var(--spacing-lg);} /* Image on top on mobile for about */


    /* Mobile Navigation */
    .main-navigation .nav-menu {
        display: none; /* Hide by default */
        flex-direction: column;
        position: absolute;
        top: var(--header-height);
        right: 0; /* For RTL */
        background-color: var(--color-white);
        width: 100%;
        box-shadow: var(--box-shadow-md);
        padding: var(--spacing-sm) 0;
        border-top: 1px solid var(--color-border);
    }
    html[dir="ltr"] .main-navigation .nav-menu {
        left: 0;
        right: auto;
    }

    .main-navigation .nav-menu.is-active { /* Class added by JS */
        display: flex;
    }

    .main-navigation .nav-menu li {
        margin-right: 0; /* For RTL */
        width: 100%;
    }
    html[dir="ltr"] .main-navigation .nav-menu li {
        margin-left: 0;
    }

    .main-navigation .nav-menu a {
        display: block;
        padding: var(--spacing-md) var(--spacing-lg);
        text-align: right; /* For RTL */
        border-bottom: 1px solid var(--color-border);
    }
    html[dir="ltr"] .main-navigation .nav-menu a {
        text-align: left;
    }

    .main-navigation .nav-menu li:last-child a {
        border-bottom: none;
    }
    .main-navigation .nav-menu a::after { display: none; } /* Remove underline effect on mobile */

    .menu-toggle {
        display: block; /* Show burger icon */
    }

    .services-grid, .statistics-grid, .resources-grid, .footer-widgets {
        grid-template-columns: 1fr; /* Stack grid items */
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    :root {
        --h1-size: 1.9rem;
        --h2-size: 1.6rem;
        --h3-size: 1.3rem;
        --section-padding-y: 2.5rem;
    }
    .container {
        width: 95%;
    }
    .btn, button, input[type="submit"], input[type="button"] {
        padding: var(--spacing-sm) var(--spacing-md); /* Smaller buttons */
        font-size: var(--font-size-sm);
    }
    .hero-section .btn-primary {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
    }
}

/* Cookie Consent Popup (minimal styles, mostly from HTML if preferred) */
#cookieConsentPopup {
    /* Styles are mostly inline in HTML, but can be enhanced here if needed */
    font-family: var(--font-body) !important; /* Ensure correct font */
}
#cookieConsentPopup p a {
    color: var(--color-tertiary-light) !important; /* Make link stand out */
}
#acceptCookieConsent {
    font-family: var(--font-heading) !important;
}

/* ScrollReveal and Motion One will be handled by JS,
   Animate.css classes are used directly in HTML.
   This CSS focuses on layout, theme, and base component styling.
*/