/* Estilos generales */
        body,
        html {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #fff;
        }

        .centered-container {
            text-align: center;
        }

        /* Estilo del loader */
        .loader {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 20px auto;
        }

        .loader div {
            position: absolute;
            border: 8px solid;
            border-radius: 50%;
            animation: loader8435 1.2s ease-out infinite;
        }

        /* Primer círculo con color amarillo */
        .loader div:nth-child(1) {
            border-color: rgb(251, 184, 7);
        }

        /* Segundo círculo con color rosa */
        .loader div:nth-child(2) {
            border-color: rgb(223, 0, 106);
            animation-delay: -0.6s;
        }

        @keyframes loader8435 {
            0% {
                top: 60px;
                left: 60px;
                width: 0;
                height: 0;
                opacity: 1;
            }

            100% {
                top: 0;
                left: 0;
                width: 120px;
                height: 120px;
                opacity: 0;
            }
        }

        /* Animación de pulso para la imagen */
        @keyframes pulseImage {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
                /* Ajusta el valor para cambiar la intensidad del efecto */
            }
        }

        /* Estilo de la imagen con animación de pulso */
        .centered-image {
            max-width: 600px;
            margin-bottom: 20px;
            animation: pulseImage 2s ease-in-out infinite;
        }

                /* Media Queries */
                @media only screen and (max-width: 600px) {
                    .loader {
                       /* width: 0px;*/
                        height: 80px;
                    }
        
                    .loader div {
                        border-width: 6px;
                    }
        
                    .centered-image {
                        max-width: 300px;
                    }
                }
        
                @media only screen and (min-width: 601px) and (max-width: 1024px) {
                    .loader {
                        width: 100px;
                        height: 100px;
                    }
        
                    .loader div {
                        border-width: 7px;
                    }
        
                    .centered-image {
                        max-width: 400px;
                    }
                }
        
                @media only screen and (min-width: 1025px) and (max-width: 1920px) {
                    .loader {
                        width: 120px;
                        height: 120px;
                    }
        
                    .loader div {
                        border-width: 8px;
                    }
        
                    .centered-image {
                        max-width: 600px;
                    }
                }
        
                @media only screen and (min-width: 1921px) {
                    .loader {
                        width: 150px;
                        height: 150px;
                    }
        
                    .loader div {
                        border-width: 10px;
                    }
        
                    .centered-image {
                        max-width: 800px;
                    }
                }