/* Overrides to ensure hero/slider styles load after main design CSS */
#hero {
    position: relative;
    overflow: visible;
}
.carousel-item {
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: calc(100vh - 60px);
}
.carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
    pointer-events: none;
}
.carousel-container .carousel-content {
    position: relative;
    z-index: 3;
}
.slider-content {
    max-width: 720px;
    margin: 6vh 0;
}
.slider-title {
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0b1a2b;
    margin-bottom: 0.6rem;
}
.slider-details {
    font-size: clamp(1rem, 2.2vw, 1.125rem);
    color: rgba(11, 26, 43, 0.78);
    margin-bottom: 1.2rem;
    line-height: 1.6;
}
.slider-link {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(8, 20, 40, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.slider-link:hover,
.slider-link:focus {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(8, 20, 40, 0.45);
    text-decoration: none;
}
.cta-pulse {
    position: relative;
}
.cta-pulse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.25s ease,
        transform 0.6s cubic-bezier(0.22, 0.9, 0.37, 1);
}
.cta-pulse:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.07);
}
.carousel-indicators {
    bottom: 18px;
}
.carousel-indicators li {
    width: 34px;
    height: 6px;
    border-radius: 6px;
    margin: 0 6px;
    background: rgba(255, 255, 255, 0.28);
    transition: all 0.36s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.carousel-indicators li.active {
    background: #ffffff;
    transform: scale(1.06);
}
/* Fallback brand CTA/theme rules (safe, small, and intentionally specific) */
.bg-brand {
    background: linear-gradient(
        135deg,
        #0cbaa4 0%,
        #0aa895 50%,
        #063e36 100%
    ) !important;
    color: #fff !important;
}
.cta-theme {
    position: relative;
    isolation: isolate;
    color: #fff;
    overflow: hidden;
    padding: 36px 0;
}
.cta-theme::before {
    content: "";
    position: absolute;
    left: 2%;
    bottom: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.06),
        transparent 40%
    );
    opacity: 0.9;
    transform: translateY(10%);
}
.cta-theme::after {
    content: "";
    position: absolute;
    right: 2%;
    top: 0;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 70% 70%,
        rgba(255, 255, 255, 0.05),
        transparent 40%
    );
    opacity: 0.9;
}
.cta-stripe {
    position: absolute;
    right: 4%;
    top: 12%;
    width: min(34vw, 420px);
    height: 86px;
    border-radius: 48px;
    background: rgba(255, 255, 255, 0.12);
    filter: blur(6px);
}
.cta-inner {
    position: relative;
    z-index: 1;
    padding: 24px 24px;
    max-width: 1120px;
    margin-inline: auto;
    display: grid;
    gap: 18px;
    align-items: center;
    grid-template-columns: 1fr auto;
}
@media (max-width: 820px) {
    .cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cta-stripe {
        display: none;
    }
}

