/* style.css */

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

1. CSS Variables
2. Base & Typography
3. Layout & Helpers
4. Header & Navigation
5. Hero Section
6. Buttons & Interactive Elements
7. Cards (General & Specific)
    7.1. General Card
    7.2. Process Cards
    7.3. Event/Webinar Cards
    7.4. News Cards
    7.5. Pricing Cards
    7.6. External Resource Cards
8. Accordion
9. Forms
10. Modals
11. Section Specific Styling
    11.1. Our Process
    11.2. Methodology
    11.3. Behind The Scenes
    11.4. Contact Section
12. Footer
13. Page Specific Styles
    13.1. Success Page
    13.2. Privacy & Terms Pages
14. Animations & Transitions
    14.1. Scroll Animations (placeholder classes)
    14.2. Page Transitions
15. Responsive Adjustments
-------------------------------------------------------------------*/

/* 1. CSS Variables (from HTML, can be expanded) */
:root {
    --color-primary: #0A2463;       /* Deep Blue */
    --color-secondary: #3E92CC;    /* Vibrant Teal */
    --color-accent1: #F79F79;       /* Warm Orange */
    --color-accent2: #FFC43D;       /* Bright Yellow/Gold */
    
    --color-text-dark: #1f2937;     /* Dark Gray for text on light backgrounds */
    --color-text-light: #f8f9fa;    /* Light Gray/White for text on dark backgrounds */
    --color-text-muted: #6b7280;  /* Muted gray for less important text */

    --color-background-dark: #0c1322; /* Very Dark Blue/Black */
    --color-background-light: #ffffff; /* White */
    --color-background-soft: #f3f4f6;  /* Soft Gray for alternating sections */
    
    --font-header: 'Cairo', 'Inter', sans-serif; /* Cairo for Arabic, Inter as fallback */
    --font-body: 'Tajawal', 'IBM Plex Sans', sans-serif; /* Tajawal for Arabic, IBM Plex Sans as fallback */

    --border-radius-sm: 0.375rem; /* 6px */
    --border-radius-md: 0.5rem;   /* 8px */
    --border-radius-lg: 0.75rem;  /* 12px */

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 2. Base & Typography */
body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    line-height: 1.7;
    font-size: 1rem; /* 16px */
    -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-header);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.3;
    margin-bottom: 0.75em; /* Tailwind's default is often smaller, adjust if needed */
}

h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; }   /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
h4 { font-size: 1.25rem; }/* 20px */

p {
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--color-accent1);
}

.section-title {
    font-size: 2.25rem; /* ~36px, slightly smaller than h1 */
    font-weight: 900;
    text-align: center;
    margin-bottom: 2.5rem; /* Increased margin */
    color: var(--color-primary);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
@media (min-width: 768px) {
    .section-title {
        font-size: 2.75rem; /* ~44px */
    }
}

.gradient-text {
    background: linear-gradient(to right, var(--color-secondary), var(--color-accent1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* 3. Layout & Helpers */
.container { /* Tailwind already provides this via mx-auto px-6 etc. */
    /* Custom container if needed, but rely on Tailwind's */
}

section {
    padding-top: 4rem;    /* 64px */
    padding-bottom: 4rem; /* 64px */
}
@media (min-width: 768px) {
    section {
        padding-top: 6rem;    /* 96px */
        padding-bottom: 6rem; /* 96px */
    }
}

.dark-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}
.content-over-overlay {
    position: relative;
    z-index: 2;
}

/* Background image default styles */
[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 4. Header & Navigation */
header {
    /* Tailwind handles sticky and z-index. Custom gradient in HTML */
    transition: background-color 0.3s ease;
}
header nav a {
    font-weight: 500;
}
#mobile-menu-links a {
    color: var(--color-text-light);
}
#mobile-menu-links a:hover {
    background-color: var(--color-secondary) !important; /* Tailwind might override if not important */
    color: white;
}


/* 5. Hero Section */
#hero {
    position: relative;
    color: var(--color-text-light); /* Ensured by html */
}
#hero h1 {
    color: #FFFFFF; /* STROGLY enforced white text */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
#hero p {
    color: var(--color-text-light);
    opacity: 0.9;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* Behind .content-over-overlay */
}

