/*==========================================================
    ISEA MAHAGAI
    Style Principal
    Module 1
    Variables CSS
    Reset
    Body
    Typographie
    Couleurs
    Boutons
    Classes utilitaires
==========================================================*/

/*==========================================================
    IMPORT GOOGLE FONT
==========================================================*/

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

/*==========================================================
    VARIABLES CSS
==========================================================*/

:root{

    /* Palette institutionnelle */

    --primary:#003366;
    --primary-dark:#00264d;
    --secondary:#0d6efd;
    --accent:#d4af37;

    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --info:#0dcaf0;

    --white:#ffffff;
    --light:#f8f9fa;
    --gray:#6c757d;
    --dark:#212529;

    --background:#f4f7fb;

    /* Typographie */

    --font-family:'Poppins',sans-serif;

    --fs-12:12px;
    --fs-14:14px;
    --fs-16:16px;
    --fs-18:18px;
    --fs-20:20px;
    --fs-24:24px;
    --fs-30:30px;
    --fs-36:36px;
    --fs-42:42px;
    --fs-52:52px;

    /* Radius */

    --radius-sm:6px;
    --radius:10px;
    --radius-lg:18px;
    --radius-xl:30px;

    /* Ombres */

    --shadow-sm:
        0 2px 10px rgba(0,0,0,.05);

    --shadow:

        0 8px 25px rgba(0,0,0,.08);

    --shadow-lg:

        0 20px 45px rgba(0,0,0,.12);

    /* Transitions */

    --transition:.35s ease;

    /* Container */

    --container:1320px;

}

/*==========================================================
    RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-family);

    font-size:var(--fs-16);

    color:var(--dark);

    background:var(--background);

    line-height:1.8;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

/*==========================================================
    LIENS
==========================================================*/

a{

    text-decoration:none;

    transition:var(--transition);

    color:inherit;

}

a:hover{

    color:var(--primary);

}

/*==========================================================
    IMAGES
==========================================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}

/*==========================================================
    LISTES
==========================================================*/

ul{

    list-style:none;

    padding:0;

    margin:0;

}

/*==========================================================
    TITRES
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-weight:700;

    color:var(--primary);

    line-height:1.3;

}

h1{

    font-size:var(--fs-52);

}

h2{

    font-size:var(--fs-42);

}

h3{

    font-size:var(--fs-30);

}

h4{

    font-size:var(--fs-24);

}

h5{

    font-size:var(--fs-20);

}

h6{

    font-size:var(--fs-18);

}

p{

    margin-bottom:1rem;

    color:#555;

}

/*==========================================================
    SECTIONS
==========================================================*/

section{

    padding:90px 0;

    position:relative;

}

.section-title{

    margin-bottom:60px;

    text-align:center;

}

.section-title span{

    color:var(--accent);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

}

.section-title h2{

    margin-top:10px;

}

.section-title p{

    max-width:720px;

    margin:20px auto 0;

}

/*==========================================================
    CONTAINER
==========================================================*/

.container{

    max-width:var(--container);

}

/*==========================================================
    COULEURS UTILITAIRES
==========================================================*/

.bg-primary-custom{

    background:var(--primary);

}

.bg-light-custom{

    background:var(--light);

}

.bg-gradient-primary{

    background:linear-gradient(
        135deg,
        #003366,
        #00509e
    );

}

.text-primary-custom{

    color:var(--primary);

}

.text-accent{

    color:var(--accent);

}

.text-gray{

    color:var(--gray);

}

/*==========================================================
    BOUTONS
==========================================================*/

.btn{

    border-radius:var(--radius);

    font-weight:600;

    padding:12px 30px;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-warning{

    background:var(--accent);

    color:var(--white);

    border:none;

}

.btn-warning:hover{

    background:#c49b1d;

    color:white;

}

.btn-outline-primary{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:white;

}

.btn-lg{

    padding:15px 40px;

}

/*==========================================================
    CARDS
==========================================================*/

.card{

    border:none;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

/*==========================================================
    UTILITAIRES
==========================================================*/

.rounded-xl{

    border-radius:var(--radius-xl);

}

.shadow-custom{

    box-shadow:var(--shadow);

}

.shadow-lg-custom{

    box-shadow:var(--shadow-lg);

}

.radius{

    border-radius:var(--radius);

}

.radius-lg{

    border-radius:var(--radius-lg);

}

.radius-xl{

    border-radius:var(--radius-xl);

}

.py-100{

    padding-top:100px;

    padding-bottom:100px;

}

.mt-80{

    margin-top:80px;

}

.mb-80{

    margin-bottom:80px;

}

.bg-white{

    background:white;

}

.bg-light-custom{

    background:var(--background);

}

.text-justify{

    text-align:justify;

}

/*==========================================================
    ANIMATIONS
==========================================================*/

.transition{

    transition:all .4s ease;

}

.scale:hover{

    transform:scale(1.05);

}

.rotate:hover{

    transform:rotate(2deg);

}

.lift:hover{

    transform:translateY(-10px);

}

/*==========================================================
    SELECTION TEXTE
==========================================================*/

::selection{

    background:var(--primary);

    color:white;

}

/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

/*==========================================================
    FIN DU MODULE 1
==========================================================*/

/*==========================================================
    MODULE 2A
    TOP BAR
    NAVBAR
    LOGO
    MENU PRINCIPAL
    LIENS ACTIFS
    STICKY NAVBAR
==========================================================*/

/*==========================================================
    TOP BAR
==========================================================*/

.top-bar{

    background:var(--primary);

    color:#fff;

    font-size:14px;

    padding:8px 0;

    position:relative;

    z-index:1050;

}

.top-contact{

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

.top-contact a,
.top-contact span{

    color:#fff;

    font-size:14px;

}

.top-contact a:hover{

    color:var(--accent);

}

.top-contact i{

    color:var(--accent);

    margin-right:6px;

}

.top-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:15px;

}

.social-icons{

    display:flex;

    gap:8px;

}

.social-icons a{

    width:34px;

    height:34px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    transition:var(--transition);

}

.social-icons a:hover{

    background:var(--accent);

    transform:translateY(-3px);

}

.btn-top{

    background:var(--accent);

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.btn-top:hover{

    background:#fff;

    color:var(--primary);

}

/*==========================================================
    NAVBAR
==========================================================*/

.navbar{

    background:#fff;

    transition:all .35s ease;

    min-height:95px;

    z-index:1040;

}

.navbar.shadow-sm{

    box-shadow:0 8px 25px rgba(0,0,0,.08)!important;

}

.navbar.sticky{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    animation:slideDown .4s ease;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

@keyframes slideDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}

/*==========================================================
    LOGO
==========================================================*/

.navbar-brand{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

}

.navbar-brand img{

    width:70px;

    height:70px;

    object-fit:contain;

    transition:var(--transition);

}

.navbar-brand:hover img{

    transform:rotate(-5deg) scale(1.05);

}

.brand-text{

    display:flex;

    flex-direction:column;

}

.brand-text h3{

    font-size:24px;

    margin:0;

    color:var(--primary);

    font-weight:700;

    line-height:1.2;

}

.brand-text small{

    color:var(--gray);

    font-size:13px;

}

/*==========================================================
    MENU PRINCIPAL
==========================================================*/

.navbar-nav{

    align-items:center;

}

.nav-item{

    margin-left:10px;

}

.nav-link{

    position:relative;

    font-size:15px;

    font-weight:600;

    color:var(--dark);

    padding:15px 10px!important;

    transition:var(--transition);

}

.nav-link:hover{

    color:var(--primary);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:5px;

    width:0;

    height:3px;

    background:var(--accent);

    border-radius:20px;

    transition:.35s;

    transform:translateX(-50%);

}

.nav-link:hover::after{

    width:60%;

}

/*==========================================================
    LIEN ACTIF
==========================================================*/

.nav-link.active{

    color:var(--primary)!important;

    font-weight:700;

}

.nav-link.active::after{

    width:60%;

}

/*==========================================================
    DROPDOWN DE BASE
==========================================================*/

.dropdown-menu{

    border:none;

    border-radius:15px;

    padding:15px;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

    margin-top:15px;

}

.dropdown-item{

    padding:12px 18px;

    border-radius:10px;

    font-size:15px;

    transition:var(--transition);

}

.dropdown-item:hover{

    background:var(--primary);

    color:#fff;

    transform:translateX(5px);

}

/*==========================================================
    TOGGLER
==========================================================*/

.navbar-toggler{

    border:none;

    box-shadow:none!important;

}

.navbar-toggler:focus{

    box-shadow:none!important;

}

.navbar-toggler-icon{

    filter:contrast(120%);

}

/*==========================================================
    NAVBAR BOUTONS
==========================================================*/

.navbar .btn{

    border-radius:30px;

    padding:10px 22px;

    font-size:14px;

    font-weight:600;

}

/*==========================================================
    ESPACEMENT
==========================================================*/

.navbar .input-group{

    max-width:250px;

}

.navbar form{

    margin-left:20px;

}

/*==========================================================
    ACCESSIBILITÉ
==========================================================*/

.nav-link:focus,

.dropdown-item:focus,

.btn-top:focus{

    outline:2px solid var(--accent);

    outline-offset:4px;

}

/*==========================================================
    EFFETS
==========================================================*/

.navbar .btn-primary:hover,

.navbar .btn-warning:hover{

    transform:translateY(-2px);

}

.social-icons a,

.nav-link,

.dropdown-item,

.navbar-brand img{

    transition:all .35s ease;

}

/*==========================================================
    FIN MODULE 2A
==========================================================*/

/*==========================================================
    MODULE 2B.1
    MEGA MENU
    DROPDOWN AVANCÉ
    BARRE DE RECHERCHE
    BOUTONS NAVBAR
==========================================================*/

/*==========================================================
    DROPDOWN AVANCÉ
==========================================================*/

.dropdown{

    position:relative;

}

.dropdown-menu{

    min-width:260px;

    border:none;

    border-radius:18px;

    background:#ffffff;

    padding:20px;

    margin-top:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    display:block;

}

.dropdown:hover>.dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu::before{

    content:"";

    position:absolute;

    top:-8px;

    left:40px;

    width:16px;

    height:16px;

    background:#fff;

    transform:rotate(45deg);

}

.dropdown-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    border-radius:10px;

    color:#444;

    font-weight:500;

    transition:all .3s ease;

}

.dropdown-item i{

    width:22px;

    color:var(--primary);

}

.dropdown-item:hover{

    background:var(--primary);

    color:#fff;

    padding-left:24px;

}

.dropdown-item:hover i{

    color:#fff;

}

/*==========================================================
    MEGA MENU
==========================================================*/

.mega-menu{

    width:900px;

    left:50%;

    transform:translateX(-50%) translateY(20px);

    border-radius:22px;

    padding:35px;

    background:#fff;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.nav-item:hover .mega-menu{

    transform:translateX(-50%) translateY(0);

}

.mega-menu h6{

    font-size:17px;

    font-weight:700;

    margin-bottom:18px;

    color:var(--primary);

    border-bottom:2px solid var(--accent);

    padding-bottom:10px;

}

.mega-menu .dropdown-item{

    padding:10px 0;

    background:none;

    border-radius:0;

}

.mega-menu .dropdown-item:hover{

    color:var(--primary);

    background:none;

    padding-left:12px;

}

.mega-menu .dropdown-item i{

    margin-right:10px;

    color:var(--accent);

}

.mega-menu .dropdown-item:hover i{

    color:var(--primary);

}

/*==========================================================
    BARRE DE RECHERCHE
==========================================================*/

.navbar form{

    margin-left:30px;

}

.navbar .input-group{

    width:250px;

}

.navbar .form-control{

    border-radius:50px 0 0 50px;

    border:2px solid #e7e7e7;

    padding:10px 18px;

    font-size:14px;

    transition:all .3s ease;

}

.navbar .form-control:focus{

    border-color:var(--primary);

    box-shadow:none;

}

.navbar .input-group .btn{

    border-radius:0 50px 50px 0;

    padding:10px 18px;

    background:var(--primary);

    color:#fff;

    border:none;

}

.navbar .input-group .btn:hover{

    background:var(--primary-dark);

}

/*==========================================================
    BOUTONS DE LA NAVBAR
==========================================================*/

.navbar .btn-primary{

    border-radius:40px;

    padding:11px 26px;

    font-weight:600;

    margin-left:15px;

    box-shadow:0 8px 20px rgba(0,51,102,.18);

}

.navbar .btn-warning{

    border-radius:40px;

    padding:11px 24px;

    font-weight:600;

    margin-left:12px;

    background:var(--accent);

    color:#fff;

    box-shadow:0 8px 20px rgba(212,175,55,.25);

}

.navbar .btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,51,102,.30);

}

.navbar .btn-warning:hover{

    transform:translateY(-3px);

    background:#c79d22;

    color:#fff;

}

/*==========================================================
    ICÔNES DES BOUTONS
==========================================================*/

.navbar .btn i{

    margin-right:8px;

}

/*==========================================================
    BADGE "NOUVEAU"
==========================================================*/

.nav-badge{

    display:inline-block;

    background:var(--danger);

    color:#fff;

    font-size:10px;

    padding:3px 8px;

    border-radius:30px;

    margin-left:6px;

    font-weight:700;

    animation:pulse 1.8s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

/*==========================================================
    COMPTEUR DANS LE MENU
==========================================================*/

.menu-counter{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    font-size:11px;

    font-weight:700;

    margin-left:6px;

}

/*==========================================================
    OMBRES
==========================================================*/

.mega-menu,
.dropdown-menu{

    transition:all .35s ease;

}

.mega-menu:hover,
.dropdown-menu:hover{

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

/*==========================================================
    FIN MODULE 2B.1
==========================================================*/

/*==========================================================
    MODULE 2B.2
    BREADCRUMB
    ANIMATIONS
    HOVER
    FOCUS
    ACCESSIBILITÉ
    OPTIMISATIONS
==========================================================*/

/*==========================================================
    BREADCRUMB
==========================================================*/

.breadcrumb-section{

    background:linear-gradient(
        135deg,
        var(--primary),
        #00509e
    );

    padding:45px 0;

    color:#fff;

    position:relative;

    overflow:hidden;

}

.breadcrumb-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.05);

}

.breadcrumb{

    margin:0;

    background:transparent;

    position:relative;

    z-index:2;

}

.breadcrumb-item{

    font-size:15px;

    font-weight:500;

}

.breadcrumb-item a{

    color:#ffffff;

    opacity:.85;

    transition:var(--transition);

}

.breadcrumb-item a:hover{

    opacity:1;

    color:var(--accent);

}

.breadcrumb-item.active{

    color:var(--accent);

    font-weight:700;

}

.breadcrumb-item+.breadcrumb-item::before{

    color:#ffffff;

}

/*==========================================================
    ANIMATIONS NAVIGATION
==========================================================*/

.navbar{

    transition:

        background .35s ease,

        box-shadow .35s ease,

        padding .35s ease;

}

.navbar.sticky{

    padding:6px 0;

}

.navbar-brand img{

    transition:

        transform .35s ease,

        filter .35s ease;

}

.navbar-brand:hover img{

    filter:brightness(105%);

}

.nav-item{

    position:relative;

}

/*==========================================================
    HOVER
==========================================================*/

.nav-link{

    overflow:hidden;

}

.nav-link:hover{

    color:var(--primary);

}

.nav-link::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--accent);

    transition:width .35s ease;

}

.nav-link:hover::before,

.nav-link.active::before{

    width:100%;

}

.dropdown-item:hover{

    letter-spacing:.3px;

}

.social-icons a:hover{

    transform:translateY(-4px) rotate(8deg);

}

/*==========================================================
    FOCUS
==========================================================*/

.nav-link:focus-visible,

.dropdown-item:focus-visible,

.btn:focus-visible,

.form-control:focus-visible,

.navbar-toggler:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:3px;

    border-radius:8px;

}

a:focus-visible{

    text-decoration:none;

}

/*==========================================================
    ACCESSIBILITÉ WCAG
==========================================================*/

.visually-hidden-focusable{

    position:absolute;

    left:-9999px;

    top:auto;

    width:1px;

    height:1px;

    overflow:hidden;

}

.visually-hidden-focusable:focus{

    left:20px;

    top:20px;

    width:auto;

    height:auto;

    padding:12px 18px;

    background:#fff;

    color:var(--primary);

    border-radius:8px;

    z-index:99999;

    box-shadow:var(--shadow-lg);

}

button{

    cursor:pointer;

}

button:disabled{

    cursor:not-allowed;

    opacity:.6;

}

/*==========================================================
    RECHERCHE
==========================================================*/

.navbar .form-control::placeholder{

    color:#999;

    font-size:14px;

}

.navbar .form-control{

    transition:

        border-color .3s ease,

        box-shadow .3s ease;

}

.navbar .form-control:focus{

    box-shadow:0 0 0 .2rem rgba(0,51,102,.15);

}

/*==========================================================
    RESPONSIVE PREPARATION
==========================================================*/

@media (max-width:991px){

    .navbar-collapse{

        background:#fff;

        margin-top:20px;

        padding:25px;

        border-radius:18px;

        box-shadow:0 20px 40px rgba(0,0,0,.08);

    }

    .navbar-nav{

        align-items:flex-start;

    }

    .nav-item{

        width:100%;

        margin:0;

    }

    .nav-link{

        width:100%;

        padding:14px 0!important;

    }

}

/*==========================================================
    OPTIMISATIONS
==========================================================*/

.navbar,

.dropdown-menu,

.mega-menu,

.nav-link,

.dropdown-item,

.btn{

    will-change:transform;

}

.navbar *{

    -webkit-tap-highlight-color:transparent;

}

.dropdown-menu{

    backface-visibility:hidden;

}

.navbar-brand img{

    image-rendering:auto;

}

/*==========================================================
    FIN MODULE 2
==========================================================*/

/*==========================================================
    MODULE 3A.1
    HERO
    HERO BACKGROUND
    OVERLAY
==========================================================*/

/*==========================================================
    HERO PRINCIPAL
==========================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#003366;

}

/*==========================================================
    IMAGE D'ARRIÈRE-PLAN
==========================================================*/

.hero-bg{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:url("../images/hero/hero.jpg")
               center center / cover
               no-repeat;

    z-index:1;

    transform:scale(1.05);

    animation:heroZoom 20s linear infinite alternate;

}

/*==========================================================
    VIDÉO D'ARRIÈRE-PLAN (OPTIONNEL)
==========================================================*/

.hero-video{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}

/*==========================================================
    OVERLAY PRINCIPAL
==========================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        120deg,

        rgba(0,33,71,.88),

        rgba(0,51,102,.70),

        rgba(0,80,158,.45)

    );

}

/*==========================================================
    OVERLAY SOMBRE
==========================================================*/

.hero-overlay-dark{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.30);

    z-index:2;

}

/*==========================================================
    OVERLAY DÉGRADÉ
==========================================================*/

.hero-overlay-gradient{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    radial-gradient(

        circle at top right,

        rgba(212,175,55,.18),

        transparent 35%

    ),

    linear-gradient(

        to bottom,

        rgba(0,51,102,.10),

        rgba(0,51,102,.82)

    );

}

/*==========================================================
    MOTIFS DÉCORATIFS
==========================================================*/

.hero::before{

    content:"";

    position:absolute;

    top:-150px;

    right:-150px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        rgba(255,255,255,.05);

    filter:blur(5px);

    z-index:2;

}

.hero::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

        rgba(212,175,55,.08);

    filter:blur(10px);

    z-index:2;

}

/*==========================================================
    LIGNES DÉCORATIVES
==========================================================*/

.hero-lines{

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background-image:

        linear-gradient(

            rgba(255,255,255,.05) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.05) 1px,

            transparent 1px

        );

    background-size:70px 70px;

    opacity:.25;

}

/*==========================================================
    PARTICULES
==========================================================*/

.hero-particles{

    position:absolute;

    inset:0;

    z-index:2;

    overflow:hidden;

}

.hero-particles span{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.30);

    animation:floatParticles 18s linear infinite;

}

/*==========================================================
    EFFET LUMIÈRE
==========================================================*/

.hero-light{

    position:absolute;

    width:600px;

    height:600px;

    top:-220px;

    right:-220px;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.20),

            transparent 70%

        );

    z-index:2;

    pointer-events:none;

}

/*==========================================================
    OMBRE INFÉRIEURE
==========================================================*/

.hero-shadow{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:180px;

    background:

    linear-gradient(

        transparent,

        rgba(0,0,0,.40)

    );

    z-index:2;

}

/*==========================================================
    ANIMATION ZOOM
==========================================================*/

@keyframes heroZoom{

    0%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1.15);

    }

}

