/* AUTO-GENERATED by scripts/build-frontoffice-css.php — DO NOT EDIT BY HAND. */
/* Source of truth: assets/css/frontoffice/style.css (edit that, then re-run the script). */

/* ============================= */
/* =  FRONT OFFICE MAIN STYLE  = */
/* ============================= */


/* ===== inlined: /assets/css/frontoffice/base.css ===== */
/* =========================================================
   BASE STYLESHEET
   Handles: Fonts, Variables, Global Reset, Typography, Buttons, Backdrop
   ========================================================= */

/* ===== INTER FONT FACES ===== */
/* NOW FONT — LOCAL LOAD */
@font-face {
    font-family: "Now";
    src: url("/assets/fonts/Now-Thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Now";
    src: url("/assets/fonts/Now-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Now";
    src: url("/assets/fonts/Now-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Now";
    src: url("/assets/fonts/Now-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Now";
    src: url("/assets/fonts/Now-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Now";
    src: url("/assets/fonts/Now-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Thin.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Thin.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 100;
}
@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-ExtraLight.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-ExtraLight.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 200;
}
@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Light.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Light.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 300;
}
@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Regular.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Regular.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Medium.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Medium.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-SemiBold.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-SemiBold.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 600;
}
@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Bold.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Bold.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-ExtraBold.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-ExtraBold.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 800;
}
@font-face {
    font-family: "Inter";
    src: url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Black.woff2)
            format("woff2"),
        url(https://cdn.jotfor.ms/fonts/inter/fonts/Inter-Black.woff)
            format("woff");
    font-display: swap;
    font-style: normal;
    font-weight: 900;
}

/* =========================================================
   ROOT VARIABLES — THE DESIGN SYSTEM
   ========================================================= */
:root {
    /* ===== Colors ===== */
    --color-primary: #2563eb; /* Main accent (blue) */
  --color-secondary: #007b3d; /* Supportive accent (green) */
  --color-tertiary: #fb923c; /* Highlight (orange) */
  --color-accent: #7c3aed; /* Optional accent (violet) */
  --color-bg: #ffffff; /* Background color */
  --color-surface: #fffee8; /* Surface / cream tone */
  --color-text: #1c1c1a; /* Primary text */
  --color-border: #e6e2c5; /* Border lines */
  --color-dark: #111; /* Dark chip or text color */

  /* =========================================================
     EXTENDED BRAND PALETTE — GLS
     ========================================================= */
  --light--off-white: #fffff9;
  --off-white: #fffee8;
  --dark--off-white: #bcbbaa;
  --off-black: #211e1d;
  --light--off-black: #3e3832;
  --dark--off-black: #181615;

  /* Brand color families */
  --green: #009d5a;
  --dark--green: #007342;
  --light--green: #00d98a;
  
  --blue: #1c45db;
  --light--blue: #3577f4;
  --dark--blue: #1533a1;

  --orange: #ff7a08;
  --light--orange: #ffb90e;
  --dark--orange: #bc5a06;

  --yellow: #fc0;
  --light--yellow: #fff400;
  --dark--yellow: #bc9600;

  --purple: #9767f8;
  --light--purple: #d5a4fe;
  --dark--purple: #704cb6;

    /* ===== Typography ===== */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;

    /* Font sizes */
    --h1-size: 2.75rem; /* 44px */
    --h2-size: 2rem; /* 32px */
    --h3-size: 1.5rem; /* 24px */
    --h4-size: 1.25rem; /* 20px */
    --p-size: 1rem; /* 16px */
    --small-size: 0.875rem; /* 14px */

    /* Font weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* ===== Buttons ===== */
    --btn-bg: var(--color-primary);
    --btn-bg-hover: #1d4ed8;
    --btn-text: #fff;
    --btn-radius: 8px;
    --btn-padding: 0.75rem 1.5rem;

    /* ===== Layout ===== */
    --container-max: 1320px;
    --section-padding: 80px;
    --radius-small: 16px;
    --radius-mid: 32px;
    --radius-big: 64px;
}

/* =========================================================
   GLOBAL RESET
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html{
    font-family: sans-serif !;
}
html,
body {
    font-family: Now, sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
  width: 100%;
}

/* =========================================================
   BODY
   ========================================================= */
body {
    font-family: Now, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,
h2,
h3,
h4 {
    font-family: "Now", sans-serif;
    color: var(--color-text);
    margin: 0 0 1rem;
    line-height: 1.2;
}

h1 {
    font-size: var(--h1-size);
    font-weight: var(--fw-bold);
}

h2 {
    font-size: var(--h2-size);
    font-weight: var(--fw-semibold);
}

h3 {
    font-size: var(--h3-size);
    font-weight: var(--fw-medium);
}

h4 {
    font-size: var(--h4-size);
    font-weight: var(--fw-regular);
}

p {
    font-size: var(--p-size);
    font-weight: var(--fw-regular);
    color: var(--color-text);
    margin: 0 0 1rem;
}

small {
    font-size: var(--small-size);
    color: #555;
}

/* =========================================================
   LINKS
   ========================================================= */
a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    /* color: var(--color-primary); */
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    /* display: inline-block;
    background: var(--btn-bg);
    color: var(--btn-text); */
    border: none;
    /* border-radius: var(--btn-radius); */
    /* padding: var(--btn-padding);
    font-weight: var(--fw-semibold);
    text-align: center;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease; */
}
/* 
.btn:hover {
    background: var(--btn-bg-hover);
    color: #fff;
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
} */

/* =========================================================
   BACKDROP (Used for Mobile Drawer or Modal Overlays)
   ========================================================= */
.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10;
}

.backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 10px;
    font-weight: 700;
}

h1 {
    margin-top: 20px;
    font-size: 38px;
    line-height: 44px;
}

h2 {
    margin-top: 20px;
    font-size: 32px;
    line-height: 36px;
}

h3 {
    margin-top: 20px;
    font-size: 24px;
    line-height: 30px;
}

h4 {
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
}

h5 {
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
}

h6 {
    margin-top: 10px;
    font-size: 12px;
    line-height: 18px;
}

p {
    margin-top: 0;
    margin-bottom: 10px;
}

blockquote {
    border-left: 5px solid #e2e2e2;
    margin: 0 0 10px;
    padding: 10px 20px;
    font-size: 18px;
    line-height: 22px;
}

figure {
    margin: 0 0 10px;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
}

.w-list-unstyled {
    padding-left: 0;
    list-style: none;
}
/* Default (LTR) */
#mobile-drawer {
    left: 0;
    right: auto;
}

/* RTL override */
html[dir="rtl"] #mobile-drawer {
    right: 0 !important;
    left: auto !important;
}

/* @media screen and (max-width: 767px) {
    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        --bs-gutter-x: 1.5rem !important;
    }
    
    .hero-section .container,
    .hero-section .container-fluid,
    .hero-section .row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        --bs-gutter-x: 0 !important;
    }
    
    .map-section .container,
    .map-section .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
} */
 @media screen and (max-width: 767px) {

    /* Default safety rule */
    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        --bs-gutter-x: 1.5rem !important;
    }

    /* Hero sections: almost full-bleed, but not edge-to-edge */
    .hero-section .container,
    .hero-section .container-fluid,
    .hero-section .row {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        --bs-gutter-x: 0.75rem !important;
    }

    /* Map sections: truly full-bleed */
    .map-section .container,
    .map-section .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}




/* ===== inlined: /assets/css/frontoffice/header.css ===== */
/* =========================================================
HEADER STYLESHEET (Desktop & Shared)
========================================================= */

/* ===== HEADER CONTAINER ===== */
.site-header {
width: 100%;
background: var(--color-surface);
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

}
.site-header.is-fixed {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.site-header.is-fixed,
.site-header.is-fixed.mobile,
.site-header.mobile.is-fixed,
.site-header.is-fixed.is-mobile {
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}

/* ===== HEADER WRAPPER ===== */
.nav-wrap {
max-width: var(--container-max);
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-around;
gap: 12px;
}

/* ===== BRAND ===== */
.brand {
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
font-size: 28px;
font-weight: var(--fw-black);
letter-spacing: 0.3px;
text-transform: lowercase;
transition: none !important;
}

/* ===== NAVIGATION ===== */
.nav {
display: flex;
align-items: center;
gap: 28px;
font-weight: var(--fw-semibold);
font-size: 15px;
}

.nav a,
.nav button {
color: var(--color-text);
text-decoration: none;
border: 0;
background: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
transition: none !important;
font-size: 0.8rem;
font-weight: 600;
}

/* Hover style for main nav items */
.nav a:hover,
.nav button:hover {
background-image: linear-gradient(#f1f1d4, #f1f1d4);
color: var(--color-secondary);
transition: none !important;
}

/* ===== CARET ARROW ===== */
.caret {
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: none !important;
}

/* ===== RIGHT SIDE ===== */
.right {
display: flex;
align-items: center;
gap: 10px;
}

.chip {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: var(--fw-bold);
font-size: 12px;
background: var(--color-dark);
color: #fff;
border: 2px solid var(--color-text);
transition: none !important;
}

.chip:hover {
background: var(--color-primary);
border-color: var(--color-primary);
transition: none !important;
}

.chip--dark {
background: var(--color-dark);
color: #fff;
border-color: var(--color-dark);
}

/* ===== ENROLL BUTTON ===== */
.btn {
padding: 10px 18px;
border-radius: 999px;
background-color: var(--off-black);
color: var(--off-white);
font-weight: var(--fw-bold);
font-size: 14px;
text-decoration: none;
transition: none !important;
}

.btn:hover {
background-color: var(--off-black);
color: var(--off-white);
transform: scale(1.025);

}

/* =========================================================
DROPDOWN MENU (FIXED HOVER + SLOW DISAPPEAR)
========================================================= */

.dropdown {
position: relative;
}

.dropdown button {
border-radius: 8px;
}

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;

background-image: linear-gradient(#f1f1d4, #f1f1d4);

border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
min-width: 220px;

padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 10px;

opacity: 0;
visibility: hidden;

/* THE MAGIC — THIS is why it worked */
transform: translateY(8px);
transition: all 0.25s ease;

z-index: 30;
backdrop-filter: blur(8px);
}

.dropdown:hover > .dropdown-menu,
.dropdown > .dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
display: flex;
}

.dropdown-menu a,
.dropdown-menu .dropdown-item {
text-decoration: none;
color: var(--color-text);
font-size: 0.8rem;
font-weight: 500;
padding: 0;
background: transparent;
white-space: normal;
transition: color 0.2s ease;
}

.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
color: var(--color-secondary);
background: transparent;
}