/* 6. Buttons & Interactive Elements */
/* Global button styles */
.futuristic-button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    padding: 0.75rem 1.75rem; /* Slightly more padding for better feel */
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 1rem;
    color: white;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent1) 100%);
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.futuristic-button::before, button::before, input[type="submit"]::before, input[type="button"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s ease;
    z-index: -1;
}

.futuristic-button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.futuristic-button:hover::before, button:hover::before, input[type="submit"]:hover::before, input[type="button"]:hover::before {
    left: 100%;
}

.futuristic-button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Read More Link Style */
.read-more-link {
    color: var(--color-secondary);
    font-weight: 700;
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
    text-decoration: none;
}
.read-more-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 0px;
    right: 0;
    background: var(--color-accent1);
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}
html[dir="ltr"] .read-more-link::after {
    left: 0;
    right: auto;
}
.read-more-link:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}
html[dir="ltr"] .read-more-link:hover::after {
    right: 0;
    left: auto;
}
.read-more-link:hover {
    color: var(--color-accent1);
}
/* Applying to news modal buttons in HTML */
#news .card-content button.open-modal-button {
    background: none;
    padding: 0;
    color: var(--color-secondary);
    font-weight: bold;
    box-shadow: none;
    text-align: right; /* For RTL */
}
#news .card-content button.open-modal-button:hover {
    color: var(--color-accent1);
    transform: none;
    filter: none;
    text-decoration: underline;
}
html[dir="ltr"] #news .card-content button.open-modal-button {
    text-align: left;
}


/* 7. Cards (General & Specific) */
/* 7.1. General Card */
.card {
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a grid take full height of their row */
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.card-image {
    width: 100%;
    /* A common aspect ratio for card images */
    aspect-ratio: 16 / 10; /* Or use a fixed height if preferred: height: 200px; */
    overflow: hidden;
    display: flex; /* for centering img if it's smaller than container (not with object-fit:cover) */
    align-items: center; /* for centering img */
    justify-content: center; /* for centering img */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for consistent image display */
    transition: transform 0.5s ease;
}
.card:hover .card-image img {
    transform: scale(1.08);
}

.card-content {
    padding: 1.5rem; /* 24px */
    flex-grow: 1; /* Allows content to take remaining space, useful for buttons at bottom */
    display: flex;
    flex-direction: column;
    text-align: right; /* For RTL */
}
html[dir="ltr"] .card-content {
    text-align: left;
}
.card-content h3 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}
.card-content p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    flex-grow: 1; /* Pushes button to bottom if it's the last child */
}
.card-content .futuristic-button,
.card-content .read-more-link {
    margin-top: auto; /* Pushes button to the bottom */
}

/* 7.2. Process Cards (Special styling for circular image container) */
#our-process .card {
    align-items: center; /* Center content like the icon and text */
    text-align: center;
}
#our-process .card-image { /* This is the circular image container */
    width: 8rem;  /* 128px */
    height: 8rem; /* 128px */
    border-radius: 50%;
    margin-bottom: 1rem;
    aspect-ratio: 1 / 1; /* Make it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* Small padding for the inner image if needed */
}
#our-process .card-image img { /* The actual image inside the circle */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
#our-process .card-content h3 {
    text-align: center;
}
#our-process .card-content p {
    text-align: center;
}


/* 7.3. Event/Webinar Cards - General card styles apply */
#events .card-content p, #webinars .card-content p {
    font-size: 0.9rem;
}
#events .card-content .futuristic-button,
#webinars .card-content .futuristic-button {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
}

/* 7.4. News Cards - General card styles apply */
#news .card-content .text-sm {
    margin-bottom: 0.75rem; /* Tailwind class */
}