/*==========================================================
    ANIMATION PARTICULES
==========================================================*/

@keyframes floatParticles{

    from{

        transform:

            translateY(100vh)

            scale(.5);

        opacity:0;

    }

    20%{

        opacity:.8;

    }

    80%{

        opacity:.6;

    }

    to{

        transform:

            translateY(-100px)

            scale(1.3);

        opacity:0;

    }

}

/*==========================================================
    OPTIMISATIONS
==========================================================*/

.hero,
.hero-bg,
.hero-overlay{

    will-change:transform;

}

.hero img{

    user-select:none;

}

.hero *{

    backface-visibility:hidden;

}

/*==========================================================
    FIN MODULE 3A.1
==========================================================*/

/*==========================================================
    MODULE 3A.2.1
    HERO CONTENT
    TITRES
    TEXTE
    BADGE
    ALIGNEMENT
==========================================================*/

/*==========================================================
    CONTENU HERO
==========================================================*/

.hero-content{

    position:relative;

    z-index:10;

    max-width:760px;

    color:#ffffff;

    text-align:left;

    animation:heroFadeUp 1.2s ease;

}

.hero-content.center{

    text-align:center;

    margin:auto;

}

.hero-content.right{

    text-align:right;

    margin-left:auto;

}

/*==========================================================
    BADGE INSTITUTIONNEL
==========================================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(8px);

    padding:10px 22px;

    border-radius:50px;

    border:1px solid rgba(255,255,255,.20);

    margin-bottom:25px;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}

.hero-badge i{

    color:var(--accent);

    font-size:16px;

}

/*==========================================================
    TITRE PRINCIPAL
==========================================================*/

.hero-title{

    font-size:64px;

    font-weight:800;

    line-height:1.15;

    color:#ffffff;

    margin-bottom:20px;

    text-shadow:0 5px 25px rgba(0,0,0,.30);

}

.hero-title span{

    color:var(--accent);

}

/*==========================================================
    SOUS-TITRE
==========================================================*/

.hero-subtitle{

    font-size:26px;

    font-weight:600;

    color:#f5f5f5;

    margin-bottom:25px;

    line-height:1.5;

}

/*==========================================================
    DESCRIPTION
==========================================================*/

.hero-text{

    font-size:18px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    margin-bottom:40px;

    max-width:700px;

}

.hero-content.center .hero-text{

    margin-left:auto;

    margin-right:auto;

}

.hero-content.right .hero-text{

    margin-left:auto;

}

/*==========================================================
    MISE EN VALEUR
==========================================================*/

.hero-highlight{

    color:var(--accent);

    font-weight:700;

}

.hero-lead{

    font-size:20px;

    font-weight:500;

}

/*==========================================================
    LISTE DES ATOUTS
==========================================================*/

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:35px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:10px;

    color:#ffffff;

    font-weight:500;

    font-size:15px;

}

.hero-feature i{

    color:var(--accent);

    font-size:18px;

}

/*==========================================================
    ALIGNEMENT VERTICAL
==========================================================*/

.hero .container{

    position:relative;

    z-index:5;

}

.hero-row{

    min-height:100vh;

    display:flex;

    align-items:center;

}

/*==========================================================
    ANIMATION DU TEXTE
==========================================================*/

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-badge{

    animation:heroFadeUp .8s ease;

}

.hero-title{

    animation:heroFadeUp 1.1s ease;

}

.hero-subtitle{

    animation:heroFadeUp 1.4s ease;

}

.hero-text{

    animation:heroFadeUp 1.7s ease;

}

.hero-features{

    animation:heroFadeUp 2s ease;

}

/*==========================================================
    EFFET D'APPARITION
==========================================================*/

.hero-content>*{

    opacity:0;

    animation-fill-mode:forwards;

}

.hero-content .hero-badge{

    animation-delay:.2s;

}

.hero-content .hero-title{

    animation-delay:.5s;

}

.hero-content .hero-subtitle{

    animation-delay:.8s;

}

.hero-content .hero-text{

    animation-delay:1.1s;

}

.hero-content .hero-features{

    animation-delay:1.4s;

}

/*==========================================================
    RESPONSIVE (BASE)
==========================================================*/

@media(max-width:992px){

    .hero-content{

        text-align:center;

        margin:auto;

    }

    .hero-title{

        font-size:48px;

    }

    .hero-subtitle{

        font-size:22px;

    }

    .hero-text{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-features{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero-title{

        font-size:38px;

    }

    .hero-subtitle{

        font-size:20px;

    }

    .hero-text{

        font-size:16px;

    }

    .hero-badge{

        font-size:12px;

        padding:8px 18px;

    }

}
/*==========================================================
    MODULE 3A.2.2.1
    HERO BUTTONS
    CTA PRINCIPAL
    CTA SECONDAIRE
    BOUTONS
==========================================================*/

/*==========================================================
    GROUPE DE BOUTONS
==========================================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:45px;

}

.hero-content.center .hero-buttons{

    justify-content:center;

}

.hero-content.right .hero-buttons{

    justify-content:flex-end;

}

/*==========================================================
    STYLE GÉNÉRAL
==========================================================*/

.hero-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 38px;

    border-radius:60px;

    font-size:16px;

    font-weight:700;

    overflow:hidden;

    cursor:pointer;

    transition:all .35s ease;

    text-decoration:none;

    white-space:nowrap;

    z-index:1;

}

/*==========================================================
    BOUTON PRINCIPAL
==========================================================*/

.hero-btn-primary{

    background:linear-gradient(
        135deg,
        var(--accent),
        #f3c64d
    );

    color:#ffffff;

    border:none;

    box-shadow:

        0 12px 30px rgba(212,175,55,.35);

}

.hero-btn-primary:hover{

    color:#ffffff;

}

/*==========================================================
    EFFET LUMIÈRE
==========================================================*/

.hero-btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transition:.7s;

}

.hero-btn-primary:hover::before{

    left:120%;

}

/*==========================================================
    BOUTON SECONDAIRE
==========================================================*/

.hero-btn-secondary{

    background:rgba(255,255,255,.10);

    color:#ffffff;

    border:2px solid rgba(255,255,255,.35);

    backdrop-filter:blur(10px);

}

.hero-btn-secondary:hover{

    background:#ffffff;

    color:var(--primary);

    border-color:#ffffff;

}

/*==========================================================
    ICÔNES
==========================================================*/

.hero-btn i{

    font-size:17px;

    transition:.35s;

}

.hero-btn:hover i{

    transform:translateX(5px);

}

/*==========================================================
    BOUTON PLAY
==========================================================*/

.hero-play{

    display:inline-flex;

    align-items:center;

    gap:18px;

    color:#ffffff;

    font-weight:600;

    margin-left:12px;

}

.hero-play-btn{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    box-shadow:

        0 15px 35px rgba(0,0,0,.20);

    transition:all .35s ease;

}

.hero-play-btn:hover{

    background:var(--accent);

    color:#ffffff;

}

/*==========================================================
    EFFET RIPPLE
==========================================================*/

.hero-play-btn::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.45);

    animation:ripple 2s infinite;

}

@keyframes ripple{

    0%{

        transform:scale(1);

        opacity:1;

    }

    100%{

        transform:scale(1.7);

        opacity:0;

    }

}

/*==========================================================
    HOVER
==========================================================*/

.hero-btn:hover{

    transform:

        translateY(-6px);

}

.hero-btn-primary:hover{

    box-shadow:

        0 20px 45px rgba(212,175,55,.50);

}

.hero-btn-secondary:hover{

    box-shadow:

        0 20px 45px rgba(255,255,255,.20);

}

/*==========================================================
    ACTIVE
==========================================================*/

.hero-btn:active{

    transform:scale(.97);

}

/*==========================================================
    FOCUS
==========================================================*/

.hero-btn:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:4px;

}

/*==========================================================
    PETITES ÉTIQUETTES
==========================================================*/

.hero-btn small{

    display:block;

    font-size:11px;

    font-weight:500;

    opacity:.85;

}

/*==========================================================
    BADGE DANS LE BOUTON
==========================================================*/

.hero-btn .badge{

    margin-left:8px;

    padding:5px 9px;

    border-radius:20px;

    background:#ffffff;

    color:var(--primary);

    font-size:11px;

}

/*==========================================================
    VERSION OUTLINE
==========================================================*/

.hero-btn-outline{

    background:transparent;

    color:#ffffff;

    border:2px solid #ffffff;

}

.hero-btn-outline:hover{

    background:#ffffff;

    color:var(--primary);

}

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

@media(max-width:992px){

.hero-buttons{

justify-content:center;

}

.hero-play{

margin-left:0;

margin-top:20px;

}

}

@media(max-width:768px){

.hero-buttons{

flex-direction:column;

align-items:stretch;

}

.hero-btn{

width:100%;

justify-content:center;

}

.hero-play{

justify-content:center;

}

.hero-play-btn{

width:60px;

height:60px;

font-size:20px;

}

}

/*==========================================================
    FIN MODULE 3A.2.2.1
==========================================================*/
/*==========================================================
    MODULE 3A.2.2.2.1
    SCROLL DOWN INDICATOR
==========================================================*/

/*==========================================================
    CONTENEUR
==========================================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:30;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    cursor:pointer;

    animation:fadeInUp 2s ease;

}

/*==========================================================
    TEXTE
==========================================================*/

.hero-scroll span{

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:14px;

    opacity:.9;

    transition:all .35s ease;

}

.hero-scroll:hover span{

    color:var(--accent);

}

/*==========================================================
    SOURIS
==========================================================*/

.scroll-mouse{

    width:34px;

    height:58px;

    border:2px solid rgba(255,255,255,.80);

    border-radius:25px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    transition:all .35s ease;

}

.hero-scroll:hover .scroll-mouse{

    border-color:var(--accent);

}

/*==========================================================
    ROULETTE DE LA SOURIS
==========================================================*/

.scroll-wheel{

    width:5px;

    height:12px;

    border-radius:10px;

    background:#ffffff;

    margin-top:10px;

    animation:mouseWheel 2s infinite;

}

.hero-scroll:hover .scroll-wheel{

    background:var(--accent);

}

/*==========================================================
    FLÈCHE
==========================================================*/

.scroll-arrow{

    margin-top:18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#ffffff;

    font-size:18px;

    animation:arrowBounce 2s infinite;

}

.scroll-arrow i{

    margin-top:-6px;

}

.hero-scroll:hover .scroll-arrow{

    color:var(--accent);

}

/*==========================================================
    CERCLE DE PULSATION
==========================================================*/

.scroll-pulse{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.18);

    animation:scrollPulse 2.5s infinite;

}

.hero-scroll:hover .scroll-pulse{

    border-color:rgba(212,175,55,.45);

}

/*==========================================================
    ANIMATION ROULETTE
==========================================================*/

@keyframes mouseWheel{

    0%{

        opacity:1;

        transform:translateY(0);

    }

    50%{

        opacity:.4;

        transform:translateY(14px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    ANIMATION FLÈCHE
==========================================================*/

@keyframes arrowBounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================================
    ANIMATION PULSATION
==========================================================*/

@keyframes scrollPulse{

    0%{

        transform:scale(.8);

        opacity:.8;

    }

    100%{

        transform:scale(1.8);

        opacity:0;

    }

}

/*==========================================================
    APPARITION
==========================================================*/

@keyframes fadeInUp{

    from{

        opacity:0;

        transform:

            translate(-50%,40px);

    }

    to{

        opacity:1;

        transform:

            translate(-50%,0);

    }

}

/*==========================================================
    HOVER
==========================================================*/

.hero-scroll:hover{

    transform:

        translateX(-50%)

        scale(1.05);

}

/*==========================================================
    ACTIVE
==========================================================*/

.hero-scroll:active{

    transform:

        translateX(-50%)

        scale(.96);

}

/*==========================================================
    FOCUS
==========================================================*/

.hero-scroll:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:8px;

    border-radius:50px;

}

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

@media(max-width:992px){

.hero-scroll{

bottom:25px;

}

}

@media(max-width:768px){

.hero-scroll{

display:none;

}

}

/*==========================================================
    FIN MODULE 3A.2.2.2.1
==========================================================*/
/*==========================================================
    MODULE 3A.2.2.A.1.1.1.1
    HERO ADVANCED ANIMATIONS
    Fade In
    Fade Up
    Fade Left
    Fade Right
    Zoom In
    Scale
    Rotation
==========================================================*/

/*==========================================================
    FADE IN
==========================================================*/

.hero-fade-in{

    animation:heroFadeIn 1.2s ease forwards;

}

@keyframes heroFadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/*==========================================================
    FADE UP
==========================================================*/

.hero-fade-up{

    animation:heroFadeUp 1.2s ease forwards;

}

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    FADE DOWN
==========================================================*/

.hero-fade-down{

    animation:heroFadeDown 1.2s ease forwards;

}

@keyframes heroFadeDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    FADE LEFT
==========================================================*/

.hero-fade-left{

    animation:heroFadeLeft 1.2s ease forwards;

}

@keyframes heroFadeLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==========================================================
    FADE RIGHT
==========================================================*/

.hero-fade-right{

    animation:heroFadeRight 1.2s ease forwards;

}

@keyframes heroFadeRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==========================================================
    ZOOM IN
==========================================================*/

.hero-zoom-in{

    animation:heroZoomIn 1.4s ease forwards;

}

@keyframes heroZoomIn{

    from{

        opacity:0;

        transform:scale(.65);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==========================================================
    ZOOM OUT
==========================================================*/

.hero-zoom-out{

    animation:heroZoomOut 1.3s ease forwards;

}

@keyframes heroZoomOut{

    from{

        opacity:0;

        transform:scale(1.3);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==========================================================
    SCALE
==========================================================*/

.hero-scale{

    animation:heroScale 4s ease-in-out infinite;

}

@keyframes heroScale{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

/*==========================================================
    ROTATION LÉGÈRE
==========================================================*/

.hero-rotate{

    animation:heroRotate 8s ease-in-out infinite;

    transform-origin:center center;

}

@keyframes heroRotate{

    0%{

        transform:rotate(0deg);

    }

    25%{

        transform:rotate(1deg);

    }

    50%{

        transform:rotate(0deg);

    }

    75%{

        transform:rotate(-1deg);

    }

    100%{

        transform:rotate(0deg);

    }

}

/*==========================================================
    FLOAT UP
==========================================================*/

.hero-float{

    animation:heroFloat 5s ease-in-out infinite;

}

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================================
    BOUNCE
==========================================================*/

.hero-bounce{

    animation:heroBounce 2.5s infinite;

}

@keyframes heroBounce{

    0%{

        transform:translateY(0);

    }

    25%{

        transform:translateY(-12px);

    }

    50%{

        transform:translateY(0);

    }

    75%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================================
    PULSE
==========================================================*/

.hero-pulse{

    animation:heroPulse 2s infinite;

}

@keyframes heroPulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.08);

        opacity:.92;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/*==========================================================
    SHAKE
==========================================================*/

.hero-shake:hover{

    animation:heroShake .6s;

}

@keyframes heroShake{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-6px);

    }

    40%{

        transform:translateX(6px);

    }

    60%{

        transform:translateX(-4px);

    }

    80%{

        transform:translateX(4px);

    }

    100%{

        transform:translateX(0);

    }

}

/*==========================================================
    DELAY UTILITAIRES
==========================================================*/

.delay-100{

    animation-delay:.1s;

}

.delay-200{

    animation-delay:.2s;

}

.delay-300{

    animation-delay:.3s;

}

.delay-400{

    animation-delay:.4s;

}

.delay-500{

    animation-delay:.5s;

}

.delay-600{

    animation-delay:.6s;

}

.delay-700{

    animation-delay:.7s;

}

.delay-800{

    animation-delay:.8s;

}

.delay-900{

    animation-delay:.9s;

}

.delay-1000{

    animation-delay:1s;

}

/*==========================================================
    DURÉES
==========================================================*/

.duration-fast{

    animation-duration:.8s;

}

.duration-normal{

    animation-duration:1.2s;

}

.duration-slow{

    animation-duration:2s;

}

/*==========================================================
    FILL MODE
==========================================================*/

.hero-animated{

    opacity:0;

    animation-fill-mode:forwards;

    animation-timing-function:ease-out;

}

/*==========================================================
    OPTIMISATION GPU
==========================================================*/

.hero-animated,
.hero-float,
.hero-scale,
.hero-rotate,
.hero-pulse{

    will-change:transform, opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

    perspective:1000px;

}

/*==========================================================
    FIN MODULE
==========================================================*/
/*==========================================================
    MODULE 3A.2.2.2.A.1.1.2
    DÉLAIS D'ANIMATION
    SÉQUENCEMENT
    TRANSITIONS AVANCÉES
    SYNCHRONISATION
==========================================================*/

/*==========================================================
    DÉLAIS D'ANIMATION
==========================================================*/

.delay-0{
    animation-delay:0s;
}

.delay-100{
    animation-delay:.1s;
}

.delay-200{
    animation-delay:.2s;
}

.delay-300{
    animation-delay:.3s;
}

.delay-400{
    animation-delay:.4s;
}

.delay-500{
    animation-delay:.5s;
}

.delay-600{
    animation-delay:.6s;
}

.delay-700{
    animation-delay:.7s;
}

.delay-800{
    animation-delay:.8s;
}

.delay-900{
    animation-delay:.9s;
}

.delay-1000{
    animation-delay:1s;
}

.delay-1200{
    animation-delay:1.2s;
}

.delay-1400{
    animation-delay:1.4s;
}

.delay-1600{
    animation-delay:1.6s;
}

.delay-1800{
    animation-delay:1.8s;
}

.delay-2000{
    animation-delay:2s;
}

/*==========================================================
    DURÉES
==========================================================*/

.duration-300{
    animation-duration:.3s;
}

.duration-500{
    animation-duration:.5s;
}

.duration-700{
    animation-duration:.7s;
}

.duration-1000{
    animation-duration:1s;
}

.duration-1200{
    animation-duration:1.2s;
}

.duration-1500{
    animation-duration:1.5s;
}

.duration-2000{
    animation-duration:2s;
}

.duration-3000{
    animation-duration:3s;
}

/*==========================================================
    TIMING FUNCTIONS
==========================================================*/

.ease{

    animation-timing-function:ease;

}

.ease-in{

    animation-timing-function:ease-in;

}

.ease-out{

    animation-timing-function:ease-out;

}

.ease-in-out{

    animation-timing-function:ease-in-out;

}

.linear{

    animation-timing-function:linear;

}

/*==========================================================
    FILL MODE
==========================================================*/

.fill-none{

    animation-fill-mode:none;

}

.fill-forwards{

    animation-fill-mode:forwards;

}

.fill-backwards{

    animation-fill-mode:backwards;

}

.fill-both{

    animation-fill-mode:both;

}

/*==========================================================
    ITERATIONS
==========================================================*/

.repeat-1{

    animation-iteration-count:1;

}

.repeat-2{

    animation-iteration-count:2;

}

.repeat-3{

    animation-iteration-count:3;

}

.repeat-infinite{

    animation-iteration-count:infinite;

}

/*==========================================================
    DIRECTION
==========================================================*/

.direction-normal{

    animation-direction:normal;

}

.direction-reverse{

    animation-direction:reverse;

}

.direction-alternate{

    animation-direction:alternate;

}

.direction-alternate-reverse{

    animation-direction:alternate-reverse;

}

/*==========================================================
    HERO TIMELINE
==========================================================*/

.hero-sequence>*{

    opacity:0;

    animation-fill-mode:forwards;

}

.hero-sequence>*:nth-child(1){

    animation-delay:.2s;

}

.hero-sequence>*:nth-child(2){

    animation-delay:.5s;

}

.hero-sequence>*:nth-child(3){

    animation-delay:.8s;

}

.hero-sequence>*:nth-child(4){

    animation-delay:1.1s;

}

.hero-sequence>*:nth-child(5){

    animation-delay:1.4s;

}

.hero-sequence>*:nth-child(6){

    animation-delay:1.7s;

}

.hero-sequence>*:nth-child(7){

    animation-delay:2s;

}

/*==========================================================
    HERO CONTENT
==========================================================*/

.hero-badge{

    animation-delay:.2s;

}

.hero-title{

    animation-delay:.5s;

}

.hero-subtitle{

    animation-delay:.8s;

}

.hero-text{

    animation-delay:1.1s;

}

.hero-features{

    animation-delay:1.4s;

}

.hero-buttons{

    animation-delay:1.7s;

}

.hero-scroll{

    animation-delay:2.2s;

}

/*==========================================================
    TRANSITIONS AVANCÉES
==========================================================*/

.hero *{

    transition:

        color .35s ease,

        background .35s ease,

        border-color .35s ease,

        opacity .35s ease,

        transform .45s ease,

        box-shadow .45s ease;

}

.hero img{

    transition:

        transform .8s cubic-bezier(.2,.8,.2,1),

        filter .5s ease;

}

.hero img:hover{

    transform:scale(1.05);

}

.hero a{

    transition:all .35s ease;

}

.hero button{

    transition:all .35s ease;

}

/*==========================================================
    SYNCHRONISATION
==========================================================*/

.hero-sync{

    display:flex;

    gap:20px;

}

.hero-sync>*{

    opacity:0;

    animation-fill-mode:forwards;

}

.hero-sync>*:nth-child(1){

    animation-delay:.3s;

}

.hero-sync>*:nth-child(2){

    animation-delay:.6s;

}

.hero-sync>*:nth-child(3){

    animation-delay:.9s;

}

.hero-sync>*:nth-child(4){

    animation-delay:1.2s;

}

.hero-sync>*:nth-child(5){

    animation-delay:1.5s;

}

/*==========================================================
    APPARITION CASCADE
==========================================================*/

.hero-cascade>*{

    opacity:0;

    transform:translateY(25px);

    animation:

        heroFadeUp

        .9s

        ease

        forwards;

}

.hero-cascade>*:nth-child(1){

    animation-delay:.2s;

}

.hero-cascade>*:nth-child(2){

    animation-delay:.35s;

}

.hero-cascade>*:nth-child(3){

    animation-delay:.5s;

}

.hero-cascade>*:nth-child(4){

    animation-delay:.65s;

}

.hero-cascade>*:nth-child(5){

    animation-delay:.8s;

}

.hero-cascade>*:nth-child(6){

    animation-delay:.95s;

}

.hero-cascade>*:nth-child(7){

    animation-delay:1.1s;

}

/*==========================================================
    HOVER SYNCHRONISÉ
==========================================================*/

.hero-hover-group:hover .hero-btn{

    transform:translateY(-6px);

}

.hero-hover-group:hover .hero-image{

    transform:scale(1.03);

}

.hero-hover-group:hover .hero-card{

    transform:translateY(-10px);

}

.hero-hover-group:hover .hero-icon{

    transform:rotate(8deg);

}

/*==========================================================
    GPU OPTIMISATION
==========================================================*/

.hero,
.hero *{

    will-change:transform,opacity;

}

.hero{

    transform:translateZ(0);

    backface-visibility:hidden;

    perspective:1200px;

    transform-style:preserve-3d;

}

/*==========================================================
    RÉDUCTION DES ANIMATIONS
==========================================================*/

@media (prefers-reduced-motion: reduce){

    .hero *,
    .hero::before,
    .hero::after{

        animation:none !important;

        transition:none !important;

        transform:none !important;

        scroll-behavior:auto !important;

    }

}

/*==========================================================
    FIN DU MODULE
==========================================================*/
/*==========================================================
    MODULE 3A.2.2.2.A.1.2
    FLOATING ELEMENTS
    FLOATING SHAPES
    VARIANTES
    OPTIMISATION DES ANIMATIONS
==========================================================*/

/*==========================================================
    CONTENEUR DES ÉLÉMENTS FLOTTANTS
==========================================================*/

.hero-floating{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:4;

}

/*==========================================================
    ÉLÉMENT FLOTTANT GÉNÉRIQUE
==========================================================*/

.floating-element{

    position:absolute;

    animation:floatingMove 8s ease-in-out infinite;

    will-change:transform;

    backface-visibility:hidden;

}

/*==========================================================
    FORME CERCLE
==========================================================*/

.floating-circle{

    border-radius:50%;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.12);

}

/*==========================================================
    FORME CARRÉ
==========================================================*/

.floating-square{

    border-radius:20px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.12);

}

/*==========================================================
    FORME LOSANGE
==========================================================*/

.floating-diamond{

    transform:rotate(45deg);

    border-radius:12px;

    background:rgba(212,175,55,.12);

    border:1px solid rgba(255,255,255,.15);

}

/*==========================================================
    FORME HEXAGONE
==========================================================*/

.floating-hexagon{

    clip-path:polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0% 50%
    );

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

}

/*==========================================================
    FORME TRIANGLE
==========================================================*/

.floating-triangle{

    clip-path:polygon(
        50% 0%,
        0% 100%,
        100% 100%
    );

    background:rgba(212,175,55,.15);

}

/*==========================================================
    BULLES LUMINEUSES
==========================================================*/

.floating-light{

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.35),

            transparent

        );

    filter:blur(4px);

}