/* ===== SUB-DROPDOWN (SECOND LEVEL) ===== */
.dropdown-submenu {
position: relative;
}

.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-left: 23px;
margin-top: -10px;
opacity: 0;
visibility: hidden;
transform: translateX(10px);
transition: all 0.25s ease;
}

.dropdown-submenu:hover > .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(0);
}

.dropdown-submenu > a::after {
content: "";
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
margin-left: 8px;
display: inline-block;
}

.dropdown-submenu > a:hover {
color: var(--b-green);
}


/* ===== inlined: /assets/css/frontoffice/header-mobile.css ===== */
/* ===========================
   MOBILE HEADER WRAPPER
=========================== */
.mobile-header .nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: var(--color-surface);
    border-radius: 0 !important;
}

.brand {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* ===========================
   BURGER BUTTON
=========================== */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    background: none;
    z-index: 10000;

    /* FIX */
    position: relative;
}

/* FIX: center bars using absolute positioning */
.menu-toggle span {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--color-text);
    transition: 0.3s ease;
    border-radius: 2px;
    transform: translateX(-50%);
}

/* Normal state positions */
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 28px; }

/* Open state = perfect centered X (no translate) */
.menu-toggle.open span:nth-child(1) {
    top: 21px;
    transform: translateX(-50%) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
    top: 21px;
    transform: translateX(-50%) rotate(-45deg);
}


/* ===========================
   DRAWER (MOBILE MENU)
=========================== */
.drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100vw;
    height: 100vh;
    background: var(--color-surface);
    z-index: 9999;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    padding: 90px 24px 30px;
    transition: 0.3s ease;
}

.drawer.open {
    right: 0 !important;
}

/* ===========================
   MENU ITEMS
=========================== */
.menu-item {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-label {
    width: 100%;
    text-align: left;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text);
    cursor: pointer;
    background: none;
    border: none;
    padding: 16px 0;
}

.menu-label:hover,
.menu-label.open {
    color: var(--color-secondary);
}

/* Arrow icon */
.nav-dropdown_icon {
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: 0.3s ease;
    display: inline-flex;
    transform-origin: center;
}

.menu-item.open > .menu-label .nav-dropdown_icon {
    transform: rotate(-135deg);
}

/* ===========================
   MAIN SUBMENU (accordion)
=========================== */
.submenu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    padding-left: 14px;
    transition: max-height 0.35s ease;
}

.menu-item.open .submenu {
    max-height: 1000px; /* allow full natural expansion */
}

/* Submenu links */
.submenu a {
    display: block;
    padding: 12px 0;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ===========================
   SUBMENU GROUP (Our Sites + Levels)
=========================== */
.submenu-group {
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 10px 0;
}

.submenu-title {
    width: 100%;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 400 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    color: var(--color-text);
}

.submenu-content {
    max-height: 0;
    overflow: hidden;
    padding-left: 14px;
    transition: max-height 0.35s ease;
}

.submenu-group.open .submenu-content {
    max-height: 700px; /* enough to push rest downward */
}

.submenu-content a {
    font-size: 14px;
    padding: 10px 0;
    display: block;
    color: var(--color-text);
    text-decoration: none;
}

/* Arrow rotation for group */
.submenu-group.open .submenu-title .nav-dropdown_icon {
    transform: rotate(-135deg);
}

/* ===========================
   ONLY À PROPOS INNER SCROLL
=========================== */
.submenu-inner {
    padding-right: 6px;
}

/* ===========================
   LANG SWITCH
=========================== */
.nav-lang-switch {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.nav-lang-list {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.nav-lang-btn {
  border: 2px solid var(--off-black);
  background: transparent;
  color: var(--off-black);
  border-radius: 1000px;
  width: 34px;
  height: 34px;
  display: flex;
  font-size: 14px;
  font-weight: 900;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.2s ease;
}

.nav-lang-btn:hover {
  background: var(--off-black);
  color: var(--off-white);
}

.nav-lang-btn.active-lang {
  background: var(--off-black);
  color: var(--off-white);
}

/* ===========================
   SHOW BURGER ON MOBILE
=========================== */
@media (max-width: 960px) {
    .menu-toggle {
        display: flex;
    }

    .drawer {
        display: block !important;
        visibility: visible !important;
    }
}
#mobile-drawer .nav-lang-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #1a1a1a;
    background: transparent;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.25s ease;
    margin: 0 6px;
}

/* Active = filled black */
#mobile-drawer .nav-lang-btn.active-lang {
    background: #1a1a1a;
    color: var(--off-white);
}

/* Hover (optional) */
#mobile-drawer .nav-lang-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
}



/* ===== inlined: /assets/css/frontoffice/home/hero.css ===== */
/* =========================================================
HERO SECTION – Inspired by die Code sommet structure
(Updated: add gradient overlay in CSS, keep same image path)
========================================================= */

.hero{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: none;

height: auto;
min-height: 1000px;

margin-bottom: -64px;
padding-top: 4rem;
padding-bottom: 12rem;

overflow: hidden;
margin-top: -28px;
z-index: 1;
}

/* Background image (keep your inline url path) */
.hero__bg{
position: absolute;
inset: 0;

/* keep the url from inline style: background-image: url(...) */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 12%;

z-index: 0;

/* make it closer to reference */
filter: brightness(0.94) contrast(1.04);
transform: scale(1.02);
}

/* THIS is your "linear-gradient(...), url(...)" but in CSS */
.hero__bg::before{
content:"";
position:absolute;
inset:0;
z-index:1;

background: linear-gradient(
to bottom,
rgba(20, 20, 22, 0.92) 0%,
rgba(20, 20, 22, 0.85) 25%,
rgba(20, 20, 22, 0.4) 45%,
rgba(20, 20, 22, 0.0) 100%
);


pointer-events:none;
}

/* Inner wrapper for title */
.hero__inner{
position: relative;
z-index: 2;
max-width: 1100px;
padding: 0 20px;
}

/* Title refinement */
.hero-title{
font-family: Now, sans-serif;
color: var(--color-light, #f8fff8);
font-weight: 500;
line-height: .9;
letter-spacing: -0.5px;
text-shadow: 0 2px 16px rgba(0,0,0,0.30);
font-size: clamp(56px, 7vw, 120px);
margin: 0 auto;
filter: drop-shadow(0 2px 16px #0000004d);
}

/* =========================================================
BADGES (Location bubbles)
========================================================= */
.badge{
position: absolute;
border-radius: 10000px;
padding: 0.6rem 1.5rem;
font-size: 1.6rem;
line-height: 1;
white-space: nowrap;
transition: transform 0.25s ease;
box-shadow: 0 10px 24px rgba(0,0,0,0.18),
inset 0 -1px 0 rgba(255,255,255,0.15);
z-index: 3;
}

.badge:hover{ transform: scale(1.05); }

/* Badge text bumped to #fff (and orange bg to the darker brand orange) to meet
   WCAG AA contrast for large text — same colored bubbles, legible labels. */
.b-blue{
background-color: var(--blue);
color: #fff;
left: 6%;
top: 33%;
z-index: 4;
}

.b-green{
background-color: var(--green);
color: #fff;
left: 8%;
bottom: 45%;
z-index: 3;
}

.b-orange{
background-color: var(--dark--orange);
color: #fff;
right: 6%;
top: 30%;
z-index: 4;
}

.b-violet{
background-color: var(--purple);
color: #fff;
right: 10%;
bottom: 47%;
z-index: 4;
}

/* =========================================================
ANIMATED TWO-LINE TITLE – word by word
========================================================= */

.hero-title--animated{
display: flex;
flex-direction: column;
align-items: center;
gap: 0.12em;
line-height: 1.05;
width: 100%;
padding: 0 16px;
box-sizing: border-box;
margin: 2.5rem 0 3rem;
}

.hero-title__top{
display: block;
text-align: center;
white-space: nowrap;
font-size: min(7vw, 120px);
overflow: hidden;
max-width: 100%;
}

@media (max-width: 900px){ .hero-title__top{ font-size: min(5.8vw, 80px); } }
@media (max-width: 600px){ .hero-title__top{ font-size: min(5vw,  44px); } }
@media (max-width: 400px){ .hero-title__top{ font-size: min(4.4vw, 34px); } }

.hero-title__bottom{
display: block;
text-align: center;
white-space: nowrap;
font-family: 'Noto Nastaliq Urdu', 'Scheherazade New', 'Amiri', serif;
font-size: min(5vw, 64px);
font-weight: 700;
color: rgba(255,255,255,0.9);
letter-spacing: 0;
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
line-height: 1.7;
max-width: 100%;
overflow: hidden;
margin-top: 0.5em;
}

@media (max-width: 900px){ .hero-title__bottom{ font-size: min(4.5vw, 50px); } }
@media (max-width: 600px){ .hero-title__bottom{ font-size: min(4.2vw, 34px); } }
@media (max-width: 400px){ .hero-title__bottom{ font-size: min(3.8vw, 26px); } }

.hero-word-group{
display: inline;
}

.hero-char{
display: inline-block;
opacity: 0;
will-change: transform, opacity, filter;
letter-spacing: 0;
margin: 0;
padding: 0;
}

.hero-char.char-from-left{
animation: charRiseLeft 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.hero-char.char-from-right{
animation: charRiseRight 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes charRiseLeft{
0%{
  opacity: 0;
  filter: blur(6px);
  transform: translateY(22px) translateX(-8px) scale(0.92);
}
55%{ filter: blur(0px); }
100%{
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0) translateX(0) scale(1);
}
}

@keyframes charRiseRight{
0%{
  opacity: 0;
  filter: blur(6px);
  transform: translateY(22px) translateX(8px) scale(0.92);
}
55%{ filter: blur(0px); }
100%{
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0) translateX(0) scale(1);
}
}

/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 992px){
.hero{
min-height: 700px;
padding-top: 3rem;
padding-bottom: 8rem;
margin-bottom: -32px;
margin-top: 0;
}

.hero__bg{
background-size: cover;
background-position: 50% 22%;
transform: scale(1.03);
}

.hero__bg::before{
/* a bit stronger on tablet */
background: linear-gradient(
to bottom,
rgba(20, 20, 22, 0.92) 0%,
rgba(20, 20, 22, 0.85) 25%,
rgba(20, 20, 22, 0.4) 45%,
rgba(20, 20, 22, 0.0) 100%
);

}

.hero-title{
font-size: clamp(2.4rem, 6vw, 5rem);
}

.badge{
font-size: 1.2rem;
padding: 0.45rem 1.2rem;
transform: scale(0.9);
}

.b-blue{ left: 6%; top: 33%; }
.b-green{ left: 8%; bottom: 45%; }
.b-orange{ right: 6%; top: 30%; }
.b-violet{ right: 10%; bottom: 47%; }
}

/* =========================================================
MOBILE FIX ONLY – keeps desktop/tablet untouched
========================================================= */

@media (max-width: 600px){

/* ✅ Safari-safe height */
.hero{
min-height: 100svh; /* instead of 100vh */
padding-top: 1.2rem;
padding-bottom: 6.5rem;
margin: 0;
}

/* ✅ ONE single background rule (no conflicts) */
.hero__bg{
background-size: 250%;
background-position: 50% 50%;
transform: none;
}

/* ✅ Mobile-optimized gradient */
.hero__bg::before{
background: linear-gradient(
to bottom,
rgba(20, 20, 22, 0.92) 0%,
rgba(20, 20, 22, 0.85) 25%,
rgba(20, 20, 22, 0.4) 45%,
rgba(20, 20, 22, 0.0) 100%
);

}

/* ✅ If background ever becomes <img> */
.hero__bg img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
}

/* =========================================================
MOBILE TITLE FIX (NO NEGATIVE MARGIN)
========================================================= */

@media (max-width: 767px){

.hero__inner{
padding-top: 2.5rem;
}

.hero .hero-title{
position: relative;
z-index: 5;
display: block;

margin: 0 auto;
line-height: .95;
max-width: 980px;
font-size: inherit;
}
}

@media (max-width: 767px){

.hero{
justify-content: flex-start;
}

.hero__inner{
position: absolute;
left: 0;
right: 0;

top: calc(env(safe-area-inset-top, 0px) + 88px);

padding: 0 18px;
z-index: 5;
max-width: 1100px;
margin: 0 auto;
}

.hero .hero-title{
margin: 0;
line-height: 1;
font-size: inherit;
}

.hero-title__bottom{
font-size: min(4.2vw, 34px);
}
}


/* ===== inlined: /assets/css/frontoffice/home/intro.css ===== */
/* ===== INTRO SECTION ===== */
.intro-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  width: 100%;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  background-color: #211e1d;
  padding-top: 64px;
  padding-bottom: 1.5rem;
  z-index: 5;
  margin-top: -160px;
}