/* Section titles and CTA titles gradient */
.section-title h2,
.cta-theme h3 {
    font-weight: 800;
    background: linear-gradient(45deg, #333, #667eea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.25rem;
}

/* Newsletter inline form inside CTA */
.newsletter-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.newsletter-inline .nl-input {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(11, 26, 43, 0.08);
    min-width: 260px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.newsletter-inline .nl-input:focus {
    outline: 3px solid rgba(12, 186, 164, 0.12);
    border-color: rgba(12, 186, 164, 0.18);
}
.newsletter-inline .nl-submit {
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
}

@media (max-width: 820px) {
    .newsletter-inline {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    .newsletter-inline .nl-input {
        min-width: 100%;
        width: 100%;
    }
    .newsletter-inline .nl-submit {
        width: 100%;
    }
}

/* RTL support for inline form */
.dir-rtl .newsletter-inline {
    direction: rtl;
}
.dir-rtl .newsletter-inline .nl-input {
    text-align: right;
}
@media (max-width: 768px) {
    .slider-content {
        max-width: 92%;
        margin-top: 4vh;
    }
    .slider-title {
        font-size: 1.6rem;
    }
    .carousel-item {
        min-height: 48vh;
    }
}

/* Footer entrance animations */
footer,
.site-footer {
    opacity: 0;
    transform: translateY(18px);
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s ease;
    will-change: transform, opacity;
}

.footer-in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.site-footer .footer-column,
.site-footer .footer-logo,
.site-footer .footer-links li,
.site-footer .footer-social a {
    opacity: 0;
    transform: translateY(8px);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.site-footer.footer-stagger .footer-column,
.site-footer.footer-stagger .footer-logo,
.site-footer.footer-stagger .footer-links li,
.site-footer.footer-stagger .footer-social a {
    opacity: 0;
}

.site-footer.footer-stagger.footer-in-view .footer-column,
.site-footer.footer-stagger.footer-in-view .footer-logo,
.site-footer.footer-stagger.footer-in-view .footer-links li,
.site-footer.footer-stagger.footer-in-view .footer-social a {
    opacity: 1;
    transform: translateY(0);
}

/* Link hover micro-interactions */
.site-footer a {
    transition: color 0.18s ease, transform 0.18s ease;
}
.site-footer a:hover,
.site-footer a:focus {
    transform: translateY(-3px);
    color: #0cbaa4;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    footer,
    .site-footer,
    .site-footer .footer-column,
    .site-footer .footer-logo,
    .site-footer .footer-links li,
    .site-footer .footer-social a {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Elegant CTAs styling */
.btn-theme {
    background: linear-gradient(180deg, #0dbdaa 0%, #0cbaa4 100%);
    border: none;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(12, 186, 164, 0.12),
        0 2px 8px rgba(8, 20, 40, 0.06);
}
.btn-theme:hover,
.btn-theme:focus {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(12, 186, 164, 0.14),
        0 6px 20px rgba(8, 20, 40, 0.08);
}

/* Outline variant that follows the brand theme */
.btn-outline-theme {
    background: transparent;
    color: var(--brand);
    border: 2px solid rgba(12, 186, 164, 0.12);
}
.btn-outline-theme:hover,
.btn-outline-theme:focus {
    background: rgba(12, 186, 164, 0.06);
    color: #063e36;
    border-color: rgba(12, 186, 164, 0.22);
}

/* CTA strips: elevated card look for professional CTAs */
#home-quote-cta,
#home-newsletter-cta {
    /* soft, warm paper background with slight glass feel */
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(250, 251, 252, 1) 100%
    );
    border-radius: 14px;
    padding: 24px 0;
    margin: 28px 0;
    box-shadow: 0 18px 50px rgba(8, 20, 40, 0.08),
        0 6px 18px rgba(12, 186, 164, 0.04);
    border: 1px solid rgba(11, 26, 43, 0.04);
    backdrop-filter: blur(6px);
    overflow: hidden;
}

/* Larger container for CTAs to improve horizontal rhythm */
#home-quote-cta .container,
#home-newsletter-cta .container {
    max-width: 1188px;
}

/* Headline & description polish inside CTAs */
#home-quote-cta .cta-inner h3,
#home-newsletter-cta .cta-inner h3 {
    font-size: 1.375rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
    color: #08202a;
}
#home-quote-cta .cta-inner p,
#home-newsletter-cta .cta-inner p {
    color: rgba(8, 32, 42, 0.7);
    font-weight: 600;
    margin: 0;
}

/* CTA buttons: stronger visual weight and subtle hover lift */
#home-quote-cta .btn-theme,
#home-newsletter-cta .btn-theme {
    padding: 14px 26px;
    font-weight: 800;
    border-radius: 12px;
    background: linear-gradient(90deg, #0dbdaa 0%, #0aa895 100%);
    box-shadow: 0 12px 34px rgba(12, 186, 164, 0.12),
        0 4px 12px rgba(8, 20, 40, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 160ms ease;
}
#home-quote-cta .btn-theme:hover,
#home-newsletter-cta .btn-theme:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(12, 186, 164, 0.16),
        0 8px 28px rgba(8, 20, 40, 0.12);
}

/* Newsletter input styling to match the card */
#home-newsletter-cta .nl-input {
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(11, 26, 43, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    background: #fff;
    min-width: 320px;
}
#home-newsletter-cta .nl-submit {
    padding: 12px 20px;
    border-radius: 12px;
}

/* Layout refinements: center on mobile and tighten spacing */
@media (max-width: 820px) {
    #home-quote-cta .cta-inner,
    #home-newsletter-cta .cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px;
    }
    #home-quote-cta .cta-inner > div,
    #home-newsletter-cta .cta-inner > div {
        justify-content: center;
    }
    #home-newsletter-cta .nl-input {
        min-width: 100%;
    }
}

