/* ROOT VARIABLES */
:root {
    --primary-color: #00A9E0; /* Bright Blue */
    --primary-color-darker: #008CBA;
    --secondary-color: #FF6B6B; /* Coral Pink */
    --secondary-color-darker: #E05252;
    --accent-color: #FFD166; /* Sunny Yellow */
    --accent-color-darker: #EAA940;

    --text-color: #363636; /* Bulma's default dark grey for body */
    --text-color-light: #FFFFFF;
    --headings-color: #222222; /* Darker for main headings */
    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-color-darker);

    --background-color: #F0F4F8; /* Light, slightly cool off-white */
    --section-alternate-bg: #FFFFFF;
    --card-bg-color: #FFFFFF; /* Or var(--background-color) for true neomorphism */

    /* Neomorphism Shadows (subtle, based on --background-color and --card-bg-color) */
    /* Assuming card-bg is slightly different or same as section-bg */
    /* For elements on --background-color or --section-alternate-bg */
    --neo-shadow-light-ambient: rgba(255, 255, 255, 0.6);
    --neo-shadow-dark-ambient: rgba(180, 190, 210, 0.5); /* #B4BED2 with opacity */

    --neo-shadow-light-card: rgba(255, 255, 255, 0.7); /* For cards on lighter bg */
    --neo-shadow-dark-card: rgba(163, 177, 198, 0.5); /* #A3B1C6 with opacity */


    --neo-shadow-pressed-light: rgba(255, 255, 255, 0.7);
    --neo-shadow-pressed-dark: rgba(163, 177, 198, 0.6);


    /* Box Shadows for Neomorphism */
    /* Extruded effect for cards/buttons */
    --shadow-neumorphic-outset-soft: 6px 6px 12px var(--neo-shadow-dark-card), -6px -6px 12px var(--neo-shadow-light-card);
    --shadow-neumorphic-outset-strong: 8px 8px 16px var(--neo-shadow-dark-card), -8px -8px 16px var(--neo-shadow-light-card);
    /* Inset effect for pressed elements/inputs */
    --shadow-neumorphic-inset: inset 5px 5px 10px var(--neo-shadow-pressed-dark), inset -5px -5px 10px var(--neo-shadow-pressed-light);


    --font-heading: 'Tajawal', 'Space Grotesk', sans-serif;
    --font-body: 'Cairo', 'DM Sans', sans-serif;

    --border-radius-soft: 12px;
    --border-radius-medium: 20px;
    --border-radius-sharp: 8px; /* For neo-brutalist touches */

    --header-height: 6rem; /* Approximate height of Bulma navbar */
}

/* GLOBAL STYLES */
html {
    scroll-behavior: smooth;
    font-size: 100%; /* Corresponds to 16px by default */
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 0px !important;
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-heading);
    color: var(--headings-color);
    font-weight: 700; /* Bold for headings */
}

.title {
    color: var(--headings-color);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.subtitle {
    color: var(--text-color);
    font-weight: 400;
}

a {
    color: var(--link-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--link-hover-color);
}

.section {
    padding: 4rem 1.5rem; /* Default Bulma padding, can adjust */
}
.section.alternate-bg {
    background-color: var(--section-alternate-bg);
}

.scroll-reveal-section { /* For ScrollReveal JS */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal-section.is-visible { /* Class added by ScrollReveal */
    opacity: 1;
    transform: translateY(0);
}

/* HEADER & NAVIGATION */
.header.is-fixed-top .navbar {
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white for neo effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-bottom-left-radius: var(--border-radius-soft);
    border-bottom-right-radius: var(--border-radius-soft);
}

.navbar-item, .navbar-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-color);
}
.navbar-item:hover, .navbar-link:hover {
    background-color: transparent;
    color: var(--primary-color);
}
.navbar-burger span {
    background-color: var(--primary-color);
}

.site-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary-color) !important;
}

/* HERO SECTION */
.hero-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden; /* For parallax layers if they exceed bounds */
}
.hero-section::before { /* Dark overlay for text readability */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    z-index: 1;
}
.hero-section .hero-body {
    position: relative;
    z-index: 2; /* Above the overlay */
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-title {
    font-size: 3.5rem; /* Larger for hero */
    font-weight: 900;
    color: var(--text-color-light) !important; /* Ensure white text */
    margin-bottom: 1rem;
}
.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-color-light) !important; /* Ensure white text */
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.neo-button-hero {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}
.hero-contact-info a {
    color: var(--accent-color) !important;
    font-weight: bold;
}
.hero-contact-info a:hover {
    text-decoration: underline;
}