.intro-section .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.intro-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.95;
}

/* ===== INTRO CARD ===== */
.intro-card {
  position: relative;
  z-index: 10;

  border-radius: var(--radius-mid);
  background-color: var(--off-white);

  flex-flow: column;
  justify-content: flex-start; /* keep your attribute */
  align-items: center;

  width: 80%;
  margin-top: -12rem;

  /* FORCE EXACT PADDING */
  padding: 0 4rem 4rem !important;

  display: flex;

  max-width: 1020px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;

  /* NEW: close to your "height:500px" but better */
  min-height: 500px;
}

/* NEW: center content vertically (override AFTER your required attribute) */
.intro-card {
  justify-content: center;
}

/* Logo */
.intro-logo {
  width: 400px;
  height: 195px;
  border-radius: 999px;
  object-fit: contain;
  display: block;
  padding: 14px;
  margin: -120px auto 18px;
}

.intro-section h1 {
  color: #0b0b0b;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.05;
      font-size: 48px;
  text-align: center;
  letter-spacing: -1px;
}

.intro-section p {
      /* font-size: 24px; */
  /* line-height: 1.7; */
  color: #444;
  max-width: 720px;
  text-align: center;
  margin: 0 auto 2.2rem;
}

.intro-section .btn-success {
  background-color: #1c1c1a;
  color: var(--color-surface);
  border: none;
  transition: all 0.3s ease;

  padding: 1.2rem 3.5rem;     /* BIG button */
  font-weight: 700;
  font-size: 1.25rem;         /* larger text */

  border-radius: var(--radius-mid);  /* use your variable */
}

.intro-section .btn-success:hover {
  background-color: #1c1c1a;
  transform: translateY(-2px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .intro-section {
    padding-top: 64px;
    margin-top: -120px;
  }

  .intro-card {
    width: 88%;
    max-width: 1020px;
    margin-top: -12rem;
    padding: 0 3rem 3.5rem !important;
    border-radius: var(--radius-mid);
    min-height: 460px;
  }

  .intro-logo {
    width: 110px;
    height: 110px;
    padding: 12px;
    margin: -65px auto 16px;
  }

  .intro-section h1 {
    font-size: 3rem;
  }
}

@media (max-width: 767px) {
  .hero .hero-title {
    margin-bottom: 220px !important;
    position: relative;
    z-index: 5;
    display: block;
  }

  .hero .b-blue { left: 2% !important; top: 18% !important; bottom: auto !important; }
  .hero .b-green { left: 8% !important; bottom: 64% !important; top: auto !important; z-index: 0; }
  .hero .b-orange { right: 11% !important; top: 17% !important; bottom: auto !important; }
  .hero .b-violet { right: 15% !important; top: auto !important; z-index: 0; }

  .intro-section {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 64px;
    margin-top: -250px;
  }

  .intro-card {
    width: 94%;
    margin: 0 auto;
    margin-top: -10rem;
    padding: 0 1.5rem 2.8rem !important;
    border-radius: var(--radius-mid);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-height: 420px;
  }

  .intro-logo {
    width: 400px;
    height: 130px;
    padding: 12px;
    margin: -58px auto 14px;
  }

  .intro-section h1 {
    font-size: 2.4rem !important;
  line-height: 1.1 !important;
    max-width: 200px !important;
    font-weight: 600 !important;
   
    letter-spacing: 0 !important;
  }
}

@media (max-width: 479px) {
  .intro-card {
    width: 92%;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    border-radius: var(--radius-mid);
    min-height: 400px;
  }

  .intro-logo {
    width: 422px;
    height: 150px;
    padding: 11px;
    margin: -88px auto 12px;
  }
.intro-section h1 {
  font-size: 2rem !important;
}
  .hero .hero-title { margin-bottom: 280px !important; }
  .hero .b-blue { left: 3% !important; top: 7% !important; }
  .hero .b-green { left: 18% !important; top: 24% !important; z-index: 0; bottom: auto !important; }
  .hero .b-orange { right: 1% !important; top: 7% !important; }
  .hero .b-violet { right: 7% !important; top: 24% !important; bottom: auto !important; z-index: 0; }
}

@media (max-width: 479px){
  .hero .badge{
    font-size: 0.7rem !important;
    padding: 0.25rem 0.65rem !important;
  }
  .intro-logo {
    width: 222px !important;
    height: 150px !important;
    padding: 10px !important;
    margin: -75px auto 14px !important;
  }
}


/* ===== inlined: /assets/css/frontoffice/home/review.css ===== */
/* =========================================================
   REVIEWS CAROUSEL SECTION – with Responsive Title Fix
   ========================================================= */

   .reviews-carousel-section.section {
    background-color: black;
    color: var(--off-white);
    padding: 4rem 0; /* Minimized vertical padding on section */
    overflow: hidden; /* CRUCIAL for the carousel effect */
  }
  
  .container.is-reviews-title-block {
    padding: 0 1.5rem;
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
  }
  
  /* ===================================
     Title & Rating Stars (Desktop)
  =================================== */
  .h-section-subtitle.is-reviews {
    color: white;
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }
  
  /* Align rating block horizontally */
  .div-block-29 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  
  .review-stars-title {
    color: var(--yellow);
    width: 125px;
  }
  
  /* ===================================
     Review Cards Layout
  =================================== */
  .div-block-28.review-grid-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    overflow: hidden;
  }
  
  .review-carousel_track {
    display: flex;
    flex-shrink: 0;
    min-width: 200%; /* Important: needs to be larger than container to scroll/loop */
    gap: 2rem; /* wider gap for new card width */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: content-box;
  }
  
  /* ===== Updated Review Card Style ===== */
  .review-block {
    background-color: var(--off-white);
    color: var(--off-black);
    border-radius: 1rem;
    flex-flow: column;
    flex: none;
    width: 400px;
    margin-right: 2rem;
    padding: 2rem;
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 230px; /* ✅ Keeps all cards same height visually */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .review-block:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
  
  .text-block-9 {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5em;
    flex-grow: 1; /* ✅ ensures text expands evenly */
    overflow: hidden; /* prevents content overflow during animation */
  }
  
  .text-block-10 {
    font-weight: 600;
    opacity: 0.33;
    margin-top: auto;
  }
  
  /* Optional: center stars better */
  .review-stars {
    color: var(--yellow);
    width: 120px;
    margin-bottom: 1rem;
    flex-shrink: 0;
  }
  
  
  /* ===================================
     1. Animation Keyframes
  =================================== */
  @keyframes scroll-left {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
  }
  
  @keyframes scroll-right {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0%);
    }
  }
  
  /* ===================================
     2. Applying Animations to Tracks
  =================================== */
  .is-animating-left {
    animation: scroll-left 30s linear infinite;
  }
  
  .is-animating-right {
    animation: scroll-right 30s linear infinite;
  }
  
  /* Pause on hover */
  .review-carousel_track:hover {
    animation-play-state: paused;
  }

  /* ===================================
     RTL (Arabic): Top track scrolls left (normal).
     Bottom track uses flex row-reverse (cards
     laid right-to-left) + a dedicated keyframe
     that starts at 0% and moves forward by 50%,
     so visually cards flow in the opposite
     direction. Both tracks start at translateX(0)
     so both are fully populated at t=0.
  =================================== */
  @keyframes scroll-rtl-right {
    from { transform: translateX(0%); }
    to   { transform: translateX(50%); }
  }

  .reviews-carousel-section.rtl .is-animating-left {
    animation-name: scroll-left;
    animation-direction: normal;
  }

  .reviews-carousel-section.rtl .is-animating-right {
    animation-name: scroll-rtl-right;
    animation-direction: normal;
    flex-direction: row-reverse;
  }

  /* RTL: cards use margin-right for LTR spacing; in Arabic this creates
     visible black gaps (especially on the row-reverse track). The track
     `gap` already handles spacing — drop the margin in RTL. */
  .reviews-carousel-section.rtl .review-block {
    margin-right: 0;
    margin-left: 0;
    direction: rtl;
    text-align: right;
  }

  /* RTL: the document is dir="rtl", so flex tracks lay out right-to-left.
     That breaks the translateX(-50%) loop on the top track — the duplicated
     set ends up on the wrong side and a black gap appears before respawn.
     Force the TRACK to LTR so the seamless loop works; cards keep their
     own dir:rtl above so Arabic text renders correctly inside. */
  .reviews-carousel-section.rtl .review-carousel_track {
    direction: ltr;
  }
  
  /* ===================================
     Mobile Adjustments (max-width: 479px)
  =================================== */
  @media screen and (max-width: 479px) {
    /* Title adjustments */
    .h-section-subtitle.is-reviews {
      font-size: 1.75rem;
      line-height: 1.25;
      margin-bottom: 0.75rem;
      padding: 0 0.5rem;
    }
  
    /* Align rating block nicely */
    .div-block-29 {
      flex-direction: row;
      justify-content: center;
      gap: 0.5rem;
    }
  
    .review-stars-title {
      width: 100px; /* slightly smaller stars for mobile */
    }
  
    /* Carousel layout */
    .review-carousel_track {
        padding-left: 0;
        padding-right: 0;
        gap: 0.75rem;
    }
  
    /* Adjusted card size for mobile */
    .review-block {
      width: 260px;
      min-height: 200px; 
      margin-right: 1rem;
      padding: 1.5rem;
      border-radius: 0.75rem;
    }
  
    .div-block-28.review-grid-layout {
        padding-left: 1rem; 
        padding-right: 1rem;
    }
    .is-animating-left {
      animation: scroll-left 10s linear infinite; 
    }
  
    .is-animating-right {
      animation: scroll-right 10s linear infinite;
    }
  }
  

