/*
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: 'ABChanel Corpo Extra Light';
	src: url('fonts/ABChanel Corpo Extra Light.woff2') format('woff2'),
		url('fonts/ABChanel Corpo Extra Light.woff') format('woff'),
		url('fonts/ABChanel Corpo Extra Light.ttf') format('truetype');
	font-weight: 200;  
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Newsreader';
	src: url('fonts/Newsreader-VariableFont.ttf') format('truetype');
	font-weight: 100 900; 
	font-stretch: 75% 125%; 
	font-style: normal;
	font-display: swap;
}

/* End Cusom FOnt */

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

	--c-blue: #0B2737;
	--c-gold: #6E593F;
	--c-white:#FFF;
	--c-gray:#EFECE6;
	/* Typography */
	--font-family-base: 'ABChanel Corpo Extra Light', sans-serif; 
	--font-family-base1: 'Newsreader', sans-serif;  

	/* FOnt weight*/
	--f-w-300 : 300;
	--f-w-400 : 400;
	--f-w-500 : 500;
	--f-w-600 : 600;
	--f-w-700 : 700; 
}

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

	:root { 
	}
}

/* New Style : Heading */
.gwidth{
	max-width : var(--width-global) !important;	
}
.white{color: var(--c-white) !important;}
.gray{color: var(--c-gray) !important;}
.header.bg{ 
	background: var(--gradient-header), url('/wp-content/uploads/2025/10/bg-scaled.jpg');	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;

}
.section.bg{
	background: var(--color-primary); 
}
.section.bg.bgwarm{
	background: var(--color-secondary);
}
.section.bg.tertiary{
	background: var(--color-tertiary); 	
}

/* Font Weight*/
.f300, .f300 p, .f300 span, .f300 :is(h1, h2, h3, h4, h5, h6), .f300 :is(h1, h2, h3, h4, h5, h6) a{font-weight:var(--f-w-300)!important;}
.f400, .f400 p, .f400 span, .f400 :is(h1, h2, h3, h4, h5, h6), .f400 :is(h1, h2, h3, h4, h5, h6) a{font-weight:var(--f-w-400)!important;}
.f500, .f500 p, .f500 span, .f500 :is(h1, h2, h3, h4, h5, h6), .f500 :is(h1, h2, h3, h4, h5, h6) a{font-weight:var(--f-w-500)!important;}
.f600, .f600 p, .f600 span, .f600 :is(h1, h2, h3, h4, h5, h6), .f600 :is(h1, h2, h3, h4, h5, h6) a{font-weight:var(--f-w-600) !important;}
.f700, .f700 p, .f700 span, .f700 :is(h1, h2, h3, h4, h5, h6), .f700 :is(h1, h2, h3, h4, h5, h6) a{font-weight:var(--f-w-700)!important;}

.heading h1,
.heading h2,
.heading h3,
.heading h4,
.heading h5,
.heading h6{
	font-family: var(--font-family-base) !important;
}  
.heading h1 a,
.heading h2 a,
.heading h3 a,
.heading h4 a,
.heading h5 a,
.heading h6 a{
	font-family: var(--font-family-base) !important;
} 
.heading :is(h1, h2, h3, h4, h5, h6) span{
	font-weight:var(--f-w-600) !important;
}
.heading.gray :is(h1, h2, h3, h4, h5, h6){
	color:var(--c-gray) !important;
}
em{
	font-style: italic;
}
.txt,
.txt p,
.txt a,
.txt span{
	font-family: var(--font-family-base) !important;
} 
.txt.reader,
.txt.reader p,
.txt.reader a,
.txt.reader span{
	font-family: var(--font-family-base1) !important;
} 
.v-line{
	transform:rotate(90deg);
}
/* 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 .elementor-icon path {
	stroke: #ad9664;
	stroke-width: .5;
	fill: #ad9664;
	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: 2s, 2.3s, 2.5s;
	animation-delay: 0s, 1.3s, 1.5s;
}
@keyframes DrawLine {
	to { stroke-dashOffset: 0; }
}

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

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

/*Dots */
@keyframes jump {
	0%, 60%, 100% { transform: translateY(0); opacity: 1; }
	30% { transform: translateY(-4px); opacity: 0.2; }
}
#page-loader .dot1{ animation: jump 1s infinite .0s; }
#page-loader .dot2{ animation: jump 1s infinite .15s; }
#page-loader .dot3{ animation: jump 1s infinite .30s; }