/*==========================================================
    GLASS EFFECT
==========================================================*/

.floating-glass{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.15);

    box-shadow:

        0 15px 40px rgba(0,0,0,.12);

}

/*==========================================================
    POSITIONS
==========================================================*/

.float-1{

    top:8%;

    left:6%;

    width:120px;

    height:120px;

    animation-duration:10s;

}

.float-2{

    top:18%;

    right:10%;

    width:70px;

    height:70px;

    animation-duration:7s;

}

.float-3{

    bottom:15%;

    left:12%;

    width:90px;

    height:90px;

    animation-duration:9s;

}

.float-4{

    bottom:10%;

    right:8%;

    width:150px;

    height:150px;

    animation-duration:12s;

}

.float-5{

    top:45%;

    right:18%;

    width:55px;

    height:55px;

    animation-duration:6s;

}

.float-6{

    top:60%;

    left:20%;

    width:45px;

    height:45px;

    animation-duration:8s;

}

/*==========================================================
    FLOATING MOUVEMENT PRINCIPAL
==========================================================*/

@keyframes floatingMove{

    0%{

        transform:

            translateY(0)

            translateX(0)

            rotate(0deg);

    }

    25%{

        transform:

            translateY(-18px)

            translateX(10px)

            rotate(2deg);

    }

    50%{

        transform:

            translateY(-35px)

            translateX(-12px)

            rotate(5deg);

    }

    75%{

        transform:

            translateY(-12px)

            translateX(8px)

            rotate(-2deg);

    }

    100%{

        transform:

            translateY(0)

            translateX(0)

            rotate(0deg);

    }

}

/*==========================================================
    ROTATION CONTINUE
==========================================================*/

.floating-rotate{

    animation:

        floatingRotate 18s linear infinite;

}

@keyframes floatingRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==========================================================
    ZOOM LENT
==========================================================*/

.floating-zoom{

    animation:

        floatingZoom 8s ease-in-out infinite;

}

@keyframes floatingZoom{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

/*==========================================================
    OPACITÉ
==========================================================*/

.floating-fade{

    animation:

        floatingFade 5s ease-in-out infinite;

}

@keyframes floatingFade{

    0%{

        opacity:.25;

    }

    50%{

        opacity:.85;

    }

    100%{

        opacity:.25;

    }

}

/*==========================================================
    VARIANTES
==========================================================*/

.floating-small{

    width:35px;

    height:35px;

}

.floating-medium{

    width:70px;

    height:70px;

}

.floating-large{

    width:140px;

    height:140px;

}

.floating-gold{

    background:rgba(212,175,55,.18);

}

.floating-blue{

    background:rgba(0,80,158,.18);

}

.floating-white{

    background:rgba(255,255,255,.10);

}

/*==========================================================
    ANIMATION COMBINÉE
==========================================================*/

.floating-combined{

    animation:

        floatingMove 8s ease-in-out infinite,

        floatingFade 5s ease-in-out infinite,

        floatingZoom 10s ease-in-out infinite;

}

/*==========================================================
    OPTIMISATION GPU
==========================================================*/

.floating-element,
.floating-circle,
.floating-square,
.floating-diamond,
.floating-light{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

    perspective:1000px;

}

/*==========================================================
    PAUSE AU SURVOL
==========================================================*/

.hero:hover .floating-element{

    animation-play-state:paused;

}

/*==========================================================
    ACCESSIBILITÉ
==========================================================*/

@media (prefers-reduced-motion: reduce){

.floating-element,
.floating-circle,
.floating-square,
.floating-diamond,
.floating-light{

animation:none !important;

transform:none !important;

}

}

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

@media(max-width:992px){

.float-1,
.float-2,
.float-3,
.float-4{

opacity:.50;

}

}

@media(max-width:768px){

.hero-floating{

display:none;

}

}

/*==========================================================
    FIN MODULE 3A.2.2.2.A.1.2
==========================================================*/
/*==========================================================
    MODULE 3A.2.2.2.A.2
    FLOATING CARDS
    FLOATING ICONS
    PARALLAX
    GLASS EFFECTS
    HERO FINAL SCENE
==========================================================*/

/*==========================================================
    CONTENEUR DES ÉLÉMENTS FLOTTANTS
==========================================================*/

.hero-floating-scene{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:8;

}

/*==========================================================
    CARTES FLOTTANTES
==========================================================*/

.hero-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:240px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.20);

    box-shadow:

        0 25px 60px rgba(0,0,0,.15);

    color:#ffffff;

    animation:

        cardFloating 7s ease-in-out infinite;

    transition:all .4s ease;

}

.hero-card:hover{

    transform:

        translateY(-12px)

        scale(1.03);

    background:rgba(255,255,255,.18);

}

.hero-card i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--accent);

    color:#ffffff;

    font-size:24px;

    box-shadow:

        0 10px 25px rgba(212,175,55,.35);

}

.hero-card h6{

    color:#ffffff;

    font-size:17px;

    margin-bottom:4px;

    font-weight:700;

}

.hero-card p{

    margin:0;

    font-size:14px;

    color:rgba(255,255,255,.90);

}

/*==========================================================
    POSITION DES CARTES
==========================================================*/

.card-top-left{

    top:12%;

    left:5%;

}

.card-top-right{

    top:18%;

    right:5%;

}

.card-bottom-left{

    bottom:14%;

    left:8%;

}

.card-bottom-right{

    bottom:18%;

    right:7%;

}

/*==========================================================
    FLOATING ICONS
==========================================================*/

.hero-icon{

    position:absolute;

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    color:var(--accent);

    font-size:30px;

    box-shadow:

        0 20px 45px rgba(0,0,0,.12);

    animation:

        iconFloating 6s ease-in-out infinite;

}

.hero-icon:hover{

    transform:

        scale(1.15)

        rotate(12deg);

}

/*==========================================================
    POSITIONS DES ICÔNES
==========================================================*/

.icon-1{

    top:20%;

    left:25%;

}

.icon-2{

    top:15%;

    right:28%;

}

.icon-3{

    top:55%;

    left:10%;

}

.icon-4{

    bottom:18%;

    right:20%;

}

.icon-5{

    top:40%;

    right:8%;

}

/*==========================================================
    PARALLAX LÉGER
==========================================================*/

.hero-parallax{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:2;

}

.parallax-layer{

    position:absolute;

    transition:

        transform .8s ease-out;

    will-change:transform;

}

.parallax-slow{

    animation:

        parallaxSlow 18s ease-in-out infinite;

}

.parallax-medium{

    animation:

        parallaxMedium 12s ease-in-out infinite;

}

.parallax-fast{

    animation:

        parallaxFast 8s ease-in-out infinite;

}

/*==========================================================
    GLASS PANEL
==========================================================*/

.hero-glass{

    background:

        rgba(255,255,255,.10);

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:25px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.18);

}

/*==========================================================
    LUMIÈRES FLOTTANTES
==========================================================*/

.hero-light-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.35;

    animation:

        lightFloating 12s ease-in-out infinite;

}

.light-blue{

    width:260px;

    height:260px;

    background:#4aa3ff;

    top:-80px;

    right:-60px;

}

.light-gold{

    width:220px;

    height:220px;

    background:#d4af37;

    bottom:-60px;

    left:-60px;

}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes cardFloating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

@keyframes iconFloating{

    0%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-18px) rotate(6deg);

    }

    100%{

        transform:translateY(0) rotate(0deg);

    }

}

@keyframes parallaxSlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes parallaxMedium{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-28px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes parallaxFast{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-38px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes lightFloating{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(30px,-25px);

    }

    100%{

        transform:translate(0,0);

    }

}

/*==========================================================
    OMBRE GÉNÉRALE DU HERO
==========================================================*/

.hero-shadow-bottom{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:180px;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.35),

            transparent

        );

    z-index:6;

}

/*==========================================================
    GRAIN CINÉMATOGRAPHIQUE
==========================================================*/

.hero-noise{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:url("../images/noise.png");

    mix-blend-mode:overlay;

    z-index:7;

}

/*==========================================================
    GPU OPTIMISATION
==========================================================*/

.hero-card,
.hero-icon,
.parallax-layer,
.hero-light-orb{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

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

@media(max-width:1200px){

.hero-card{

transform:scale(.90);

}

}

@media(max-width:992px){

.hero-card{

display:none;

}

.hero-icon{

transform:scale(.8);

}

}

@media(max-width:768px){

.hero-icon,
.hero-light-orb,
.hero-noise{

display:none;

}

}

/*==========================================================
    FINALISATION DE LA SCÈNE HERO
==========================================================*/

.hero-finished{

    position:relative;

    isolation:isolate;

}

.hero-finished>*{

    position:relative;

    z-index:10;

}

.hero-finished::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at center,

            transparent 45%,

            rgba(0,0,0,.08)

        );

    pointer-events:none;

    z-index:5;

}

/*==========================================================
    FIN MODULE 3A.2.2.2.A.2
==========================================================*/
/*==========================================================
    MODULE 3A.2.2.2.B
    HERO OPTIMIZATION
    GPU
    RESPONSIVE
    PERFORMANCE
==========================================================*/

/*==========================================================
    GPU ACCELERATION
==========================================================*/

.hero,
.hero *{

    transform:translateZ(0);

    -webkit-transform:translateZ(0);

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    perspective:1200px;

    -webkit-perspective:1200px;

    transform-style:preserve-3d;

    -webkit-transform-style:preserve-3d;

}

/*==========================================================
    WILL CHANGE
==========================================================*/

.hero-bg,
.hero-overlay,
.hero-content,
.hero-title,
.hero-subtitle,
.hero-text,
.hero-buttons,
.hero-scroll,
.hero-card,
.hero-icon,
.hero-floating,
.hero-light-orb,
.hero-image,
.hero-shape,
.hero-particles{

    will-change:

        transform,

        opacity,

        filter;

}

/*==========================================================
    IMAGE OPTIMIZATION
==========================================================*/

.hero img{

    display:block;

    max-width:100%;

    height:auto;

    image-rendering:auto;

    object-fit:cover;

    object-position:center;

    user-select:none;

    -webkit-user-drag:none;

}

/*==========================================================
    VIDEO OPTIMIZATION
==========================================================*/

.hero video{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}

/*==========================================================
    ANIMATION PERFORMANCE
==========================================================*/

.hero-animated{

    animation-fill-mode:forwards;

    animation-timing-function:cubic-bezier(.2,.8,.2,1);

    animation-play-state:running;

}

.hero *{

    transition-property:

        transform,

        opacity,

        color,

        background,

        border-color,

        box-shadow;

}

/*==========================================================
    PREVENT LAYOUT SHIFT
==========================================================*/

.hero{

    contain:layout paint;

}

.hero-content{

    contain:layout;

}

/*==========================================================
    HARDWARE RENDERING
==========================================================*/

.hero-card,
.hero-icon,
.hero-btn,
.hero-image{

    transform:translate3d(0,0,0);

}

/*==========================================================
    SMOOTH RENDERING
==========================================================*/

.hero{

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/*==========================================================
    RESPONSIVE LARGE DESKTOP
==========================================================*/

@media(min-width:1600px){

.hero{

min-height:100vh;

}

.hero-content{

max-width:900px;

}

.hero-title{

font-size:78px;

}

.hero-subtitle{

font-size:34px;

}

.hero-text{

font-size:22px;

max-width:820px;

}

.hero-btn{

padding:18px 45px;

font-size:18px;

}

.hero-card{

transform:scale(1.08);

}

}

/*==========================================================
    RESPONSIVE 4K
==========================================================*/

@media(min-width:2200px){

.hero{

max-height:1400px;

}

.hero-title{

font-size:96px;

}

.hero-subtitle{

font-size:42px;

}

.hero-text{

font-size:26px;

}

.hero-buttons{

margin-top:60px;

}

.hero-card{

transform:scale(1.2);

}

.hero-icon{

transform:scale(1.25);

}

}

/*==========================================================
    RESPONSIVE LAPTOP
==========================================================*/

@media(max-width:1400px){

.hero-title{

font-size:60px;

}

.hero-card{

transform:scale(.95);

}

}

/*==========================================================
    RESPONSIVE TABLETTE
==========================================================*/

@media(max-width:992px){

.hero{

padding-top:130px;

padding-bottom:100px;

min-height:auto;

}

.hero-row{

min-height:auto;

}

.hero-content{

text-align:center;

max-width:100%;

margin:auto;

}

.hero-title{

font-size:48px;

}

.hero-subtitle{

font-size:22px;

}

.hero-text{

font-size:17px;

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.hero-scroll{

display:none;

}

.hero-card{

display:none;

}

.hero-floating{

opacity:.35;

}

}

/*==========================================================
    RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.hero{

padding-top:110px;

padding-bottom:80px;

}

.hero-title{

font-size:36px;

line-height:1.25;

}

.hero-subtitle{

font-size:18px;

}

.hero-text{

font-size:15px;

line-height:1.8;

}

.hero-badge{

font-size:12px;

padding:8px 18px;

}

.hero-buttons{

flex-direction:column;

width:100%;

gap:15px;

}

.hero-btn{

width:100%;

justify-content:center;

}

.hero-features{

flex-direction:column;

gap:12px;

align-items:center;

}

.hero-icon,
.hero-light-orb,
.hero-noise,
.hero-particles,
.hero-floating{

display:none;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.hero-title{

font-size:30px;

}

.hero-subtitle{

font-size:17px;

}

.hero-text{

font-size:14px;

}

.hero-btn{

padding:15px 24px;

font-size:15px;

}

.hero-badge{

font-size:11px;

}

}

/*==========================================================
    LANDSCAPE MOBILE
==========================================================*/

@media(max-height:600px){

.hero{

min-height:650px;

}

.hero-scroll{

display:none;

}

}

/*==========================================================
    PRINT
==========================================================*/

@media print{

.hero{

background:#ffffff;

color:#000000;

}

.hero-bg,
.hero-video,
.hero-overlay,
.hero-floating,
.hero-scroll{

display:none;

}

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

@media (prefers-reduced-motion:reduce){

.hero *,
.hero::before,
.hero::after{

animation:none!important;

transition:none!important;

transform:none!important;

}

}

/*==========================================================
    FINAL HERO OPTIMIZATION
==========================================================*/

.hero-ready{

position:relative;

overflow:hidden;

isolation:isolate;

}

.hero-ready *{

box-sizing:border-box;

}

.hero-ready img{

loading:lazy;

}

/*==========================================================
    CSS CUSTOM PROPERTIES
==========================================================*/

.hero{

--hero-padding:120px;

--hero-radius:30px;

--hero-shadow:

0 30px 70px rgba(0,0,0,.18);

}

/*==========================================================
    HERO QUALITY ENHANCEMENT
==========================================================*/

.hero::selection{

background:var(--accent);

color:#fff;

}

/*==========================================================
    END OF MODULE 3
==========================================================*/
/*==========================================================
    MODULE 3B.1
    HERO SLIDER
    SWIPER
    SLIDES
    IMAGES
    OVERLAY
==========================================================*/

/*==========================================================
    HERO SLIDER
==========================================================*/

.hero-slider{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    background:#001f3f;

}

.hero-slider .swiper{

    width:100%;

    height:100%;

}

.hero-slider .swiper-wrapper{

    width:100%;

    height:100%;

}

.hero-slider .swiper-slide{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

/*==========================================================
    IMAGE DU SLIDE
==========================================================*/

.slide-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}

.slide-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:transform 10s linear;

}

.swiper-slide-active .slide-image img{

    transform:scale(1.12);

}

/*==========================================================
    VIDÉO
==========================================================*/

.slide-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}

.slide-video video{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==========================================================
    OVERLAY
==========================================================*/

.slide-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        135deg,

        rgba(0,25,60,.88),

        rgba(0,51,102,.70),

        rgba(0,80,158,.45)

    );

}

.slide-overlay::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(212,175,55,.18),

            transparent 40%

        );

}

.slide-overlay::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to bottom,

            transparent,

            rgba(0,0,0,.35)

        );

}

/*==========================================================
    CONTENU
==========================================================*/

.slide-content{

    position:relative;

    z-index:20;

    max-width:760px;

    color:#ffffff;

}

.slide-content.center{

    text-align:center;

    margin:auto;

}

.slide-content.left{

    text-align:left;

}

.slide-content.right{

    text-align:right;

    margin-left:auto;

}