/* ===== inlined: /assets/css/frontoffice/home/sites.css ===== */
/* ===============================
   GLS – NOS SITES AU MAROC
================================ */
.sites-maroc-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6rem 4rem;
  background: #f8f9fb;
}

.sites-title {
  font-size: clamp(2.5rem, 4vw, 3.2rem);
  font-weight: 700;
  margin-bottom: .75rem;
  text-align: center;
  color: #000;
}

.sites-subtitle {
  font-size: 1.1rem;
  color: #6c757d;
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Grid Layout */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
  gap: 1.5rem;
  width: 100%;
  max-width: 1300px;
}

/* Card Base */
.site-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
  color: #fff;
  text-decoration: none;
}

.site-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

/* Image & MP4 Video */
.site-image,
.site-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s;
}

.site-image { opacity: 1; z-index: 1; }
.site-video { opacity: 0; z-index: 0; pointer-events: none; }

/* Image & MP4 Video */
.site-image,
.site-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s;
}

.site-image { opacity: 1; z-index: 1; }
.site-video { opacity: 0; z-index: 0; pointer-events: none; }

/* REMOVE HOVER EFFECT */
.site-card:hover .site-video {
  opacity: 0 !important;
  z-index: 0 !important;
}

.site-card:hover .site-image {
  opacity: 1 !important;
}


/* YouTube Wrapper */
.site-video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.site-video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}

/* Overlay Title */
.site-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 70%);
  text-align: center;
  z-index: 2;
}

.site-overlay h3,
.site-overlay .site-card-label {
  color: #ffffff !important;
  font-size: 1.5rem;
  font-weight: 900 !important;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* Size Variants */
.site-card.small { grid-column: span 1; }
.site-card.wide { grid-column: span 2; }

/* Tablet */
@media (max-width: 991px) {
  .sites-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 260px;
    gap: 1rem;
  }
  .site-card.wide { grid-column: span 2; }
}

/* Mobile */
@media (max-width: 575px) {
  .sites-maroc-section { padding: 0; background: #fff; }
  .site-overlay h3,
  .site-overlay .site-card-label { font-size: 1.3rem; }
}

/* Mobile Full Video Cover Fix */
@media (max-width: 575px) {
  .site-video-wrapper iframe {
    width: 260%;
    height: 260%;
  }
}

/* ===============================
   PLAY BUTTON + RIPPLE ANIMATION
================================ */

/* Center wrapper */
.site-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

/* Button core */
.play-btn {
    position: relative;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    transition: transform .3s ease;
}

.play-btn:hover {
    transform: scale(1.08);
}

/* SVG icon */
.play-btn svg {
    width: 30px;
    fill: #e51e24;
    position: relative;
    left: 2px;
}

/* Ripple Elements (slow premium effect) */
.play-btn .ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    animation: rippleSlow 3.5s infinite ease-out;
}

/* Delay waves */
.play-btn .ripple:nth-child(1) { animation-delay: 0s; }
.play-btn .ripple:nth-child(2) { animation-delay: .8s; }
.play-btn .ripple:nth-child(3) { animation-delay: 1.6s; }

