/* Estilo general para el preloader, posicionándolo de manera fija para que cubra toda la pantalla */
.preloader {
 position: fixed; /* Fija el preloader en la pantalla */
 top: 0; /* Alinea el preloader al borde superior de la pantalla */
 left: 0; /* Alinea el preloader al borde izquierdo de la pantalla */
 width: 100%; /* Hace que el preloader ocupe el 100% del ancho de la pantalla */
 height: 100%; /* Hace que el preloader ocupe el 100% de la altura de la pantalla */
 display: flex; /* Utiliza flexbox para centrar el contenido */
 justify-content: center; /* Centra el contenido horizontalmente */
 align-items: center; /* Centra el contenido verticalmente */
 background: #ffffff; /* Establece el fondo blanco para el preloader */
 z-index: 1100; /* Asegura que el preloader esté por encima de otros elementos */
 transition: opacity 0.5s ease-out; /* Transición suave de opacidad */
}

/* Estilo para el contenedor del logo dentro del preloader */
.preloader__logo {
 background-size: 75%;
 background-image: url(../img/demos/law-firm-2/gc.gif);
 background-position-x: center;
 background-position-y: center;
 background-repeat: no-repeat;
 width: 300px; /* Ancho del logo */
 height: 300px; /* Altura del logo */
 animation: spinning 2s infinite;
 transform-style:preserve-3d;
}

/* @keyframes spinning {
from  { transform: translateZ(-5em) rotateY(0deg);   }
to    { transform: translateZ(-5em) rotateY(360deg); }
}

/* Define la animación 'spin' para rotar el círculo */
@keyframes spin {
 to {
     transform: rotate(360deg); /* Rota el elemento 360 grados */
 }
} */

/* Clase para hacer el preloader invisible (opacidad 0) */
.preloader--invisible {
 opacity: 0; /* Establece la opacidad a 0 para ocultar el preloader */
}

/* Clase para ocultar completamente el preloader (display: none) */
.preloader--hidden {
 display: none; /* Elimina el preloader del flujo del documento */
}