/* Custom Styles for Ges-sco */

/* --------------------------------------------------------------------------
   Brand tokens & consistency
   Single accent = brand blue #4A6CF7 (logo; layouts/app.blade.php :root). These
   mirrors let custom.css stay self-contained. Do NOT introduce other accents
   (no purple / Bootstrap-blue / gold) — keep the site visually consistent.
   -------------------------------------------------------------------------- */
:root {
    --brand: #4A6CF7;
    --brand-light: #5E7CF9;
    --brand-bright: #7C97FF;
    --brand-tint: rgba(74, 108, 247, 0.08);
    /* Shared keyboard focus ring — apply to every interactive element. */
    --focus-ring: 0 0 0 3px rgba(74, 108, 247, 0.35);
}

/* Accessible, consistent keyboard focus for all interactive elements. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
}

/* Language switcher – inline inside navbar */
.lang-switcher-desktop .btn-group,
.lang-switcher-mobile .btn-group {
    border-radius: 20px;
    overflow: hidden;
}

.lang-switcher-desktop .btn,
.lang-switcher-mobile .btn {
    border-radius: 0;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.lang-switcher-desktop .btn:first-child,
.lang-switcher-mobile .btn:first-child {
    border-radius: 20px 0 0 20px;
}

.lang-switcher-desktop .btn:last-child,
.lang-switcher-mobile .btn:last-child {
    border-radius: 0 20px 20px 0;
}

.lang-switcher-mobile {
    flex-shrink: 0;
}

/* Contact Form Styles */
.contact-form-section {
    background: #1a1a2e;
    position: relative;
    overflow: hidden;
}

.contact-form-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
}

.contact-form-wrapper h2 {
    color: #1a1a2e;
    margin-bottom: 8px;
    font-size: 1.6rem;
}

.contact-form-wrapper p.lead {
    color: #666;
    margin-bottom: 28px;
    font-size: .95rem;
    line-height: 1.6;
}