/* Keyframes slow ripple */
@keyframes rippleSlow {
    0%   { transform: scale(1); opacity: .8; }
    40%  { transform: scale(1.6); opacity: .4; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ===============================
   POPUP VIDEO OVERLAY
================================ */

.video-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.video-popup-container {
    position: relative;
    width: 90%;
    max-width: 1100px;
}

.video-popup-container iframe {
    width: 100%;
    height: 600px;
    border-radius: 10px;
}

.video-popup-close {
    position: absolute;
    top: -50px;
    right: 0;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}


/* ===== inlined: /assets/css/frontoffice/home/courses.css ===== */
/* --- 1. Section and Container Overrides --- */

.home-courses-section.section {
    grid-column-gap: 6rem;
    /* grid-row-gap: 6rem; */
    background-color: var(--off-white);
}

.section {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 6rem 4rem;
    display: flex;
}

.container {
    width: 100%;
    position: relative;
}

.container.is-home-courses-photo {
    border-radius: var(--radius-mid);
    background-color: var(--off-black);
    color: var(--off-white);
    /* IMPORTANT: Replicating the exact background style used in the original CSS */
    background-image:
  linear-gradient(#0000 65%, #000),
  url("/assets/images/home/nos-cours.avif");
    background-position: 0 0, 50%;
    background-size: auto, cover;
    justify-content: flex-start;
    align-items: flex-end;
    height: 400px;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
}

.container.is-h-courses {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
}

/* --- 2. Typography --- */

.h-section-title {
    color: var(--off-white);
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 5rem;
    line-height: 1;
}

.h-section-subtitle-courses {
    margin-top: 60px !important;
    color: black !important;
    text-wrap: balance;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 3.5rem;
    line-height: 1;
}

.subtitle {
    /* Darkened from --light--blue (#3577f4, ~4.1:1) to --blue (#1c45db, ~7:1) for
       stronger WCAG contrast on light backgrounds. Same brand blue family. */
    color: var(--blue);
    text-wrap: balance;
    font-size: 1.5rem;
    font-weight: 500;
}

.paragraph-2 {
    max-width: 800px;
    margin-bottom: 1rem;
}

/* --- 3. Courses Cards (Grid Layout) --- */

.courses-cards {
    /* UPDATED: Increased gap between cards */
    grid-column-gap: 2rem; 
    grid-row-gap: 2rem;
    grid-template-rows: auto;
    /* >>> CRITICAL CHANGE: Now 4 columns for A1-B2 <<< */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    margin-top: 2rem;
    display: grid;
}

.courses-cards.is-home-other-german-courses,
.courses-cards.is-home-other-german-courses.is-lp,
.courses-cards.is-landing-page {
    /* Retains 3 columns for the new 'Online courses & exams' section */
    grid-template-columns: 1fr 1fr 1fr;
}

/* --- 4. Individual Card Styling and Colors --- */

.course-card {
    /* UPDATED: Increased border-radius */
    border-radius: var(--radius-mid); 
    color: var(--off-black);
    /* Default background for A1 and 'Online Courses' */
    background-color: #81caff; 
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1.5rem;
    display: flex;
}

/* Specific Course Card Background Overrides */
.course-card.is-green {
    background-color: var(--light--green);
}

.course-card.is-purple {
    background-color: var(--light--purple);
    justify-content: center;
    align-items: flex-start;
}

.course-card.is-yellow {
    background-color: var(--light--yellow);
}

.course-card.is-orange {
    background-color: var(--light--orange);
}

.course-card.is-other {
    background-color: var(--dark--off-white);
}

/* Card Level Circles */
.couse-card_level {
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2rem;
    display: flex;
}

.course-card_level-circle {
    border: 2px solid #1a1a1a !important;
    border-radius: 1000px;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin-right: -1px;
    font-weight: 700;
    display: flex;
    color: #1a1a1a !important;
    background-color: transparent;
}

/* Override Level Circle colors if needed (based on provided card colors) */
.course-card.is-green .course-card_level-circle { border-color: #1a1a1a !important; color: #1a1a1a !important; }
.course-card.is-purple .course-card_level-circle { border-color: #1a1a1a !important; color: #1a1a1a !important; }
.course-card.is-yellow .course-card_level-circle { border-color: #1a1a1a !important; color: #1a1a1a !important; }
.course-card.is-orange .course-card_level-circle { border-color: #1a1a1a !important; color: #1a1a1a !important; }

/* Card Title and Text */
.course-card_title {
    text-wrap: balance;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.1;
    color: #000000 !important;
    font-weight: 800 !important;
}

.course-card_title.is-others {
    /* Ensures consistent title spacing for non-level cards */
    min-height: 4.5rem; 
    color: #000000 !important;
    font-weight: 800 !important;
}

.course-card_text {
    margin-bottom: auto;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* Button override for card integration - inherits from global .button if no specific styling exists */
.button.is-course-card {
    min-width: auto;
    margin-top: 1rem;
    padding: .5rem 1.25rem;
    font-size: 16px;
    line-height: 1.1;
    background-color: black;
    color: var(--off-white);
    font-weight: 700;
    border-radius: 8rem;
}

/* --- 5. Media Queries for Responsiveness --- */

/* Tablet (max-width: 991px) */
@media screen and (max-width: 991px) {
    .h-section-subtitle, .h-section-title {
        font-size: 3rem; 
    }
    .courses-cards {
        /* Forces cards into a scrolling list on tablet/mobile */
        width: 100vw;
        max-width: 100vw;
        margin-left: -3rem; /* Compensate for padding */
        padding-left: 3rem;
        padding-right: 3rem;
        display: flex;
        overflow: auto;
        /* UPDATED: Increased gap between scrolling cards */
        grid-column-gap: 2rem; 
        grid-row-gap: 2rem;
        /* IMPORTANT: Setting this back to auto/initial behavior for scrolling */
        grid-template-columns: none;
    }
    .course-card {
        flex: none;
        width: 250px; /* Fixed width for scrolling cards */
        margin-right: 2rem; /* UPDATED: Add gap between scrolling cards */
    }
    .course-card:last-child {
        margin-right: 3rem; 
    }
    .courses-cards.is-home-other-german-courses {
        width: 100vw;
        margin-left: -3rem;
        padding-left: 3rem;
        padding-right: 3rem;
        display: flex;
        overflow: auto;
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
        /* IMPORTANT: Setting this back to auto/initial behavior for scrolling */
        grid-template-columns: none;
    }
}

/* Mobile (max-width: 767px) */
@media screen and (max-width: 767px) {
    .section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .h-section-subtitle {
        font-size: 2.5rem;
    }
    .h-section-title {
        font-size: 4rem;
    }
    .courses-cards {
        margin-left: -2rem; 
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .courses-cards.is-home-other-german-courses {
        margin-left: -2rem; 
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .course-card {
        width: 300px;
        margin-right: 2rem; 
    }
    .course-card:last-child {
        margin-right: 2rem;
    }
}

/* Small Mobile (max-width: 479px) */
@media screen and (max-width: 479px) {
    .section {
        padding: 4rem 0rem;
    }
    .container.is-home-courses-photo {
        border-radius: var(--radius-small);
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .h-section-title {
        font-size: 3rem;
    }
    .courses-cards {
        margin-left: -1.5rem; 
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .courses-cards.is-home-other-german-courses {
        margin-left: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .course-card {
        width: 250px; 
        margin-right: 2rem; 
    }
    .course-card:last-child {
        margin-right: 1.5rem;
    }
    .h-section-subtitle-courses {
        font-size: 2rem;
        
    }
    .subtitle{
        font-size: 1rem;
    }
}

/* Hide class if present in your main stylesheet */
.course-card.is-purple.hide {
    display: none;
}
/* ===============================
   COURSE CARD – OTHERS VARIANT
================================ */

.course-card.is-others {
  background-color: var(--dark--off-white);
  color: var(--off-black);
  border-radius: 22px;
}

/* Title */
.course-card_title.is-others {
  color: var(--off-black);
}

/* Text */
.course-card.is-others .course-card_text {
  color: rgba(33, 30, 29, 0.85);
}

/* Button */
.course-card.is-others .button.is-course-card {
  background-color: var(--off-black);
  color: var(--color-surface);
}

.course-card.is-others .button.is-course-card:hover {
  background-color: var(--off-black);
  transform: translateY(-2px);
}
@media screen and (max-width: 479px) {
  .container.is-home-courses-photo{
    border-radius: 0 !important;
  }
  .h-learn-more-card{
    grid-row-gap: 2rem !important;
  }
}

/* ===== inlined: /assets/css/frontoffice/home/learnmore.css ===== */
/* Section Title */
.learn-more-title {
    text-wrap: balance;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--off-white);
  }
  
  /* Card Styles */
  .h-learn-more-card {
    grid-column-gap: 6rem;
    grid-row-gap: 6rem;
    border-radius: var(--radius-small);
    background-color: var(--off-white);
    color: var(--off-black);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    text-decoration: none;
    transition: all 0.35s ease;
    display: flex;
    height: 100%;
  }
  
  .h-learn-more-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  }
  
  /* Smooth Fade-Up Animation on Hover */
  .h-learn-more-card:hover {
    animation: fadeInUp 0.4s ease-in forwards;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0.9;
      transform: translateY(0);
    }
    to {
      opacity: 1;
      transform: translateY(-8px);
    }
  }
  
  /* Icon Circle */
  .h-learn-more-card_icon {
    border: 2px solid var(--light--green);
    border-radius: 10000px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
  }
  
  /* Card Title + Arrow on same line */
  .learn-card-bottom {
    width: 100%;
  }
  .learn-card-bottom h3,
  .learn-card-bottom p,
  .learn-card-bottom .learn-card-title {
    color: #000000 !important;
    line-height: 1.2;
    margin-bottom: 0;
    font-weight: 800 !important;
  }
  .learn-card-bottom svg {
    color: var(--off-black);
    transition: transform 0.3s ease;
  }
  .h-learn-more-card:hover .learn-card-bottom svg {
    transform: translateX(6px);
  }
  .lead{
    color: var(--off-white);
    font-weight: 500;
    font-size: 17px;
  }

/* ===== inlined: /assets/css/frontoffice/home/9onsol.css ===== */
/* ===============================
   ABOUT GLS MOROCCO SECTION
================================ */
.home-about-section.section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rem 2rem;
}

/* Remove Bootstrap container padding only in this section */
.home-about-section .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===============================
   GRID LAYOUT
================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-desktop, 1rem);
  align-items: stretch;
}

/* ===============================
   GRADIENT CARD (Left)
================================ */
.about-card {
  border-radius: var(--radius-small, 24px);
  background-color: var(--dark--off-black);

  color: var(--off-white);
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  height: 100%;
  transition: box-shadow 0.3s ease;
  width: 96%;
  margin: 0 auto;
}

/* Hover only adds depth (no scale) */
.about-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

/* Title */
.h-section-subtitle {
  text-wrap: balance;
  margin-top: 0;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--off-white);
}

/* Paragraph */
.about-card p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 600px;
  opacity: 0.95;
}

/* Button */
.about-card .btn {
  background-color: var(--off-white);
  color: var(--off-black);
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.about-card .btn:hover {
  transform: translateY(-2px);
}

/* ===============================
   VIDEO BLOCK (Right)
================================ */
.about-video {
  border-radius: var(--radius-small, 24px);
  overflow: hidden;
  background-color: #211e1d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  height: 100%;
  display: flex;
  align-items: stretch;
  width: 96%;
  margin: 0 auto;
}

.about-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-small, 24px);
  aspect-ratio: 16/9;
  object-fit: initial; /* or remove this line entirely */
}


/* ===============================
   RESPONSIVE FIX (like die Code sommet)
================================ */
@media (max-width: 991px) {
  .home-about-section.section {
    padding: 3rem 1.5rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 2.5rem;
  }

  .about-card {
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.75rem;
    border-radius: 22px;
  }

  .about-card h2 {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1.1;
    margin-bottom: 1.2rem;
  }

  .about-card p {
    max-width: 90%;
    font-size: 1rem;
    line-height: 1.6;
  }

  .about-card .btn {
    margin-top: 1.75rem;
    padding: 0.65rem 1.75rem;
    font-size: 0.95rem;
  }

  .about-video {
    border-radius: 22px;
    overflow: hidden;
  }

  .about-video iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
  }
}

/* ===============================
   MOBILE WIDTH FIX
================================ */
@media (max-width: 767px) {
  .home-about-section.section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .about-card {
    width: 94%;
    margin: 0 auto;
    padding: 2.5rem 1.75rem;
    border-radius: 22px;
  }

  .about-video {
    width: 94%;
    margin: 0 auto;
    border-radius: 18px;
  }

  .about-video iframe {
    border-radius: 18px;
    height: 340px;
  }
}

@media (max-width: 479px) {
  .about-card {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}


/* ===== inlined: /assets/css/frontoffice/home/cooperation.css ===== */
/* ===============================
   COOPERATION PARTNERS – Auto Marquee
================================ */
.partners-section {
  padding: 3rem 2rem;
  background: #f8f9fb;
}

.partners-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--off-black, #000);
  margin-bottom: 2.5rem;
  text-wrap: balance;
}

/* Marquee shell with edge fade */
.partners-marquee {
  position: relative;
  overflow: hidden;
  /* subtle edge fade hint */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Scrolling track */
.partners-track {
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: 0.5rem;
  width: max-content;
  animation: partnersScroll 24s linear infinite;
}

/* Logos */
.partners-track img {
  height: clamp(52px, 8vw, 90px);
  width: auto;
  flex: 0 0 auto;
  opacity: 0.9;
  filter: grayscale(100%);
  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

.partners-track img:hover {
  transform: scale(1.05);
  opacity: 1;
  filter: grayscale(0%);
}

/* Hover to pause (desktop/tablet) */
@media (hover: hover) and (pointer: fine) {
  .partners-marquee:hover .partners-track { animation-play-state: paused; }
}

/* Speed tweak on small screens */
@media (max-width: 767px) {
  .partners-track { animation-duration: 18s; }
  .partners-track img { height: clamp(48px, 10vw, 70px); }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}

/* Keyframes: translate 50% = width of first set */
@keyframes partnersScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* RTL (Arabic): the document is dir="rtl" makes both the marquee's
   inline-level box positioning AND the inline-flex track flow right-to
   -left, breaking the seamless loop. Force BOTH the marquee container
   and the track to LTR so the duplicated set sits to the right of the
   first set and the standard partnersScroll keyframe (0% → -50%) loops
   identically across the boundary. */
.partners-section.rtl .partners-marquee,
.partners-section.rtl .partners-track {
  direction: ltr;
}

.partners-section.rtl .partners-marquee {
  text-align: left;
}

.partners-logos-noscript {
  margin-top: 1rem;
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: center;
}
.partners-logos-noscript img { height: 80px; opacity: .9; filter: grayscale(100%); }
.partners-track img[alt="TLScontact"] {
  height: clamp(60px, 8vw, 90px); 
  max-width: 200px;               
  object-fit: contain;             
}


/* ===== inlined: /assets/css/frontoffice/home/info.css ===== */
/* ===============================
   CONTACT SECTION (GLS Morocco)
================================ */
.contact-section {
    padding: 6rem 2rem;
  }
  
  /* Remove Bootstrap default padding only in this section */
  .contact-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* ===============================
     GRID LAYOUT
  ================================ */
  .container.is-2-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
  }
  
  /* ===============================
     LEFT CARD (Contact Info)
  ================================ */
  .div-block-5-copy {
    background-color: var(--off-black);
    color: var(--off-white);
    border-radius: 28px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 96%;
    margin: 0 auto;
  }
  
  .h-section-subtitle {
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--off-white);
  }
  
  .div-block-21 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  
  .text-span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #d3d3d3;
    text-transform: uppercase;
  }
  
  .text-block-3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--off-white);
    line-height: 1.5;
  }
  
  .link-block,
  .link-block-2 {
    text-decoration: none;
    color: var(--off-white);
  }
  
  .link-block:hover .text-block-3,
  .link-block-2:hover .text-block-3 {
    text-decoration: underline;
  }
  
  /* ===============================
     SOCIAL ICONS
  ================================ */
  .div-block-20 {
    display: flex;
    gap: 1.1rem;
    margin-top: 0.5rem;
  }

  .footer-social-link {
    font-size: 1.4rem;
    color: var(--off-white);
    transition: color 0.3s ease;
  }
  
  .footer-social-link.ig:hover { color: #e4405f; }  /* Instagram */
  .footer-social-link.fb:hover { color: #1877f2; }  /* Facebook */
  .footer-social-link.yt:hover { color: #ff0000; }  /* YouTube */
  .footer-social-link.wa:hover { color: #25d366; }  /* WhatsApp */
  .footer-social-link.tt:hover { color: #ff0050; }  /* TikTok */
  
  /* ===============================
     MAP
  ================================ */
  .div-block-7 iframe {
    width: 96%;
    height: 100%;
    border-radius: 28px;
    border: none;
    display: block;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  /* ===============================
     RESPONSIVE FIXES
  ================================ */
  @media screen and (max-width: 991px) {
    .container.is-grid,
    .container.is-2-col-grid {
      flex-flow: column;
      display: flex;
      gap: 2rem;
    }
  
    .div-block-5-copy {
      padding: 3rem 2rem;
    }
  
    .div-block-7 iframe {
      height: 350px;
    }
  }
  
  @media screen and (max-width: 767px) {
    .contact-section {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  
    .div-block-5-copy {
      width: 94%;
      margin: 0 auto;
      padding: 2.5rem 1.75rem;
      border-radius: 24px;
    }
  
    .div-block-7 iframe {
      border-radius: 18px;
      height: 340px;
    }
  }
  
  @media screen and (max-width: 479px) {
    .div-block-5-copy {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  /* ===============================
       Centers accordion — click to expand → address links to Google Maps
     =============================== */
  .visit-block .gls-address-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .gls-address-row + .gls-address-row {
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .gls-address-details { width: 100%; }

  .gls-address-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--off-white, #fff);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .gls-address-summary::-webkit-details-marker { display: none; }
  .gls-address-summary::marker { content: ''; }

  .gls-address-city {
    flex: 1;
    line-height: 1.4;
  }

  .gls-address-branch {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
    vertical-align: middle;
  }

  .gls-address-chevron {
    flex-shrink: 0;
    transition: transform .25s ease;
    opacity: .6;
  }

  .gls-address-details[open] > .gls-address-summary .gls-address-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  .gls-address-body {
    padding: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: glsAddressSlide .25s ease-out;
  }

  @keyframes glsAddressSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .gls-address-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label arrow"
      "text arrow";
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 12px;
    text-decoration: none;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .04);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .06);
    transition: background .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .gls-address-branch-label {
    grid-area: label;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .gls-address-link .gls-address-text {
    grid-area: text;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
  }

  .gls-address-arrow {
    grid-area: arrow;
    align-self: center;
    color: rgba(255, 255, 255, .55);
    transition: opacity .2s ease, transform .2s ease, color .2s ease;
    opacity: .7;
  }

  .gls-address-link:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
  }

  .gls-address-link:hover .gls-address-arrow {
    opacity: 1;
    color: #fff;
    transform: translate(1px, -1px);
  }

  .gls-address-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .35);
    outline-offset: 2px;
  }

  /* RTL — flip arrow direction visually */
  [dir="rtl"] .gls-address-arrow { transform: scaleX(-1); }
  [dir="rtl"] .gls-address-link:hover .gls-address-arrow { transform: translate(-1px, -1px) scaleX(-1); }
  

/* ===== inlined: /assets/css/frontoffice/home/newgroups.css ===== */
/* ===== WRAPPER ===== */
.hh-highlights {
    padding: 4rem 0;
}

/* spacing left/right ONLY here */
.hh-container {
    padding-left: 4rem;
    padding-right: 4rem;
}

/* ===== TITLE ===== */
.hh-section-title {
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 5rem;
    line-height: 1;
    color: var(--off-black);
}

/* ===== ROW ===== */
.hh-row {
    display: flex;
    gap: var(--gap-desktop, 1.5rem);
}

/* ===== CARD BASE ===== */
.hh-card {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    border-radius: var(--radius-small);
    background-color: var(--dark--green);
    color: #ffffff;
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 2rem;
    display: flex;
}

/* BLUE CARD */
.hh-card-first {
    background-color: var(--dark--blue);
}

/* ===== TEXT =====
   Force full white + opacity:1 so the .reveal animation (opacity:0 until JS adds
   .visible) can never leave these strings rendering as faded grey on the cards. */
.hh-title {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
}

/* Large featured-card title (kept bigger than the standard card title) */
.hh-title-big {
    font-size: 3rem;
    line-height: 1.05;
}

.hh-text {
    color: #ffffff !important;
    opacity: 1 !important;
}

.hh-text strong {
    color: #ffffff !important;
}

.hh-muted {
    color: #ffffff !important;
    opacity: 1 !important;
}

.hh-yellow {
    color: #f7c948;
}

/* ===== BIG CARD (hidden by default) ===== */
.hh-card-big {
    display: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {

    .hh-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hh-section-title {
        font-size: 3rem;
    }

    .hh-title {
        font-size: 1.85rem;
    }

    .hh-title-big {
        font-size: 2.25rem;
    }

    .hh-row {
        flex-direction: column;
    }

    .hh-card {
        padding: 2rem 1.5rem;
    }
}


/* ===== inlined: /assets/css/frontoffice/home/student-services.css ===== */
/* =========================================================
   HOME — STUDENTENAKTE / STUDENT SERVICES
   Editorial asymmetric layout with German-flag accent
   ========================================================= */

.ssn-section {
    --ssn-bg:        #fffee8;       /* cream — matches site surface */
    --ssn-bg-soft:   #fffff9;
    --ssn-line:      rgba(28, 28, 26, .12);
    --ssn-line-soft: rgba(28, 28, 26, .06);
    --ssn-text:      #1c1c1a;
    --ssn-mute:      #6c6a5e;
    --ssn-gold:      #b88800;       /* darker gold for legibility on cream */
    --ssn-gold-bright: #f5b40a;
    --ssn-red:       #d22730;
    --ssn-dark:      #0e0e0c;

    position: relative;
    background: var(--ssn-bg);
    color: var(--ssn-text);
    padding: 110px 0 120px;
    overflow: hidden;
}

/* faint paper grid */
.ssn-section::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--ssn-line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--ssn-line-soft) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    pointer-events: none;
    opacity: .65;
}

/* soft brand glow blobs (like other public pages) */
.ssn-section::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(420px 320px at 12% 18%, rgba(37,99,235,.08), transparent 70%),
        radial-gradient(360px 260px at 92% 88%, rgba(245,180,10,.18), transparent 70%);
    pointer-events: none;
}

.ssn-inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ── HEADER ROW ────────────────────────────────── */
.ssn-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 32px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--ssn-line);
    margin-bottom: 64px;
}

.ssn-eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    color: var(--ssn-mute);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.ssn-eyebrow .flag {
    width: 24px; height: 16px;
    border-radius: 3px;
    object-fit: cover;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ssn-title {
    font-family: "Now", sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ssn-text);
    max-width: 14ch;
}
.ssn-title em {
    font-style: normal;
    color: var(--ssn-gold);
    position: relative;
}
.ssn-title em::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 6px;
    height: 8px;
    background: rgba(245,180,10,.35);
    z-index: -1;
}

.ssn-meta {
    text-align: right;
    color: var(--ssn-mute);
    font-size: .82rem;
    line-height: 1.55;
    max-width: 280px;
}
.ssn-meta strong {
    display: block;
    color: var(--ssn-text);
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 4px;
}

/* ── BODY GRID ─────────────────────────────────── */
.ssn-body {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: start;
}

/* ── LEFT : STACKED FEATURED CARD (3 variants) ─── */
.ssn-feature-stack {
    position: relative;
    min-height: 520px;            /* keeps space stable while variants swap */
}

.ssn-feature {
    position: relative;
    background: linear-gradient(180deg, #1a1814 0%, #0e0e0c 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 38px 38px 36px;
    overflow: hidden;
    color: #f2efe3;
    text-decoration: none;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.ssn-feature:hover { color: #f2efe3; text-decoration: none; }

/* Variant cards stack on top of each other */
.ssn-variant {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(28px) scale(.96) rotateX(6deg);
    transform-origin: center top;
    filter: blur(6px);
    transition:
        opacity   .55s cubic-bezier(.22,.61,.36,1),
        transform .65s cubic-bezier(.22,.61,.36,1),
        filter    .55s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform, filter;
}
.ssn-body[data-state="track"] .ssn-variant--track,
.ssn-body[data-state="cert"]  .ssn-variant--cert,
.ssn-body[data-state="att"]   .ssn-variant--att {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
    filter: blur(0);
    pointer-events: auto;
}

/* ── CHILD STAGGER : when a variant becomes active ─── */
.ssn-variant > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.ssn-body[data-state="track"] .ssn-variant--track > *,
.ssn-body[data-state="cert"]  .ssn-variant--cert > *,
.ssn-body[data-state="att"]   .ssn-variant--att > * {
    opacity: 1;
    transform: translateY(0);
}
/* stagger children — tag, title, desc, preview, cta */
.ssn-body[data-state="track"] .ssn-variant--track > *:nth-child(1),
.ssn-body[data-state="cert"]  .ssn-variant--cert > *:nth-child(1),
.ssn-body[data-state="att"]   .ssn-variant--att > *:nth-child(1)  { transition-delay: .12s; }
.ssn-body[data-state="track"] .ssn-variant--track > *:nth-child(2),
.ssn-body[data-state="cert"]  .ssn-variant--cert > *:nth-child(2),
.ssn-body[data-state="att"]   .ssn-variant--att > *:nth-child(2)  { transition-delay: .18s; }
.ssn-body[data-state="track"] .ssn-variant--track > *:nth-child(3),
.ssn-body[data-state="cert"]  .ssn-variant--cert > *:nth-child(3),
.ssn-body[data-state="att"]   .ssn-variant--att > *:nth-child(3)  { transition-delay: .24s; }
.ssn-body[data-state="track"] .ssn-variant--track > *:nth-child(4),
.ssn-body[data-state="cert"]  .ssn-variant--cert > *:nth-child(4),
.ssn-body[data-state="att"]   .ssn-variant--att > *:nth-child(4)  { transition-delay: .32s; }
.ssn-body[data-state="track"] .ssn-variant--track > *:nth-child(5),
.ssn-body[data-state="cert"]  .ssn-variant--cert > *:nth-child(5),
.ssn-body[data-state="att"]   .ssn-variant--att > *:nth-child(5)  { transition-delay: .40s; }

/* Sweep: a thin gold light bar that crosses the card on switch */
.ssn-variant::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -30%;
    width: 30%;
    background: linear-gradient(90deg, transparent 0%, rgba(245,180,10,.25) 50%, transparent 100%);
    transform: skewX(-12deg);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}
.ssn-body[data-state="track"] .ssn-variant--track::after,
.ssn-body[data-state="cert"]  .ssn-variant--cert::after,
.ssn-body[data-state="att"]   .ssn-variant--att::after {
    animation: ssnSweep .9s ease-out .05s both;
}
@keyframes ssnSweep {
    0%   { left: -30%; opacity: 0; }
    35%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ssn-variant,
    .ssn-variant > * { transition: opacity .25s linear !important; transform: none !important; filter: none !important; }
    .ssn-variant::after { display: none !important; }
}

/* Variant accent stripes (left edge of card) */
.ssn-variant--track::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 33%, var(--ssn-red) 33%, var(--ssn-red) 66%, var(--ssn-gold-bright) 66%, var(--ssn-gold-bright) 100%);
}
.ssn-variant--cert::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #2563eb 0%, #5dd29c 100%);
}
.ssn-variant--att::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--ssn-gold-bright) 0%, #d22730 100%);
}
[dir="rtl"] .ssn-variant--track::before,
[dir="rtl"] .ssn-variant--cert::before,
[dir="rtl"] .ssn-variant--att::before { left: auto; right: 0; }

