/*
 Theme Name:   Ensaf Child  
 Theme URI:    https://wordpress.themeholy.com/ensaf/
 Description:  This is a child theme for ensaf - WordPress Theme
 Author:       Themeholy
 Author URI:   https://themeforest.net/user/themeholy
 Template:     ensaf
 Version:      1.0
 Tags:         two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats,  sticky-post, threaded-comments, translation-ready
 Text Domain:  ensaf-child
*/

/*  [ Add your custom css below ] 
- - - - - - - - - - - - - - - - - - - - */   

.hero-title {
    font-size: 70px;
}

.th-hero-bg img

 {
	margin-bottom: 50px; 
}

.service-3-item {
	 height:410px;
}


.service-3-item.active .service-3-item__hover

 {
	 width:101%;
}

.faq-img-box2 .img img

 {
	 
	     height: 780px;
    object-fit: cover;
}

.logged-in .sticky-wrapper.sticky, .logged-in .preloader .th-btn

 {
    top: 10px;
}


.th-widget-about .about-logo {
    margin-bottom: 20px!important;
    width: 240px!important;
}

.copyright-text {
    padding: 24px 0;
    background: rgba(255, 255, 255, 0.1215686275);
    border-radius: 50px;
	background-color:#203836;
}

.legal-footer p {
	
    font-family: var(--body-font);
    margin: 0 0 18px 0;
    color: #ffffff;
    line-height: 1.75;
    margin-bottom: 0em;
}


/* =========================================================
   1. LARGEUR DE LA BARRE DU MENU (80% DE L'ÉCRAN)
   ========================================================= */

/* Le conteneur principal prend 80% de la largeur de l'écran */
.th-header .container,
.th-header .th-container,
.sticky-header .container,
.sticky-wrapper .container {
    max-width: 80% !important;
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Alignement fluide des éléments sur la même ligne */
.th-header .row,
.sticky-header .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}


/* =========================================================
   2. TAILLE DU LOGO A 80PX (MENU NORMAL & STICKY)
   ========================================================= */

/* Conteneur du logo */
.header-logo,
.th-header .header-logo,
.sticky-header .header-logo {
    display: flex !important;
    align-items: center !important;
}

/* Image du logo dans le menu normal ET sticky */
.header-logo img,
.th-header .header-logo img,
.sticky-wrapper .header-logo img,
.sticky-active .header-logo img {
    height: 80px !important;
    width: auto !important; /* Conserve le ratio */
    max-height: 80px !important;
    object-fit: contain !important;
    transition: all 0.3s ease; /* Animation fluide si changement d'état */
}


/* =========================================================
   3. STRUCTURE ET AFFICHAGE DU MENU
   ========================================================= */

/* Forcer l'affichage horizontal du menu */
.main-menu ul.ensaf-menu {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.main-menu ul.ensaf-menu > li {
    position: relative !important;
    white-space: nowrap !important;
}

/* Gestion propre des sous-menus déroulants */
.main-menu ul.ensaf-menu .sub-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    background: #ffffff !important;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.15) !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 9999 !important;
}

/* Affichage du sous-menu au survol */
.main-menu ul.ensaf-menu li:hover > .sub-menu {
    display: block !important;
}

.main-menu ul.ensaf-menu .sub-menu li a {
    display: block !important;
    padding: 8px 20px !important;
    color: #111111 !important;
}


/* =========================================================
   1. CONTENEUR A 80% ET CENTRÉ (Global)
   ========================================================= */

.th-header .container,
.th-header .th-container,
.sticky-header .container,
.sticky-wrapper .container {
    width: 1300px !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

/* =========================================================
   2. LOGO FIXÉ À 80PX (Global)
   ========================================================= */

.header-logo {
    display: flex !important;
    align-items: center !important;
}

.header-logo img {
    height: 120px !important;
    max-height: 120px !important;
    width: auto !important;
    display: block !important;
}

/* =========================================================
   3. DISPOSITION EN GRID (Uniquement sur ordinateur)
   ========================================================= */

@media (min-width: 1025px) {
    /* Création des 3 cases strictement délimitées */
    .th-container .row {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important; /* 1: Logo | 2: Espace central max | 3: Boutons */
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Neutraliser les contraintes Bootstrap */
    .th-container .row > .col-auto {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Centrer le menu dans sa case du milieu */
    .th-container .row > .col-auto:nth-child(2) {
        display: flex !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    /* Le menu en lui-même */
    .main-menu ul.ensaf-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 15px !important; /* Espacement fixe */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Réduction subtile de la taille pour rentrer dans les 80% */
    .main-menu ul.ensaf-menu > li > a {
        padding: 5px 10px !important;
        font-size: 14px !important; /* Indispensable si tu as beaucoup d'items */
        white-space: nowrap !important;
    }

    /* Les boutons à droite */
    .header-button {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   4. SOUS-MENUS DÉROULANTS (Global)
   ========================================================= */

.main-menu ul.ensaf-menu .sub-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 210px !important;
    background: #ffffff !important;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.15) !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 9999 !important;
}

.main-menu ul.ensaf-menu li:hover > .sub-menu {
    display: block !important;
}

.main-menu ul.ensaf-menu .sub-menu li a {
    display: block !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    color: #111111 !important;
}

/* Correction de la largeur du header Elementor */
.elementor-element.elementor-element-6e833b70 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.elementor-element-6e833b70 > .elementor-widget-container {
    width: 100% !important;
}

.elementor-element-6e833b70 .th-header.header-layout8 {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
}

/* Logo du menu sticky */
.header-layout8 .sticky-wrapper.sticky .header-logo {
    padding: 12px 20px 12px 0 !important;
}

.header-layout8 .sticky-wrapper.sticky .header-logo a {
    display: flex !important;
    align-items: center;
    width: auto !important;
}

.header-layout8 .sticky-wrapper.sticky .header-logo img {
    display: block !important;
    width: auto !important;
    height: 80px !important;
    max-width: none !important;
    object-fit: contain;
}


.th-header .container, .th-header .th-container, .sticky-header .container,  .sticky-wrapper .container {
	margin-top:25px;
}


/* Barre de défilement — Firefox */
html {
    scrollbar-width: auto;
    scrollbar-color: #b68c5a #011c1a;
}

/* Barre de défilement — Chrome, Edge et Safari */
::-webkit-scrollbar {
    width: 22px;
}

::-webkit-scrollbar-track {
    background: #011c1a;
}

::-webkit-scrollbar-thumb {
    background-color: #b68c5a;
    border-radius: 10px;
    border: 4px solid #011c1a;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #c9a574;
}