@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@import url('https://fonts.cdnfonts.com/css/avenir-lt-pro'); 

:root {
    --primary-color: #4A90E2;
    --secondary-color: #50E3C2;
    --primary-color-dark: #bb0811;
    --bg-dark: #3D424C;
    --bg-light: #3D424C;
    --text-light: #a3a3a3;
    --white: #ffffff;
    --max-width: 1200px;
    --gradient: linear-gradient(to right,
            var(--primary-color),
            var(--secondary-color));
    --gradient2: linear-gradient(to right,
            var(--primary-color),
            var(--bg-dark));
    --gradient6: linear-gradient(45deg, #4A90E2, #3D424C, #878E98);

    --ff-avenir: 'Avenir LT Pro', sans-serif;
} 

body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    background-image: url(./imagenes/ffflurry.svg);
    animation: moveBackground 15s linear infinite;
    background-size: cover;
    color: #fff; 
    overflow-x: hidden; 

}

@keyframes moveBackground {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 100% 0;
    }
}

.container {
    text-align: center;
    padding: 2rem;
    margin-left: 12rem;
    margin-right: 12rem;
   
} 


h1{
    color: #fff; 
    font-size: 4.5em;  
    margin-top: 3em;
} 

.container h1{
    text-shadow: 0 0 5px #4A90E2, 0 0 15px #4A90E2, 0 0 30px #4A90E2, 0 0 50px #4A90E2;
}

h2 {
    font-size: 2rem;
    margin-bottom: -2rem;
    color: #ffffff;
    animation: move-left-right 2s;
}

@keyframes move-left-right {
    from {
        transform: translate(-100px);
    }
}

p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #fff;
    margin-top: 4rem;
}

.btn {
    font-size: 1.1rem;
    padding: 0.7rem 2rem;
    background-color: #25D366;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.btn:hover {
    background-color: #878E98;
}

.icon-check {
    margin-bottom: 2.5rem;
    font-size: 4rem;
    color: #fff; 
    text-shadow: 0 0 15px #4A90E2, 0 0 25px #4A90E2, 0 0 40px #4A90E2, 0 0 70px #4A90E2;
}

@media screen and (max-width: 768px) {
    .container {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    h1 {
        font-size: 2.5em;
    }

    p {
        font-size: 1rem;
    }

    .btn {
        font-size: 1rem;
        padding: 0.5rem 1.5rem;
    }

    .icon-check {
        font-size: 2rem;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding: 1rem;
    }

    h1 {
        font-size: 2.5em;
    }

    .logo {
        height: 5rem;
    }

    p {
        font-size: 0.9rem;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.4rem 1.2rem;
    }

    .icon-check {
        font-size: 1.5rem;
    }
}