/* Cert variant : "verified" stamp inside preview */
.ssn-cert-num {
    font-family: 'Courier New', monospace;
    color: #f2efe3;
    background: rgba(255,255,255,.06);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: .08em;
    font-size: .82rem;
}
.ssn-cert-stamp {
    margin-top: 16px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: rgba(0,157,90,.1);
    border: 1px dashed rgba(0,157,90,.4);
    border-radius: 10px;
    color: #5dd29c;
    font-size: .85rem;
    font-weight: 600;
}
.ssn-cert-stamp i { font-size: 1.15rem; }

/* Attestation variant : 3-step flow */
.ssn-att-flow {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ssn-att-step {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    font-size: .78rem;
    color: #a8a597;
}
.ssn-att-step i,
.ssn-att-step .dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem;
    flex: none;
    background: rgba(255,255,255,.08);
}
.ssn-att-step.done {
    border-color: rgba(0,157,90,.35);
    background: rgba(0,157,90,.08);
    color: #5dd29c;
}
.ssn-att-step.done i { background: #009d5a; color: #fff; }
.ssn-att-step.now {
    border-color: rgba(245,180,10,.4);
    background: rgba(245,180,10,.08);
    color: var(--ssn-gold-bright);
}
.ssn-att-step.now .dot {
    background: var(--ssn-gold-bright);
    box-shadow: 0 0 0 3px rgba(245,180,10,.18);
    animation: ssnPulse 1.6s ease-in-out infinite;
}

.ssn-feature-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: rgba(245,180,10,.14);
    color: var(--ssn-gold-bright);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.ssn-feature-tag .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ssn-gold-bright);
    box-shadow: 0 0 0 0 rgba(245,180,10,.7);
    animation: ssnPulse 1.6s ease-in-out infinite;
}
@keyframes ssnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,180,10,.7); }
    50%      { box-shadow: 0 0 0 6px rgba(245,180,10,0); }
}

