/*
Theme Name:   Hello Elementor Child
Theme URI:    https://elementor.com/hello-theme/
Description:  A lightweight child theme of Hello Elementor
Author:       emma42 - Issam : Dev Tem 
Author URI:   https://emma42.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

@import url("../hello-elementor/style.css");  


/* Custom FONT */  
@font-face {
	font-family: 'CSCanela';
	src: url('fonts/CSCanela-Regular.otf') format('opentype'),
		url('fonts/CSCanela-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Red Hat Display';
	src: url('fonts/RedHatDisplay-VariableFont_wght.ttf') format('truetype-variations'),
		url('fonts/RedHatDisplay-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900; 
	font-style: normal;
	font-display: swap;
}
/* End Cusom FOnt */

:root {
	/*global with container*/ 
	--width-global: 90%;
	--header-height: 114px;

	/* Brand Colors */
	--color-primary: #FFFFFF;
	--color-secondary: #505050;
	--color-tertiary: #E0E0E0; 
	/* Neutral Colors */
	--color-warm-gray: #5E5B58;
	--color-white: #ffffff; 

	/* Typography */
	--font-family-base: 'CSCanela', sans-serif;  
	--font-family-base1: 'Red Hat Display', sans-serif;  
	--font-size-txt: 20px;
	--font-size-desc: 22px;
	--font-size-heading: 42px;
	--font-size-heading-second:26px;

	--font-size-sm: 16px;
	--font-size-sm-btn: 18px;
	--font-size-md-btn: 18px;
	--font-size-lg-btn: 32px; 

	--font-line-height :57px;

	/* FOnt weight*/
	--f-w-400 : 400;
	--f-w-500 : 500;
	--f-w-600 : 600;
	--f-w-700 : 700;
	--gradient-header:linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.00) 46.9%);
}

/* For Mobile */
@media (max-width: 768px) {

	:root {
		--width-global: 100%;
		/*Typo*/
		--font-size-txt: 16px;

		--font-size-desc: 19px;
		--font-size-heading: 24px;	
		--font-size-heading-second:22px;

		--font-size-sm: 14px;
		--font-size-sm-btn: 13px;
		--font-size-md-btn: 18px;
		--font-size-lg-btn: 20px; 

		--font-line-height :25px;

		--header-height: 90px;
	}
}
@media screen and (min-width: 1920px) {

	:root {
		--width-global: 1520px;
	}
}
 
.gwidth .e-con-inner{   max-width: var(--width-global)!important;width: var(--width-global)!important;}
/* Font Weight*/
.f400, .f400 p, .f400 span, .f400 :is(h1,h2,h3,h4,h5,h6){font-weight:var(--f-w-400)!important;}
.f500, .f500 p, .f500 span, .f500 :is(h1,h2,h3,h4,h5,h6){font-weight:var(--f-w-500)!important;}
.f600, .f600 p, .f600 span, .f600 :is(h1,h2,h3,h4,h5,h6){font-weight:var(--f-w-600) !important;}
.f700, .f700 p, .f700 span, .f700 :is(h1,h2,h3,h4,h5,h6){font-weight:var(--f-w-700)!important;}

.heading h1,.subtitle h1,
.heading h2,.subtitle h2,
.heading h3,.subtitle h3,
.heading h4,.subtitle h4,
.heading h5,.subtitle h5,
.heading h6, .subtitle h6{
	font-family: var(--font-family-base) !important;
}  

.txt,
.txt p,
.txt a,
.txt span{
	font-family: var(--font-family-base1) !important;
}   
.white, .white :is(h1, h2, h3, h4, h5, h6, span, p) {
	color: var(--color-primary) !important;
}
.grey, .grey :is(h1,h2,h3,h4,h5,h6, span, p){
	color: var(--color-secondary) !important;
}
.grey1, .grey1 :is(h1,h2,h3,h4,h5,h6, span, p){
	color: var(--color-tertiary) !important;
}