/* Parallax Layers (basic setup, JS will handle movement) */
.parallax-layer {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    /* JS will set top, left, width, height, and transform */
}
.parallax-layer.layer1 { z-index: 0; /* Behind overlay but visible */ }
.parallax-layer.layer2 { z-index: 0; }


/* GENERAL NEO BUTTON STYLES */
.neo-button, button.button, input.button, a.button {
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: var(--border-radius-soft);
    border: none;
    padding: 0.8em 1.8em;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    box-shadow: var(--shadow-neumorphic-outset-soft);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.neo-button:hover, button.button:hover, input.button:hover, a.button:hover {
    background-color: var(--primary-color-darker);
    box-shadow: var(--shadow-neumorphic-inset);
    transform: translateY(1px) translateX(1px); /* Slight press effect */
    color: var(--text-color-light); /* Ensure text color remains on hover */
}

.neo-button:active, button.button:active, input.button:active, a.button:active {
    box-shadow: var(--shadow-neumorphic-inset);
    transform: translateY(2px) translateX(2px);
}

.neo-button.is-secondary {
    background-color: var(--secondary-color);
}
.neo-button.is-secondary:hover {
    background-color: var(--secondary-color-darker);
}

.neo-button.is-accent {
    background-color: var(--accent-color);
    color: var(--text-color);
}
.neo-button.is-accent:hover {
    background-color: var(--accent-color-darker);
    color: var(--text-color);
}


/* GENERAL CARD STYLES (NEOMORPHISM) */
.card.neo-card-up { /* Extruded card */
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-neumorphic-outset-strong);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensures content respects border-radius */
    display: flex;
    flex-direction: column;
    height: 100%; /* For consistent height in columns */
}
.card.neo-card-up:hover {
    transform: translateY(-5px);
    box-shadow: 12px 12px 24px var(--neo-shadow-dark-card), -12px -12px 24px var(--neo-shadow-light-card);
}

.card .card-image.image-container { /* Ensure this wraps the figure */
    overflow: hidden; /* Important for object-fit */
}
.card .card-image.image-container figure {
    margin: 0; /* Reset Bulma figure margin if any issues */
    height: 200px; /* Example fixed height, can be adjusted or use aspect ratio classes */
}
.card .card-image.image-container figure.is-4by3,
.card .card-image.image-container figure.is-16by9 {
    height: auto; /* Let Bulma's aspect ratio work */
}

.card .card-image.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-top-left-radius: var(--border-radius-medium); /* Match card */
    border-top-right-radius: var(--border-radius-medium);
}
/* If image is not first child, remove top radius */
.card .card-content + .card-image.image-container img,
.card .card-header + .card-image.image-container img {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.card.neo-card-up .card-content {
    padding: 1.5rem;
    text-align: right; /* Default for Arabic, can be overridden */
    flex-grow: 1; /* Allows content to expand and push footer down if any */
    display: flex;
    flex-direction: column;
}
.card.neo-card-up .card-content .title,
.card.neo-card-up .card-content .subtitle {
    margin-bottom: 0.75rem;
}
.card-title-dark {
    color: var(--headings-color) !important;
}
.card-subtitle-dark {
    color: var(--text-color) !important;
}

/* Styling for .read-more links */
a.read-more {
    display: inline-block;
    margin-top: 1rem;
    font-weight: bold;
    color: var(--secondary-color);
    text-decoration: none;
    position: relative; /* For pseudo-element underline */
}
a.read-more::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--secondary-color);
    transition: width 0.3s ease;
}
html[dir="rtl"] a.read-more::after {
    left: auto;
    right: 0;
}
html[dir="ltr"] a.read-more::after {
    right: auto;
    left: 0;
}
a.read-more:hover::after {
    width: 100%;
}
a.read-more:hover {
    color: var(--secondary-color-darker);
}


/* SECTION SPECIFIC STYLES */
.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--headings-color);
}
.section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-color);
}

/* Insights Section */
#insights .card {
    text-align: center; /* Center content within insight cards */
}
#insights .card .card-content {
    text-align: right; /* Or center if preferred for card text */
}