/*==========================================================
    BADGE
==========================================================*/

.slide-badge{

    display:inline-block;

    padding:10px 24px;

    margin-bottom:25px;

    border-radius:40px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*==========================================================
    TITRES
==========================================================*/

.slide-title{

    font-size:68px;

    font-weight:800;

    line-height:1.15;

    color:#ffffff;

    margin-bottom:25px;

}

.slide-title span{

    color:var(--accent);

}

.slide-subtitle{

    font-size:26px;

    font-weight:500;

    color:#ffffff;

    margin-bottom:30px;

}

.slide-text{

    font-size:18px;

    color:rgba(255,255,255,.92);

    line-height:1.9;

    margin-bottom:40px;

}

/*==========================================================
    BOUTONS
==========================================================*/

.slide-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.slide-content.center .slide-buttons{

    justify-content:center;

}

.slide-content.right .slide-buttons{

    justify-content:flex-end;

}

/*==========================================================
    SLIDE SHAPES
==========================================================*/

.slide-shape{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    animation:slideFloating 12s ease-in-out infinite;

}

.shape-1{

    width:180px;

    height:180px;

    top:8%;

    left:6%;

}

.shape-2{

    width:120px;

    height:120px;

    right:8%;

    bottom:15%;

}

.shape-3{

    width:80px;

    height:80px;

    top:45%;

    right:18%;

}

/*==========================================================
    HERO LIGHT
==========================================================*/

.slide-light{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.18),

            transparent

        );

    filter:blur(40px);

    animation:lightMove 15s infinite ease-in-out;

}

/*==========================================================
    CONTAINER
==========================================================*/

.hero-slider .container{

    position:relative;

    z-index:30;

}

/*==========================================================
    ANIMATIONS
==========================================================*/

@keyframes slideFloating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-22px);

    }

}

@keyframes lightMove{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(40px,-25px);

    }

    100%{

        transform:translate(0,0);

    }

}

/*==========================================================
    GPU
==========================================================*/

.swiper-slide,
.slide-image img,
.slide-overlay,
.slide-content{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

}

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

@media(max-width:1200px){

.slide-title{

font-size:56px;

}

}

@media(max-width:992px){

.slide-content{

text-align:center;

margin:auto;

}

.slide-buttons{

justify-content:center;

}

.slide-title{

font-size:46px;

}

.slide-subtitle{

font-size:22px;

}

}

@media(max-width:768px){

.hero-slider{

height:85vh;

}

.slide-title{

font-size:34px;

}

.slide-subtitle{

font-size:18px;

}

.slide-text{

font-size:15px;

}

.slide-buttons{

flex-direction:column;

}

.slide-shape{

display:none;

}

}

@media(max-width:480px){

.slide-title{

font-size:30px;

}

.slide-badge{

font-size:12px;

padding:8px 18px;

}

}
/*==========================================================
    MODULE 3B.2
    HERO SLIDER
    PAGINATION
    PROGRESS BAR
    NAVIGATION
    THUMBNAILS
==========================================================*/

/*==========================================================
    PAGINATION SWIPER
==========================================================*/

.hero-slider .swiper-pagination{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    z-index:100;

}

.hero-slider .swiper-pagination-bullet{

    width:14px;

    height:14px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    opacity:1;

    transition:all .35s ease;

    cursor:pointer;

}

.hero-slider .swiper-pagination-bullet:hover{

    background:rgba(255,255,255,.70);

    transform:scale(1.2);

}

.hero-slider .swiper-pagination-bullet-active{

    width:42px;

    border-radius:30px;

    background:var(--accent);

    box-shadow:

        0 0 20px rgba(212,175,55,.55);

}

/*==========================================================
    PAGINATION NUMÉRIQUE
==========================================================*/

.slider-counter{

    position:absolute;

    right:40px;

    bottom:40px;

    z-index:100;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    padding:12px 20px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.15);

}

.slider-counter span{

    color:var(--accent);

}

/*==========================================================
    BARRE DE PROGRESSION
==========================================================*/

.slider-progress{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:rgba(255,255,255,.12);

    z-index:120;

    overflow:hidden;

}

.slider-progress-bar{

    width:0;

    height:100%;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b

        );

    transition:width 5s linear;

}

/*==========================================================
    NAVIGATION
==========================================================*/

.hero-slider .swiper-button-next,

.hero-slider .swiper-button-prev{

    width:64px;

    height:64px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.20);

    color:#ffffff;

    transition:all .35s ease;

    box-shadow:

        0 15px 35px rgba(0,0,0,.18);

}

.hero-slider .swiper-button-next:hover,

.hero-slider .swiper-button-prev:hover{

    background:var(--accent);

    color:#ffffff;

    transform:scale(1.08);

}

.hero-slider .swiper-button-next::after,

.hero-slider .swiper-button-prev::after{

    font-size:22px;

    font-weight:700;

}

/*==========================================================
    POSITION
==========================================================*/

.hero-slider .swiper-button-prev{

    left:35px;

}

.hero-slider .swiper-button-next{

    right:35px;

}

/*==========================================================
    MINIATURES
==========================================================*/

.slider-thumbs{

    position:absolute;

    bottom:95px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:15px;

    z-index:120;

}

.slider-thumb{

    width:95px;

    height:65px;

    border-radius:12px;

    overflow:hidden;

    cursor:pointer;

    border:3px solid transparent;

    transition:all .35s ease;

    opacity:.65;

}

.slider-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.slider-thumb:hover{

    opacity:1;

    transform:translateY(-5px);

}

.slider-thumb.active{

    opacity:1;

    border-color:var(--accent);

    box-shadow:

        0 15px 30px rgba(212,175,55,.35);

}

/*==========================================================
    LABEL MINIATURE
==========================================================*/

.slider-thumb-title{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:6px 8px;

    font-size:11px;

    color:#ffffff;

    background:

        linear-gradient(

            transparent,

            rgba(0,0,0,.75)

        );

}

/*==========================================================
    EFFET HOVER
==========================================================*/

.slider-thumb:hover img{

    transform:scale(1.08);

}

.slider-thumb img{

    transition:transform .45s ease;

}

/*==========================================================
    INDICATEUR DE SLIDE
==========================================================*/

.slide-indicator{

    position:absolute;

    top:35px;

    right:35px;

    z-index:120;

    padding:10px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    color:#ffffff;

    font-weight:600;

    letter-spacing:1px;

}

/*==========================================================
    GPU
==========================================================*/

.swiper-pagination-bullet,

.slider-thumb,

.swiper-button-next,

.swiper-button-prev{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

}

/*==========================================================
    RESPONSIVE TABLETTE
==========================================================*/

@media(max-width:992px){

.hero-slider .swiper-button-next,

.hero-slider .swiper-button-prev{

width:52px;

height:52px;

}

.slider-thumbs{

display:none;

}

}

/*==========================================================
    RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.hero-slider .swiper-button-next,

.hero-slider .swiper-button-prev{

display:none;

}

.slider-counter{

right:15px;

bottom:18px;

font-size:14px;

padding:8px 14px;

}

.hero-slider .swiper-pagination{

bottom:18px;

}

.slide-indicator{

display:none;

}

}

/*==========================================================
    RESPONSIVE PETIT MOBILE
==========================================================*/

@media(max-width:480px){

.hero-slider .swiper-pagination-bullet{

width:11px;

height:11px;

}

.hero-slider .swiper-pagination-bullet-active{

width:28px;

}

}

/*==========================================================
    FIN MODULE 3B.2
==========================================================*/
/*==========================================================
    MODULE 3B.3
    HERO SLIDER
    ANIMATIONS
    FADE
    ZOOM
    KEN BURNS
    PARALLAX
==========================================================*/

/*==========================================================
    ÉTAT INITIAL DES SLIDES
==========================================================*/

.hero-slider .swiper-slide{

    opacity:0;

    visibility:hidden;

    transition:

        opacity .8s ease,

        visibility .8s ease;

}

.hero-slider .swiper-slide-active{

    opacity:1;

    visibility:visible;

}

.hero-slider .swiper-slide-prev,

.hero-slider .swiper-slide-next{

    opacity:.35;

}

/*==========================================================
    FADE GÉNÉRAL
==========================================================*/

.hero-slider.fade-effect .swiper-slide{

    opacity:0;

    transition:opacity 1.2s ease;

}

.hero-slider.fade-effect .swiper-slide-active{

    opacity:1;

}

/*==========================================================
    ANIMATION DU CONTENU
==========================================================*/

.slide-content>*{

    opacity:0;

    transform:translateY(45px);

}

.swiper-slide-active .slide-badge{

    animation:slideFadeUp .8s ease .2s forwards;

}

.swiper-slide-active .slide-title{

    animation:slideFadeUp .9s ease .45s forwards;

}

.swiper-slide-active .slide-subtitle{

    animation:slideFadeUp .9s ease .7s forwards;

}

.swiper-slide-active .slide-text{

    animation:slideFadeUp .9s ease .95s forwards;

}

.swiper-slide-active .slide-buttons{

    animation:slideFadeUp .9s ease 1.2s forwards;

}

/*==========================================================
    FADE LEFT
==========================================================*/

.slide-left{

    opacity:0;

    transform:translateX(-70px);

}

.swiper-slide-active .slide-left{

    animation:slideLeft .9s ease forwards;

}

/*==========================================================
    FADE RIGHT
==========================================================*/

.slide-right{

    opacity:0;

    transform:translateX(70px);

}

.swiper-slide-active .slide-right{

    animation:slideRight .9s ease forwards;

}

/*==========================================================
    ZOOM DU CONTENU
==========================================================*/

.slide-zoom{

    opacity:0;

    transform:scale(.8);

}

.swiper-slide-active .slide-zoom{

    animation:slideZoom .9s ease forwards;

}

/*==========================================================
    ROTATION LÉGÈRE
==========================================================*/

.slide-rotate{

    opacity:0;

    transform:

        rotate(-4deg)

        scale(.92);

}

.swiper-slide-active .slide-rotate{

    animation:slideRotate 1s ease forwards;

}

/*==========================================================
    KEN BURNS IMAGE
==========================================================*/

.slide-image{

    overflow:hidden;

}

.slide-image img{

    transform:scale(1);

    transition:none;

}

.swiper-slide-active .slide-image img{

    animation:kenBurns 14s ease-out forwards;

}

@keyframes kenBurns{

    0%{

        transform:

            scale(1)

            translate(0,0);

    }

    25%{

        transform:

            scale(1.05)

            translate(-8px,-4px);

    }

    50%{

        transform:

            scale(1.10)

            translate(5px,-10px);

    }

    75%{

        transform:

            scale(1.14)

            translate(-5px,6px);

    }

    100%{

        transform:

            scale(1.18)

            translate(0,0);

    }

}

/*==========================================================
    PARALLAX
==========================================================*/

.parallax-layer{

    position:absolute;

    inset:0;

    pointer-events:none;

    will-change:transform;

}

.layer-back{

    animation:parallaxSlow 18s ease-in-out infinite;

}

.layer-middle{

    animation:parallaxMedium 14s ease-in-out infinite;

}

.layer-front{

    animation:parallaxFast 10s ease-in-out infinite;

}

@keyframes parallaxSlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes parallaxMedium{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-32px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes parallaxFast{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-48px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================================
    FLOATING SHAPES
==========================================================*/

.slide-shape{

    animation:

        floatingShape 10s ease-in-out infinite;

}

@keyframes floatingShape{

    0%{

        transform:

            translateY(0)

            rotate(0deg);

    }

    25%{

        transform:

            translateY(-10px)

            rotate(2deg);

    }

    50%{

        transform:

            translateY(-22px)

            rotate(5deg);

    }

    75%{

        transform:

            translateY(-10px)

            rotate(-2deg);

    }

    100%{

        transform:

            translateY(0)

            rotate(0deg);

    }

}

/*==========================================================
    LUMIÈRES
==========================================================*/

.slide-light{

    animation:

        heroLightMove 12s ease-in-out infinite;

}

@keyframes heroLightMove{

    0%{

        transform:

            translate(0,0);

        opacity:.35;

    }

    50%{

        transform:

            translate(35px,-20px);

        opacity:.60;

    }

    100%{

        transform:

            translate(0,0);

        opacity:.35;

    }

}

/*==========================================================
    KEYFRAMES CONTENU
==========================================================*/

@keyframes slideFadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideZoom{

    from{

        opacity:0;

        transform:scale(.82);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes slideRotate{

    from{

        opacity:0;

        transform:

            rotate(-4deg)

            scale(.90);

    }

    to{

        opacity:1;

        transform:

            rotate(0)

            scale(1);

    }

}

/*==========================================================
    GPU
==========================================================*/

.slide-image img,
.slide-content,
.slide-light,
.slide-shape,
.parallax-layer{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    ACCESSIBILITÉ
==========================================================*/

@media(prefers-reduced-motion:reduce){

.slide-image img,

.slide-content *,

.slide-light,

.slide-shape,

.parallax-layer{

animation:none!important;

transition:none!important;

transform:none!important;

}

}

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

@media(max-width:992px){

.slide-title{

font-size:48px;

}

.layer-front{

animation-duration:14s;

}

}

@media(max-width:768px){

.slide-shape,

.slide-light{

display:none;

}

.slide-title{

font-size:36px;

}

.slide-subtitle{

font-size:18px;

}

.slide-text{

font-size:15px;

}

}

/*==========================================================
    FIN MODULE 3B.3
==========================================================*/
/*==========================================================
    MODULE 3B.4
    HERO SLIDER
    RESPONSIVE
    PERFORMANCE
    ACCESSIBILITÉ
==========================================================*/

/*==========================================================
    OPTIMISATION GPU
==========================================================*/

.hero-slider,
.hero-slider *,
.swiper,
.swiper-wrapper,
.swiper-slide,
.slide-image,
.slide-image img,
.slide-overlay,
.slide-content,
.slide-buttons,
.slide-light,
.slide-shape,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination{

    transform:translateZ(0);

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    transform-style:preserve-3d;

    -webkit-transform-style:preserve-3d;

}

/*==========================================================
    WILL CHANGE
==========================================================*/

.slide-image img,
.slide-content,
.slide-overlay,
.slide-light,
.slide-shape,
.swiper-slide,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination-bullet{

    will-change:
        transform,
        opacity,
        filter;

}

/*==========================================================
    PERFORMANCE
==========================================================*/

.hero-slider{

    contain:layout paint style;

    isolation:isolate;

    overflow:hidden;

}

.hero-slider img{

    display:block;

    max-width:100%;

    height:auto;

    object-fit:cover;

    image-rendering:auto;

    user-select:none;

    -webkit-user-drag:none;

}

.hero-slider video{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==========================================================
    TYPOGRAPHIE
==========================================================*/

.hero-slider{

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/*==========================================================
    RESPONSIVE 4K
==========================================================*/

@media(min-width:2200px){

.hero-slider{

height:100vh;

}

.slide-title{

font-size:96px;

}

.slide-subtitle{

font-size:40px;

}

.slide-text{

font-size:26px;

max-width:900px;

}

.slide-content{

max-width:900px;

}

.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev{

width:80px;

height:80px;

}

}

/*==========================================================
    LARGE DESKTOP
==========================================================*/

@media(max-width:1600px){

.slide-title{

font-size:64px;

}

.slide-subtitle{

font-size:28px;

}

.slide-text{

font-size:18px;

}

}

/*==========================================================
    LAPTOP
==========================================================*/

@media(max-width:1400px){

.slide-title{

font-size:58px;

}

.slide-content{

max-width:720px;

}

.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev{

width:58px;

height:58px;

}

}

/*==========================================================
    TABLETTE HORIZONTALE
==========================================================*/

@media(max-width:1200px){

.hero-slider{

height:90vh;

}

.slide-title{

font-size:52px;

}

.slide-subtitle{

font-size:24px;

}

.slide-text{

font-size:17px;

}

.slider-thumbs{

display:none;

}

}

/*==========================================================
    TABLETTE
==========================================================*/

@media(max-width:992px){

.hero-slider{

height:auto;

min-height:760px;

padding-top:110px;

padding-bottom:90px;

}

.hero-slider .container{

padding-left:35px;

padding-right:35px;

}

.slide-content{

text-align:center;

margin:auto;

max-width:100%;

}

.slide-buttons{

justify-content:center;

flex-wrap:wrap;

}

.slide-title{

font-size:46px;

line-height:1.2;

}

.slide-subtitle{

font-size:22px;

}

.slide-text{

font-size:16px;

max-width:650px;

margin:auto;

}

.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev{

width:52px;

height:52px;

}

.hero-slider .swiper-button-next{

right:20px;

}

.hero-slider .swiper-button-prev{

left:20px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.hero-slider{

min-height:680px;

padding-top:100px;

padding-bottom:80px;

}

.hero-slider .container{

padding-left:25px;

padding-right:25px;

}

.slide-title{

font-size:36px;

}

.slide-subtitle{

font-size:18px;

}

.slide-text{

font-size:15px;

line-height:1.8;

}

.slide-buttons{

flex-direction:column;

width:100%;

gap:15px;

}

.slide-buttons .hero-btn{

width:100%;

justify-content:center;

}

.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev{

display:none;

}

.slide-light,
.slide-shape{

display:none;

}

.slider-counter{

bottom:18px;

right:18px;

font-size:14px;

}

}

/*==========================================================
    PETIT MOBILE
==========================================================*/

@media(max-width:576px){

.hero-slider{

min-height:620px;

}

.slide-title{

font-size:30px;

}

.slide-subtitle{

font-size:17px;

}

.slide-text{

font-size:14px;

}

.slide-badge{

font-size:11px;

padding:8px 18px;

}

.hero-slider .swiper-pagination{

bottom:20px;

}

}

/*==========================================================
    LANDSCAPE MOBILE
==========================================================*/

@media(max-height:600px){

.hero-slider{

min-height:620px;

}

.hero-scroll{

display:none;

}

}

/*==========================================================
    ACCESSIBILITÉ
==========================================================*/

.hero-slider a:focus-visible,
.hero-slider button:focus-visible,
.hero-slider .swiper-button-next:focus-visible,
.hero-slider .swiper-button-prev:focus-visible{

outline:3px solid var(--accent);

outline-offset:4px;

border-radius:8px;

}

/*==========================================================
    RÉDUCTION DES ANIMATIONS
==========================================================*/

@media(prefers-reduced-motion:reduce){

.hero-slider *,
.hero-slider::before,
.hero-slider::after{

animation:none !important;

transition:none !important;

transform:none !important;

scroll-behavior:auto;

}

}

/*==========================================================
    MODE IMPRESSION
==========================================================*/

@media print{

.hero-slider{

background:#ffffff !important;

color:#000000 !important;

height:auto;

}

.slide-image,
.slide-video,
.slide-overlay,
.slide-light,
.slide-shape,
.hero-scroll,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination{

display:none !important;

}

}

/*==========================================================
    FINALISATION
==========================================================*/

.hero-slider-ready{

position:relative;

overflow:hidden;

isolation:isolate;

}

.hero-slider-ready *{

box-sizing:border-box;

}

.hero-slider-ready img{

max-width:100%;

height:auto;

}

/*==========================================================
    FIN MODULE 3B
==========================================================*/
/*==========================================================
    MODULE 4.1.1
    ABOUT SECTION
    STRUCTURE
    BACKGROUND
    CONTAINER
    TITRE
    SOUS-TITRE
    DESCRIPTION
==========================================================*/

/*==========================================================
    SECTION ABOUT
==========================================================*/

.about{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:#ffffff;

    isolation:isolate;

}

/*==========================================================
    VARIANTE FOND CLAIR
==========================================================*/

.about-light{

    background:#f8fafc;

}

/*==========================================================
    VARIANTE FOND BLEU
==========================================================*/

.about-primary{

    background:linear-gradient(
        135deg,
        #003366,
        #00509e
    );

    color:#ffffff;

}

/*==========================================================
    MOTIF DÉCORATIF
==========================================================*/

.about::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(0,80,158,.05);

    filter:blur(8px);

    z-index:-1;

}

.about::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-220px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    filter:blur(10px);

    z-index:-1;

}

/*==========================================================
    CONTAINER
==========================================================*/

.about .container{

    position:relative;

    z-index:10;

}

/*==========================================================
    EN-TÊTE DE SECTION
==========================================================*/

.section-header{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

}

/*==========================================================
    BADGE
==========================================================*/

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    margin-bottom:20px;

    border-radius:50px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-badge i{

    color:var(--accent);

}

/*==========================================================
    TITRE
==========================================================*/

.section-title{

    font-size:46px;

    font-weight:800;

    line-height:1.2;

    color:var(--primary);

    margin-bottom:22px;

}

.section-title span{

    color:var(--accent);

}

/*==========================================================
    LIGNE DÉCORATIVE
==========================================================*/

.section-divider{

    width:90px;

    height:4px;

    margin:0 auto 28px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        var(--accent),
        #ffd86b
    );

}

/*==========================================================
    SOUS-TITRE
==========================================================*/

.section-subtitle{

    font-size:22px;

    font-weight:600;

    color:#495057;

    margin-bottom:22px;

    line-height:1.6;

}

/*==========================================================
    DESCRIPTION
==========================================================*/

.section-description{

    font-size:17px;

    line-height:1.9;

    color:#6c757d;

    max-width:760px;

    margin:0 auto;

}

/*==========================================================
    VERSION FOND SOMBRE
==========================================================*/

.about-primary .section-title,

.about-primary .section-subtitle,

.about-primary .section-description,

.about-primary .section-badge{

    color:#ffffff;

}

.about-primary .section-badge{

    background:rgba(255,255,255,.12);

}

.about-primary .section-divider{

    background:linear-gradient(
        90deg,
        #ffd86b,
        #ffffff
    );

}

/*==========================================================
    ANIMATIONS
==========================================================*/

.section-header{

    animation:fadeSection 1s ease;

}

.section-title{

    animation:fadeUp .9s ease;

}

.section-subtitle{

    animation:fadeUp 1.1s ease;

}

.section-description{

    animation:fadeUp 1.3s ease;

}

@keyframes fadeSection{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    RESPONSIVE TABLETTE
==========================================================*/

@media(max-width:992px){

.about{

padding:90px 0;

}

.section-title{

font-size:38px;

}

.section-subtitle{

font-size:20px;

}

}

/*==========================================================
    RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.about{

padding:70px 0;

}

.section-header{

margin-bottom:50px;

}

.section-title{

font-size:32px;

}

.section-subtitle{

font-size:18px;

}

.section-description{

font-size:15px;

line-height:1.8;

}

.section-badge{

font-size:12px;

padding:8px 18px;

}

}

/*==========================================================
    PETIT MOBILE
==========================================================*/

@media(max-width:480px){

.section-title{

font-size:28px;

}

.section-subtitle{

font-size:17px;

}

.section-description{

font-size:14px;

}

}

/*==========================================================
    FIN MODULE 4.1.1
==========================================================*/
/*==========================================================
    MODULE 4.1.2
    ABOUT SECTION
    TWO COLUMNS
    INSTITUTIONAL IMAGE
    FLOATING IMAGE
    BADGES
    GLASS EFFECT
    ANIMATIONS
==========================================================*/

/*==========================================================
    ABOUT GRID
==========================================================*/

.about-content{

    position:relative;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

/*==========================================================
    LEFT COLUMN
==========================================================*/

.about-left{

    position:relative;

    z-index:10;

}

.about-left>*{

    margin-bottom:28px;

}

.about-left>*:last-child{

    margin-bottom:0;

}

/*==========================================================
    RIGHT COLUMN
==========================================================*/

.about-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==========================================================
    IMAGE CONTAINER
==========================================================*/

.about-image-wrapper{

    position:relative;

    width:100%;

    max-width:580px;

}

/*==========================================================
    MAIN IMAGE
==========================================================*/

.about-image{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    box-shadow:

        0 35px 80px rgba(0,0,0,.15);

}

.about-image img{

    width:100%;

    height:auto;

    display:block;

    transition:

        transform .8s ease,

        filter .5s ease;

}

.about-image:hover img{

    transform:scale(1.08);

}

/*==========================================================
    IMAGE OVERLAY
==========================================================*/

.about-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,51,102,.30),

            transparent

        );

    z-index:2;

}

.about-image::after{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid rgba(255,255,255,.18);

    border-radius:30px;

    z-index:3;

}

/*==========================================================
    FLOATING IMAGE
==========================================================*/

.about-floating-image{

    position:absolute;

    bottom:-35px;

    left:-35px;

    width:220px;

    overflow:hidden;

    border-radius:22px;

    background:#ffffff;

    padding:8px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.18);

    animation:

        floatingImage 6s ease-in-out infinite;

}

.about-floating-image img{

    width:100%;

    display:block;

    border-radius:18px;

}

/*==========================================================
    EXPERIENCE BADGE
==========================================================*/

.about-badge{

    position:absolute;

    top:30px;

    right:-35px;

    min-width:180px;

    padding:18px 22px;

    border-radius:20px;

    background:

        rgba(255,255,255,.15);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.20);

    color:#ffffff;

    box-shadow:

        0 20px 45px rgba(0,0,0,.18);

    animation:

        floatingBadge 5s ease-in-out infinite;

}

.about-badge h3{

    margin:0;

    font-size:38px;

    color:var(--accent);

    font-weight:800;

}

.about-badge span{

    display:block;

    margin-top:6px;

    font-size:14px;

    line-height:1.5;

}

/*==========================================================
    GLASS CARD
==========================================================*/

.about-glass-card{

    position:absolute;

    right:-40px;

    bottom:45px;

    width:260px;

    padding:25px;

    border-radius:24px;

    background:

        rgba(255,255,255,.12);

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.20);

    box-shadow:

        0 25px 60px rgba(0,0,0,.15);

    animation:

        floatingCard 7s ease-in-out infinite;

}

.about-glass-card h5{

    color:#ffffff;

    font-size:20px;

    margin-bottom:12px;

}

.about-glass-card p{

    margin:0;

    color:rgba(255,255,255,.90);

    font-size:15px;

    line-height:1.7;

}

/*==========================================================
    DECORATIVE CIRCLE
==========================================================*/

.about-circle{

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.22),

            transparent

        );

    top:-40px;

    left:-60px;

    filter:blur(8px);

    animation:

        circleFloat 8s ease-in-out infinite;

}