.menu .menu-item a{
	color: var(--color-primary) !important;
	font-family: var(--font-family-base1) !important;
font-size: 18px !important;
font-style: normal;
font-weight: 400 !important; 
}
.menu .menu-item a:after {
background-color: var(--color-primary) !important;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.menu .menu-item a:hover:after {
    -webkit-transform: scaleX(100%);
    -ms-transform: scaleX(100%);
    transform: scaleX(100%);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}
.scroll-container {
    width: 27px;
    height: 38px;
    border: 2px solid #EBD9C6;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    margin: 0 auto;
}
.scroller {
    width: 2px;
    height: 6px;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    top: 4px;
    left: 10.5px;
    bottom: 24px;
    animation: scroller 2500ms ease-out infinite;
}
.scroll-to-bottom:hover {
    animation: bounceUp 0.4s ease;
}
.btn a{
	padding: 23px 71px !important;
}
.btn.head a{
	padding: 12px 70px !important;
	justify-content: center;
	align-items: center;
	color: var(--color-primary) !important;
	border-radius: 41px;
	background: #84906B;	
	font-family: var(--font-family-base1) !important;
	font-size: 18px !important;
	transition: background-color 0.4s ease;
}
.btn.head a:hover{
	background: #92a077;
}

.form .btn{
	background-color: transparent !important;
	color: var(--color-primary);
	text-align: center;
	font-family: var(--font-family-base1) !important;
	font-size: 18px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: normal;
	border-radius: 63px !important;
	border: 1px solid var(--color-primary) !important;
	padding: 0px 75px 0 50px !important;
	height: 64px !important;
}
.btn.flou a{
	border-radius: 63px;
	border: 1px solid var(--color-primary);
	background: rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(4px);
}
.btn.flou a:hover{
	backdrop-filter: blur(10px);
}
.btn.arrow a::after,
.form .btn.arrow::after{
	content: '';
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%) translateX(0);
	width: 24px;
	height: 20px;
	background-image: url(/wp-content/uploads/2025/10/btn-arrow.svg);
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform 0.3s ease;
}
.btn.arrow a:hover::after,
.form .btn.arrow:hover::after{
	transform: translateY(-50%) translateX(5px);
}

.form :is(input, select){	
	color: var(--color-primary) !important; 
	font-family: var(--font-family-base1) !important;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	border-bottom:1px solid var(--color-primary) !important;
	border-top:0 !important;
	border-left:0 !important;
	border-right:0 !important;
	background-color:transparent !important;
	border-radius:0 !important;
}
.form :is(input, select)::placeholder { 
	color:  var(--color-primary) !important;
	font-family: var(--font-family-base1) !important;
	font-size: 18px;
	font-style: normal;
	font-weight: 400 !important;
	line-height: normal;
}
.form :is(input, select):focus, 
.form button:focus,
.form a:focus {
    outline: none !important;
    box-shadow: none !important;
}
/*/  Swiper Arrows next- Prev : Top/Bottom Left/Right */
.nav-arrows div.elementor-swiper-button-prev svg,
.nav-arrows div.elementor-swiper-button-next svg{
	display:none;
}
.nav-arrows div.elementor-swiper-button-prev,
.nav-arrows div.elementor-swiper-button-next{
	width:20px;
	height:20px;	
	justify-content: center;
	flex-direction: column;
}  
.nav-arrows div.elementor-swiper-button-next:after,
.nav-arrows div.elementor-swiper-button-prev:after{
	content: '';
	position: absolute;
	width: 17px;
	height: 16px; 
	background-color: #F5F5F5;  
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;  
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}
.nav-arrows div.elementor-swiper-button-next:after{
	right: 13px;
	-webkit-mask-image: url(/wp-content/uploads/2025/10/right.svg);
	mask-image: url(/wp-content/uploads/2025/10/right.svg);
}
.nav-arrows div.elementor-swiper-button-prev:after{
	left: 13px;
	-webkit-mask-image: url(/wp-content/uploads/2025/10/left.svg);
	mask-image: url(/wp-content/uploads/2025/10/left.svg);
}
/*/ Arrows top 40 */ 
.nav-arrows.top40 div.elementor-swiper-button-prev,
.nav-arrows.top40 div.elementor-swiper-button-next{
	top:-40px !important;
}
/*/ Arrows top 80 */ 
.nav-arrows.top80 div.elementor-swiper-button-prev,
.nav-arrows.top80 div.elementor-swiper-button-next{
	top:-80px !important;
}
/*Arrows - right */
.nav-arrows.left div.elementor-swiper-button-prev {
	left:calc((100% - var(--width-global)) / 2) !important;
}