/* 7.5. Pricing Cards */
#pricing .card {
    text-align: center;
    border: 2px solid transparent;
}
#pricing .card.border-\[var\(--color-accent1\)\] { /* Targeting the specific highlighted card from HTML */
    /* Tailwind classes already handle this, this is for potential overrides */
}
#pricing .card-content h3 {
    font-size: 1.75rem;
}
#pricing .card-content ul {
    list-style: none;
    padding-right: 0; /* Reset for RTL */
    margin-bottom: 2rem;
}
html[dir="ltr"] #pricing .card-content ul {
    padding-left: 0;
}
#pricing .card-content ul li {
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
    display: flex; /* For icon alignment */
    align-items: center;
    justify-content: flex-end; /* For RTL */
}
html[dir="ltr"] #pricing .card-content ul li {
    justify-content: flex-start;
}
#pricing .card-content ul li svg {
    margin-left: 0.5rem; /* For RTL */
    color: var(--color-secondary); /* Tailwind uses green-500, can override here */
}
html[dir="ltr"] #pricing .card-content ul li svg {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* 7.6. External Resource Cards */
#external-resources .p-6 { /* Tailwind class from HTML */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#external-resources .p-6:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}
#external-resources h3 {
    font-size: 1.15rem;
}


/* 8. Accordion */
.accordion-item {
    transition: box-shadow 0.3s ease;
}
.accordion-header {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.accordion-header:hover {
    background-color: var(--color-background-soft);
}
.accordion-header svg {
    transition: transform 0.3s ease-in-out;
}
.accordion-header svg.rotate-180 {
    transform: rotate(180deg);
}
.accordion-content {
    /* display: none; by default in HTML */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    max-height: 0; /* For JS animation */
    padding-top: 0;
    padding-bottom: 0;
}
.accordion-content.active { /* Class to be toggled by JS */
    max-height: 500px; /* Adjust as needed, should be larger than content */
    padding-top: 1rem;
    padding-bottom: 1rem;
}


/* 9. Forms */
.futuristic-input {
    background-color: rgba(255, 255, 255, 0.85); /* Lighter for better readability on light bg */
    border: 1px solid var(--color-secondary);
    color: var(--color-text-dark); /* Text input color */
    padding: 0.85rem 1rem; /* More padding */
    border-radius: var(--border-radius-sm);
    transition: all 0.3s ease;
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
}
.futuristic-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8;
}
.futuristic-input:focus {
    outline: none;
    border-color: var(--color-accent1);
    box-shadow: 0 0 0 3px rgba(247, 159, 121, 0.4); /* Accent1 with alpha */
    background-color: white;
}
#contact-form-section .futuristic-input {
    background-color: rgba(255, 255, 255, 0.15); /* For dark background of contact form */
    color: var(--color-text-light);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
#contact-form-section .futuristic-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
#contact-form-section .futuristic-input:focus {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: var(--color-accent2);
    box-shadow: 0 0 0 3px rgba(255, 196, 61, 0.5);
}
#contact-form-section label {
    color: var(--color-text-light);
    font-weight: 500;
}


/* 10. Modals */
.fixed[id*="-modal-"] { /* Targeting modals by common part of their ID */
    /* Tailwind classes handle basic fixed, bg, flex, items-center, justify-center */
    /* JS handles display: none/flex */
}
.fixed[id*="-modal-"] > div { /* The white content box */
    max-height: 90vh; /* Ensure modal content is scrollable if too long */
    overflow-y: auto;
}
.closeModalButton {
    border: none;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    padding: 0.25rem 0.75rem;
    color: var(--color-text-muted);
    transition: color 0.2s ease;
}
.closeModalButton:hover {
    color: var(--color-text-dark);
}


/* 11. Section Specific Styling */
/* 11.1. Our Process - Card styles handled in 7.2 */

/* 11.2. Methodology */
#methodology-accordion {
    /* Accordion item styles are global */
}
#methodology img { /* The infographic */
    max-width: 100%;
    height: auto;
}

/* 11.3. Behind The Scenes */
#behind-the-scenes .card-image { /* Here card-image is the direct grid item */
    aspect-ratio: 4 / 3; /* Common aspect ratio for gallery images */
}
#behind-the-scenes .card-image img {
    transition: transform 0.5s ease, filter 0.5s ease;
}
#behind-the-scenes .card-image:hover img {
    transform: scale(1.1);
    filter: brightness(0.8);
}

/* 11.4. Contact Section */
#contact-form-section {
    position: relative; /* For potential pseudo-elements or overlays if needed */
}
#contact-form-section .bg-white\/10 { /* Targeting the form container from HTML */
    /* Tailwind class, can add glassmorphism */
    /* backdrop-filter: blur(10px); /* Tailwind class backdrop-blur-md */
    /* -webkit-backdrop-filter: blur(10px); */
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#contact-form-section h2, #contact-form-section p {
    color: var(--color-text-light);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