/*==========================================================
    DECORATIVE DOTS
==========================================================*/

.about-dots{

    position:absolute;

    bottom:0;

    right:-60px;

    width:120px;

    height:120px;

    background-image:

        radial-gradient(

            rgba(0,80,158,.25) 2px,

            transparent 2px

        );

    background-size:16px 16px;

    opacity:.60;

}

/*==========================================================
    ANIMATIONS
==========================================================*/

@keyframes floatingImage{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes floatingBadge{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes floatingCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes circleFloat{

    0%,100%{

        transform:

            translateY(0)

            scale(1);

    }

    50%{

        transform:

            translateY(-18px)

            scale(1.08);

    }

}

/*==========================================================
    IMAGE REVEAL
==========================================================*/

.about-image{

    animation:

        revealImage 1.1s ease;

}

@keyframes revealImage{

    from{

        opacity:0;

        transform:

            translateX(60px)

            scale(.92);

    }

    to{

        opacity:1;

        transform:

            translateX(0)

            scale(1);

    }

}

/*==========================================================
    GPU
==========================================================*/

.about-image,
.about-floating-image,
.about-badge,
.about-glass-card{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    RESPONSIVE TABLETTE
==========================================================*/

@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

gap:50px;

}

.about-right{

order:-1;

}

.about-image-wrapper{

max-width:650px;

margin:auto;

}

.about-badge{

right:15px;

}

.about-glass-card{

display:none;

}

}

/*==========================================================
    RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.about-grid{

gap:40px;

}

.about-floating-image{

width:160px;

left:10px;

bottom:-20px;

}

.about-badge{

position:relative;

right:auto;

top:auto;

margin-top:25px;

display:inline-block;

}

.about-circle,

.about-dots{

display:none;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.about-floating-image{

display:none;

}

.about-image{

border-radius:20px;

}

.about-badge{

width:100%;

text-align:center;

}

.about-badge h3{

font-size:30px;

}

}

/*==========================================================
    END MODULE 4.1.2
==========================================================*/
/*==========================================================
    MODULE 4.2.1
    PREMIUM INSTITUTIONAL CARDS
    HOVER EFFECTS
    ICONS
    GLASS CARDS
==========================================================*/

/*==========================================================
    SECTION CONTAINER
==========================================================*/

.about-cards{

    position:relative;

    margin-top:70px;

}

.about-cards-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    align-items:stretch;

}

/*==========================================================
    PREMIUM CARD
==========================================================*/

.about-card{

    position:relative;

    overflow:hidden;

    padding:40px 35px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

        0 18px 45px rgba(0,0,0,.08);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease,

        background .45s ease;

    will-change:transform;

    isolation:isolate;

}

/*==========================================================
    TOP BORDER
==========================================================*/

.about-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

        linear-gradient(
            90deg,
            var(--accent),
            #ffd86b,
            #00509e
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

/*==========================================================
    BACKGROUND SHAPE
==========================================================*/

.about-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    top:-120px;

    right:-120px;

    background:

        radial-gradient(

            rgba(0,80,158,.08),

            transparent

        );

    transition:.45s;

    z-index:-1;

}

/*==========================================================
    ICON CONTAINER
==========================================================*/

.about-card-icon{

    width:85px;

    height:85px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #00509e

        );

    color:#ffffff;

    font-size:34px;

    box-shadow:

        0 15px 35px rgba(0,80,158,.28);

    transition:.45s;

}

/*==========================================================
    CARD TITLE
==========================================================*/

.about-card-title{

    font-size:24px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:18px;

    line-height:1.3;

}

/*==========================================================
    CARD TEXT
==========================================================*/

.about-card-text{

    font-size:16px;

    color:#6c757d;

    line-height:1.9;

    margin-bottom:25px;

}

/*==========================================================
    CARD LINK
==========================================================*/

.about-card-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.about-card-link i{

    transition:.35s;

}

.about-card-link:hover{

    color:var(--accent);

}

.about-card-link:hover i{

    transform:translateX(6px);

}

/*==========================================================
    PREMIUM HOVER
==========================================================*/

.about-card:hover{

    transform:

        translateY(-15px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.16);

    border-color:

        rgba(212,175,55,.30);

}

.about-card:hover::before{

    transform:scaleX(1);

}

.about-card:hover::after{

    transform:scale(1.2);

}

.about-card:hover .about-card-icon{

    transform:

        rotate(-8deg)

        scale(1.08);

    background:

        linear-gradient(

            135deg,

            var(--accent),

            #ffd86b

        );

    color:#ffffff;

}

.about-card:hover .about-card-title{

    color:var(--accent);

}

/*==========================================================
    GLASS CARD
==========================================================*/

.about-card-glass{

    background:

        rgba(255,255,255,.15);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.20);

    color:#ffffff;

}

.about-card-glass .about-card-title{

    color:#ffffff;

}

.about-card-glass .about-card-text{

    color:rgba(255,255,255,.92);

}

.about-card-glass .about-card-link{

    color:#ffffff;

}

.about-card-glass:hover{

    background:

        rgba(255,255,255,.22);

}

/*==========================================================
    FEATURE CARD
==========================================================*/

.about-feature-card{

    text-align:center;

}

.about-feature-card .about-card-icon{

    margin-left:auto;

    margin-right:auto;

}

/*==========================================================
    ICON COLORS
==========================================================*/

.icon-blue{

    background:

        linear-gradient(

            135deg,

            #00509e,

            #3b82f6

        );

}

.icon-gold{

    background:

        linear-gradient(

            135deg,

            #c49a1a,

            #ffd86b

        );

}

.icon-green{

    background:

        linear-gradient(

            135deg,

            #0d9488,

            #14b8a6

        );

}

.icon-red{

    background:

        linear-gradient(

            135deg,

            #c62828,

            #ef4444

        );

}

/*==========================================================
    SMALL BADGE
==========================================================*/

.about-card-badge{

    position:absolute;

    top:18px;

    right:18px;

    padding:8px 14px;

    border-radius:30px;

    background:var(--accent);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

}

/*==========================================================
    RIPPLE EFFECT
==========================================================*/

.about-card-ripple{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:inherit;

}

.about-card-ripple::before{

    content:"";

    position:absolute;

    width:15px;

    height:15px;

    border-radius:50%;

    background:

        rgba(255,255,255,.25);

    transform:scale(0);

    transition:.6s;

}

.about-card:hover .about-card-ripple::before{

    transform:scale(35);

    opacity:0;

}

/*==========================================================
    FADE ANIMATION
==========================================================*/

.about-card{

    opacity:0;

    animation:

        cardFadeUp .9s ease forwards;

}

.about-card:nth-child(1){

    animation-delay:.2s;

}

.about-card:nth-child(2){

    animation-delay:.4s;

}

.about-card:nth-child(3){

    animation-delay:.6s;

}

.about-card:nth-child(4){

    animation-delay:.8s;

}

.about-card:nth-child(5){

    animation-delay:1s;

}

.about-card:nth-child(6){

    animation-delay:1.2s;

}

@keyframes cardFadeUp{

    from{

        opacity:0;

        transform:

            translateY(50px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/*==========================================================
    GPU OPTIMIZATION
==========================================================*/

.about-card,
.about-card-icon,
.about-card::before,
.about-card::after{

    transform:translateZ(0);

    will-change:

        transform,

        opacity;

    backface-visibility:hidden;

}

/*==========================================================
    RESPONSIVE TABLET
==========================================================*/

@media(max-width:992px){

.about-cards-grid{

grid-template-columns:

repeat(2,1fr);

gap:25px;

}

}

/*==========================================================
    RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.about-cards-grid{

grid-template-columns:1fr;

}

.about-card{

padding:30px;

}

.about-card-title{

font-size:22px;

}

.about-card-text{

font-size:15px;

}

.about-card-icon{

width:75px;

height:75px;

font-size:30px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.about-card{

padding:25px;

border-radius:22px;

}

.about-card-icon{

width:65px;

height:65px;

font-size:26px;

}

.about-card-title{

font-size:20px;

}

.about-card-text{

font-size:14px;

}

}

/*==========================================================
    END MODULE 4.2.1
==========================================================*/
/*==========================================================
    MODULE 4.2.2
    MISSION
    VISION
    VALEURS
    OBJECTIFS
    RESPONSIVE
==========================================================*/

/*==========================================================
    GRID
==========================================================*/

.institution-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:60px;

}

/*==========================================================
    CARD BASE
==========================================================*/

.institution-card{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    border-radius:28px;

    padding:40px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 18px 45px rgba(0,0,0,.08);

    transition:all .45s ease;

    isolation:isolate;

}

.institution-card:hover{

    transform:

        translateY(-14px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.16);

}

/*==========================================================
    TOP BORDER
==========================================================*/

.institution-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b,

            var(--primary)

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.institution-card:hover::before{

    transform:scaleX(1);

}

/*==========================================================
    BACKGROUND SHAPE
==========================================================*/

.institution-card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(0,80,158,.08),

            transparent

        );

    transition:.45s;

    z-index:-1;

}

.institution-card:hover::after{

    transform:scale(1.2);

}

/*==========================================================
    ICON
==========================================================*/

.institution-icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    font-size:36px;

    color:#ffffff;

    margin-bottom:28px;

    transition:.45s;

}

.institution-card:hover .institution-icon{

    transform:

        rotate(-8deg)

        scale(1.08);

}

/*==========================================================
    MISSION
==========================================================*/

.mission-card .institution-icon{

    background:

        linear-gradient(

            135deg,

            #00509e,

            #3b82f6

        );

}

.mission-card{

    border-left:5px solid #00509e;

}

/*==========================================================
    VISION
==========================================================*/

.vision-card .institution-icon{

    background:

        linear-gradient(

            135deg,

            #d4af37,

            #ffd86b

        );

}

.vision-card{

    border-left:5px solid #d4af37;

}

/*==========================================================
    VALEURS
==========================================================*/

.values-card .institution-icon{

    background:

        linear-gradient(

            135deg,

            #0f766e,

            #14b8a6

        );

}

.values-card{

    border-left:5px solid #0f766e;

}

/*==========================================================
    OBJECTIFS
==========================================================*/

.objectives-card .institution-icon{

    background:

        linear-gradient(

            135deg,

            #c62828,

            #ef4444

        );

}

.objectives-card{

    border-left:5px solid #c62828;

}

/*==========================================================
    TITLES
==========================================================*/

.institution-title{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:20px;

}

.institution-card:hover .institution-title{

    color:var(--accent);

}

/*==========================================================
    TEXT
==========================================================*/

.institution-text{

    font-size:16px;

    line-height:1.9;

    color:#6c757d;

}

/*==========================================================
    LIST
==========================================================*/

.institution-list{

    margin-top:25px;

    padding:0;

    list-style:none;

}

.institution-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:15px;

    line-height:1.8;

    color:#495057;

}

.institution-list i{

    color:var(--accent);

    margin-top:4px;

}

/*==========================================================
    GLASS VERSION
==========================================================*/

.institution-card.glass{

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.18);

}

.institution-card.glass .institution-title{

    color:#ffffff;

}

.institution-card.glass .institution-text,

.institution-card.glass li{

    color:rgba(255,255,255,.90);

}

/*==========================================================
    BUTTON
==========================================================*/

.institution-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:28px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.institution-btn i{

    transition:.35s;

}

.institution-btn:hover{

    color:var(--accent);

}

.institution-btn:hover i{

    transform:translateX(6px);

}

/*==========================================================
    BADGE
==========================================================*/

.institution-badge{

    position:absolute;

    top:22px;

    right:22px;

    padding:8px 14px;

    border-radius:25px;

    background:var(--accent);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

}

/*==========================================================
    ANIMATION
==========================================================*/

.institution-card{

    opacity:0;

    animation:

        institutionFade .9s ease forwards;

}

.institution-card:nth-child(1){

    animation-delay:.2s;

}

.institution-card:nth-child(2){

    animation-delay:.45s;

}

.institution-card:nth-child(3){

    animation-delay:.7s;

}

.institution-card:nth-child(4){

    animation-delay:.95s;

}

@keyframes institutionFade{

    from{

        opacity:0;

        transform:

            translateY(45px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/*==========================================================
    GPU
==========================================================*/

.institution-card,

.institution-icon{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.institution-grid{

grid-template-columns:

repeat(2,1fr);

gap:25px;

}

.institution-card{

padding:32px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.institution-grid{

grid-template-columns:1fr;

}

.institution-card{

padding:30px;

}

.institution-title{

font-size:24px;

}

.institution-text{

font-size:15px;

}

.institution-icon{

width:75px;

height:75px;

font-size:30px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.institution-card{

padding:25px;

border-radius:22px;

}

.institution-title{

font-size:22px;

}

.institution-text{

font-size:14px;

}

.institution-icon{

width:65px;

height:65px;

font-size:26px;

}

.institution-list li{

font-size:14px;

}

}

/*==========================================================
    END MODULE 4.2.2
==========================================================*/
/*==========================================================
    MODULE 4.3.1
    KPI SECTION
    BACKGROUND
    STATISTICS CARDS
==========================================================*/

/*==========================================================
    KPI SECTION
==========================================================*/

.kpi-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #002147,
            #003366,
            #00509e
        );

    color:#ffffff;

    isolation:isolate;

}

/*==========================================================
    BACKGROUND OVERLAY
==========================================================*/

.kpi-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(0,0,0,.20),

            rgba(0,0,0,.45)

        );

    z-index:1;

}

.kpi-section::after{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(212,175,55,.18),

            transparent

        );

    filter:blur(15px);

    z-index:1;

}

/*==========================================================
    CONTAINER
==========================================================*/

.kpi-section .container{

    position:relative;

    z-index:10;

}

/*==========================================================
    KPI GRID
==========================================================*/

.kpi-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:35px;

    margin-top:70px;

}

/*==========================================================
    KPI CARD
==========================================================*/

.kpi-card{

    position:relative;

    overflow:hidden;

    padding:45px 35px;

    text-align:center;

    border-radius:30px;

    background:

        rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.18);

    box-shadow:

        0 25px 60px rgba(0,0,0,.18);

    transition:

        all .45s ease;

    isolation:isolate;

}

/*==========================================================
    BACKGROUND EFFECT
==========================================================*/

.kpi-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    top:-120px;

    right:-120px;

    background:

        radial-gradient(

            rgba(255,255,255,.12),

            transparent

        );

    transition:.45s;

    z-index:-1;

}

.kpi-card:hover::before{

    transform:scale(1.3);

}

/*==========================================================
    TOP BORDER
==========================================================*/

.kpi-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b,

            #ffffff

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.kpi-card:hover::after{

    transform:scaleX(1);

}

/*==========================================================
    KPI ICON
==========================================================*/

.kpi-icon{

    width:95px;

    height:95px;

    margin:0 auto 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--accent),

            #ffd86b

        );

    color:#ffffff;

    font-size:38px;

    box-shadow:

        0 20px 40px rgba(212,175,55,.35);

    transition:.45s;

}

.kpi-card:hover .kpi-icon{

    transform:

        rotate(-8deg)

        scale(1.08);

}