.contact-form-wrapper .form-control {
    border-radius: 8px;
    border: 1.5px solid #dfe3ea;
    padding: 12px 16px;
    font-size: .95rem;
    background: #f9fafb;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.contact-form-wrapper .form-control:focus {
    border-color: var(--primary-2, #4A6CF7);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
    background: #fff;
}

.contact-form-wrapper .form-control::placeholder {
    color: #aab2bd;
    font-weight: 400;
}

.contact-form-wrapper select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.contact-form-wrapper label {
    color: #333;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: .88rem;
}

.btn-submit-contact {
    background: var(--primary-2, #4A6CF7);
    border: none;
    border-radius: 8px;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    transition: background .2s, transform .2s, box-shadow .2s;
    width: 100%;
    cursor: pointer;
}

.btn-submit-contact:hover {
    background: var(--primary-1, #5E7CF9);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(74, 108, 247, 0.25);
}

.contact-info-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.contact-info-box h3 {
    color: #fff;
    margin-bottom: 28px;
}

.contact-info-item {
    display: flex;
    align-items: start;
    margin-bottom: 22px;
}

.contact-info-item i {
    font-size: 22px;
    margin-right: 14px;
    margin-top: 2px;
    color: var(--primary-1, #5E7CF9);
    flex-shrink: 0;
}

.contact-info-item div h5 {
    color: #fff;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: .95rem;
}

.contact-info-item div p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: 28px 20px;
    }

    .contact-info-box {
        margin-top: 30px;
        padding: 28px 20px;
    }
}

/* Arimo Font Classes */
.arimo-regular {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.arimo-semibold {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-style: normal;
}

.arimo-bold {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* Form validation styles */
.form-control.is-invalid {
    border-color: #dc3545;
}

.form-control.is-valid {
    border-color: #28a745;
}

.invalid-feedback {
    display: block;
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
}

/* Testimonials Carousel Styles */
.erp_testimonial_info .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.erp_testimonial_info .owl-nav button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid var(--brand) !important;
}

.erp_testimonial_info .owl-nav button:hover {
    background: var(--brand) !important;
    transform: scale(1.1);
}

.erp_testimonial_info .owl-nav button span {
    font-size: 1.5rem;
    color: var(--brand);
}

.erp_testimonial_info .owl-nav button:hover span {
    color: white;
}

.erp_testimonial_info .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.erp_testimonial_info .owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    display: inline-block;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.erp_testimonial_info .owl-dot.active {
    background: var(--brand);
    width: 30px;
    border-radius: 6px;
}

/* Animation for testimonial items */
.erp_testimonial_item {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.erp_testimonial_item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(74, 108, 247, 0.06), transparent);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

.erp_testimonial_item:hover::before {
    left: 100%;
}

.erp_testimonial_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Stats animation */
.stat-item {
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

/* FAQ Enhanced Styles */
.faq-card {
    overflow: hidden;
}

.faq-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--brand) !important;
}

.faq-card:hover .icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.faq-card:hover h5 {
    color: var(--brand) !important;
}

.faq-card .collapse.show~.card-body .toggle-icon i {
    transform: rotate(180deg);
}

.faq-card[aria-expanded="true"] .toggle-icon i {
    transform: rotate(180deg);
}

[data-bs-toggle="collapse"][aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* Animation for collapse */
.collapse {
    transition: all 0.35s ease;
}

/* CTA Button Hover Effect */
.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

/* Footer Styles */
.footer_area {
    position: relative;
    overflow: hidden;
}

.footer_area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(74, 108, 247, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(74, 108, 247, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.footer-links a {
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.footer-links a:hover {
    transform: translateX(5px);
    color: var(--brand-bright) !important;
}

.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

.hover-underline:hover::after {
    width: 100%;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-3px) scale(1.1);
}

.btn-circle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white !important;
    transform: translateY(-3px);
}

.trust-badge {
    transition: all 0.3s ease;
}

.trust-badge:hover {
    transform: translateY(-5px);
    opacity: 1 !important;
}

/* Scroll Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer_area .col-lg-3,
.footer_area .col-lg-2 {
    animation: fadeInUp 0.6s ease forwards;
}

.footer_area .col-lg-3:nth-child(1) {
    animation-delay: 0.1s;
}

.footer_area .col-lg-3:nth-child(2) {
    animation-delay: 0.2s;
}

.footer_area .col-lg-2:nth-child(3) {
    animation-delay: 0.3s;
}

.footer_area .col-lg-2:nth-child(4) {
    animation-delay: 0.4s;
}

.footer_area .col-lg-2:nth-child(5) {
    animation-delay: 0.5s;
}

/* FAQ Animation Effects */
.faq_area .card {
    transition: all 0.3s ease;
    background: white;
}

.faq_area .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
}

.faq_area .card-body {
    transition: all 0.3s ease;
}

.faq_area .card-body:hover h5 {
    color: var(--brand) !important;
}

.faq_area .collapse {
    transition: all 0.3s ease;
}

.faq_area .card i {
    transition: all 0.3s ease;
}

.faq_area .card:hover i {
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .erp_testimonial_area h2 {
        font-size: 2rem !important;
    }

    .erp_testimonial_item {
        padding: 25px !important;
    }

    .avatar-circle {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.3rem !important;
    }

    .stat-item h3 {
        font-size: 2rem !important;
    }

    .faq_area h2 {
        font-size: 2rem !important;
    }

    .faq_area .card-body {
        padding: 15px !important;
    }

    .faq_area .card-body h5 {
        font-size: 1rem !important;
    }

    .faq_area .collapse .card-body {
        padding-left: 45px !important;
        font-size: 0.95rem !important;
    }

    .footer_area {
        padding: 50px 0 0 !important;
    }

    .footer_area .row>div {
        padding: 20px 30px !important;
    }

    .footer_area h3 {
        font-size: 1.1rem !important;
    }

    .trust-badge {
        flex: 0 0 calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .faq_card .collapse .card-body {
        padding-left: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   Site preloader — logo only, smooth enter/exit (page load & navigation)
   -------------------------------------------------------------------------- */
:root {
    --preloader-fade-ms: 620ms;
    --preloader-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --preloader-content-ms: 680ms;
}

body:has(#preloader.site-preloader:not(.is-done)) {
    overflow: hidden;
}

/* Main chrome fades/slides in as overlay dissolves */
body:has(#preloader.site-preloader:not(.is-done)) .body_wrapper {
    opacity: 0;
    transition: none;
}

body:has(#preloader.site-preloader.is-done) .body_wrapper,
body:not(:has(#preloader.site-preloader)) .body_wrapper {
    opacity: 1;
    /* Do not use transform here: any non-none transform creates a containing block and breaks
       position:fixed descendants inside .body_wrapper (nav, dropdowns, embedded modals, etc.). */
    transition: opacity var(--preloader-content-ms) var(--preloader-ease);
}

.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 1;
    transition:
        opacity var(--preloader-fade-ms) var(--preloader-ease),
        visibility 0s linear var(--preloader-fade-ms);
}

.site-preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--preloader-fade-ms) var(--preloader-ease),
        visibility 0s linear var(--preloader-fade-ms);
}

.site-preloader__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.site-preloader__logo {
    display: block;
    width: auto;
    max-width: min(200px, 48vw);
    height: auto;
    object-fit: contain;
    will-change: opacity, transform;
}

.site-preloader:not(.is-done) .site-preloader__logo {
    animation: site-preloader-logo-in 0.75s var(--preloader-ease) both;
}

@keyframes site-preloader-logo-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --preloader-fade-ms: 120ms;
        --preloader-content-ms: 120ms;
    }

    body:has(#preloader.site-preloader.is-done) .body_wrapper,
    body:not(:has(#preloader.site-preloader)) .body_wrapper {
        transition: opacity var(--preloader-fade-ms) ease;
    }

    .site-preloader:not(.is-done) .site-preloader__logo {
        animation: none;
        opacity: 1;
    }
}

/* In-page jumps (#contact, etc.) — smooth when user allows motion */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ==========================================================================
   MODERN DESIGN SYSTEM — site-wide redesign layer
   --------------------------------------------------------------------------
   Loaded after the vendored theme (style.css), so these rules win and
   modernize EVERY page at once for visual consistency. Goals:
     • Single accent = brand blue #4A6CF7 (logo; overrides the theme's purple/blue defaults)
     • White content backgrounds (footer + contact band stay dark by design)
     • Soft, layered shadows instead of flat/heavy theme shadows
     • Modern cards, buttons, section headings, and form fields
     • Accessible focus + restrained, transform/opacity-only motion
   Do NOT edit the vendored style.css — extend or adjust this block instead.
   ========================================================================== */
:root {
    --ds-ink: #1a1d29;          /* primary text  */
    --ds-ink-soft: #5b6170;     /* secondary text */
    --ds-line: #e9ebf0;         /* hairline borders */
    --ds-surface: #ffffff;      /* card / page surface */
    --ds-radius: 16px;          /* card radius */
    --ds-radius-sm: 10px;       /* control radius */
    --shadow-soft: 0 2px 8px rgba(26, 29, 41, .05), 0 12px 28px -10px rgba(26, 29, 41, .12);
    --shadow-soft-lg: 0 8px 24px rgba(26, 29, 41, .08), 0 24px 48px -16px rgba(26, 29, 41, .16);
}

/* --- 1. Base typography — Inter everywhere ----------------------------- */
body,
.f_p,
h1, h2, h3, h4, h5, h6,
.btn, .er_btn, .app_btn, input, select, textarea, button {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body {
    color: var(--ds-ink);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.018em;
}

/* --- 2. White content backgrounds for consistency ---------------------- */
/* Common theme section wrappers used across the marketing pages. The footer
   and the dark contact band keep their own backgrounds (set elsewhere). */
.erp_service_area,
.erp_analytics_area,
.erp_features_area,
.erp_features_area_two,
.erp_testimonial_area,
.erp_action_area,
.erp_customer_logo_area,
.faq_area,
.sec_pad,
.feature_area,
.process_area,
.price_area,
.about_area,
.service_promo_area,
.payment_features_area_two,
.developer_product_area {
    background-color: var(--ds-surface);
}

/* Theme "learn more" inline link — keep it on-brand (theme default is purple). */
.erp_btn_learn,
.erp_btn_learn:hover,
.erp_btn_learn i {
    color: var(--primary-2, #4A6CF7);
}
.erp_btn_learn {
    transition: color .15s ease, gap .15s ease;
}
.erp_btn_learn:hover {
    color: var(--primary-1, #5E7CF9);
}

/* --- 3. Section headings (modern, with optional accent eyebrow) -------- */
.hosting_title h2,
.erp_title h2,
.sec_title h2,
.title_h2 {
    color: var(--ds-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
}

.hosting_title p,
.erp_title p,
.sec_title p {
    color: var(--ds-ink-soft);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* Reusable accent eyebrow — add <span class="ds-eyebrow">…</span> above a title */
.ds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-2, #4A6CF7);
    margin-bottom: 14px;
}
.ds-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--btn-gradient, #4A6CF7);
    border-radius: 2px;
}

/* --- 4. Cards (feature/service tiles) — soft elevation + hover lift ---- */
.erp_service_item {
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    padding: 36px 28px;
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}
.erp_service_item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft-lg);
    border-color: rgba(74, 108, 247, .22);
}
.erp_service_item h3,
.erp_service_item .h_head {
    color: var(--ds-ink);
    transition: color .15s ease;
}
.erp_service_item:hover h3,
.erp_service_item:hover .h_head {
    color: var(--primary-2, #4A6CF7);
}
.erp_service_item p {
    color: var(--ds-ink-soft);
    line-height: 1.65;
}

/* --- 5. Buttons — unify theme purple/blue to brand blue, modern shape --- */
.er_btn,
.er_btn_two {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
/* Primary action — brand gradient */
.er_btn_two,
.er_btn.er_btn_two {
    background: var(--btn-gradient, #4A6CF7) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 20px -6px rgba(74, 108, 247, .45);
}
.er_btn_two:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(74, 108, 247, .55);
    color: #fff !important;
}
/* Secondary action — outline that fills with brand on hover */
.er_btn:not(.er_btn_two) {
    background: transparent !important;
    color: var(--primary-2, #4A6CF7) !important;
    border: 2px solid var(--primary-2, #4A6CF7) !important;
}
.er_btn:not(.er_btn_two):hover {
    background: var(--btn-gradient, #4A6CF7) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px);
}
/* App-store / pill buttons — re-skin theme blue to brand-neutral dark */
.app_btn {
    background-color: var(--ds-ink) !important;
    color: #fff !important;
    border: 1px solid var(--ds-ink) !important;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.app_btn:hover {
    background-color: #fff !important;
    color: var(--ds-ink) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft-lg);
}

/* --- 6. Generic cards / pricing / panels ------------------------------- */
.price_item,
.f_card,
.feature_info .item,
.service_item {
    border-radius: var(--ds-radius);
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease;
}
.price_item:hover,
.f_card:hover,
.service_item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-soft-lg);
}

/* --- 7. Form fields — consistent, modern, brand focus ------------------ */
.form-control,
.form-select,
.nice-select {
    border-radius: var(--ds-radius-sm);
    border: 1.5px solid var(--ds-line);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus,
.form-select:focus,
.nice-select.open {
    border-color: var(--primary-2, #4A6CF7);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}

/* --- 8. Links — brand-consistent, never theme blue/purple -------------- */
main a:not(.btn):not(.er_btn):not(.app_btn):not(.nav-link):not(.dropdown-item):not(.footer-links a):hover {
    color: var(--primary-2, #4A6CF7);
}

/* --- 9. Respect reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .erp_service_item,
    .erp_service_item:hover,
    .price_item:hover,
    .f_card:hover,
    .service_item:hover,
    .er_btn:hover,
    .app_btn:hover {
        transform: none;
    }
}
/* ==========================================================================
   HEADER — always-solid, high-contrast (fixes blue-on-blue over the hero)
   The theme keeps .header_area transparent until scroll, so over the blue
   hero the nav links + the blue language button were invisible. Force a
   solid white header on every page so all controls are clearly visible.
   ========================================================================== */
.header_area {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(26, 29, 41, .06), 0 8px 28px -16px rgba(26, 29, 41, .28);
}

/* Nav links: readable slate, brand-blue on hover/active */
.header_area .navbar-nav .nav-link {
    color: #1a1d29 !important;
    font-weight: 600;
}
.header_area .navbar-nav .nav-link:hover,
.header_area .nav-item.active > .nav-link,
.header_area .navbar-nav .nav-link.active {
    color: #4A6CF7 !important;
}
.header_area .dropdown-menu .nav-link {
    color: #1a1d29 !important;
    font-weight: 500;
}
.header_area .dropdown-menu .nav-link:hover {
    color: #4A6CF7 !important;
}

/* Hamburger bars visible on the white header */
.header_area .hamburger span,
.header_area .hamburger-cross span {
    background: #1a1d29 !important;
}

/* Primary header CTA ("Free trial") — prominent filled blue */
.header_area .er_btn {
    background: var(--btn-gradient, #4A6CF7) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px;
    box-shadow: 0 8px 20px -6px rgba(74, 108, 247, .45);
}
.header_area .er_btn:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(74, 108, 247, .55);
}

/* Language switcher — a clearly visible pill on ANY background */
.lang-switcher-desktop .btn-group,
.lang-switcher-mobile .btn-group {
    background: #ffffff;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    padding: 2px;
    box-shadow: 0 1px 2px rgba(26, 29, 41, .08);
    overflow: hidden;
}
.lang-switcher-desktop .btn,
.lang-switcher-mobile .btn {
    border: 0 !important;
    background: transparent !important;
    color: #5b6170 !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: 4px 14px;
    transition: color .15s ease, background-color .15s ease;
}
.lang-switcher-desktop .btn:hover,
.lang-switcher-mobile .btn:hover {
    color: #4A6CF7 !important;
}
/* Active locale — solid brand blue, white text */
.lang-switcher-desktop .btn.btn-primary,
.lang-switcher-mobile .btn.btn-primary {
    background: var(--btn-gradient, #4A6CF7) !important;
    color: #ffffff !important;
    box-shadow: none;
}

/* ==========================================================================
   PRICING PAGE — clearer, attention-grabbing, extremely responsive
   ========================================================================== */
/* Equal-height modern plan cards with bottom-aligned CTAs */
.pricing_area_two .price_item,
.tab-content .price_item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e9ebf0;
    border-radius: 18px;
    padding: 32px 26px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-soft, 0 12px 28px -10px rgba(26,29,41,.12));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
}
.tab-content .price_item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft-lg, 0 24px 48px -16px rgba(26,29,41,.16));
    border-color: rgba(74,108,247,.25);
}
.tab-content .price_item .p_list { flex: 1 1 auto; }

/* Brand checkmarks + readable feature rows */
.price_item .p_list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    color: #444b59;
    line-height: 1.45;
}
.price_item .p_list li i.ti-check {
    color: #4A6CF7;
    font-weight: 700;
    margin-top: 2px;
    flex: 0 0 auto;
}
.price_item .price { color: #1a1d29; }
.price_item .price_per_student { color: #4A6CF7; font-weight: 600; }

/* Primary plan CTA — filled brand blue, full width, prominent */
.price_item .price_btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 18px;
    padding: 13px 20px;
    border-radius: 12px;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(135deg, #5E7CF9 0%, #4A6CF7 100%) !important;
    border: 0 !important;
    box-shadow: 0 10px 22px -8px rgba(74,108,247,.5);
    transition: transform .15s ease, box-shadow .15s ease;
}
.price_item .price_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(74,108,247,.6);
    color: #fff !important;
}

/* Highlight the POPULAR plan (the card that carries a .tag ribbon) */
.tab-content .price_item:has(.tag) {
    border: 2px solid #4A6CF7;
    box-shadow: 0 24px 50px -18px rgba(74,108,247,.45);
}
@media (min-width: 992px) {
    .tab-content .price_item:has(.tag) { transform: scale(1.04); z-index: 2; }
    .tab-content .price_item:has(.tag):hover { transform: scale(1.04) translateY(-6px); }
}
.price_item .tag {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) !important;
    z-index: 3;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
}
.price_item .tag span {
    display: inline-block;
    background: linear-gradient(135deg, #5E7CF9, #4A6CF7);
    color: #fff;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 18px -6px rgba(74,108,247,.6);
}

/* Billing toggle (Monthly / Annual) → modern segmented control.
   NOTE: must be display:flex + width:fit-content for `margin:auto` to center
   it — `inline-flex` is inline-level and ignores auto margins (was stuck left). */
.price_tab.price_tab_two {
    display: flex;
    flex-wrap: nowrap;               /* never let the two pills stack into a column */
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    padding: 5px;
    border: 1px solid #e9ebf0;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-soft, 0 8px 20px -12px rgba(26,29,41,.2));
    /* top gap clears the country-selector card above; bottom gap clears the
       cards below. (shorthand top:0 previously cancelled the theme's mt_70.) */
    margin: 50px auto 40px;
    justify-content: center;
    list-style: none;
}

/* Extra top room so the centered "POPULAR" badge + scaled popular card never
   collide with the billing toggle above. */
.price_content.price_content_two { padding-top: 18px; }

/* ── Compact, modern country / pricing-region selector ───────────────────── */
.country-selector-card {
    background: #fff;
    border: 1px solid #e9ebf0;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 12px 30px -18px rgba(26, 29, 41, .25);
}
.country-selector-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.country-selector-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, #5E7CF9, #4A6CF7);
}
.country-selector-card__head h5 { font-size: 1.02rem; color: #1a1d29; }
.country-selector-card__head p { font-size: .86rem; line-height: 1.5; }
.country-selector-card__form { display: flex; gap: 10px; align-items: stretch; }
.country-selector-card__form .form-select {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 10px;
    border: 1.5px solid #e3e6ee;
    padding: 10px 14px;
    font-size: .95rem;
}
.country-selector-card__form .form-select:focus {
    border-color: #4A6CF7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, .12);
}
.country-selector-card__form .btn {
    flex: 0 0 auto;
    border-radius: 10px;
    font-weight: 600;
    padding: 10px 22px;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .country-selector-card__form { flex-direction: column; }
    .country-selector-card__form .btn { width: 100%; }
}

/* Plan illustration images — constrain so they read as a tidy plan icon
   instead of overflowing the card (theme left them unbounded). */
.pricing_area_two .price_item > img,
.tab-content .price_item > img {
    display: block;
    width: auto;
    max-width: 120px;
    max-height: 96px;
    object-fit: contain;
    margin: 0 auto 6px;
}
.price_tab.price_tab_two .nav-item { margin: 0; flex: 0 0 auto; }
.price_tab.price_tab_two .nav-link {
    border: 0 !important;
    cursor: pointer;
    padding: 9px 26px;
    min-width: 0;                    /* drop theme's min-width:193px that forced the wrap */
    white-space: nowrap;
    border-radius: 999px !important;
    font-weight: 600;
    color: #5b6170;
    transition: color .15s ease, background-color .15s ease;
}
/* `.nav-item .nav-link.active` (0,4,0) intentionally matches responsive.css's
   off-brand purple/cyan active rule so the later-loaded custom.css wins and the
   active pill stays brand blue at EVERY breakpoint. */
.price_tab.price_tab_two .nav-item .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, #5E7CF9, #4A6CF7);
    box-shadow: 0 6px 16px -6px rgba(74,108,247,.55);
}

/* ── Hero title clearance (tablet + desktop) ───────────────────────────
   The fixed .header_area (~110px, top:0, no offset) was clipping the hero
   <h1>. In the theme the title is bottom-anchored (position:absolute;
   bottom:0) inside a 53%-tall .intro within a 100vh/795px container and
   sits in a tight band just above the dashboard image — so the two-line
   French title overflows UPWARD behind the navbar. Nudging that absolute
   anchor is viewport-fragile, so instead we let the hero content flow
   normally from the top with a fixed top padding that always clears the
   header (independent of title length / screen height), and give the
   dashboard image a normal gap instead of the -380px pull that created the
   cramped band. Mobile (<=991px) already flows the content via
   responsive.css, so this targets >=992px only. */
@media (min-width: 992px) {
    .erp_banner_area_two .section_container {
        height: auto;
    }
    .erp_banner_area_two .section_container .intro {
        height: auto;
    }
    .erp_banner_area_two .section_container .intro_content {
        position: relative;
        bottom: auto;
        left: auto;
        padding-top: 150px; /* clears the fixed header with breathing room */
        padding-bottom: 0;
    }
    .erp_banner_area_two .animation_img {
        margin-top: 50px; /* clean gap below CTAs (was -380px, which forced the title up) */
    }
}

/* Comparison table — never break the layout on small screens */
.comparison_area .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison_area .table-responsive table { min-width: 720px; }
@media (max-width: 575.98px) {
    .pricing_area_two .price_item,
    .tab-content .price_item { padding: 26px 20px; }
    .tab-content .price_item:has(.tag) { transform: none; }
    .price_tab.price_tab_two .nav-link { padding: 9px 20px; }
}

/* ── Contact info panel — self-contained so white text is readable on ANY
   background (the dark #contact band AND the white free-quote / inner pages,
   where it was previously invisible white-on-white). ───────────────────── */
.contact-info-box {
    background: linear-gradient(150deg, #5E7CF9 0%, #4A6CF7 55%, #3A54D6 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 50px -22px rgba(74, 108, 247, 0.6);
}
.contact-info-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 18px;
    margin-top: 0;
}
.contact-info-item div h5 { color: #fff; }
.contact-info-item div p { color: rgba(255, 255, 255, 0.85); }

/* ── Footer — dark slate (#202120) with white text ───────────────────────── */
.footer_area.f_bg { background: #202120; }
.footer_area::before {
    background: radial-gradient(circle at 18% 40%, rgba(74, 108, 247, 0.14) 0%, transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(94, 124, 249, 0.08) 0%, transparent 55%);
}
.footer_area .f-title,
.footer_area .f-title.t_color3 { color: #ffffff; }
.footer_area .company_widget .f_p,
.footer_area .company_widget .f_p span,
.footer_area .footer_bottom p { color: #ffffff; }
.footer_area .f_widget .f_list li a,
.footer_area .f_widget.about-widget .f_list li a,
.footer_area .f_list li a,
.footer_area .company_widget .f_p a,
.footer_area .footer_bottom .f_menu a {
    color: rgba(255, 255, 255, 0.92) !important;
    transition: color .15s ease, padding-left .15s ease;
}
.footer_area .f_widget .f_list li a:hover,
.footer_area .f_widget.about-widget .f_list li a:hover,
.footer_area .f_list li a:hover,
.footer_area .company_widget .f_p a:hover,
.footer_area .footer_bottom .f_menu a:hover { color: #ffffff !important; }

/* Social icons → perfect circles. The footer_seven theme rule forces
   width/height:auto, which makes the bordered glyphs render as ovals — so we
   re-assert fixed equal dimensions at higher specificity and flex-center the
   icon inside. */
.footer_area.footer_seven .f_social_icon a,
.footer_area .f_social_icon a {
    width: 42px;
    height: 42px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.footer_area.footer_seven .f_social_icon a:hover,
.footer_area .f_social_icon a:hover {
    color: #fff;
    background: var(--primary-2, #4A6CF7);
    border-color: var(--primary-2, #4A6CF7);
    transform: translateY(-2px);
}
.footer_area.footer_seven .f_social_icon a:focus-visible,
.footer_area .f_social_icon a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.45);
}
.footer_area.footer_seven .f_social_icon a + a { margin-left: 10px; }
.footer_area .footer_bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ── Homepage "Our modules" section ──────────────────────────────────────── */
.ges-modules { background: #fff; }
.ges-module-card {
    display: flex;
    gap: 16px;
    height: 100%;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--ds-line, #e9ebf0);
    border-radius: var(--ds-radius, 16px);
    box-shadow: var(--shadow-soft, 0 8px 20px -12px rgba(26, 29, 41, .2));
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ges-module-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft-lg, 0 24px 48px -16px rgba(26, 29, 41, .16));
    border-color: rgba(74, 108, 247, .25);
}
.ges-module-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74, 108, 247, .35); }
.ges-module-card__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, #5E7CF9, #4A6CF7);
    box-shadow: 0 8px 18px -8px rgba(74, 108, 247, .6);
}
/* Image-based module icon (PNG from /assets/img/hub) — no gradient, larger box */
.ges-module-card__icon--img {
    width: 64px;
    height: 64px;
    background: transparent;
    box-shadow: none;
    border-radius: 12px;
    overflow: hidden;
}
.ges-module-card__icon--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ges-module-card__body { display: flex; flex-direction: column; }
.ges-module-card__title {
    display: block;
    font-size: 1.08rem;
    color: var(--ds-ink, #1a1d29);
    margin-bottom: 6px;
    transition: color .15s ease;
}
.ges-module-card:hover .ges-module-card__title { color: #4A6CF7; }
.ges-module-card__desc {
    display: block;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ds-ink-soft, #5b6170);
}
.ges-module-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-weight: 600;
    font-size: .85rem;
    color: #4A6CF7;
}
.ges-module-card__cta i { transition: transform .15s ease; }
.ges-module-card:hover .ges-module-card__cta i { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    .ges-module-card:hover { transform: none; }
    .ges-module-card:hover .ges-module-card__cta i { transform: none; }
}

/* ── Homepage "Your challenges, our solutions" section ────────────────────── */
.ges-solutions { background: #f6f8fe; }
.ges-solutions .row { align-items: stretch; }
.ges-solution-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e9ebf0;
    border-radius: 18px;
    padding: 28px 26px 26px;
    box-shadow: 0 10px 30px -18px rgba(26, 29, 41, .25);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ges-solution-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -22px rgba(26, 29, 41, .28);
    border-color: rgba(74, 108, 247, .22);
}

/* Shared eyebrow tag */
.ges-solution-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.ges-solution-card__tag i { font-size: .85rem; }
.ges-solution-card__tag--problem { color: #c0392b; }   /* semantic: a problem */
.ges-solution-card__tag--ok { color: #2d8a57; }        /* semantic: solved */

/* Problem zone — muted, recessed */
.ges-solution-card__problem {
    background: #f5f6fa;
    border: 1px solid #eceef4;
    border-radius: 12px;
    padding: 16px 18px;
}
.ges-solution-card__problem p {
    margin: 8px 0 0;
    color: #3a3f4b;
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.55;
}

/* Connector badge between problem and solution */
.ges-solution-card__connector {
    align-self: center;
    width: 34px;
    height: 34px;
    margin: 12px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4A6CF7;
    background: #fff;
    border: 1px solid #e3e6ee;
    border-radius: 50%;
    box-shadow: 0 4px 12px -4px rgba(74, 108, 247, .45);
}

/* Solution zone — pinned to the bottom so cards align */
.ges-solution-card__solution {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: auto;
}
.ges-solution-card__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-tint, rgba(74, 108, 247, .08));
    border-radius: 14px;
    overflow: hidden;
}
.ges-solution-card__icon img { width: 40px; height: 40px; object-fit: contain; }
.ges-solution-card__solution-body h3 { font-size: 1.08rem; margin: 6px 0 5px; color: #1a1d29; line-height: 1.3; }
.ges-solution-card__solution-body p { margin: 0; color: #5b6170; font-size: .9rem; line-height: 1.55; }

.ges-solutions-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 44px;
}
@media (prefers-reduced-motion: reduce) {
    .ges-solution-card:hover { transform: none; }
}

/* ── Strategic CTA band ───────────────────────────────────────────────────── */
.ges-cta-band {
    padding: 56px 0;
    background: linear-gradient(135deg, #5E7CF9 0%, #4A6CF7 55%, #3A54D6 100%);
    position: relative;
    overflow: hidden;
}
.ges-cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.ges-cta-band__eyebrow { display: block; color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .95rem; }
.ges-cta-band__text h2 { color: #fff; margin: 6px 0 0; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.ges-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ges-cta-band__actions .btn { border-radius: 10px; font-weight: 700; padding: 12px 24px; }
.ges-cta-band__actions .btn-light { color: #4A6CF7; background: #fff; border: 1px solid #fff; }
.ges-cta-band__actions .btn-light:hover { background: #eef2fe; color: #3A54D6; }
.ges-cta-band__actions .btn-outline-light { color: #fff; border: 1px solid rgba(255, 255, 255, .6); }
.ges-cta-band__actions .btn-outline-light:hover { background: #fff; color: #4A6CF7; }
@media (max-width: 767px) {
    .ges-cta-band__inner { flex-direction: column; text-align: center; }
    .ges-cta-band__actions { justify-content: center; }
}

/* ── Mega-menu ("Plus") — remove the boxed "shapes" around each column ─────
   The theme clears the inner dropdown lists' background/shadow but leaves
   Bootstrap's default border + radius, which renders each column as a boxed
   rectangle. Strip those so the columns read as clean link lists. */
.menu > .nav-item.submenu.mega_menu .mega_menu_inner .dropdown-menu {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* Subtle, consistent hover for the mega-menu links */
.menu > .nav-item.submenu.mega_menu .mega_menu_inner .dropdown-menu > .nav-item > .nav-link {
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}
.menu > .nav-item.submenu.mega_menu .mega_menu_inner .dropdown-menu > .nav-item > .nav-link:hover {
    color: #4A6CF7;
}

/* ── Final pricing CTA — even spacing whether the two buttons sit inline or
   wrap onto separate lines (the theme only added a right margin). ─────────── */
.pricing_cta_area .cta_buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.pricing_cta_area .cta_buttons .btn { margin: 0 !important; }

/* ==========================================================================
   HERO (mobile) — keep the CTA buttons visible above the dashboard image.
   The theme places .intro_content absolute and pulls .animation_img up by
   -322px (z-index 2), which covered the "Essai gratuit / Voir la démo"
   buttons on phones. On small screens use normal flow + correct stacking.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* responsive.css forces .section_container to a fixed 795px height, which
       left a big empty band between the CTAs and the dashboard image. Collapse
       it to content height so the image sits right under the buttons. */
    .erp_banner_area_two .section_container { height: auto !important; }
    .erp_banner_area_two .section_container .intro { height: auto; }
    .erp_banner_area_two .section_container .intro_content {
        position: relative;
        z-index: 5;
        padding-bottom: 0;
    }
    .erp_banner_area_two .intro_content .er_btn {
        position: relative;
        z-index: 6;
    }
    .erp_banner_area_two .animation_img {
        margin-top: 15px;   /* ~15px after the "La démo" button */
        z-index: 1;
    }
}
@media (max-width: 575.98px) {
    /* Stack the two hero CTAs full-width and centered on narrow phones */
    .erp_banner_area_two .intro_content .er_btn {
        display: block;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .erp_banner_area_two .intro_content .er_btn + .er_btn {
        margin-top: 12px;
    }
}