/* Content section */
#cursor-dot {
	--glow-color: 55, 109, 216;
	pointer-events: none;   
	z-index: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	will-change: transform;
	z-index: 9999;
	top: 0;
	left: 0;
	height: 500px;
	width: 500px;
	opacity: 1;
	background-color: transparent;
	background: radial-gradient(circle, rgb(173 150 100 / 61%) 0%, rgba(110, 89, 63, .1) 35%, rgba(0, 0, 0, 0) 20%);
	position: fixed;
	background-blend-mode: difference;
	pointer-events: none;
	mix-blend-mode: difference;
}

#content-section::before{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1; 
	background-color: #0B2737; 
	-webkit-mask-image: url('/wp-content/uploads/2025/11/Exclude-bg3.svg');
	-webkit-mask-repeat: repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: auto;  
	mask-image: url('/wp-content/uploads/2025/11/Exclude-bg3.svg');
	mask-repeat: repeat;
	mask-position: center;
	mask-size: auto;

}
.txt.two span{
	font-weight: 600;
}
.footer span.elementor-icon-list-text {
	margin-right: 6px;
}
.btn .elementor-button-icon svg{

	width: 12px;
	height: 13px;

}
.btn .elementor-button-icon svg, 
.footer .elementor-icon-list-icon svg{
	display: inline-block;
	transition: transform 0.2s ease;
}

.btn .elementor-button:hover .elementor-button-icon svg,
.footer .elementor-icon-list-item:hover .elementor-icon-list-icon svg{
	animation: iconSlideUpDown 0.4s ease forwards;
}

@keyframes iconSlideUpDown {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	40% {
		transform: translateY(-100%);
		opacity: 0;
	}
	60% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
.hover-preview {
	text-align: center;
	margin: 10px 0;
	position: absolute;
	right:0;
	z-index: 9999999
}

.hover-preview img {
	max-width: 200px; 
	width: 200px; 
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	transition: transform 0.3s ease;
	margin-top:2px;
}

.hover-preview img:hover {
	transform: scale(1.05);
}
.caret {
	display: inline-block;
	width: 3px;           
	height: 80px;         
	background: #ffffff;
	vertical-align: bottom;
	margin-left: 5px;
	animation: blink 1s step-start infinite;
}

@keyframes blink {
	0%, 50%, 100% { opacity: 1; }
	25%, 75% { opacity: 0; }
}

@media (max-width: 900px) {

}





/*************************************/

:focus-visible {
	outline: 1px dashed var(--c-blue);
}

:focus:not(:focus-visible) {
	outline: none;
}

::-webkit-scrollbar {
	width: 9px;
}

::-webkit-scrollbar-track {
	background-color: rgba(11, 39, 55, 0.2);
}

::-webkit-scrollbar-thumb {
	cursor: pointer;
	background-color: rgba(11, 39, 55, 0.6);
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(11, 39, 55, 0.9);
}

::-webkit-scrollbar-thumb:active {
	background-color: rgba(11, 39, 55, 1);
}

::selection {
	color: #fff !important;
	background: var(--c-gold);
}



@media (max-width: 720px) {
	::-webkit-scrollbar {
		width: 2px;
	}
}
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

#cursor-dot {
	--glow-color: 55, 109, 216;
	pointer-events: none;
	mix-blend-mode: difference;
	z-index: 0;
	position: fixed;
	top: 0;
	left: 0;
	height: 500px;
	width: 500px;
	opacity: 0;
	background-color: transparent;
	background: radial-gradient(circle, rgba(var(--glow-color), 1) 0%, rgba(var(--glow-color), 0.3) 20%, rgba(0, 0, 0, 0) 40%);

}

/* On hover of interactive items */
body:hover #cursor-dot,
a:hover ~ #cursor-dot,
button:hover ~ #cursor-dot {
	transform: translate(-50%, -50%) scale(2);
	background: #0B2737;     /* optional hover color */
}