/*
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: 'ABCArizonaFlareVariable';
	font-style: normal;
	font-weight: normal;
	src: url('fonts/ABCArizonaFlareVariable-Trial.ttf') format('truetype');
} 

/* End Cusom FOnt */

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

	/* Brand Colors */
	--color-primary: #F4F3EB;
	--color-secondary: #827B75;
	--color-tertiary: #E1D9CD;
	--title-color: #EEEBDE;
	/* Neutral Colors */
	--color-warm-gray: #5E5B58;
	--color-white: #ffffff; 

	/* Typography */
	--font-family-base: 'ABCArizonaFlareVariable', sans-serif; 

	--font-family-heading: 'ABCArizonaFlareVariable', sans-serif;
	--font-size-txt: 18px;
	--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 wright*/
	--f-w-500 : 500;
	--f-w-600 : 600;
	--f-w-700 : 700;

	/* Gradient */ 

	--gradient-header:  linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
		linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 29.43%);

}

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

	:root {
		/*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;
	}
}
ul {
	list-style: none !important; 
}
/* heading*/
.heading h1,
.heading h2,
.heading h3,
.heading h4,
.heading h5,
.heading h6,
.heading summary{
	font-family: var(--font-family-base) !important;
}
/*** Texte ***/
.txt,
.txt p,
.txt a,
.txt div,
.txt span{
	font-family: var(--font-family-base) !important;
} 
/* Logo */


.logo-h .elementor-icon svg   {  

	fill-opacity: 0;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration: 1;

	animation-name: DrawLine, FadeStroke, FillIn;
	animation-duration: 1.8s, 1.5s, 1.7s;
	animation-delay: 0s, 1.5s, 1.9s;
}
.logo-h.w .elementor-icon path{	
	stroke: #ffffff;
	fill: #ffffff;
}
.logo-h.m .elementor-icon path{	
	stroke: rgba(245, 235, 222, 1);
	fill: rgba(245, 235, 222, 1);
}
.logo-h .elementor-icon path {
	stroke-width: .5;

	fill-opacity: 0;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;

	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;

	animation-name: DrawLine, FadeStroke, FillIn;
	animation-duration: 1s, 1.3s, 1.5s;
	animation-delay: 0s, 0.3s, 0.5s;
}
@keyframes DrawLine {
	to { stroke-dashOffset: 0; }
}

@keyframes FadeStroke {
	to { stroke-opacity: 0; }
}

@keyframes FillIn {
	from { fill-opacity: 0; }
	to { fill-opacity: 1; }
} 

/* Header */
.site_header{
	position: sticky;
	top: 0;
	z-index: 999;
	background: transparent;
	transition: background-color 500ms ease; 
}

.site_header.is-scrolled{
	background: rgba(13, 1, 9, 0.8); 
}
/* 
.logo-wrap{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 0%);
transition: transform 600ms ease;
will-change: transform;
} 
.logo-svg{
position: absolute;
left: 0;
top: 0;
transition: opacity 300ms ease;
}
*/
.logo-primary{ opacity: 1; }
.logo-secondary{ opacity: 0; }

.site_header .logo-secondary{ 
	transition: opacity .3s ease;
	will-change: transform; } 
.site_header.is-scrolled .logo-primary{ opacity: 0;transition: opacity .3s ease; }
.site_header.is-scrolled .logo-secondary{ 
	opacity: 1;  
	transition: opacity .3s ease;  
	transition-delay: .3s; 
} 
.menu{
	position: absolute; 
	top: 50%;
	transform: translateY(0%) translateX(12px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms ease, transform 500ms ease;
	transition-delay: 1s;       /* no delay initially */
	display: flex;
	gap: 18px;
} 
/* After logo starts moving, menu appears with delay */
.site_header.is-scrolled .menu{
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0%) translateX(0);
	transition-delay: 500ms;     /* appear AFTER logo movement begins */
}

/* =========================
Animation (non-polygon)
========================= */
.a-line-mask span,
.a-line-mask a span,
.a-line-mask :is(h1, h2, h3, h4, h5, h6) {
	opacity: 0;
	transform: translateX(0) translateY(30px);
	transition: opacity .7s ease, transform 1.2s ease !important;
}
/*Is not in view */
.fade.is-not-inview{
	opacity:0;
	transition: opacity 1s ease !important;
}
.fade.is-inview{
	opacity:1;
	transition: opacity 1s ease !important;
}
/* In view: a-0 */
.is-inview.a-line-mask .a-0 span,
.is-inview.a-line-mask .a-0 a span,
.is-inview.a-line-mask .a-0 :is(h1, h2, h3, h4, h5, h6) {
	transform: translateY(0px);
	transition: opacity 1s ease, transform 2s ease !important;
	opacity: 1;
}

/* In view: a-1 */
.is-inview.a-line-mask .a-1 span,
.is-inview.a-line-mask .a-1 a span,
.is-inview.a-line-mask .a-1 :is(h1, h2, h3, h4, h5, h6) {
	transform: translateY(0px);
	transition: opacity 2s ease, transform 2s ease !important;
	opacity: 1;
}

/* =========================
Polygon
========================= */
.a-line-mask.polygon span,
.a-line-mask.polygon div,
.a-line-mask.polygon a span,
.a-line-mask.polygon :is(h1, h2, h3, h4, h5, h6) {
	opacity: 0;
	transform: translateY(30px);

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

	transition: opacity .7s ease, transform 1.2s ease, clip-path 1s ease !important;
}

/* left */
.a-line-mask.polygon.l-polygon span,
.a-line-mask.polygon.l-polygon div,
.a-line-mask.polygon.l-polygon a span,
.a-line-mask.polygon.l-polygon :is(h1, h2, h3, h4, h5, h6) {
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

/* right */
.a-line-mask.polygon.r-polygon span,
.a-line-mask.polygon.r-polygon div,
.a-line-mask.polygon.r-polygon a span,
.a-line-mask.polygon.r-polygon :is(h1, h2, h3, h4, h5, h6) {
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

/* bottom */
.a-line-mask.polygon.b-polygon span,
.a-line-mask.polygon.b-polygon div,
.a-line-mask.polygon.b-polygon a span,
.a-line-mask.polygon.b-polygon :is(h1, h2, h3, h4, h5, h6) {
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

/* top */
.a-line-mask.polygon.t-polygon span,
.a-line-mask.polygon.t-polygon div,
.a-line-mask.polygon.t-polygon a span,
.a-line-mask.polygon.t-polygon :is(h1, h2, h3, h4, h5, h6) {
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

/* left-top */
.a-line-mask.polygon.l-t-polygon span,
.a-line-mask.polygon.l-t-polygon div,
.a-line-mask.polygon.l-t-polygon a span,
.a-line-mask.polygon.l-t-polygon :is(h1, h2, h3, h4, h5, h6) {
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

/* left-bottom */
.a-line-mask.polygon.l-b-polygon span,
.a-line-mask.polygon.l-b-polygon div,
.a-line-mask.polygon.l-b-polygon a span,
.a-line-mask.polygon.l-b-polygon :is(h1, h2, h3, h4, h5, h6) {
	clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
	-webkit-clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
}

/* polygon open when in view */
.is-inview.a-line-mask.polygon span,
.is-inview.a-line-mask.polygon div,
.is-inview.a-line-mask.polygon a span,
.is-inview.a-line-mask.polygon :is(h1, h2, h3, h4, h5, h6) {
	opacity: 1;
	transform: translateY(0);

	clip-path: polygon(-10% 0%, 110% 0%, 110% 110%, -10% 110%);
	-webkit-clip-path: polygon(-10% 0%, 110% 0%, 110% 110%, -10% 110%);
}

/* =========================
Delays (apply to targets)
Put delay class on .a-line-mask OR on .a-0/.a-1 wrapper
========================= */

/* delay 0.5s */
.a-line-mask.delay-05 span,
.a-line-mask.delay-05 div,
.a-line-mask.delay-05 a span,
.a-line-mask.delay-05 :is(h1, h2, h3, h4, h5, h6),
.a-line-mask .delay-05 span,
.a-line-mask .delay-05 a span,
.a-line-mask .delay-05 :is(h1, h2, h3, h4, h5, h6) {
	transition-delay: 0.3s !important;
}

/* delay 1s */
.a-line-mask.delay-10 span,
.a-line-mask.delay-10 div,
.a-line-mask.delay-10 a span,
.a-line-mask.delay-10 :is(h1, h2, h3, h4, h5, h6),
.a-line-mask .delay-10 span,
.a-line-mask .delay-10 a span,
.a-line-mask .delay-10 :is(h1, h2, h3, h4, h5, h6) {
	transition-delay: .5s !important;
}

/* delay 1.5s */
.a-line-mask.delay-15 span,
.a-line-mask.delay-15 div,
.a-line-mask.delay-15 a span,
.a-line-mask.delay-15 :is(h1, h2, h3, h4, h5, h6),
.a-line-mask .delay-15 span,
.a-line-mask .delay-15 a span,
.a-line-mask .delay-15 :is(h1, h2, h3, h4, h5, h6) {
	transition-delay: 0.7s !important;
}

/* delay 2s */
.a-line-mask.delay-20 span,
.a-line-mask.delay-20 div,
.a-line-mask.delay-20 a span,
.a-line-mask.delay-20 :is(h1, h2, h3, h4, h5, h6),
.a-line-mask .delay-20 span,
.a-line-mask .delay-20 a span,
.a-line-mask .delay-20 :is(h1, h2, h3, h4, h5, h6) {
	transition-delay: 0.9s !important;
}

/* delay 2.5s */
.a-line-mask.delay-25 span,
.a-line-mask.delay-25 div,
.a-line-mask.delay-25 a span,
.a-line-mask.delay-25 :is(h1, h2, h3, h4, h5, h6),
.a-line-mask .delay-25 span,
.a-line-mask .delay-25 a span,
.a-line-mask .delay-25 :is(h1, h2, h3, h4, h5, h6) {
	transition-delay: 1.1s !important;
}

/* delay 30 */
.a-line-mask.delay-30 span,
.a-line-mask.delay-30 div,
.a-line-mask.delay-30 a span,
.a-line-mask.delay-30 :is(h1, h2, h3, h4, h5, h6),
.a-line-mask .delay-30 span,
.a-line-mask .delay-30 a span,
.a-line-mask .delay-30 :is(h1, h2, h3, h4, h5, h6) {
	transition-delay: 1.3s !important;
}
.a-line-mask:not(.is-inview) span,
.a-line-mask:not(.is-inview) div,
.a-line-mask:not(.is-inview) a span,
.a-line-mask:not(.is-inview) :is(h1, h2, h3, h4, h5, h6) {
	transition-delay: 0s !important;
} 

/*border anim*/
.border-anim.b-w {color: #fff;}
.border-anim.b-b {color: #000;}
.border-anim {
	display: inline-block;

	text-decoration: none;
}
.border-anim.b-w::after { background: #fff;}
.border-anim.b-b::after { background: #000;}
.border-anim::after {
	content: '';
	display: block;
	width: 0;
	height: 1px;

	transition: width .6s;
	margin-top: 3px;
	position: absolute;
	bottom: 0;
}

.is-inview.border-anim::after {
	width: 100%;
	transition: width .6s;
}

/* Form */
.forminator-ui.forminator-custom-form-101.forminator-design--material.forminator-ui.forminator-custom-form[data-design=material] .forminator-button{
	font-family: var(--font-family-base) !important;
}
#forminator-module-101.forminator-design--material .forminator-label[class*="forminator-floating-"] {
	font-size: 13px !important;
}

@media (max-width: 767px) {
	.site-header.is-scrolled .logo-wrap {
		transform: translate(calc(-99vw + 20px), 0%);
	}
	.forminator-ui.forminator-custom-form[data-design=material] .forminator-button {
		width: auto !important; 
	}
	.site_header.logo-swapped .logo-secondary { 
		transform: translate(15%, 0%);
	}
} 
@media only screen and (min-width: 768px) and (max-width: 1024px)  {
	.site-header.is-scrolled .logo-wrap {
		transform: translate(calc(-99vw + 20px), 0%);
	}
	.forminator-ui.forminator-custom-form[data-design=material] .forminator-button {
		width: auto !important; 
	}
	.site_header.logo-swapped .logo-secondary { 
		transform: translate(100%, 0%);
	}
}