/*==========================================================
    KPI VALUE
==========================================================*/

.kpi-value{

    font-size:60px;

    font-weight:800;

    color:#ffffff;

    line-height:1;

    margin-bottom:15px;

}

.kpi-value span{

    color:var(--accent);

}

/*==========================================================
    KPI TITLE
==========================================================*/

.kpi-title{

    font-size:22px;

    font-weight:700;

    margin-bottom:15px;

    color:#ffffff;

}

/*==========================================================
    KPI DESCRIPTION
==========================================================*/

.kpi-description{

    font-size:15px;

    line-height:1.8;

    color:rgba(255,255,255,.90);

}

/*==========================================================
    HOVER
==========================================================*/

.kpi-card:hover{

    transform:

        translateY(-15px);

    box-shadow:

        0 35px 75px rgba(0,0,0,.28);

}

/*==========================================================
    FLOATING ANIMATION
==========================================================*/

.kpi-card{

    animation:

        kpiFloat 6s ease-in-out infinite;

}

.kpi-card:nth-child(2){

    animation-delay:.5s;

}

.kpi-card:nth-child(3){

    animation-delay:1s;

}

.kpi-card:nth-child(4){

    animation-delay:1.5s;

}

@keyframes kpiFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*==========================================================
    APPEAR ANIMATION
==========================================================*/

.kpi-card{

    opacity:0;

    animation:

        kpiAppear .9s ease forwards;

}

.kpi-card:nth-child(1){

    animation-delay:.2s;

}

.kpi-card:nth-child(2){

    animation-delay:.4s;

}

.kpi-card:nth-child(3){

    animation-delay:.6s;

}

.kpi-card:nth-child(4){

    animation-delay:.8s;

}

.kpi-card:nth-child(5){

    animation-delay:1s;

}

.kpi-card:nth-child(6){

    animation-delay:1.2s;

}

@keyframes kpiAppear{

    from{

        opacity:0;

        transform:

            translateY(60px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/*==========================================================
    GPU
==========================================================*/

.kpi-card,
.kpi-icon{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.kpi-grid{

grid-template-columns:

repeat(2,1fr);

gap:25px;

}

.kpi-value{

font-size:52px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.kpi-section{

padding:90px 0;

}

.kpi-grid{

grid-template-columns:1fr;

}

.kpi-card{

padding:35px 25px;

}

.kpi-icon{

width:80px;

height:80px;

font-size:32px;

}

.kpi-value{

font-size:44px;

}

.kpi-title{

font-size:20px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.kpi-card{

border-radius:22px;

padding:30px 20px;

}

.kpi-value{

font-size:36px;

}

.kpi-title{

font-size:18px;

}

.kpi-description{

font-size:14px;

}

}

/*==========================================================
    END MODULE 4.3.1
==========================================================*/
/*==========================================================
    MODULE 4.3.2
    KPI ICONS
    COUNTERS
    PROGRESS BARS
    HOVER EFFECTS
    RESPONSIVE
==========================================================*/

/*==========================================================
    KPI ICON VARIANTS
==========================================================*/

.kpi-icon-primary{

    background:linear-gradient(
        135deg,
        #00509e,
        #3b82f6
    );

}

.kpi-icon-success{

    background:linear-gradient(
        135deg,
        #0f766e,
        #14b8a6
    );

}

.kpi-icon-warning{

    background:linear-gradient(
        135deg,
        #d4af37,
        #ffd86b
    );

}

.kpi-icon-danger{

    background:linear-gradient(
        135deg,
        #c62828,
        #ef4444
    );

}

.kpi-icon-purple{

    background:linear-gradient(
        135deg,
        #6d28d9,
        #8b5cf6
    );

}

.kpi-icon-dark{

    background:linear-gradient(
        135deg,
        #1f2937,
        #374151
    );

}

/*==========================================================
    KPI COUNTER
==========================================================*/

.kpi-counter{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    margin-bottom:15px;

}

.kpi-number{

    font-size:64px;

    font-weight:800;

    line-height:1;

    color:#ffffff;

    letter-spacing:-2px;

}

.kpi-suffix{

    margin-left:8px;

    margin-bottom:8px;

    font-size:28px;

    font-weight:700;

    color:var(--accent);

}

.kpi-prefix{

    margin-right:6px;

    margin-bottom:8px;

    font-size:28px;

    font-weight:700;

    color:var(--accent);

}

/*==========================================================
    MINI LABEL
==========================================================*/

.kpi-label{

    display:inline-block;

    padding:8px 16px;

    margin-top:15px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    color:#ffffff;

    font-size:13px;

    font-weight:600;

}

/*==========================================================
    PROGRESS CONTAINER
==========================================================*/

.kpi-progress{

    width:100%;

    height:10px;

    margin-top:28px;

    overflow:hidden;

    border-radius:30px;

    background:rgba(255,255,255,.12);

}

/*==========================================================
    PROGRESS BAR
==========================================================*/

.kpi-progress-bar{

    position:relative;

    width:0;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--accent),
        #ffd86b
    );

    transition:width 2s ease;

}

/*==========================================================
    SHINE EFFECT
==========================================================*/

.kpi-progress-bar::after{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:35%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.55),

            transparent

        );

    animation:

        progressShine 2.5s infinite;

}

@keyframes progressShine{

    to{

        left:140%;

    }

}

/*==========================================================
    PERCENTAGE
==========================================================*/

.kpi-progress-value{

    margin-top:10px;

    text-align:right;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

}

/*==========================================================
    HOVER EFFECT
==========================================================*/

.kpi-card:hover .kpi-progress-bar{

    filter:brightness(1.15);

}

.kpi-card:hover .kpi-number{

    color:var(--accent);

}

.kpi-card:hover .kpi-label{

    background:rgba(255,255,255,.18);

}

.kpi-card:hover .kpi-progress{

    background:rgba(255,255,255,.18);

}

/*==========================================================
    KPI FOOTER
==========================================================*/

.kpi-footer{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:rgba(255,255,255,.90);

    font-size:14px;

}

.kpi-footer i{

    color:var(--accent);

}

/*==========================================================
    TREND
==========================================================*/

.kpi-trend-up{

    color:#22c55e;

    font-weight:700;

}

.kpi-trend-down{

    color:#ef4444;

    font-weight:700;

}

.kpi-trend-neutral{

    color:#fbbf24;

    font-weight:700;

}

/*==========================================================
    HOVER ICON
==========================================================*/

.kpi-card:hover .kpi-icon{

    transform:
        translateY(-8px)
        rotate(-8deg)
        scale(1.10);

    box-shadow:

        0 30px 60px rgba(212,175,55,.35);

}

/*==========================================================
    FLOAT ANIMATION
==========================================================*/

.kpi-icon{

    animation:

        kpiIconFloat 5s ease-in-out infinite;

}

@keyframes kpiIconFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==========================================================
    COUNTER ANIMATION
==========================================================*/

.kpi-counter{

    animation:

        counterAppear .9s ease;

}

@keyframes counterAppear{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    GPU OPTIMIZATION
==========================================================*/

.kpi-progress-bar,
.kpi-icon,
.kpi-number{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.kpi-number{

font-size:52px;

}

.kpi-suffix,
.kpi-prefix{

font-size:22px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.kpi-number{

font-size:42px;

}

.kpi-suffix,
.kpi-prefix{

font-size:18px;

}

.kpi-progress{

height:8px;

}

.kpi-footer{

flex-direction:column;

gap:8px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.kpi-number{

font-size:34px;

}

.kpi-label{

font-size:12px;

}

.kpi-progress{

height:7px;

}

}

/*==========================================================
    END MODULE 4.3.2
==========================================================*/
/*==========================================================
    MODULE 4.4.1
    DIRECTOR GENERAL
    PREMIUM CARD
    PHOTO
    NAME
    POSITION
    QUOTATION
==========================================================*/

/*==========================================================
    DG SECTION
==========================================================*/

.director-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #ffffff
        );

}

.director-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(0,80,158,.08),
            transparent
        );

    filter:blur(20px);

}

.director-section::after{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(212,175,55,.12),
            transparent
        );

    filter:blur(18px);

}

/*==========================================================
    CONTAINER
==========================================================*/

.director-container{

    position:relative;

    z-index:5;

}

/*==========================================================
    DG CARD
==========================================================*/

.director-card{

    position:relative;

    display:grid;

    grid-template-columns:380px 1fr;

    gap:70px;

    align-items:center;

    overflow:hidden;

    padding:60px;

    border-radius:35px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

        0 35px 90px rgba(0,0,0,.10);

    transition:.45s;

}

.director-card:hover{

    transform:

        translateY(-12px);

    box-shadow:

        0 45px 100px rgba(0,0,0,.15);

}

/*==========================================================
    PHOTO
==========================================================*/

.director-photo{

    position:relative;

    overflow:hidden;

    border-radius:30px;

}

.director-photo img{

    width:100%;

    display:block;

    transition:

        transform .8s ease,

        filter .5s ease;

}

.director-card:hover .director-photo img{

    transform:scale(1.08);

}

/*==========================================================
    PHOTO BORDER
==========================================================*/

.director-photo::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    border:3px solid rgba(255,255,255,.20);

    z-index:3;

}

.director-photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.20),

            transparent

        );

}

/*==========================================================
    EXPERIENCE BADGE
==========================================================*/

.director-experience{

    position:absolute;

    right:-20px;

    bottom:25px;

    width:140px;

    height:140px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--accent),

            #ffd86b

        );

    color:#ffffff;

    box-shadow:

        0 20px 45px rgba(212,175,55,.35);

}

.director-experience h2{

    margin:0;

    font-size:34px;

    font-weight:800;

}

.director-experience span{

    font-size:13px;

    text-align:center;

    line-height:1.4;

}

/*==========================================================
    CONTENT
==========================================================*/

.director-content{

    position:relative;

}

/*==========================================================
    MINI TITLE
==========================================================*/

.director-label{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:22px;

}

/*==========================================================
    NAME
==========================================================*/

.director-name{

    font-size:46px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:12px;

}

/*==========================================================
    POSITION
==========================================================*/

.director-position{

    font-size:22px;

    font-weight:600;

    color:var(--accent);

    margin-bottom:35px;

}

/*==========================================================
    QUOTATION
==========================================================*/

.director-quote{

    position:relative;

    padding-left:40px;

    margin-bottom:35px;

    font-size:18px;

    line-height:2;

    color:#555;

    font-style:italic;

}

.director-quote::before{

    content:"\201C";

    position:absolute;

    left:0;

    top:-10px;

    font-size:70px;

    color:var(--accent);

    font-family:Georgia, serif;

    opacity:.35;

}

/*==========================================================
    HIGHLIGHT
==========================================================*/

.director-highlight{

    padding:25px;

    border-left:5px solid var(--accent);

    background:#f8fafc;

    border-radius:0 18px 18px 0;

    color:#495057;

    line-height:1.9;

}

/*==========================================================
    DECORATION
==========================================================*/

.director-decoration{

    position:absolute;

    right:20px;

    top:20px;

    width:140px;

    height:140px;

    border-radius:50%;

    border:2px dashed rgba(212,175,55,.30);

    animation:

        directorRotate 20s linear infinite;

}

@keyframes directorRotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==========================================================
    APPEAR
==========================================================*/

.director-photo{

    animation:

        directorPhoto .9s ease;

}

.director-content{

    animation:

        directorContent 1s ease;

}

@keyframes directorPhoto{

    from{

        opacity:0;

        transform:

            translateX(-60px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

@keyframes directorContent{

    from{

        opacity:0;

        transform:

            translateX(60px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

/*==========================================================
    GPU
==========================================================*/

.director-card,
.director-photo,
.director-content,
.director-decoration{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.director-card{

grid-template-columns:1fr;

gap:45px;

padding:45px;

text-align:center;

}

.director-photo{

max-width:420px;

margin:auto;

}

.director-quote{

padding-left:0;

}

.director-quote::before{

position:relative;

display:block;

left:auto;

top:auto;

margin-bottom:15px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.director-section{

padding:90px 0;

}

.director-card{

padding:35px;

}

.director-name{

font-size:34px;

}

.director-position{

font-size:20px;

}

.director-quote{

font-size:16px;

line-height:1.8;

}

.director-highlight{

padding:20px;

}

.director-experience{

width:110px;

height:110px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.director-card{

padding:25px;

border-radius:25px;

}

.director-name{

font-size:28px;

}

.director-position{

font-size:18px;

}

.director-label{

font-size:12px;

}

.director-quote{

font-size:15px;

}

.director-highlight{

font-size:14px;

}

.director-experience{

display:none;

}

}

/*==========================================================
    END MODULE 4.4.1
==========================================================*/
/*==========================================================
    MODULE 4.4.2
    DIRECTOR GENERAL
    SIGNATURE
    SOCIAL MEDIA
    ACTION BUTTONS
    RESPONSIVE
    FINALIZATION
==========================================================*/

/*==========================================================
    SIGNATURE AREA
==========================================================*/

.director-signature{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:30px;

    margin-top:45px;

    padding-top:35px;

    border-top:1px solid rgba(0,0,0,.08);

}

/*==========================================================
    SIGNATURE IMAGE
==========================================================*/

.signature{

    display:flex;

    align-items:center;

    gap:18px;

}

.signature img{

    max-width:180px;

    height:auto;

    opacity:.95;

    transition:all .35s ease;

}

.signature img:hover{

    transform:scale(1.05);

}

.signature-info h5{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:var(--primary);

}

.signature-info span{

    display:block;

    margin-top:6px;

    font-size:15px;

    color:#6c757d;

}

/*==========================================================
    SOCIAL MEDIA
==========================================================*/

.director-social{

    display:flex;

    align-items:center;

    gap:15px;

}

.director-social a{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

    font-size:20px;

    text-decoration:none;

    box-shadow:

        0 12px 30px rgba(0,0,0,.08);

    transition:all .35s ease;

}

.director-social a:hover{

    transform:

        translateY(-8px)

        scale(1.08);

    color:#ffffff;

}

.director-social .facebook:hover{

    background:#1877f2;

}

.director-social .linkedin:hover{

    background:#0a66c2;

}

.director-social .youtube:hover{

    background:#ff0000;

}

.director-social .twitter:hover{

    background:#1da1f2;

}

.director-social .instagram:hover{

    background:linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
    );

}

/*==========================================================
    ACTION BUTTONS
==========================================================*/

.director-actions{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}

.director-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    transition:all .35s ease;

    cursor:pointer;

}

.director-btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        #00509e
    );

    color:#ffffff;

    box-shadow:

        0 18px 40px rgba(0,80,158,.25);

}

.director-btn-primary:hover{

    transform:

        translateY(-6px);

    box-shadow:

        0 28px 55px rgba(0,80,158,.35);

}

.director-btn-outline{

    background:#ffffff;

    border:2px solid var(--primary);

    color:var(--primary);

}

.director-btn-outline:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-6px);

}

/*==========================================================
    CONTACT CARD
==========================================================*/

.director-contact{

    margin-top:45px;

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 24px;

    border-radius:18px;

    background:#f8fafc;

    transition:all .35s ease;

}

.contact-item i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#ffffff;

    font-size:18px;

}

.contact-item:hover{

    transform:translateY(-6px);

    box-shadow:

        0 18px 40px rgba(0,0,0,.10);

}

/*==========================================================
    QUOTE DECORATION
==========================================================*/

.director-quote-mark{

    position:absolute;

    top:20px;

    right:30px;

    font-size:120px;

    font-family:Georgia, serif;

    color:rgba(212,175,55,.08);

    pointer-events:none;

}

/*==========================================================
    FLOATING ANIMATION
==========================================================*/

.director-signature{

    animation:

        signatureAppear 1s ease;

}

@keyframes signatureAppear{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    HOVER EFFECTS
==========================================================*/

.director-card:hover .signature img{

    transform:scale(1.03);

}

.director-card:hover .director-name{

    color:var(--accent);

}

.director-card:hover .director-position{

    letter-spacing:.5px;

}

/*==========================================================
    GPU OPTIMIZATION
==========================================================*/

.director-actions,
.director-social,
.signature,
.contact-item{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    RESPONSIVE TABLET
==========================================================*/

@media(max-width:992px){

.director-signature{

flex-direction:column;

align-items:center;

text-align:center;

}

.director-actions{

justify-content:center;

}

.director-contact{

justify-content:center;

}

}

/*==========================================================
    RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.director-social{

justify-content:center;

flex-wrap:wrap;

}

.director-actions{

flex-direction:column;

width:100%;

}

.director-btn{

width:100%;

}

.contact-item{

width:100%;

}

.signature{

flex-direction:column;

text-align:center;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.director-social a{

width:46px;

height:46px;

font-size:18px;

}

.signature img{

max-width:140px;

}

.signature-info h5{

font-size:20px;

}

.signature-info span{

font-size:14px;

}

.director-btn{

padding:14px 22px;

font-size:15px;

}

.contact-item{

padding:15px 18px;

}

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

.director-btn:focus-visible,
.director-social a:focus-visible{

outline:3px solid var(--accent);

outline-offset:4px;

}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.director-signature,
.director-actions,
.director-social,
.contact-item,
.signature img{

animation:none !important;

transition:none !important;

transform:none !important;

}

}

/*==========================================================
    END MODULE 4.4.2
==========================================================*/
/*==========================================================
    MODULE 5.1.1
    FORMATIONS SECTION
    BACKGROUND
    TITRE
    DESCRIPTION
    GRID
==========================================================*/

/*==========================================================
    FORMATIONS SECTION
==========================================================*/

.formations{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    isolation:isolate;

}

/*==========================================================
    DECORATIVE SHAPES
==========================================================*/

.formations::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(0,80,158,.06),

            transparent

        );

    filter:blur(10px);

    z-index:0;

}

.formations::after{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(212,175,55,.10),

            transparent

        );

    filter:blur(8px);

    z-index:0;

}

/*==========================================================
    CONTAINER
==========================================================*/

.formations .container{

    position:relative;

    z-index:5;

}

/*==========================================================
    SECTION HEADER
==========================================================*/

.formations-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

/*==========================================================
    BADGE
==========================================================*/

.formations-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    margin-bottom:25px;

    border-radius:40px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.formations-badge i{

    color:var(--accent);

}

/*==========================================================
    TITLE
==========================================================*/

.formations-title{

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    color:var(--primary);

    margin-bottom:22px;

}

.formations-title span{

    color:var(--accent);

}

/*==========================================================
    DECORATIVE LINE
==========================================================*/

.formations-divider{

    width:100px;

    height:4px;

    margin:0 auto 28px;

    border-radius:30px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b,

            var(--primary)

        );

}

/*==========================================================
    SUBTITLE
==========================================================*/

.formations-subtitle{

    font-size:22px;

    font-weight:600;

    color:#495057;

    margin-bottom:18px;

}

/*==========================================================
    DESCRIPTION
==========================================================*/

.formations-description{

    max-width:760px;

    margin:auto;

    font-size:17px;

    line-height:1.9;

    color:#6c757d;

}

/*==========================================================
    FORMATIONS GRID
==========================================================*/

.formations-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    align-items:stretch;

    margin-top:70px;

}

/*==========================================================
    GRID VARIANTS
==========================================================*/

.formations-grid-2{

    grid-template-columns:

        repeat(2,1fr);

}

.formations-grid-3{

    grid-template-columns:

        repeat(3,1fr);

}

.formations-grid-4{

    grid-template-columns:

        repeat(4,1fr);

}

/*==========================================================
    SECTION FOOTER
==========================================================*/

.formations-footer{

    margin-top:70px;

    text-align:center;

}

/*==========================================================
    DECORATIVE BACKGROUND
==========================================================*/

.formations-pattern{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.05;

    background-image:

        radial-gradient(

            var(--primary) 1px,

            transparent 1px

        );

    background-size:24px 24px;

    z-index:0;

}

/*==========================================================
    LIGHT EFFECT
==========================================================*/

.formations-light{

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    filter:blur(100px);

    opacity:.25;

    pointer-events:none;

}

.formations-light.left{

    top:10%;

    left:-100px;

    background:#00509e;

}

.formations-light.right{

    bottom:5%;

    right:-120px;

    background:#d4af37;

}

/*==========================================================
    APPEAR ANIMATION
==========================================================*/

.formations-header{

    animation:

        formationsHeader 1s ease;

}