/* Webinars Section (Accordion) */
.accordion-container.neo-container {
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius-medium);
    padding: 1.5rem;
    box-shadow: var(--shadow-neumorphic-outset-strong);
}
.accordion-item.neo-card-inset {
    margin-bottom: 1rem;
    background-color: var(--background-color); /* Slightly different from container */
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-neumorphic-inset);
}
.accordion-item:last-child {
    margin-bottom: 0;
}
.accordion-header {
    background-color: transparent; /* Button takes color from item */
    border: none;
    padding: 1rem 1.5rem;
    width: 100%;
    text-align: right;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--headings-color);
    border-radius: var(--border-radius-soft); /* Match item */
}
html[dir="rtl"] .accordion-header { text-align: right; }
html[dir="ltr"] .accordion-header { text-align: left; }

.accordion-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}
.accordion-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: none; /* JS will toggle */
    color: var(--text-color);
}
.accordion-content p {
    margin-bottom: 1rem;
}
.accordion-content img {
    border-radius: var(--border-radius-soft);
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
}

/* Case Studies Section (Carousel) */
.content-carousel {
    position: relative; /* For nav buttons if absolutely positioned */
}
.content-carousel .carousel-item .card {
    /* Styles for individual carousel item cards */
    margin: 0 0.5rem; /* Spacing between items if shown side-by-side */
}
.carousel-navigation {
    text-align: center;
    margin-top: 1.5rem;
}
.carousel-navigation .button {
    margin: 0 0.5rem;
}

/* Success Stories Section (Testimonials) */
.testimonial-card {
    /* Specific styles for testimonial cards if different from generic .neo-card-up */
}
.testimonial-card .media-left img.is-rounded {
    border: 3px solid var(--accent-color);
    box-shadow: var(--shadow-neumorphic-outset-soft);
}
.testimonial-card .content {
    font-style: italic;
    color: #555;
    padding-top: 0.5rem;
    border-top: 1px solid var(--background-color); /* Subtle separator */
    margin-top: 1rem;
}


/* Customer Stories Section (Image Gallery) */
.image-gallery .neo-image-frame {
    background-color: var(--card-bg-color);
    padding: 8px; /* Frame effect */
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-neumorphic-outset-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image-gallery .neo-image-frame:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: var(--shadow-neumorphic-outset-strong);
}
.image-gallery .neo-image-frame img {
    border-radius: calc(var(--border-radius-soft) - 4px); /* Inner radius */
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Awards Section */
.award-item {
    padding: 2rem;
    text-align: center;
}
.award-item img {
    margin-bottom: 1rem;
}
.award-item .title.is-5 {
    margin-top: 0.5rem;
    font-weight: 700;
}

/* External Resources Section */
.resource-box {
    background-color: var(--card-bg-color); /* Or could be --background-color for inset on alternate bg */
    border-radius: var(--border-radius-medium);
    padding: 1.5rem;
    box-shadow: var(--shadow-neumorphic-inset); /* Inset effect for resource boxes */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.resource-box h4 {
    margin-bottom: 0.75rem;
}
.resource-box p {
    margin-bottom: 1rem;
    flex-grow: 1;
}
.resource-box .button.is-link {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
}
.resource-box .button.is-link:hover {
    background-color: var(--secondary-color-darker);
}

/* Contact Section (Form) */
.neo-card-form {
    background-color: var(--card-bg-color);
    padding: 2.5rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-neumorphic-outset-strong);
}
.neo-input, .neo-textarea, .neo-select select {
    background-color: var(--background-color) !important; /* Base for inset */
    border: 1px solid transparent !important; /* Remove Bulma default border */
    border-radius: var(--border-radius-soft) !important;
    box-shadow: var(--shadow-neumorphic-inset) !important;
    padding: 0.9em 1.2em !important;
    color: var(--text-color) !important;
    transition: box-shadow 0.2s ease;
    font-family: var(--font-body);
}
.neo-input::placeholder, .neo-textarea::placeholder {
    color: #999 !important;
}
.neo-input:focus, .neo-textarea:focus, .neo-select select:focus {
    outline: none !important;
    box-shadow: var(--shadow-neumorphic-inset), 0 0 0 2px var(--primary-color) !important; /* Focus ring */
}
.neo-select { /* Wrapper for select */
    border-radius: var(--border-radius-soft) !important; /* Ensure wrapper also has radius */
    box-shadow: var(--shadow-neumorphic-inset) !important;
}
.neo-select::after { /* Arrow for select */
    border-color: var(--primary-color) !important;
    right: 1.125em !important;
    z-index: 4 !important;
}
html[dir="rtl"] .neo-select::after {
    left: 1.125em !important;
    right: auto !important;
}

.contact-details-box {
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-neumorphic-outset-soft);
    text-align: right;
}
.contact-details-box p {
    margin-bottom: 0.5rem;
}
.contact-details-box .contact-label {
    font-weight: bold;
    color: var(--headings-color);
}
.contact-details-box a {
    color: var(--primary-color);
}
.contact-details-box a:hover {
    color: var(--primary-color-darker);
}

