#contact {
    width: 85vw;
    height: auto;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--clr-30);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-00);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--clr-90);
    font-family: var(--font-family);

    .contact-container {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        padding: 1rem;

        .contact-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            h3 {
                margin-bottom: 1rem;
                font-family: var(--font-family-title);
                font-size: 1.5rem;
            }

            .social-icons {
                display: flex;
                gap: 1rem;
                margin-bottom: 1rem;

                a,
                img {
                    cursor: pointer;
                }

                a {
                    width: 2rem;
                    height: 2rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .pages-list {
                list-style: none;
                padding: 0;
                margin: 0;

                li {
                    margin-bottom: 0.5rem;

                    a {
                        text-decoration: none;
                        color: var(--clr-90);
                        font-family: var(--font-family);
                        font-size: 1rem;
                        cursor: pointer;
                    }
                }
            }

            p {
                color: var(--clr-90);
                font-size: 1rem;   
                margin-top: 1rem; 
            }
        }        
    }
    /* Cambiar el color de fondo y el color del texto seleccionado */
    ::selection {
        /* Color de fondo */
        background: var(--clr-50);
    }

    /* Para navegadores WebKit (Chrome, Safari) */
    ::-webkit-selection {
        background: var(--clr-50);
    }

    .copy {
        margin-top: 1rem;
        text-align: center;
        font-size: 0.875rem;
        color: var(--clr-70);
    }
}

@media (max-width: 768px) {
    #contact {
        width: 90%;
        margin-bottom: 1rem;

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

            .contact-item {
                margin-bottom: 1rem;

                h3 {
                    font-size: 1.25rem;
                }

                .pages-list {
                    li:nth-child(3) {
                        display: none;
                    }
                }
            }
        }
    }
}