@keyframes formationsHeader{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.formations-grid{

    animation:

        formationsGrid .9s ease;

}

@keyframes formationsGrid{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    GPU OPTIMIZATION
==========================================================*/

.formations,
.formations-header,
.formations-grid{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.formations{

padding:100px 0;

}

.formations-title{

font-size:40px;

}

.formations-subtitle{

font-size:20px;

}

.formations-grid-4{

grid-template-columns:

repeat(2,1fr);

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.formations{

padding:80px 0;

}

.formations-header{

margin-bottom:50px;

}

.formations-title{

font-size:34px;

}

.formations-subtitle{

font-size:18px;

}

.formations-description{

font-size:15px;

line-height:1.8;

}

.formations-grid,

.formations-grid-2,

.formations-grid-3,

.formations-grid-4{

grid-template-columns:1fr;

gap:25px;

}

.formations-light{

display:none;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.formations-title{

font-size:28px;

}

.formations-subtitle{

font-size:17px;

}

.formations-description{

font-size:14px;

}

.formations-badge{

font-size:12px;

padding:8px 18px;

}

}

/*==========================================================
    END MODULE 5.1.1
==========================================================*/
/*==========================================================
    MODULE 5.1.2
    PREMIUM FORMATION CARDS
    ICONS
    BADGES
    DURATION
    HOVER EFFECTS
    GLASS EFFECT
==========================================================*/

/*==========================================================
    FORMATION CARD
==========================================================*/

.formation-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

    isolation:isolate;

}

/*==========================================================
    TOP BORDER
==========================================================*/

.formation-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b,

            var(--primary)

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.formation-card:hover::before{

    transform:scaleX(1);

}

/*==========================================================
    DECORATIVE CIRCLE
==========================================================*/

.formation-card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(0,80,158,.08),

            transparent

        );

    transition:.45s;

    z-index:-1;

}

.formation-card:hover::after{

    transform:scale(1.2);

}

/*==========================================================
    CARD HEADER
==========================================================*/

.formation-card-header{

    position:relative;

    padding:35px 35px 25px;

}

/*==========================================================
    ICON
==========================================================*/

.formation-icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    font-size:36px;

    color:#ffffff;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #00509e

        );

    box-shadow:

        0 20px 40px rgba(0,80,158,.25);

    transition:.45s;

}

.formation-card:hover .formation-icon{

    transform:

        rotate(-8deg)

        scale(1.10);

}

/*==========================================================
    BADGE
==========================================================*/

.formation-badge{

    position:absolute;

    top:30px;

    right:30px;

    padding:8px 18px;

    border-radius:40px;

    background:var(--accent);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    box-shadow:

        0 10px 25px rgba(212,175,55,.30);

}

/*==========================================================
    BODY
==========================================================*/

.formation-card-body{

    flex:1;

    padding:0 35px 35px;

}

.formation-title{

    font-size:26px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:18px;

    transition:.35s;

}

.formation-card:hover .formation-title{

    color:var(--accent);

}

.formation-description{

    font-size:16px;

    line-height:1.9;

    color:#6c757d;

    margin-bottom:28px;

}

/*==========================================================
    DURATION
==========================================================*/

.formation-duration{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-weight:600;

    color:#495057;

}

.formation-duration i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,80,158,.08);

    color:var(--primary);

}

/*==========================================================
    INFO LIST
==========================================================*/

.formation-list{

    list-style:none;

    margin:0;

    padding:0;

}

.formation-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

    color:#495057;

    line-height:1.8;

}

.formation-list li i{

    color:var(--accent);

    margin-top:4px;

}

/*==========================================================
    FOOTER
==========================================================*/

.formation-card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 35px;

    border-top:1px solid rgba(0,0,0,.06);

}

.formation-price{

    font-size:22px;

    font-weight:800;

    color:var(--primary);

}

.formation-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--primary);

    font-weight:700;

    transition:.35s;

}

.formation-link:hover{

    color:var(--accent);

}

.formation-link:hover i{

    transform:translateX(6px);

}

/*==========================================================
    GLASS VERSION
==========================================================*/

.formation-card.glass{

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.18);

}

.formation-card.glass .formation-title{

    color:#ffffff;

}

.formation-card.glass .formation-description,

.formation-card.glass .formation-duration,

.formation-card.glass .formation-list li,

.formation-card.glass .formation-link{

    color:rgba(255,255,255,.92);

}

.formation-card.glass .formation-duration i{

    background:rgba(255,255,255,.15);

    color:#ffffff;

}

/*==========================================================
    HOVER
==========================================================*/

.formation-card:hover{

    transform:

        translateY(-15px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.16);

    border-color:

        rgba(212,175,55,.25);

}

/*==========================================================
    APPEAR
==========================================================*/

.formation-card{

    opacity:0;

    animation:

        formationAppear .9s ease forwards;

}

.formation-card:nth-child(1){

animation-delay:.2s;

}

.formation-card:nth-child(2){

animation-delay:.4s;

}

.formation-card:nth-child(3){

animation-delay:.6s;

}

.formation-card:nth-child(4){

animation-delay:.8s;

}

.formation-card:nth-child(5){

animation-delay:1s;

}

.formation-card:nth-child(6){

animation-delay:1.2s;

}

@keyframes formationAppear{

from{

opacity:0;

transform:

translateY(60px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

/*==========================================================
    ICON COLORS
==========================================================*/

.icon-computer{

background:linear-gradient(135deg,#00509e,#3b82f6);

}

.icon-engineering{

background:linear-gradient(135deg,#475569,#64748b);

}

.icon-management{

background:linear-gradient(135deg,#0f766e,#14b8a6);

}

.icon-agriculture{

background:linear-gradient(135deg,#2e7d32,#4caf50);

}

.icon-education{

background:linear-gradient(135deg,#7c3aed,#8b5cf6);

}

.icon-health{

background:linear-gradient(135deg,#c62828,#ef4444);

}

.icon-law{

background:linear-gradient(135deg,#d4af37,#ffd86b);

}

.icon-network{

background:linear-gradient(135deg,#0f172a,#334155);

}

/*==========================================================
    GPU
==========================================================*/

.formation-card,
.formation-icon,
.formation-badge{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.formation-card{

padding:0;

}

.formation-title{

font-size:24px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.formation-card-header,

.formation-card-body,

.formation-card-footer{

padding:25px;

}

.formation-card-footer{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.formation-icon{

width:75px;

height:75px;

font-size:30px;

}

.formation-title{

font-size:22px;

}

.formation-description{

font-size:15px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.formation-card{

border-radius:22px;

}

.formation-title{

font-size:20px;

}

.formation-description{

font-size:14px;

}

.formation-icon{

width:65px;

height:65px;

font-size:26px;

}

.formation-badge{

font-size:11px;

padding:7px 14px;

}

}

/*==========================================================
    END MODULE 5.1.2
==========================================================*/
/*==========================================================
    MODULE 5.1.3
    FORMATIONS
    ACTION BUTTONS
    STATISTICS
    RESPONSIVE
    ANIMATIONS
==========================================================*/

/*==========================================================
    FORMATION ACTIONS
==========================================================*/

.formation-actions{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:35px;

    flex-wrap:wrap;

}

/*==========================================================
    PRIMARY BUTTON
==========================================================*/

.formation-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:15px 32px;

    border:none;

    border-radius:50px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            #00509e
        );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    cursor:pointer;

    transition:all .35s ease;

    box-shadow:

        0 18px 40px rgba(0,80,158,.25);

}

.formation-btn i{

    transition:.35s;

}

.formation-btn:hover{

    transform:

        translateY(-6px);

    box-shadow:

        0 28px 55px rgba(0,80,158,.35);

}

.formation-btn:hover i{

    transform:translateX(6px);

}

/*==========================================================
    OUTLINE BUTTON
==========================================================*/

.formation-btn-outline{

    background:#ffffff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.formation-btn-outline:hover{

    background:var(--primary);

    color:#ffffff;

}

/*==========================================================
    GOLD BUTTON
==========================================================*/

.formation-btn-gold{

    background:

        linear-gradient(
            135deg,
            var(--accent),
            #ffd86b
        );

    color:#ffffff;

    box-shadow:

        0 18px 40px rgba(212,175,55,.30);

}

.formation-btn-gold:hover{

    box-shadow:

        0 28px 55px rgba(212,175,55,.40);

}

/*==========================================================
    BUTTON GROUP
==========================================================*/

.formation-btn-group{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/*==========================================================
    FORMATION STATS
==========================================================*/

.formation-stats{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid rgba(0,0,0,.08);

}

/*==========================================================
    STAT ITEM
==========================================================*/

.formation-stat{

    flex:1;

    text-align:center;

}

.formation-stat-number{

    display:block;

    font-size:34px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:8px;

}

.formation-stat-label{

    font-size:14px;

    color:#6c757d;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/*==========================================================
    ICON
==========================================================*/

.formation-stat i{

    display:block;

    margin-bottom:12px;

    font-size:28px;

    color:var(--accent);

}

/*==========================================================
    FEATURE LIST
==========================================================*/

.formation-features{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:25px;

}

.formation-feature{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:30px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:13px;

    font-weight:600;

}

.formation-feature i{

    color:var(--accent);

}

/*==========================================================
    CARD FOOTER
==========================================================*/

.formation-bottom{

    margin-top:auto;

}

/*==========================================================
    HOVER
==========================================================*/

.formation-card:hover .formation-stat-number{

    color:var(--accent);

}

.formation-card:hover .formation-feature{

    background:

        rgba(212,175,55,.15);

}

.formation-card:hover .formation-stat i{

    transform:scale(1.15);

}

/*==========================================================
    BUTTON PULSE
==========================================================*/

.formation-btn-primary{

    position:relative;

    overflow:hidden;

}

.formation-btn-primary::before{

    content:"";

    position:absolute;

    top:50%;

    left:-120%;

    width:50%;

    height:250%;

    background:

        rgba(255,255,255,.20);

    transform:

        translateY(-50%)

        rotate(25deg);

    transition:.8s;

}

.formation-btn-primary:hover::before{

    left:140%;

}

/*==========================================================
    RIPPLE EFFECT
==========================================================*/

.formation-btn:active{

    transform:scale(.97);

}

/*==========================================================
    APPEAR ANIMATION
==========================================================*/

.formation-actions{

    animation:

        formationActionAppear

        .8s

        ease;

}

@keyframes formationActionAppear{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
    FLOATING STATS
==========================================================*/

.formation-stat{

    animation:

        statFloat

        5s

        ease-in-out

        infinite;

}

.formation-stat:nth-child(2){

    animation-delay:.5s;

}

.formation-stat:nth-child(3){

    animation-delay:1s;

}

.formation-stat:nth-child(4){

    animation-delay:1.5s;

}

@keyframes statFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/*==========================================================
    GPU OPTIMIZATION
==========================================================*/

.formation-btn,
.formation-stat,
.formation-feature{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.formation-actions{

justify-content:center;

}

.formation-stats{

flex-wrap:wrap;

}

.formation-stat{

min-width:140px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.formation-btn-group{

flex-direction:column;

width:100%;

}

.formation-btn{

width:100%;

}

.formation-actions{

flex-direction:column;

align-items:stretch;

}

.formation-stats{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.formation-feature{

font-size:12px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.formation-stats{

grid-template-columns:1fr;

}

.formation-btn{

padding:14px 24px;

font-size:14px;

}

.formation-stat-number{

font-size:28px;

}

.formation-stat-label{

font-size:12px;

}

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

.formation-btn:focus-visible{

outline:3px solid var(--accent);

outline-offset:4px;

}

@media(prefers-reduced-motion:reduce){

.formation-btn,
.formation-stat,
.formation-feature{

animation:none !important;

transition:none !important;

transform:none !important;

}

}

/*==========================================================
    END MODULE 5.1.3
==========================================================*/
/*==========================================================
    MODULE 5.2.1
    TEACHERS SECTION
    TEACHER CARDS
    PHOTOS
    NAME
    GRADE
    POSITION
==========================================================*/

/*==========================================================
    TEACHERS SECTION
==========================================================*/

.teachers{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

    isolation:isolate;

}

/*==========================================================
    DECORATIVE BACKGROUND
==========================================================*/

.teachers::before{

    content:"";

    position:absolute;

    top:-200px;

    left:-180px;

    width:480px;

    height:480px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(0,80,158,.06),

            transparent

        );

    filter:blur(15px);

    z-index:0;

}

.teachers::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(212,175,55,.12),

            transparent

        );

    filter:blur(15px);

    z-index:0;

}

/*==========================================================
    CONTAINER
==========================================================*/

.teachers .container{

    position:relative;

    z-index:5;

}

/*==========================================================
    HEADER
==========================================================*/

.teachers-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.teachers-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    margin-bottom:22px;

    border-radius:40px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.teachers-badge i{

    color:var(--accent);

}

.teachers-title{

    font-size:48px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:20px;

}

.teachers-title span{

    color:var(--accent);

}

.teachers-divider{

    width:100px;

    height:4px;

    margin:0 auto 28px;

    border-radius:30px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b,

            var(--primary)

        );

}

.teachers-description{

    max-width:760px;

    margin:auto;

    font-size:17px;

    line-height:1.9;

    color:#6c757d;

}

/*==========================================================
    GRID
==========================================================*/

.teachers-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}

/*==========================================================
    CARD
==========================================================*/

.teacher-card{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    border-radius:28px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

    transition:all .45s ease;

}

.teacher-card:hover{

    transform:

        translateY(-15px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.15);

}

/*==========================================================
    IMAGE
==========================================================*/

.teacher-image{

    position:relative;

    overflow:hidden;

    height:360px;

}

.teacher-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .8s ease,

        filter .5s ease;

}

.teacher-card:hover .teacher-image img{

    transform:scale(1.08);

}

/*==========================================================
    IMAGE OVERLAY
==========================================================*/

.teacher-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.45),

            transparent

        );

    opacity:.25;

    transition:.4s;

    z-index:1;

}

.teacher-card:hover .teacher-image::before{

    opacity:.55;

}

/*==========================================================
    BADGE
==========================================================*/

.teacher-grade-badge{

    position:absolute;

    top:20px;

    right:20px;

    padding:8px 18px;

    border-radius:40px;

    background:var(--accent);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    z-index:2;

}

/*==========================================================
    CONTENT
==========================================================*/

.teacher-content{

    padding:35px;

    text-align:center;

}

/*==========================================================
    NAME
==========================================================*/

.teacher-name{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:10px;

    transition:.35s;

}

.teacher-card:hover .teacher-name{

    color:var(--accent);

}

/*==========================================================
    GRADE
==========================================================*/

.teacher-grade{

    font-size:18px;

    font-weight:600;

    color:var(--accent);

    margin-bottom:12px;

}

/*==========================================================
    POSITION
==========================================================*/

.teacher-position{

    font-size:15px;

    color:#6c757d;

    line-height:1.8;

}

/*==========================================================
    DECORATIVE LINE
==========================================================*/

.teacher-line{

    width:70px;

    height:3px;

    margin:20px auto;

    border-radius:20px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b

        );

}

/*==========================================================
    APPEAR ANIMATION
==========================================================*/

.teacher-card{

    opacity:0;

    animation:

        teacherAppear .9s ease forwards;

}

.teacher-card:nth-child(1){

animation-delay:.2s;

}

.teacher-card:nth-child(2){

animation-delay:.4s;

}

.teacher-card:nth-child(3){

animation-delay:.6s;

}

.teacher-card:nth-child(4){

animation-delay:.8s;

}

.teacher-card:nth-child(5){

animation-delay:1s;

}

.teacher-card:nth-child(6){

animation-delay:1.2s;

}

@keyframes teacherAppear{

from{

opacity:0;

transform:

translateY(60px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

/*==========================================================
    GPU
==========================================================*/

.teacher-card,
.teacher-image img,
.teacher-content{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    RESPONSIVE TABLET
==========================================================*/

@media(max-width:992px){

.teachers{

padding:100px 0;

}

.teachers-title{

font-size:40px;

}

.teacher-image{

height:320px;

}

}

/*==========================================================
    RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.teachers{

padding:80px 0;

}

.teachers-grid{

grid-template-columns:1fr;

}

.teacher-image{

height:300px;

}

.teacher-content{

padding:28px;

}

.teacher-name{

font-size:24px;

}

.teacher-grade{

font-size:17px;

}

.teacher-position{

font-size:15px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.teacher-image{

height:260px;

}

.teacher-name{

font-size:22px;

}

.teacher-grade{

font-size:16px;

}

.teacher-position{

font-size:14px;

}

.teacher-grade-badge{

font-size:11px;

padding:7px 14px;

}

}

/*==========================================================
    END MODULE 5.2.1
==========================================================*/
/*==========================================================
    MODULE 5.2.2
    TEACHER CARDS
    SOCIAL MEDIA
    HOVER
    BADGES
    GLASS EFFECT
    RESPONSIVE
==========================================================*/

/*==========================================================
    SOCIAL NETWORKS
==========================================================*/

.teacher-social{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%) translateY(20px);

    display:flex;

    gap:12px;

    opacity:0;

    visibility:hidden;

    transition:all .45s ease;

    z-index:5;

}

.teacher-card:hover .teacher-social{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

/*==========================================================
    SOCIAL ICONS
==========================================================*/

.teacher-social a{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

    text-decoration:none;

    font-size:18px;

    box-shadow:

        0 12px 25px rgba(0,0,0,.12);

    transition:all .35s ease;

}

.teacher-social a:hover{

    transform:

        translateY(-6px)

        scale(1.08);

    color:#ffffff;

}

.teacher-social .facebook:hover{

    background:#1877F2;

}

.teacher-social .linkedin:hover{

    background:#0A66C2;

}

.teacher-social .twitter:hover{

    background:#1DA1F2;

}

.teacher-social .youtube:hover{

    background:#FF0000;

}

.teacher-social .instagram:hover{

    background:linear-gradient(

        135deg,

        #833AB4,

        #FD1D1D,

        #FCAF45

    );

}

/*==========================================================
    PREMIUM BADGES
==========================================================*/

.teacher-badges{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:22px;

}

.teacher-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:30px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    transition:.35s ease;

}

.teacher-badge i{

    color:var(--accent);

}

.teacher-card:hover .teacher-badge{

    background:rgba(212,175,55,.12);

}

/*==========================================================
    GLASS CARD
==========================================================*/

.teacher-card.glass{

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.18);

}

.teacher-card.glass .teacher-name{

    color:#ffffff;

}

.teacher-card.glass .teacher-grade{

    color:#FFD86B;

}

.teacher-card.glass .teacher-position{

    color:rgba(255,255,255,.90);

}

.teacher-card.glass .teacher-badge{

    background:rgba(255,255,255,.12);

    color:#ffffff;

}

.teacher-card.glass .teacher-social a{

    background:rgba(255,255,255,.12);

    color:#ffffff;

}

/*==========================================================
    CONTACT INFORMATION
==========================================================*/

.teacher-contact{

    margin-top:25px;

    padding-top:22px;

    border-top:1px solid rgba(0,0,0,.08);

}

.teacher-contact-item{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    color:#6c757d;

    font-size:14px;

}

.teacher-contact-item i{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,80,158,.08);

    color:var(--primary);

}

/*==========================================================
    HOVER EFFECTS
==========================================================*/

.teacher-card:hover{

    border-color:

        rgba(212,175,55,.25);

}

.teacher-card:hover .teacher-grade{

    letter-spacing:.4px;

}

.teacher-card:hover .teacher-line{

    width:120px;

}

.teacher-card:hover .teacher-image img{

    filter:brightness(1.08);

}

/*==========================================================
    SHINE EFFECT
==========================================================*/

.teacher-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.22),

            transparent

        );

    transform:skewX(-25deg);

    transition:1s;

    z-index:4;

}

.teacher-card:hover::before{

    left:150%;

}

/*==========================================================
    FLOATING ANIMATION
==========================================================*/

.teacher-card{

    animation:

        teacherFloat 6s ease-in-out infinite;

}

.teacher-card:nth-child(even){

    animation-delay:1s;

}

@keyframes teacherFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==========================================================
    IMAGE ZOOM
==========================================================*/

.teacher-card:hover .teacher-image{

    overflow:hidden;

}

.teacher-card:hover .teacher-image img{

    transform:scale(1.10);

}

/*==========================================================
    GPU OPTIMIZATION
==========================================================*/

.teacher-social,
.teacher-badge,
.teacher-contact-item{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.teacher-social{

opacity:1;

visibility:visible;

transform:translateX(-50%);

}

.teacher-contact{

text-align:left;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.teacher-social{

position:relative;

left:auto;

bottom:auto;

transform:none;

justify-content:center;

margin-top:20px;

}

.teacher-card:hover .teacher-social{

transform:none;

}

.teacher-badges{

justify-content:center;

}

.teacher-contact-item{

font-size:13px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.teacher-social{

gap:8px;

}

.teacher-social a{

width:40px;

height:40px;

font-size:16px;

}

.teacher-badge{

font-size:11px;

padding:7px 12px;

}

.teacher-contact-item{

font-size:12px;

}

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

.teacher-social a:focus-visible,

.teacher-badge:focus-visible{

outline:3px solid var(--accent);

outline-offset:3px;

}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.teacher-card,

.teacher-social,

.teacher-image img,

.teacher-badge{

animation:none !important;

transition:none !important;

transform:none !important;

}

}

/*==========================================================
    END MODULE 5.2.2
==========================================================*/
/*==========================================================
    MODULE 5.3.1
    RESEARCH SECTION
    LABORATORIES
    PUBLICATIONS
    INNOVATION
    PREMIUM CARDS
==========================================================*/

/*==========================================================
    RESEARCH SECTION
==========================================================*/

.research{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f5f9fc
        );

    isolation:isolate;

}

/*==========================================================
    DECORATIVE BACKGROUND
==========================================================*/

.research::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(0,80,158,.08),

            transparent

        );

    filter:blur(20px);

}

.research::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(212,175,55,.12),

            transparent

        );

    filter:blur(15px);

}

/*==========================================================
    CONTAINER
==========================================================*/

.research .container{

    position:relative;

    z-index:5;

}

/*==========================================================
    SECTION HEADER
==========================================================*/

.research-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.research-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    margin-bottom:24px;

    border-radius:40px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.research-badge i{

    color:var(--accent);

}

.research-title{

    font-size:48px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:20px;

}

.research-title span{

    color:var(--accent);

}

.research-divider{

    width:100px;

    height:4px;

    margin:0 auto 28px;

    border-radius:30px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b,

            var(--primary)

        );

}

.research-description{

    max-width:760px;

    margin:auto;

    font-size:17px;

    line-height:1.9;

    color:#6c757d;

}

/*==========================================================
    GRID
==========================================================*/

.research-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

}

/*==========================================================
    RESEARCH CARD
==========================================================*/

.research-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:40px;

    background:#ffffff;

    border-radius:30px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 20px 55px rgba(0,0,0,.08);

    transition:all .45s ease;

    isolation:isolate;

}

.research-card:hover{

    transform:

        translateY(-15px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.15);

}

/*==========================================================
    TOP BORDER
==========================================================*/

.research-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b,

            var(--primary)

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.research-card:hover::before{

    transform:scaleX(1);

}

/*==========================================================
    BACKGROUND EFFECT
==========================================================*/

.research-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-110px;

    top:-110px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(0,80,158,.07),

            transparent

        );

    transition:.45s;

    z-index:-1;

}

