.glide-container {
    background-image: url("/main/images/height.jpg");
 /* Remplacez par l'URL de votre image */
    background-size: cover;
    background-position: center;
    height: 600px; /* Augmentez la hauteur selon vos besoins */
    
}
.glide__slide {
    height: 100%; /* Chaque slide occupe toute la hauteur du container */
}

.glide__slide img {
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre toute la hauteur de chaque slide */
}
.glide__track, .glide__slides{
    height: 100%;
    cursor: pointer;
}

/* .fancy-corners {
    position: relative;
    overflow: hidden;
  } */
   .fancy-corners{
    position: relative;
    background-color: #fff;
    transform-style: preserve-3d;
   }
  
  /* .fancy-corners::before,
  .fancy-corners::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: #1ba; /* Teinte grise, changez en fonction de votre thème */
    /* z-index: -1; */
  */
  .fancy-corners:after,
  .fancy-corners:before {
    position: absolute;
    width: 8em;
    height: 8em;
    background-size: 100% 100%;
    background-position: 0 0;
    transform: translateZ(-1px);
    z-index: -1;
    -webkit-mask-image: linear-gradient(-45deg, #fff 85.5%, transparent 0);
    mask-image: linear-gradient(-45deg, #fff 85.5%, transparent 0);
    -webkit-mask-image: linear-gradient(-45deg, #fff 85.5%, transparent 0);
    mask-image: linear-gradient(-45deg, #fff 85.5%, transparent 0);
 
  }
  
  .fancy-corners::before {
    top: -20px;
    left: -20px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  
  .fancy-corners::after {
    bottom: -20px;
    right: -20px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  

  .animated-item {
    position: relative;
    overflow: hidden;
}

.animated-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #1E40AF; /* Bleu foncé */
    transition: left 0.4s ease; /* Contrôle la vitesse de l'animation */
    z-index: 0;
}

.animated-item:hover::before {
    left: 0; /* Animation de remplissage de gauche à droite */
}

.animated-item a {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease; /* Transition couleur du texte */
}

.animated-item:hover a {
    color: white; /* Texte blanc au survol */
}

.hover-rotate {
  transition: transform 0.6s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hover-rotate:hover {
  transform: rotate(360deg) scale(1.2);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


/* Menu MObile */

/* Sous-menu masqué */
.translate-x-full {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

/* Sous-menu visible */
.translate-x-0 {
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
}

/* Menu principal masqué */
.-translate-x-full {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

/* Menu principal visible */
.translate-x-0 {
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
}




/* */


/* Services  */


.carousel-3D-swiper-section {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
	max-width: 1200px;
	margin: auto;
	overflow: hidden;
	min-height: 500px;
}

.carousel-3D-swiper-title {
	text-align: center;
	font-size: 3rem;
	color: orangered;
}

.carousel-3D-swiper .swiper-slide {
	position: relative;
}

.carousel-3D-swiper .image-wrapper {
	overflow: hidden;
	@apply aspect-video; 
	max-height: 225px;
}

.carousel-3D-swiper .image-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 225px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 8px;
	-webkit-box-reflect: below 5px -webkit-linear-gradient(bottom, rgba( 255, 0, 0,	0.1 ) 0%, transparent 32px, transparent 100%);
}

.details {
	padding: 25px 20px;
	font-weight: 600;
	text-align: center;
	background-color: #fff;
}

.details span {
	display: block;
	font-size: 16px;

}

.details h3 {
	margin: 0;
	font-weight: bold;
	font-size: 24px;
	line-height: 1.1;
}

.details p {
	margin: 8px 0 0;
	opacity: 0.65;
	font-size: 14px;
	font-weight: 500;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.carousel-3D-swiper-section .swiper-pagination-bullet {
	margin: 0 4px;
  width: 16px;
  height: 16px;
	z-index: 50;
}

.carousel-3D-swiper-section .swiper-pagination-bullet-active {
	opacity: 1;
	background: orange;
}



/* Services */



/* Loader */


#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e8e8e8; /* Slightly transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensures the loader stays on top */
}

.boxes {
  --size: 32px;
  --duration: 800ms;
  height: calc(var(--size) * 2);
  width: calc(var(--size) * 3);
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  margin-top: calc(var(--size) * 1.5 * -1);
  transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}

.boxes .box {
  width: var(--size);
  height: var(--size);
  top: 0;
  left: 0;
  position: absolute;
  transform-style: preserve-3d;
}

.boxes .box:nth-child(1) {
  transform: translate(100%, 0);
  -webkit-animation: box1 var(--duration) linear infinite;
  animation: box1 var(--duration) linear infinite;
}

.boxes .box:nth-child(2) {
  transform: translate(0, 100%);
  -webkit-animation: box2 var(--duration) linear infinite;
  animation: box2 var(--duration) linear infinite;
}

.boxes .box:nth-child(3) {
  transform: translate(100%, 100%);
  -webkit-animation: box3 var(--duration) linear infinite;
  animation: box3 var(--duration) linear infinite;
}

.boxes .box:nth-child(4) {
  transform: translate(200%, 0);
  -webkit-animation: box4 var(--duration) linear infinite;
  animation: box4 var(--duration) linear infinite;
}

.boxes .box > div {
  --background: #5C8DF6;
  --top: auto;
  --right: auto;
  --bottom: auto;
  --left: auto;
  --translateZ: calc(var(--size) / 2);
  --rotateY: 0deg;
  --rotateX: 0deg;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--background);
  top: var(--top);
  right: var(--right);
  bottom: var(--bottom);
  left: var(--left);
  transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
}

.boxes .box > div:nth-child(1) {
  --top: 0;
  --left: 0;
}

.boxes .box > div:nth-child(2) {
  --background: #145af2;
  --right: 0;
  --rotateY: 90deg;
}

.boxes .box > div:nth-child(3) {
  --background: #447cf5;
  --rotateX: -90deg;
}

.boxes .box > div:nth-child(4) {
  --background: #DBE3F4;
  --top: 0;
  --left: 0;
  --translateZ: calc(var(--size) * 3 * -1);
}

@-webkit-keyframes box1 {
  0%, 50% {
    transform: translate(100%, 0);
  }

  100% {
    transform: translate(200%, 0);
  }
}

@keyframes box1 {
  0%, 50% {
    transform: translate(100%, 0);
  }

  100% {
    transform: translate(200%, 0);
  }
}

@-webkit-keyframes box2 {
  0% {
    transform: translate(0, 100%);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(100%, 0);
  }
}

@keyframes box2 {
  0% {
    transform: translate(0, 100%);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(100%, 0);
  }
}

@-webkit-keyframes box3 {
  0%, 50% {
    transform: translate(100%, 100%);
  }

  100% {
    transform: translate(0, 100%);
  }
}

@keyframes box3 {
  0%, 50% {
    transform: translate(100%, 100%);
  }

  100% {
    transform: translate(0, 100%);
  }
}

@-webkit-keyframes box4 {
  0% {
    transform: translate(200%, 0);
  }

  50% {
    transform: translate(200%, 100%);
  }

  100% {
    transform: translate(100%, 100%);
  }
}

@keyframes box4 {
  0% {
    transform: translate(200%, 0);
  }

  50% {
    transform: translate(200%, 100%);
  }

  100% {
    transform: translate(100%, 100%);
  }
}



/* Loader */