/* -----------------------------
   Global polish for homepage
   - modern typography
   - brand variables
   - refined spacing and card styles
 ------------------------------ */

/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap'); */

/* =====================================================================================
   ONEST FONT IMPLEMENTATION - ENGLISH & ARABIC SUPPORT
   ===================================================================================== */

/* Google Fonts fallback for Onest (loads from Google Fonts if local files not available) */
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* Local Onest font files - place these in public/assets/frontend/fonts/ */
@font-face {
    font-family: "Onest";
    src: url("/assets/frontend/fonts/Onest-Regular.woff2") format("woff2"),
        url("/assets/frontend/fonts/Onest-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Onest";
    src: url("/assets/frontend/fonts/Onest-Medium.woff2") format("woff2"),
        url("/assets/frontend/fonts/Onest-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Onest";
    src: url("/assets/frontend/fonts/Onest-SemiBold.woff2") format("woff2"),
        url("/assets/frontend/fonts/Onest-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Onest";
    src: url("/assets/frontend/fonts/Onest-Bold.woff2") format("woff2"),
        url("/assets/frontend/fonts/Onest-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Onest";
    src: url("/assets/frontend/fonts/Onest-ExtraBold.woff2") format("woff2"),
        url("/assets/frontend/fonts/Onest-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Onest";
    src: url("/assets/frontend/fonts/Onest-Black.woff2") format("woff2"),
        url("/assets/frontend/fonts/Onest-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

:root {
    --brand: #0cbaa4;
    --brand-strong: #0aa895;
    --muted: #6b7a86;
    --bg-soft: #fbfdfe;
    --card-shadow: rgba(12, 186, 164, 0.08);

    /* Typography Variables with Onest Font Stack */
    --font-family-primary: "Onest", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-arabic: "Onest", "Noto Sans Arabic", "Segoe UI", system-ui,
        sans-serif;
    --font-family-heading: "Onest", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Font Weight Scale */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Font Size Scale */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.75rem; /* 60px */

    /* Line Height Scale */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
}

/* Make section title gradients match About Us design for a consistent 'mind-taking' headline */
:root {
    --primary-gradient: linear-gradient(45deg, #333, #667eea);
    --neon-gradient: linear-gradient(90deg, transparent, #667eea, transparent);
}

/* =====================================================================================
   COMPREHENSIVE TYPOGRAPHY SYSTEM WITH ONEST FONT
   ===================================================================================== */

/* Base body typography */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: #0b1a2b;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Universal font application - ensure Onest is applied everywhere */
*,
*::before,
*::after {
    font-family: var(--font-family-primary);
}

/* RTL Support for Arabic Text */
[dir="rtl"],
[lang="ar"],
.rtl,
.arabic {
    font-family: var(--font-family-arabic);
    direction: rtl;
    text-align: right;
}

/* Preserve icon fonts */
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
.fass,
[class^="fa-"],
[class*=" fa-"],
.font-awesome,
.fontawesome {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro",
        "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
}

.glyphicon,
[class^="glyphicon-"],
[class*=" glyphicon-"] {
    font-family: "Glyphicons Halflings" !important;
}

/* =====================================================================================
   HEADING TYPOGRAPHY SYSTEM
   ===================================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: #0b1a2b;
    margin-top: 0;
    margin-bottom: 0.5em;
}

/* Title Hierarchy */
h1,
.h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
}

h2,
.h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
}

h3,
.h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h4,
.h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

h5,
.h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

h6,
.h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* =====================================================================================
   TEXT CONTENT TYPOGRAPHY
   ===================================================================================== */

/* Paragraph text */
p,
.paragraph {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    margin-bottom: 1rem;
}

/* Sub text variations */
.sub-text,
.subtitle,
.subheading {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--muted);
}

.sub-text-large,
.subtitle-large {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* Lead text */
.lead {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
}

/* Small text */
small,
.small {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

/* =====================================================================================
   UI COMPONENTS TYPOGRAPHY
   ===================================================================================== */

/* Buttons */
.btn,
button {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
}

/* Navigation */
.navbar,
.navbar .nav-link,
.nav-link,
.navbar-nav .nav-link {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

.categories-list .nav-link span {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
}

/* Form elements */
input,
textarea,
select,
.form-control {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

/* Labels */
label,
.label {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

/* =====================================================================================
   RESPONSIVE TYPOGRAPHY
   ===================================================================================== */

/* Mobile adjustments */
@media (max-width: 767.98px) {
    h1,
    .h1 {
        font-size: var(--font-size-3xl);
    }

    h2,
    .h2 {
        font-size: var(--font-size-2xl);
    }

    h3,
    .h3 {
        font-size: var(--font-size-xl);
    }

    body {
        font-size: var(--font-size-sm);
    }
}

/* Extra large screens */
@media (min-width: 1400px) {
    h1,
    .h1 {
        font-size: var(--font-size-6xl);
    }

    h2,
    .h2 {
        font-size: var(--font-size-5xl);
    }
}

/* =====================================================================================
   SPECIAL TYPOGRAPHY UTILITIES
   ===================================================================================== */

/* Text weights */
.font-light {
    font-weight: var(--font-weight-light);
}
.font-normal {
    font-weight: var(--font-weight-normal);
}
.font-medium {
    font-weight: var(--font-weight-medium);
}
.font-semibold {
    font-weight: var(--font-weight-semibold);
}
.font-bold {
    font-weight: var(--font-weight-bold);
}
.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}
.font-black {
    font-weight: var(--font-weight-black);
}

/* Text sizes */
.text-xs {
    font-size: var(--font-size-xs);
}
.text-sm {
    font-size: var(--font-size-sm);
}
.text-base {
    font-size: var(--font-size-base);
}
.text-lg {
    font-size: var(--font-size-lg);
}
.text-xl {
    font-size: var(--font-size-xl);
}
.text-2xl {
    font-size: var(--font-size-2xl);
}
.text-3xl {
    font-size: var(--font-size-3xl);
}
.text-4xl {
    font-size: var(--font-size-4xl);
}
.text-5xl {
    font-size: var(--font-size-5xl);
}
.text-6xl {
    font-size: var(--font-size-6xl);
}

/* Line heights */
.leading-tight {
    line-height: var(--line-height-tight);
}
.leading-normal {
    line-height: var(--line-height-normal);
}
.leading-relaxed {
    line-height: var(--line-height-relaxed);
}
.leading-loose {
    line-height: var(--line-height-loose);
}
.counts .count-box p {
    font-family: "Onest";
}
#footer .footer-top .footer-contact p {
    font-family: "Onest";
}

/* Improve container width for content-heavy sections */
.container {
    max-width: 1188px;
}

/* Section titles: subtle overline and elegant headline */
.section-title {
    text-align: center !important;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.section-title .title-subtitle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

/* Language-based alignment for title-subtitle row */
[dir="rtl"] .section-title .title-subtitle-row {
    justify-content: flex-end;
    text-align: right;
}
[dir="ltr"] .section-title .title-subtitle-row {
    justify-content: flex-start;
    text-align: left;
}
.section-title h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 900 !important;
    letter-spacing: -0.02em;
    color: #08202a;
    margin-bottom: 0;
    margin: 0;
}
.section-title .subtitle-separator {
    color: rgba(12, 186, 164, 0.6);
    font-weight: 300;
    font-size: 1.2em;
    margin: 0 0.25rem;
}
.section-title p {
    color: #6b7a86;
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

/* Responsive adjustments for title-subtitle layout */
@media (max-width: 768px) {
    .section-title .title-subtitle-row {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        justify-content: center;
    }
    .section-title .subtitle-separator {
        display: none;
    }
    .section-title h2 {
        font-size: 1.8rem;
    }
    .section-title p {
        font-size: 1rem;
        font-weight: 600;
    }
}
.section-title::before {
    /* remove legacy thin bar: we use a diamond icon as the canonical divider */
    content: none !important;
}

/* Hero / welcome tuning */
.home-welcome {
    padding: 6vh 0;
}
.slider-title {
    color: #071522;
    text-shadow: 0 6px 30px rgba(12, 186, 164, 0.04);
}
.slider-details {
    color: var(--muted);
    max-width: 68ch;
}

/* Fix hero spacing - remove margin-top from main content area */
#hero {
    margin-top: 0 !important;
}

/* Remove padding-top from header to eliminate space between header and banner */
#header {
    padding-top: 0 !important;
}

/* Buttons: stronger CTA treatment */
.btn-theme {
    border-radius: 14px;
    padding: 12px 24px;
    font-weight: 700;
    box-shadow: 0 12px 40px var(--card-shadow);
}

/* Card elevation for content rows */
.card-refined {
    background: linear-gradient(180deg, #ffffff, #fcfeff);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 12px 34px rgba(8, 20, 40, 0.04);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.card-refined:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(8, 20, 40, 0.08);
}

/* Images: soft mask and consistent aspect */
img.img-fluid {
    border-radius: 10px;
    display: block;
}

/* Improve spacing between main sections */
section {
    padding: 48px 0;
}

/* Improve 'more' button alignment */
.more-btn {
    text-align: center;
    margin-top: 28px;
}

/* Compact 'more-like' button used for small CTAs (e.g., quote) */
.btn-theme.more-like,
.more-like.btn-theme {
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(12, 186, 164, 0.08);
    background: linear-gradient(180deg, #0dbdaa 0%, #0cbaa4 100%);
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-theme.more-like:focus,
.btn-theme.more-like:active {
    outline: 3px solid rgba(12, 186, 164, 0.12);
    outline-offset: 2px;
}
.more-like i {
    color: #fff;
}

/* Slight refinement for lists and metadata */
.text-muted {
    color: var(--muted) !important;
}

/* Subtle entrance for key elements (works with AOS fallback) */
.aos-fallback {
    will-change: opacity, transform;
}

/* Footer link color adjustment to match brand */
.site-footer a:hover,
.site-footer a:focus {
    color: var(--brand);
}

/* Legacy override removed: CTA sections now use the refined elevated card styles defined earlier */

/* Responsive: tighten spacing on small screens */
@media (max-width: 768px) {
    section {
        padding: 42px 0;
    }
    .section-title::before {
        width: 36px;
    }
}

/* Use only the diamond icon as the section divider */
.title-divider .divider-line {
    display: none !important;
}
.title-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.title-divider .divider-icon {
    display: inline-block;
    font-size: 1.05rem;
    color: var(--brand);
    line-height: 1;
    margin: 0;
    opacity: 0.98;
}

/* Fallback: inject a small diamond after h2 if the title-divider markup is not present */
.section-title:not(:has(.title-divider)) h2::after {
    content: "\2666"; /* diamond */
    display: inline-block;
    margin-left: 12px;
    margin-right: 12px;
    color: var(--brand);
    font-size: 1.05rem;
    vertical-align: middle;
    opacity: 0.98;
}

@media (max-width: 768px) {
    .section-title:not(:has(.title-divider)) h2::after {
        margin-left: 8px;
        margin-right: 8px;
    }
}

/* Direction-aware titles: force headings and key title classes to follow
   the current language direction provided via body.dir-rtl / body.dir-ltr
   This ensures titles are visually correct for RTL languages (right-aligned)
   while keeping LTR languages left-aligned. */
.dir-rtl h1,
.dir-rtl h2,
.dir-rtl h3,
.dir-rtl h4,
.dir-rtl h5,
.dir-rtl h6,
.dir-rtl .section-title,
.dir-rtl .section-title h2,
.dir-rtl .slider-title,
.dir-rtl .staff-name,
.dir-rtl .slider-details {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: isolate-override;
}

/* .dir-ltr h1, .dir-ltr h2, .dir-ltr h3, .dir-ltr h4, .dir-ltr h5, .dir-ltr h6,
.dir-ltr .section-title, .dir-ltr .section-title h2, .dir-ltr .slider-title,
.dir-ltr .staff-name, .dir-ltr .slider-details {
	direction: ltr !important;
	text-align: left !important;
	unicode-bidi: isolate;
} */

/* Staff grid / cards styling - professional theme integration */
.staff-grid {
    margin: 0 -12px;
}
.staff-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(250, 251, 251, 0.95) 100%
    );
    border: 1px solid rgba(12, 186, 164, 0.08);
    border-radius: 16px;
    padding: 28px 20px 24px;
    box-shadow: 0 16px 40px rgba(12, 186, 164, 0.08),
        0 6px 20px rgba(8, 20, 40, 0.06);
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
        box-shadow 0.4s ease, border-color 0.3s ease;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.staff-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0cbaa4, #0aa895, #063e36);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.staff-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 60px rgba(12, 186, 164, 0.12),
        0 12px 32px rgba(8, 20, 40, 0.1);
    border-color: rgba(12, 186, 164, 0.15);
}
.staff-card:hover::before {
    opacity: 1;
}
.staff-pic {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    display: inline-block;
    border: 3px solid rgba(12, 186, 164, 0.15);
    background: linear-gradient(
        135deg,
        rgba(12, 186, 164, 0.08),
        rgba(255, 255, 255, 0.95)
    );
    box-shadow: 0 8px 24px rgba(12, 186, 164, 0.12),
        0 4px 12px rgba(8, 20, 40, 0.08);
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
        box-shadow 0.4s ease, border-color 0.3s ease;
    margin-bottom: 20px;
    position: relative;
}
.staff-pic::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #0cbaa4, #0aa895, #063e36);
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.staff-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.staff-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.staff-card:hover .staff-pic {
    transform: scale(1.08) rotate(2deg);
    box-shadow: 0 16px 40px rgba(12, 186, 164, 0.16),
        0 8px 24px rgba(8, 20, 40, 0.12);
    border-color: rgba(12, 186, 164, 0.25);
}
.staff-card:hover .staff-pic::before {
    opacity: 1;
}
.staff-card:hover .staff-pic img {
    transform: scale(1.1);
}
.staff-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0b1a2b;
    margin-bottom: 8px;
    font-family: "Onest", sans-serif;
    letter-spacing: -0.01em;
}
.staff-info .staff-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted);
    font-family: "Onest", sans-serif;
}

@media (max-width: 991px) {
    .staff-card {
        min-height: auto;
        padding: 24px 16px 20px;
    }
    .staff-pic {
        width: 160px;
        height: 160px;
    }
    .staff-name {
        font-size: 1.1rem;
    }
}

/* ========================================================================
   TARGETED HEADER WHITE SPACE FIX - ONLY FIX THE HEADER ISSUE
   ======================================================================== */

/* Only target the specific header spacing issue */
#topbar,
.topbar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#header,
.header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Only reduce fixed-top-margin for main content, but keep other section spacing intact */
#main.fixed-top-margin {
    margin-top: 0 !important;
}

/* Remove browser default margins only from html and body */
html {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================================================
   END TARGETED HEADER WHITE SPACE FIX
   ======================================================================== */

/* ========================================================================
   CLEAN BODY BACKGROUND FIX - Remove animated particle effects
   ======================================================================== */

/* Override the animated particle background from digital-agency-design.css */
body::before {
    display: none !important;
    content: none !important;
}

/* Ensure body has a clean white background */
body {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
}

/* Override any gradient backgrounds applied to body */
body.lux-light {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
}

/* Remove any other particle animations or pseudo-elements */
body::after {
    display: none !important;
    content: none !important;
}

/* Ensure html background is also white */
html {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Override any background patterns or textures */
html,
body {
    background-attachment: initial !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    background-position: initial !important;
}

/* ========================================================================
   END CLEAN BODY BACKGROUND FIX
   ======================================================================== */