.research-card:hover::after{

    transform:scale(1.2);

}

/*==========================================================
    ICON
==========================================================*/

.research-icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:25px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #00509e

        );

    color:#ffffff;

    font-size:36px;

    margin-bottom:30px;

    box-shadow:

        0 20px 45px rgba(0,80,158,.25);

    transition:.45s;

}

.research-card:hover .research-icon{

    transform:

        rotate(-8deg)

        scale(1.08);

}

/*==========================================================
    TITLES
==========================================================*/

.research-card-title{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:18px;

    transition:.35s;

}

.research-card:hover .research-card-title{

    color:var(--accent);

}

/*==========================================================
    TEXT
==========================================================*/

.research-card-text{

    flex:1;

    font-size:16px;

    line-height:1.9;

    color:#6c757d;

    margin-bottom:28px;

}

/*==========================================================
    LIST
==========================================================*/

.research-list{

    list-style:none;

    padding:0;

    margin:0;

}

.research-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:15px;

    color:#495057;

    line-height:1.8;

}

.research-list li i{

    color:var(--accent);

    margin-top:4px;

}

/*==========================================================
    LABORATORY
==========================================================*/

.research-lab{

    border-left:5px solid #00509e;

}

/*==========================================================
    PUBLICATIONS
==========================================================*/

.research-publication{

    border-left:5px solid #d4af37;

}

/*==========================================================
    INNOVATION
==========================================================*/

.research-innovation{

    border-left:5px solid #0f766e;

}

/*==========================================================
    BUTTON
==========================================================*/

.research-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.research-btn:hover{

    color:var(--accent);

}

.research-btn:hover i{

    transform:translateX(6px);

}

/*==========================================================
    GLASS CARD
==========================================================*/

.research-card.glass{

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.18);

}

.research-card.glass .research-card-title{

    color:#ffffff;

}

.research-card.glass .research-card-text,

.research-card.glass .research-list li,

.research-card.glass .research-btn{

    color:rgba(255,255,255,.92);

}

/*==========================================================
    APPEAR
==========================================================*/

.research-card{

    opacity:0;

    animation:

        researchAppear .9s ease forwards;

}

.research-card:nth-child(1){

animation-delay:.2s;

}

.research-card:nth-child(2){

animation-delay:.45s;

}

.research-card:nth-child(3){

animation-delay:.7s;

}

@keyframes researchAppear{

from{

opacity:0;

transform:

translateY(60px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

/*==========================================================
    GPU
==========================================================*/

.research-card,
.research-icon{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    RESPONSIVE TABLET
==========================================================*/

@media(max-width:992px){

.research{

padding:100px 0;

}

.research-title{

font-size:40px;

}

.research-grid{

grid-template-columns:

repeat(2,1fr);

}

}

/*==========================================================
    RESPONSIVE MOBILE
==========================================================*/

@media(max-width:768px){

.research{

padding:80px 0;

}

.research-grid{

grid-template-columns:1fr;

}

.research-card{

padding:30px;

}

.research-title{

font-size:34px;

}

.research-card-title{

font-size:24px;

}

.research-card-text{

font-size:15px;

}

.research-icon{

width:75px;

height:75px;

font-size:30px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.research-title{

font-size:28px;

}

.research-card{

padding:25px;

border-radius:24px;

}

.research-card-title{

font-size:22px;

}

.research-card-text{

font-size:14px;

}

.research-icon{

width:65px;

height:65px;

font-size:26px;

}

}

/*==========================================================
    END MODULE 5.3.1
==========================================================*/
/*==========================================================
    MODULE 5.3.2
    RESEARCH SECTION
    ICONS
    STATISTICS
    TIMELINE
    HOVER
    RESPONSIVE
==========================================================*/

/*==========================================================
    RESEARCH STATISTICS
==========================================================*/

.research-stats{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:70px;

    margin-bottom:80px;

}

/*==========================================================
    STAT CARD
==========================================================*/

.research-stat{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:40px 30px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

    transition:all .45s ease;

}

.research-stat:hover{

    transform:

        translateY(-12px);

    box-shadow:

        0 35px 70px rgba(0,0,0,.16);

}

/*==========================================================
    ICON
==========================================================*/

.research-stat-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:36px;

    color:#ffffff;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #00509e

        );

    box-shadow:

        0 20px 40px rgba(0,80,158,.25);

    transition:.45s;

}

.research-stat:hover .research-stat-icon{

    transform:

        rotate(-8deg)

        scale(1.10);

}

/*==========================================================
    COUNTER
==========================================================*/

.research-number{

    font-size:54px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:10px;

}

.research-label{

    font-size:15px;

    font-weight:600;

    color:#6c757d;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/*==========================================================
    PROGRESS BAR
==========================================================*/

.research-progress{

    width:100%;

    height:8px;

    margin-top:25px;

    border-radius:30px;

    overflow:hidden;

    background:#edf2f7;

}

.research-progress-bar{

    width:0;

    height:100%;

    border-radius:30px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b

        );

    transition:width 2s ease;

}

/*==========================================================
    TIMELINE
==========================================================*/

.research-timeline{

    position:relative;

    margin-top:90px;

    padding-left:60px;

}

.research-timeline::before{

    content:"";

    position:absolute;

    top:0;

    left:24px;

    width:4px;

    height:100%;

    background:

        linear-gradient(

            to bottom,

            var(--primary),

            var(--accent)

        );

    border-radius:30px;

}

/*==========================================================
    TIMELINE ITEM
==========================================================*/

.timeline-item{

    position:relative;

    margin-bottom:55px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

/*==========================================================
    TIMELINE DOT
==========================================================*/

.timeline-dot{

    position:absolute;

    left:-48px;

    top:6px;

    width:26px;

    height:26px;

    border-radius:50%;

    background:var(--accent);

    border:5px solid #ffffff;

    box-shadow:

        0 0 0 6px rgba(212,175,55,.18);

}

/*==========================================================
    TIMELINE CONTENT
==========================================================*/

.timeline-content{

    padding:30px;

    border-radius:24px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

    transition:.45s;

}

.timeline-content:hover{

    transform:

        translateX(10px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.15);

}

.timeline-date{

    display:inline-block;

    margin-bottom:12px;

    padding:6px 16px;

    border-radius:25px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

}

.timeline-title{

    font-size:24px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:15px;

}

.timeline-text{

    color:#6c757d;

    line-height:1.9;

    font-size:15px;

}

/*==========================================================
    HOVER EFFECTS
==========================================================*/

.research-card:hover .research-icon,

.research-stat:hover .research-stat-icon{

    box-shadow:

        0 25px 50px rgba(212,175,55,.35);

}

.research-card:hover .research-card-title,

.timeline-content:hover .timeline-title{

    color:var(--accent);

}

.timeline-content:hover .timeline-dot{

    transform:scale(1.1);

}

/*==========================================================
    FLOATING ANIMATION
==========================================================*/

.research-stat{

    animation:

        researchFloat 6s ease-in-out infinite;

}

.research-stat:nth-child(even){

    animation-delay:1s;

}

@keyframes researchFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==========================================================
    APPEAR
==========================================================*/

.timeline-item{

    opacity:0;

    animation:

        timelineAppear .9s ease forwards;

}

.timeline-item:nth-child(1){

animation-delay:.2s;

}

.timeline-item:nth-child(2){

animation-delay:.5s;

}

.timeline-item:nth-child(3){

animation-delay:.8s;

}

.timeline-item:nth-child(4){

animation-delay:1.1s;

}

@keyframes timelineAppear{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==========================================================
    GPU
==========================================================*/

.research-stat,

.timeline-content,

.research-stat-icon{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.research-stats{

grid-template-columns:repeat(2,1fr);

}

.timeline-title{

font-size:22px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.research-stats{

grid-template-columns:1fr;

}

.research-number{

font-size:42px;

}

.research-timeline{

padding-left:35px;

}

.research-timeline::before{

left:14px;

}

.timeline-dot{

left:-33px;

width:20px;

height:20px;

}

.timeline-content{

padding:25px;

}

.timeline-title{

font-size:20px;

}

.timeline-text{

font-size:14px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.research-stat{

padding:30px 20px;

}

.research-stat-icon{

width:70px;

height:70px;

font-size:28px;

}

.research-number{

font-size:34px;

}

.timeline-content{

padding:20px;

}

.timeline-title{

font-size:18px;

}

.timeline-date{

font-size:12px;

}

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

.timeline-content:focus-visible,

.research-card:focus-visible{

outline:3px solid var(--accent);

outline-offset:5px;

}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.research-stat,

.timeline-item,

.timeline-content,

.research-stat-icon{

animation:none !important;

transition:none !important;

transform:none !important;

}

}

/*==========================================================
    END MODULE 5.3.2
==========================================================*/
/*==========================================================
    MODULE 5.3.2
    RESEARCH SECTION
    ICONS
    STATISTICS
    TIMELINE
    HOVER
    RESPONSIVE
==========================================================*/

/*==========================================================
    RESEARCH STATISTICS
==========================================================*/

.research-stats{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:70px;

    margin-bottom:80px;

}

/*==========================================================
    STAT CARD
==========================================================*/

.research-stat{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:40px 30px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

    transition:all .45s ease;

}

.research-stat:hover{

    transform:

        translateY(-12px);

    box-shadow:

        0 35px 70px rgba(0,0,0,.16);

}

/*==========================================================
    ICON
==========================================================*/

.research-stat-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:36px;

    color:#ffffff;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #00509e

        );

    box-shadow:

        0 20px 40px rgba(0,80,158,.25);

    transition:.45s;

}

.research-stat:hover .research-stat-icon{

    transform:

        rotate(-8deg)

        scale(1.10);

}

/*==========================================================
    COUNTER
==========================================================*/

.research-number{

    font-size:54px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:10px;

}

.research-label{

    font-size:15px;

    font-weight:600;

    color:#6c757d;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/*==========================================================
    PROGRESS BAR
==========================================================*/

.research-progress{

    width:100%;

    height:8px;

    margin-top:25px;

    border-radius:30px;

    overflow:hidden;

    background:#edf2f7;

}

.research-progress-bar{

    width:0;

    height:100%;

    border-radius:30px;

    background:

        linear-gradient(

            90deg,

            var(--accent),

            #ffd86b

        );

    transition:width 2s ease;

}

/*==========================================================
    TIMELINE
==========================================================*/

.research-timeline{

    position:relative;

    margin-top:90px;

    padding-left:60px;

}

.research-timeline::before{

    content:"";

    position:absolute;

    top:0;

    left:24px;

    width:4px;

    height:100%;

    background:

        linear-gradient(

            to bottom,

            var(--primary),

            var(--accent)

        );

    border-radius:30px;

}

/*==========================================================
    TIMELINE ITEM
==========================================================*/

.timeline-item{

    position:relative;

    margin-bottom:55px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

/*==========================================================
    TIMELINE DOT
==========================================================*/

.timeline-dot{

    position:absolute;

    left:-48px;

    top:6px;

    width:26px;

    height:26px;

    border-radius:50%;

    background:var(--accent);

    border:5px solid #ffffff;

    box-shadow:

        0 0 0 6px rgba(212,175,55,.18);

}

/*==========================================================
    TIMELINE CONTENT
==========================================================*/

.timeline-content{

    padding:30px;

    border-radius:24px;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

    transition:.45s;

}

.timeline-content:hover{

    transform:

        translateX(10px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.15);

}

.timeline-date{

    display:inline-block;

    margin-bottom:12px;

    padding:6px 16px;

    border-radius:25px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

}

.timeline-title{

    font-size:24px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:15px;

}

.timeline-text{

    color:#6c757d;

    line-height:1.9;

    font-size:15px;

}

/*==========================================================
    HOVER EFFECTS
==========================================================*/

.research-card:hover .research-icon,

.research-stat:hover .research-stat-icon{

    box-shadow:

        0 25px 50px rgba(212,175,55,.35);

}

.research-card:hover .research-card-title,

.timeline-content:hover .timeline-title{

    color:var(--accent);

}

.timeline-content:hover .timeline-dot{

    transform:scale(1.1);

}

/*==========================================================
    FLOATING ANIMATION
==========================================================*/

.research-stat{

    animation:

        researchFloat 6s ease-in-out infinite;

}

.research-stat:nth-child(even){

    animation-delay:1s;

}

@keyframes researchFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==========================================================
    APPEAR
==========================================================*/

.timeline-item{

    opacity:0;

    animation:

        timelineAppear .9s ease forwards;

}

.timeline-item:nth-child(1){

animation-delay:.2s;

}

.timeline-item:nth-child(2){

animation-delay:.5s;

}

.timeline-item:nth-child(3){

animation-delay:.8s;

}

.timeline-item:nth-child(4){

animation-delay:1.1s;

}

@keyframes timelineAppear{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==========================================================
    GPU
==========================================================*/

.research-stat,

.timeline-content,

.research-stat-icon{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.research-stats{

grid-template-columns:repeat(2,1fr);

}

.timeline-title{

font-size:22px;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.research-stats{

grid-template-columns:1fr;

}

.research-number{

font-size:42px;

}

.research-timeline{

padding-left:35px;

}

.research-timeline::before{

left:14px;

}

.timeline-dot{

left:-33px;

width:20px;

height:20px;

}

.timeline-content{

padding:25px;

}

.timeline-title{

font-size:20px;

}

.timeline-text{

font-size:14px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.research-stat{

padding:30px 20px;

}

.research-stat-icon{

width:70px;

height:70px;

font-size:28px;

}

.research-number{

font-size:34px;

}

.timeline-content{

padding:20px;

}

.timeline-title{

font-size:18px;

}

.timeline-date{

font-size:12px;

}

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

.timeline-content:focus-visible,

.research-card:focus-visible{

outline:3px solid var(--accent);

outline-offset:5px;

}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.research-stat,

.timeline-item,

.timeline-content,

.research-stat-icon{

animation:none !important;

transition:none !important;

transform:none !important;

}

}

/*==========================================================
    END MODULE 5.3.2
==========================================================*/
/*==========================================================
    MODULE 5.4.2
    ACTUALITÉS
    BOUTONS
    HOVER
    PAGINATION
    RESPONSIVE
    FINALISATION
==========================================================*/

/*==========================================================
    ARTICLE FOOTER
==========================================================*/

.news-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid rgba(0,0,0,.08);

}

/*==========================================================
    BOUTON LIRE PLUS
==========================================================*/

.news-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:14px 30px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #00509e
    );

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:

        0 18px 40px rgba(0,80,158,.25);

}

.news-btn i{

    transition:.35s ease;

}

.news-btn:hover{

    color:#ffffff;

    transform:

        translateY(-6px);

    box-shadow:

        0 28px 55px rgba(0,80,158,.35);

}

.news-btn:hover i{

    transform:translateX(6px);

}

/*==========================================================
    SHINE EFFECT
==========================================================*/

.news-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.30),

            transparent

        );

    transform:skewX(-25deg);

    transition:.9s;

}

.news-btn:hover::before{

    left:150%;

}

/*==========================================================
    OUTLINE BUTTON
==========================================================*/

.news-btn-outline{

    background:#ffffff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.news-btn-outline:hover{

    background:var(--primary);

    color:#ffffff;

}

/*==========================================================
    GHOST BUTTON
==========================================================*/

.news-btn-light{

    background:#f8fafc;

    color:var(--primary);

    border:1px solid rgba(0,0,0,.08);

}

.news-btn-light:hover{

    background:var(--accent);

    color:#ffffff;

}

/*==========================================================
    TAGS
==========================================================*/

.news-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.news-tag{

    padding:8px 16px;

    border-radius:30px;

    background:rgba(0,80,158,.08);

    color:var(--primary);

    font-size:13px;

    font-weight:600;

    transition:.35s;

}

.news-tag:hover{

    background:var(--accent);

    color:#ffffff;

}

/*==========================================================
    PAGINATION
==========================================================*/

.news-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:80px;

}

.news-pagination a{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

    border:1px solid rgba(0,0,0,.08);

    transition:.35s;

    box-shadow:

        0 10px 25px rgba(0,0,0,.06);

}

.news-pagination a:hover,

.news-pagination a.active{

    background:linear-gradient(

        135deg,

        var(--primary),

        #00509e

    );

    color:#ffffff;

    transform:translateY(-5px);

    box-shadow:

        0 20px 45px rgba(0,80,158,.25);

}

/*==========================================================
    PREVIOUS / NEXT
==========================================================*/

.news-pagination .prev,

.news-pagination .next{

    width:auto;

    padding:0 22px;

    border-radius:50px;

}

/*==========================================================
    CARD HOVER EFFECTS
==========================================================*/

.news-card:hover{

    border-color:

        rgba(212,175,55,.25);

}

.news-card:hover .news-category{

    background:var(--primary);

}

.news-card:hover .news-author img{

    transform:scale(1.08);

}

.news-card:hover .news-author h6{

    color:var(--accent);

}

.news-card:hover .news-meta{

    color:#495057;

}

/*==========================================================
    FLOATING ANIMATION
==========================================================*/

.news-card{

    animation:

        newsFloating

        7s

        ease-in-out

        infinite;

}

.news-card:nth-child(even){

    animation-delay:1s;

}

@keyframes newsFloating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/*==========================================================
    GPU
==========================================================*/

.news-btn,

.news-pagination a,

.news-tag{

    will-change:

        transform,

        opacity;

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px){

.news-footer{

flex-direction:column;

align-items:flex-start;

}

.news-pagination{

flex-wrap:wrap;

}

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.news-btn{

width:100%;

justify-content:center;

}

.news-footer{

gap:18px;

}

.news-tags{

justify-content:center;

}

.news-pagination{

gap:8px;

}

.news-pagination a{

width:44px;

height:44px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.news-btn{

padding:14px 20px;

font-size:14px;

}

.news-pagination .prev,

.news-pagination .next{

padding:0 16px;

}

.news-pagination a{

width:40px;

height:40px;

font-size:14px;

}

.news-tag{

font-size:12px;

padding:7px 12px;

}

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

.news-btn:focus-visible,

.news-pagination a:focus-visible{

outline:3px solid var(--accent);

outline-offset:4px;

}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.news-btn,

.news-card,

.news-pagination a,

.news-tag{

animation:none !important;

transition:none !important;

transform:none !important;

}

}

/*==========================================================
    END MODULE 5.4.2
==========================================================*/