body {
    margin: 0;
    display: flex;
    flex-direction: column;
    /* Cambia a una dirección de columna para una mejor adaptabilidad */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact {
    margin: 0;
    text-align: left;
    padding-bottom: 2rem;
}

.contact a {
    font-family: 'Source Sans 3', sans-serif;
    color: white;
    text-decoration: none;
    display: block;
}

.social-networks {
    margin-top: 0.5rem;
}

.container i {
    background-color: rgba(46, 46, 46);
    text-align: center;
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
    margin: 20px;
    border-radius: 50%;
    padding: 15px;
    box-shadow: 0px 5px 10px rgb(0, 0, 0, .35);
    transition: .3s ease;
}

.fa-phone:hover {
    background-color: rgb(51, 255, 193);
    color: white;
    box-shadow: 0 0 15px #33FFC1,
        0 0 45px #33FFC1,
        0 0 75px #33FFC1,
        0 0 115px #33FFC1;
}

.fa-envelope:hover {
    background-color: rgb(18, 124, 214);
    color: white;
    box-shadow: 0 0 15px #28A8EA,
        0 0 45px #28A8EA,
        0 0 75px #28A8EA,
        0 0 115px #28A8EA;
}

.fa-instagram:hover {
    background: radial-gradient(circle, rgb(231, 147, 38) 8%, rgba(252, 70, 107, 1) 46%, rgba(179, 17, 203, 1) 85%, rgb(17, 129, 203) 100%);
    color: white;
    box-shadow: 0 0 15px #ff095f,
        0 0 45px #ff095f,
        0 0 75px #ff095f,
        0 0 115px #ff095f;
}

.fa-facebook:hover {
    background-color: rgb(59, 118, 238);
    color: white;
    box-shadow: 0 0 15px #0165E1,
        0 0 45px #0165E1,
        0 0 75px #0165E1,
        0 0 115px #0165E1;
}

.fa-whatsapp:hover {
    background-color: rgb(37, 211, 102);
    color: white;
    box-shadow: 0 0 15px #25D366,
        0 0 45px #25D366,
        0 0 75px #25D366,
        0 0 115px #25D366;

}

@media (max-width: 480px) { /* Phones 480px */
    .container i {
        font-size: 1.1rem; /* Ajusta el tamaño de los botones */
    }
}