.nav-arrows.left div.elementor-swiper-button-next{
	left:calc((100% - (var(--width-global) - 45px)) / 2) !important;
	right:auto !important;	border: 1px solid #84906B !important;
}

.nav-arrows.right div.elementor-swiper-button-prev {
	right:calc(( var(--width-global) - (var(--width-global) - 115px)) / 2) !important;
	left: auto !important;border: 1px solid #84906B !important;
}

.nav-arrows.right div.elementor-swiper-button-next{
	right:calc(( var(--width-global) - var(--width-global)) / 2) !important;
	left:auto !important;	border: 1px solid #84906B !important;
}

/*pagination top right*/
.nav-arrows .swiper-pagination{
	    left: 0% !important;
    bottom: -45px !important;
    width: 73% !important;
    position: absolute;
    top: auto !important;
	    background-color: #9FAD82;
} 
.nav-arrows .elementor-widget-n-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
	background:#84906B !important;
}
 


@keyframes scroller {
    0% {
        bottom: 14px
    }

    5% {
        top: 4px
    }

    32% {
        bottom: 4px
    }

    66% {
        top: 24px;
        bottom: 4px
    }

    100% {
        top: 4px;
        bottom: 24px
    }
}
@keyframes bounceUp {
	0% {
    transform: translateY(0);
}
50% {
    transform: translateY(-8px);
}
100% {
    transform: translateY(0);
}
}

.ers-table-wrap {
    margin-top: 8px;
    overflow: auto;
    background:#84906B;
    border-radius: 12px;
    color: #fff;
	border:none;
	padding-left: 5%;
    padding-right: 5%;
}
.ers-table thead tr th {
	  background:#84906B;
     color: #fff;
	 font-size:18px!important:
}
.ers-table tbody td{
	border-bottom:none;
}

/* Enlever les bordures du tableau */
.ers-table-wrap table,
.ers-table-wrap th,
.ers-table-wrap td {
    border: none !important;
}

/* Alternative : mettre les bordures transparentes */
.ers-table-wrap .ers-table {
    border-collapse: collapse;
}

/* Enlever toutes les bordures */
.ers-table-wrap .ers-table,
.ers-table-wrap .ers-table th,
.ers-table-wrap .ers-table td {
    border: none;
	color: #FFF;
	font-family: "Red Hat Display";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

/* Garder uniquement la bordure en bas des th */
.ers-table-wrap .ers-table th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	color: #FFF;
	font-family: "Red Hat Display";
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
.ers-table thead{
	border-bottom: solid 1px white;
}

.ers-row{
    background:rgba(75, 89, 64, 0.21);!important;
	
}

.ers-row:hover{
    background: none!important;
	
}


/* Cacher la modal au chargement */
body.page-loading .ers-modal.is-open {
    display: none!important;
}

/* Centrer la modal */
.ers-modal.is-open {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
    z-index: 9999;
}

/* Le contenu de la modal */
.ers-modal-content {
    background: #fff;
    padding: 30px;

    overflow: auto;
    position: relative;
}

/* Bouton de fermeture (si vous en avez un) */
.ers-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
}