/* FOOTER */
.footer.neo-footer {
    background-color: var(--headings-color); /* Dark footer */
    color: #E0E0E0; /* Light text on dark background */
    padding: 3rem 1.5rem 2rem;
    border-top-left-radius: var(--border-radius-medium);
    border-top-right-radius: var(--border-radius-medium);
}
.footer.neo-footer .title, .footer.neo-footer .footer-title {
    color: var(--text-color-light);
    font-weight: 700;
}
.footer.neo-footer a.footer-link, .footer.neo-footer a.footer-contact {
    color: #C0C0C0; /* Slightly dimmer than main text for links */
    transition: color 0.3s ease;
}
.footer.neo-footer a.footer-link:hover, .footer.neo-footer a.footer-contact:hover {
    color: var(--accent-color);
}
.footer.neo-footer .social-links li {
    margin-bottom: 0.5rem;
}
.footer.neo-footer hr.footer-hr {
    background-color: #555;
    height: 1px;
    margin: 2rem 0;
}
.footer.neo-footer .content p {
    color: #B0B0B0;
}


/* SPECIFIC PAGE STYLES */
/* For About, Terms, Privacy pages where content might overlap fixed header */
.static-page-content main, /* Assuming these pages have a main tag with this class */
body[data-barba-namespace="about"] main,
body[data-barba-namespace="contacts"] main, /* If contacts page is separate and needs it */
body[data-barba-namespace="privacy"] main,
body[data-barba-namespace="terms"] main {
    padding-top: calc(var(--header-height) + 2rem); /* Header height + some extra space */
    padding-bottom: 3rem;
    background-color: var(--section-alternate-bg); /* Ensure content area has a bg */
}
.static-page-content .container,
body[data-barba-namespace="about"] .container,
body[data-barba-namespace="privacy"] .container,
body[data-barba-namespace="terms"] .container {
     background-color: var(--card-bg-color);
     padding: 2rem;
     border-radius: var(--border-radius-medium);
     box-shadow: var(--shadow-neumorphic-outset-strong);
}


/* Success page styling */
body[data-barba-namespace="success"] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body[data-barba-namespace="success"] main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: var(--header-height); /* Account for fixed header */
}
.success-container {
    background-color: var(--card-bg-color);
    padding: 3rem;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-neumorphic-outset-strong);
    max-width: 600px;
}
.success-container .icon { /* For a success icon if used */
    color: var(--primary-color); /* Or a success green */
    font-size: 4rem;
    margin-bottom: 1.5rem;
}


/* RESPONSIVENESS (Bulma handles a lot, add custom tweaks if needed) */
@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .section-subtitle {
        font-size: 1rem;
    }
    .neo-card-form {
        padding: 1.5rem;
    }
    .footer.neo-footer .columns {
        text-align: center;
    }
    .footer.neo-footer .column:not(:last-child) {
        margin-bottom: 1.5rem;
    }
}

/* RTL Specifics (Bulma handles most text-align. Shadows are usually diagonal) */
html[dir="rtl"] .label.has-text-right { /* Ensure labels align right */
    text-align: right !important;
}

/* Animations for "hand-drawn" feel - example for a border. Needs actual SVG or more complex setup. */
/*
.hand-drawn-border {
    border: 3px solid transparent;
    border-image-source: url('path/to/sketchy-border.svg');
    border-image-slice: 10;
    border-image-repeat: round;
    animation: sketch-anim 0.5s infinite alternate;
}

@keyframes sketch-anim {
    0% { transform: rotate(-0.2deg) translateX(-1px); }
    100% { transform: rotate(0.2deg) translateX(1px); }
}
*/

/* Barba.js page transitions (example) */
.barba-leave-active,
.barba-enter-active {
  transition: opacity 0.5s ease;
}
.barba-leave-to,
.barba-enter-from {
  opacity: 0;
}

*{
    opacity: 1 !important;
}
@media (max-width: 768px) {
    .navbar-brand{
        width: 100%;
        justify-content: space-between;
    }
    .navbar-burger{
        margin-left: 0px !important;
    }
}