.ssn-feature-title {
    font-family: "Now", sans-serif;
    font-weight: 700;
    font-size: clamp(1.65rem, 2.8vw, 2.1rem);
    line-height: 1.15;
    color: #f2efe3;
    margin: 0 0 14px;
}
.ssn-feature-desc {
    color: #a8a597;
    font-size: .98rem;
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 46ch;
}

/* mock status preview */
.ssn-preview {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 28px;
}
.ssn-preview-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-size: .85rem;
    color: #a8a597;
}
.ssn-preview-row + .ssn-preview-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,.08);
}
.ssn-preview-row strong { color: #f2efe3; font-weight: 600; }

.ssn-track {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px;
}
.ssn-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.12);
    flex: none;
}
.ssn-dot.done { background: #009d5a; box-shadow: 0 0 0 3px rgba(0,157,90,.22); }
.ssn-dot.now  { background: var(--ssn-gold-bright); box-shadow: 0 0 0 3px rgba(245,180,10,.25); animation: ssnPulse 1.6s ease-in-out infinite; }
.ssn-bar  { flex: 1; height: 2px; background: rgba(255,255,255,.1); border-radius: 1px; }
.ssn-bar.done { background: linear-gradient(90deg, #009d5a, var(--ssn-gold-bright)); }

.ssn-feature-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 22px 14px 26px;
    background: #fffee8;
    color: #0e0e0c;
    border-radius: 999px;
    font-weight: 600;
    font-size: .94rem;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease;
}
.ssn-feature-cta i {
    transition: transform .25s ease;
    font-size: 1.1rem;
}
.ssn-feature-cta:hover {
    background: var(--ssn-gold-bright);
    color: #1a1a1a;
    transform: translateY(-2px);
}
.ssn-feature-cta:hover i { transform: translateX(4px); }
[dir="rtl"] .ssn-feature-cta i { transform: scaleX(-1); }
[dir="rtl"] .ssn-feature-cta:hover i { transform: scaleX(-1) translateX(4px); }

/* ── RIGHT : NUMBERED LIST ─────────────────────── */
.ssn-list {
    display: flex;
    flex-direction: column;
}

.ssn-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 30px 4px;
    border-bottom: 1px solid var(--ssn-line);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: padding .35s cubic-bezier(.2,.7,.2,1);
}
.ssn-item:first-child { border-top: 1px solid var(--ssn-line); }

.ssn-item::before {
    content: '';
    position: absolute; left: 0; bottom: -1px;
    height: 1px; width: 0;
    background: var(--ssn-gold);
    transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.ssn-item:hover::before,
.ssn-item.is-active::before { width: 100%; }
.ssn-item.is-active .ssn-num { color: var(--ssn-gold); }
.ssn-item.is-active .ssn-arrow {
    background: var(--ssn-gold);
    border-color: var(--ssn-gold);
    color: #1a1a1a;
    transform: rotate(-45deg);
}

.ssn-num {
    font-family: "Now", sans-serif;
    font-weight: 300;
    font-size: 2.4rem;
    color: var(--ssn-mute);
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color .25s ease;
    font-variant-numeric: tabular-nums;
}
.ssn-item:hover .ssn-num { color: var(--ssn-gold); }

.ssn-item-body { min-width: 0; }
.ssn-item-title {
    font-family: "Now", sans-serif;
    font-weight: 800 !important;
    font-size: 1.18rem;
    color: #000000 !important;
    margin: 0 0 4px;
    line-height: 1.25;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    transform-origin: left;
}
[dir="rtl"] .ssn-item-title { transform-origin: right; }
.ssn-item:hover .ssn-item-title { transform: translateX(6px); }
[dir="rtl"] .ssn-item:hover .ssn-item-title { transform: translateX(-6px); }

.ssn-item-desc {
    color: var(--ssn-mute);
    font-size: .88rem;
    line-height: 1.55;
    margin: 0;
    max-width: 44ch;
}

.ssn-arrow {
    width: 44px; height: 44px;
    border: 1px solid var(--ssn-line);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ssn-mute);
    font-size: 1rem;
    transition: all .35s cubic-bezier(.2,.7,.2,1);
    flex: none;
}
.ssn-item:hover .ssn-arrow {
    background: var(--ssn-gold);
    border-color: var(--ssn-gold);
    color: #1a1a1a;
    transform: rotate(-45deg);
}
[dir="rtl"] .ssn-arrow { transform: scaleX(-1); }
[dir="rtl"] .ssn-item:hover .ssn-arrow { transform: scaleX(-1) rotate(-45deg); }

/* ── FOOTNOTE ──────────────────────────────────── */
.ssn-foot {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--ssn-line);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px;
    color: var(--ssn-mute);
    font-size: .82rem;
    letter-spacing: .04em;
}
.ssn-foot .ssn-stamp {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--ssn-mute);
}
.ssn-foot .ssn-stamp i { color: var(--ssn-gold); font-size: 1.05rem; }
.ssn-foot .ssn-locale {
    font-family: 'Courier New', monospace;
    color: var(--ssn-mute);
    font-size: .78rem;
    letter-spacing: .12em;
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 992px) {
    .ssn-section { padding: 80px 0 90px; }
    .ssn-header {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .ssn-meta { text-align: left; }
    [dir="rtl"] .ssn-meta { text-align: right; }
    .ssn-body {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
@media (max-width: 600px) {
    .ssn-inner { padding: 0 22px; }
    .ssn-feature { padding: 24px 22px 22px; }
    .ssn-feature-title { font-size: 1.35rem; margin-bottom: 10px; }
    .ssn-feature-desc { font-size: .9rem; margin-bottom: 18px; }
    .ssn-feature-tag { margin-bottom: 14px; }
    .ssn-preview { padding: 14px 16px; margin-bottom: 18px; }
    .ssn-feature-cta { padding: 12px 18px 12px 22px; font-size: .9rem; }
    .ssn-item { grid-template-columns: 56px 1fr auto; gap: 14px; padding: 22px 2px; }
    .ssn-num { font-size: 1.8rem; }
    .ssn-item-title { font-size: 1.05rem; }
    .ssn-arrow { width: 36px; height: 36px; }

    /* Stack the 3 attestation steps on mobile */
    .ssn-att-flow {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .ssn-att-step {
        padding: 10px 12px;
        font-size: .82rem;
    }
}

/* On mobile (<=992px) the variants are stacked one under the other  */
@media (max-width: 992px) {
    .ssn-feature-stack {
        min-height: 0;
        position: static;
    }
    .ssn-variant {
        position: relative;
        inset: auto;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        filter: none;
        margin-bottom: 18px;
    }
    /* On mobile show only the active one (autoplay handles it) */
    .ssn-body[data-state="track"] .ssn-variant--cert,
    .ssn-body[data-state="track"] .ssn-variant--att,
    .ssn-body[data-state="cert"]  .ssn-variant--track,
    .ssn-body[data-state="cert"]  .ssn-variant--att,
    .ssn-body[data-state="att"]   .ssn-variant--track,
    .ssn-body[data-state="att"]   .ssn-variant--cert {
        display: none;
    }
}



/* ===== inlined: /assets/css/rtl.css ===== */
/* Full site flips RTL automatically */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Reverse flex layouts for RTL */
html[dir="rtl"] .d-flex {
    flex-direction: row-reverse !important;
}

/* Header fixes */
html[dir="rtl"] .site-header .nav {
    flex-direction: row-reverse;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
    right: 0;
    left: auto;
}

/* Subdropdown: open to the left in RTL */
html[dir="rtl"] .dropdown-submenu > .dropdown-menu {
    left: auto !important;
    right: 100% !important;
    margin-right: 23px;
    margin-left: 0;
    transform: translateX(-10px);
}

html[dir="rtl"] .dropdown-submenu:hover > .dropdown-menu {
    transform: translateX(0);
}

/* Flip submenu arrow for RTL */
html[dir="rtl"] .dropdown-submenu > a::after {
    transform: rotate(135deg);
    margin-left: 0;
    margin-right: 8px;
}

/* RTL: mirror the chevron so it points correctly */
[dir="rtl"] .nav-dropdown_icon {
    border-right: none;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

[dir="rtl"] .menu-item.open > .menu-label .nav-dropdown_icon {
    transform: rotate(-225deg);
}

/* Mobile drawer direction */
html[dir="rtl"] #mobile-drawer {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

html[dir="rtl"] #mobile-drawer.open {
    transform: translateX(0);
}

/* Mobile submenu alignment */
html[dir="rtl"] .submenu-content {
    padding-right: 15px;
    padding-left: 0;
}

/* Buttons */
html[dir="rtl"] .btn {
    text-align: center !important;
}

/* Fix dropdown arrow direction */
html[dir="rtl"] .dropdown-toggle::after {
    margin-left: 0;
    margin-right: .255em;
}
html[dir="rtl"] body,
html[dir="rtl"] .menu-label,
html[dir="rtl"] .dropdown-item {
    font-family: "Tajawal", "Cairo", sans-serif !important;
}


/* ===== inlined: /assets/css/animations/reveal.css ===== */
/* ===============================
   BASIC REVEAL ANIMATION
================================*/
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition:
    opacity .35s ease-out,
    transform .45s cubic-bezier(.2,.7,.3,1),
    filter .35s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Delay system (snappy) */
.delay-1 { transition-delay: .06s; }
.delay-2 { transition-delay: .12s; }
.delay-3 { transition-delay: .18s; }
.delay-4 { transition-delay: .24s; }

/* ===============================
   FADE + BLUR TITLE ANIMATION
================================*/
.fade-blur-title {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition:
    opacity .4s ease-out,
    transform .5s cubic-bezier(.25,.8,.25,1),
    filter .35s ease-out;
}

.visible.fade-blur-title {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}


.drawer {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-120%);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  transition: transform 0.28s ease;
  z-index: 15;
}
.text-primary{
  font-weight: 600 !important;
      color: var(--light--blue);
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 24px;
    line-height: 1;
    font-family: Now, sans-serif !important; 
}
.drawer.open {
  transform: translateY(0);
}

.drawer-inner {
  padding: 14px 18px 20px;
}

.drawer .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 6px;
}

.drawer .row + .row {
  border-top: 1px solid var(--color-border);
}

.drawer .row .label {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.drawer .row .tiny-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.8;
  transition: transform 0.25s ease;
}

/* ===== Language Selector ===== */
.drawer .langs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.drawer .chip {
  background: var(--color-dark);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background 0.25s ease;
}

.drawer .chip:hover {
  background: var(--color-primary);
}

.drawer .cta {
  margin-top: 16px;
}

/* ===== Notes / Small elements ===== */
.drawer .note {
  height: 14px;
  color: var(--color-text);
  font-size: var(--small-size);
}
.contact-section-subtitle {
  font-size: clamp(1.55rem, 3.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-surface) !important;
}

.modal-backdrop.show {
  opacity: .35 !important;
}

/* Dialog sizing */
.gls-site-modal__dialog {
  max-width: 520px;
  padding: 0 12px;
}

/* Modal content: glass / premium card */
.gls-site-modal__content {
  border: 0 !important;
  border-radius: 22px !important;
  overflow: hidden;
  background: rgba(20, 20, 20, .75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Header */
.gls-site-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.gls-site-modal__kicker {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.gls-site-modal__title {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

/* Close button: minimal */
.gls-site-modal__close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 26px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.gls-site-modal__close:hover {
  transform: scale(1.04);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* Body */
.gls-site-modal__body {
  padding: 16px 18px 18px;
}

/* Grid: pro spacing */
.gls-site-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Pills: premium buttons */
.gls-site-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;

  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);

  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}

/* Arrow indicator (subtle) */
.gls-site-pill::after {
  content: "→";
  opacity: .75;
  font-weight: 900;
}

/* Hover / focus */
.gls-site-pill:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
}

.gls-site-pill:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(120, 255, 170, .18), 0 10px 24px rgba(0,0,0,.18);
}

/* Mobile */
@media (max-width: 420px) {
  .gls-site-modal__content {
    border-radius: 18px !important;
  }
  .gls-site-pill {
    padding: 13px 14px;
    border-radius: 14px;
    font-size: 15px;
  }
}


/* =========================================================
   BUTTON STYLES (PRIMARY OVERRIDE)
   ========================================================= */
/* frontoffice.btn-primary {
  background: var(--color-dark);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
}

frontofficefrontoffice-primary:hover {
  color: white;
  border: 1px solid var(--color-dark);
  text-decoration: none;
} */


/* =========================================================
   GLS CENTRES MAP — 6 cities (Leaflet)
   ========================================================= */
.gls-map-wrap {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    direction: ltr;
    text-align: left;
    border: 1px solid var(--color-border, #e6e2c5);
    background: var(--color-surface, #fffee8);
    box-shadow: 0 18px 44px rgba(0,0,0,.08);
    aspect-ratio: 4 / 3;
    min-height: 420px;
}

/* Leaflet positions tiles/markers via absolute offsets; under dir="rtl"
   those offsets are visually mirrored and the map renders shifted, with
   half of Morocco clipped (Fes/Oujda push off-screen, Agadir/Marrakesh
   anchor left). Force the Leaflet container and all internal panes to
   LTR so tile math operates in its native coordinate space. */
.gls-map-wrap #glsCentresMap,
.gls-map-wrap .leaflet-container,
.gls-map-wrap .leaflet-pane,
.gls-map-wrap .leaflet-marker-pane,
.gls-map-wrap .leaflet-popup-pane,
.gls-map-wrap .leaflet-tile-pane {
    direction: ltr;
}
.gls-centres-map {
    width: 100%;
    height: 100%;
}
/* Leaflet pin */
.gls-pin-icon { background: transparent !important; border: 0 !important; }
.gls-pin-wrap {
    position: relative;
    width: 24px; height: 28px;
    transform: translateX(-50%);
}
.gls-pin {
    width: 24px; height: 24px;
    border-radius: 50% 50% 50% 0;
    background: var(--pin-color, #2563eb);
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.gls-pin::after {
    content: '';
    position: absolute;
    top: 7px; left: 7px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    transform: rotate(45deg);
}
.gls-pin-label {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #14110d;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: .04em;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}
.leaflet-marker-icon:hover .gls-pin-label,
.leaflet-marker-icon.active .gls-pin-label {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}
/* Legend list */
.gls-map-legend {
    position: absolute;
    left: 16px;
    bottom: 16px;
    margin: 0; padding: 10px 14px;
    list-style: none;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #e6e2c5;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    z-index: 500;
    max-width: calc(100% - 32px);
}
.gls-map-legend li {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; font-weight: 600;
    color: #14110d;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease;
}
.gls-map-legend li:hover { background: rgba(37,99,235,.06); }
.gls-map-legend li .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: none;
}
/* Leaflet popup tweak */
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.15) !important;
    padding: 4px 6px;
}
.leaflet-popup-content { margin: 10px 14px !important; font-size: .9rem; }
.leaflet-popup-content a { text-decoration: none; }
.leaflet-popup-content a:hover { text-decoration: underline; }
.leaflet-control-zoom a {
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

@media (max-width: 768px) {
    .gls-map-wrap { aspect-ratio: 1 / 1; min-height: 360px; }
    .gls-map-legend { grid-template-columns: 1fr; left: 10px; bottom: 10px; padding: 8px 12px; }
    .gls-map-legend li { font-size: .78rem; }
}