/*
Theme Name: Hello Child
Template: hello-elementor
Author: Hicham Zian
Version: 1.0
Description: Thème enfant de Hello Elementor
*/

.wow {
	visibility: hidden;
}
p {
	margin: 0;
}
html {
  overflow-x: hidden;
}
body {
  position: relative;
  overflow-x: hidden;  
}
h1, h2, h3, h4, h5, h6{
	text-wrap: balance;
}
.elementor-counter-number-suffix{
	display: block;
	font-size: 12px;
	color: #0B0D11;
	font-weight: bold;
	margin-left: 16px;
}
.animate__slower{
  --animate-duration: 3s!important;
}

 /* Improved Animations Stylesheet from https://element.how/elementor-improve-entrance-animations/ , works for the 'fade' animations */
 
@keyframes fadeDown {
	from {
		opacity: 0;
		transform: translate3d(0,-30px,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}
.elementor-element.fadeInDown {
	animation-name: fadeDown
}

@keyframes fadeLeft {
	from {
		opacity: 0;
		transform: translate3d(-30px,0,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.elementor-element.fadeInLeft {
	animation-name: fadeLeft
}

@keyframes fadeRight {
	from {
		opacity: 0;
		transform: translate3d(30px,0,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.elementor-element.fadeInRight {
	animation-name: fadeRight
}
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translate3d(0,30px,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}
.elementor-element.fadeInUp {
	animation-name: fadeUp
}
.background-blur {
    position: relative;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important; /* Compatibilité Safari */
    
    /* Masque dégradé du haut vers le bas */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
  }
  
.e-con-inner>.elementor-element{
	height: 100%;
}

strong{
	font-weight: 700;
}
.elementor-2 .elementor-element.elementor-element-53167d8 > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title {
	position: relative;
	display: inline-block;
}

.elementor-2 .elementor-element.elementor-element-53167d8 > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title::before {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 50%;
	background-color: #2F0437;
	transition: all 0.3s ease-in-out;
	transform: translateX(-50%);
}

.elementor-2 .elementor-element.elementor-element-53167d8 > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover::before {
	width: 50%;
}

/* Lien actif : garder la bordure visible */
.elementor-2 .elementor-element.elementor-element-53167d8 > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current::before {
	width: 70%;
	background-color: #2F0437;
}
.heart-icon {
	color: #000; /* Ou la couleur exacte de ta police */
	font-size: inherit; /* Garde la taille de la police du texte */
}
.elementor-button:hover .elementor-button-icon {
	transform: translateX(10px); /* Décale l'icône de 15px vers la droite */
	transition: transform 0.3s ease; /* Transition fluide sur 0.3 secondes */
}

.elementor-button .elementor-button-icon {
	transition: transform 0.3s ease; /* Assure une transition fluide même sans survol */
}
.ue-grad-btn-wrapper:hover .ue-gradient-border-icon {
	transform: translateX(10px); /* Décale l'icône de 15px vers la droite */
	transition: transform 0.3s ease; /* Transition fluide sur 0.3 secondes */
}

.ue-gradient-border-icon {
	transition: transform 0.3s ease; /* Assure une transition fluide même sans survol */
}

/* Effet au survol de l'icône lorsque l'accordéon est fermé */
.e-n-accordion-item-title:hover .e-closed {
	transform: translateX(10px); /* Décale l'icône de 15px vers la droite */
	transition: transform 0.3s ease; /* Transition fluide */
}

/* Effet au survol de l'icône lorsque l'accordéon est ouvert */
.e-n-accordion-item-title:hover .e-opened {
	transform: translateX(10px); /* Décale l'icône de 15px vers la droite */
	transition: transform 0.3s ease; /* Transition fluide */
}

/* Transition initiale pour l'état de base de l'icône fermée */
.e-closed {
	transition: transform 0.3s ease; /* Assure une transition fluide même sans survol */
}

/* Transition initiale pour l'état de base de l'icône ouverte */
.e-opened {
	transition: transform 0.3s ease; /* Assure une transition fluide même sans survol */
}


.elementor-button .elementor-button-icon {
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.elementor-button:hover .elementor-button-icon {
	transform: scale(1.3);
}
.hizi-border-outside {
	position: relative;
	overflow: hidden;
}

.hizi-border-outside::after {
	content: '';
	position: absolute;
	inset: -10px;
	background: conic-gradient(from 0deg, #012030, #FEFD48, #57B7CC, #012030);
	z-index: -1;
	border-radius: inherit;
	filter: blur(10px);
	box-shadow: 0 0 20px rgba(254, 253, 72, 0.4), 
				0 0 30px rgba(87, 183, 204, 0.4);
	opacity: 0; /* Par défaut, l'effet est invisible */
	transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.swiper-slide-active .hizi-border-outside::after {
	opacity: 1; /* L'effet est actif pour l'élément sélectionné */
	animation: rotateBorder 6s linear infinite;
}

.hizi-border-outside:hover::after {
	opacity: 1; /* L'effet devient visible au survol */
	animation: rotateBorderHover 3s linear infinite;
	filter: blur(15px);
	box-shadow: 0 0 25px rgba(254, 253, 72, 0.6), 
				0 0 40px rgba(87, 183, 204, 0.6);
}

@keyframes rotateBorder {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes rotateBorderHover {
	0% { transform: rotate(360deg); }
	100% { transform: rotate(0deg); }
}
.hizi-border-outside-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: bold;
	color: #E0E0E0; /* Couleur du texte */
	background: #0D1B2A; /* Fond du bouton */
	border: none;
	border-radius: 60px; /* Arrondi */
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(87, 183, 204, 0.4); /* Glow initial */
}

/* Effet Glow animé en arrière-plan */
.hizi-border-outside-btn::before {
	content: '';
	position: absolute;
	width: 150%;
	height: 150%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 60px;
	z-index: -2;
	background: conic-gradient(from 0deg, #012030, #FEFD48, #57B7CC, #012030);
	filter: blur(8px) brightness(1);
	animation: rotateGlow 3s linear infinite;
	transition: all 0.5s ease-in-out;
}

/* Effet lumineux plus intense au survol */
.hizi-border-outside-btn:hover::before {
	filter: blur(15px) brightness(1.2);
	animation: rotateGlowHover 2s linear infinite;
}

/* Animation de rotation continue */
@keyframes rotateGlow {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Animation inversée au survol */
@keyframes rotateGlowHover {
	0% { transform: translate(-50%, -50%) rotate(360deg); }
	100% { transform: translate(-50%, -50%) rotate(0deg); }
}

.portfolio-item a {
	position: relative;
	display: block;
	border-radius: 15px;
	transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
	overflow: hidden;
	z-index: 1;
	background-size: cover;
	background-position: center;
	transform: scale(1.01); /* Légère mise en avant au repos pour plus de fluidité */
}

/* Effet glow simplifié sans gradient */
.portfolio-item a::before {
	content: '';
	position: absolute;
	inset: -20px;
	border-radius: inherit;
	background: transparent; /* Suppression du gradient */
	filter: blur(30px);
	opacity: 0.8;
	transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out, filter 0.6s ease-in-out;
	z-index: -2;
	animation: glowAnimation 5s linear infinite alternate;
}

/* Animation du glow */
@keyframes glowAnimation {
	0% { filter: blur(20px); opacity: 0.6; }
	100% { filter: blur(35px); opacity: 0.8; }
}

/* Zoom out au survol avec le nouveau box-shadow */
.portfolio-item a:hover {
	transform: scale(0.98);
	box-shadow: 0 0px 20px rgba(87, 183, 204, 0.5); /* Nouveau box-shadow */
}

.portfolio-item a:hover::before {
	transform: scale(0.98);
	filter: blur(40px);
	opacity: 1;
}