.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    border-radius: 50%;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float img {
    width: 32px;
    height: 32px;
}

@media (max-width: 991px) {
    /* Altura del header más un extra para separar la imagen */
    :root {
        --header-height: 80px; /* altura real de tu header */
    }

    /* Padding-top del main para dejar espacio al header */
    .main {
        padding-top: calc(var(--header-height) + 30px); /* aumenta el +30px según convenga */
    }

    /* Opcional: margen extra para la imagen si aún queda muy cerca del header */
    #hero .hero-img {
        margin-top: 30px; /* ajusta hasta que quede bien visualmente */
    }
}

.btn-getstarted.btn-getstarted-img {
    display: block; /* permite width */
    width: 100%; /* ancho total de la columna */
    margin: 0; /* elimina margen que venía de btn-getstarted */
    text-align: center; /* centra el texto */
    padding: 8px 0; /* altura opcional */
}