#contact-form-section a {
    color: var(--color-accent2);
}
#contact-form-section a:hover {
    color: var(--color-text-light);
    text-decoration: underline;
}


/* 12. Footer */
footer {
    /* Gradient defined in HTML */
}
footer h3 {
    color: var(--color-text-light);
    opacity: 0.95;
}
footer p, footer li, footer a {
    color: var(--color-text-light);
    opacity: 0.8;
    font-size: 0.95rem;
}
footer a:hover {
    color: var(--color-accent2);
    opacity: 1;
}
footer .border-t {
    border-color: rgba(255, 255, 255, 0.2);
}
/* Footer social links are text-based, styled by general 'a' tags */


/* 13. Page Specific Styles */
/* 13.1. Success Page (success.html) */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-text-light);
}
.success-page-container h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-text-light);
}
.success-page-container p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: var(--color-text-light);
    opacity: 0.9;
}
.success-page-container .futuristic-button {
    background: linear-gradient(135deg, var(--color-accent1) 0%, var(--color-accent2) 100%);
}

/* 13.2. Privacy & Terms Pages (privacy.html, terms.html) */
.legal-page-content { /* Add this class to the main content container of these pages */
    padding-top: 100px; /* Avoid header overlap */
    padding-bottom: 4rem; /* Standard bottom padding */
}
.legal-page-content .container { /* Ensure container within is also padded if header is truly fixed */
    /* padding-top: calc(6rem + 20px); /* header height + some space */
}
.legal-page-content h1 {
    margin-bottom: 2rem;
    color: var(--color-primary);
}
.legal-page-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-secondary);
    font-size: 1.75rem;
}
.legal-page-content p, .legal-page-content li {
    line-height: 1.8;
    color: var(--color-text-dark);
}
.legal-page-content ul, .legal-page-content ol {
    margin-bottom: 1rem;
    padding-right: 1.5rem; /* For RTL */
}
html[dir="ltr"] .legal-page-content ul, html[dir="ltr"] .legal-page-content ol {
    padding-left: 1.5rem;
    padding-right: 0;
}

/* 14. Animations & Transitions */
/* 14.1. Scroll Animations (placeholder classes for JS to target) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 14.2. Page Transitions (from HTML) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.page-transition-fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}
.page-transition-fade-out {
    animation: fadeOut 0.5s ease-in-out forwards;
}

/* 15. Responsive Adjustments (Tailwind handles most, add specific overrides if needed) */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.75rem; /* ~28px */
        margin-bottom: 2rem;
    }
    h1 { font-size: 2rem; } /* 32px */
    h2 { font-size: 1.6rem; } /* ~26px */
    h3 { font-size: 1.2rem; } /* ~19px */

    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .card-content {
        padding: 1rem;
    }
    .card-content h3 {
        font-size: 1.1rem;
    }
    .card-content p {
        font-size: 0.9rem;
    }

    #hero h1 {
        font-size: 2.5rem; /* ~40px */
    }
    #hero p {
        font-size: 1.1rem;
    }
    .futuristic-button, button, input[type="submit"], input[type="button"] {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    #contact-form-section .grid-cols-2 { /* Tailwind class for 2 columns */
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* Stack on mobile */
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.5rem;
    }
    #hero h1 {
        font-size: 2rem;
    }
    #hero p {
        font-size: 1rem;
    }
    #pricing .card-content p.text-4xl { /* Price text */
        font-size: 2.5rem !important; /* Tailwind class override */
    }
}

/* Cookie Consent Popup (from HTML inline styles for simplicity, can be moved here) */
/*
#cookieConsentPopup {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(12, 19, 34, 0.95);
    color: var(--color-text-light);
    padding: 20px;
    text-align: center;
    z-index: 9999;
    border-top: 2px solid var(--color-secondary);
}
#cookieConsentPopup p {
    margin-bottom: 15px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-light);
}
#cookieConsentPopup a {
    color: var(--color-accent2);
    text-decoration: underline;
}
#acceptCookieButton {
    background-color: var(--color-accent1);
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
#acceptCookieButton:hover {
    background-color: var(--color-accent2);
}
*/