.body-contacto {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
        url(img/slide_1.jpg);
    backdrop-filter: blur(4px);
    background-size: cover;
    background-repeat: no-repeat;
}

.main-contacto {
    padding-top: 0rem !important;
    padding-bottom: 10rem !important;
}

.red-contacto {
    padding-top: 3rem !important;
    padding-bottom: 11rem !important;
}

.red-contacto .caja-red {
    position: absolute;
    right: 0;
    width: 30%;
    margin-right: 8rem;
    display: flex;
    justify-content: center;
}

.red-contacto .caja-red .btn-instagram {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background: linear-gradient(25deg, rgb(255, 255, 0), rgb(214, 71, 71), rgb(212, 82, 114), rgb(243, 72, 243));
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    width: 70px;
    height: 70px;
    border-radius: 50px;
    font-size: 50px;
    transition: 0.5s;
}

.red-contacto .caja-red .btn-instagram:hover {
    background: linear-gradient(0, #fff, #fff);
    color: rgb(212, 82, 114);
}

.banner-rosa {
    display: flex;
    align-items: center;
    width: 100%;
    height: 325px;
    background-image: url(./img/back_1_clip.jpg);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
}

.banner-rosa .info-banner {
    width: 45%;
    color: var(--white);
    padding: 0 0 0 100px;
}

.banner-rosa .info-banner h4 {
    width: 100%;
    margin: 30px 0 5px 0;
    text-align: left;
}

.banner-rosa .info-banner h4 i {
    margin-right: 10px;
}

.banner-rosa .info-banner h5 {
    margin: 0 0 30px 50px;
}

.caja-contacto {
    position: absolute;
    right: 0;
    width: 30%;
    margin-left: 2rem;
    margin-right: 8rem;
    margin-top: -4rem;
    padding: 35px 55px 35px 55px;
    border-radius: 2.5px;
    background-color: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    text-align: center;
}

.titulo-contacto {
    text-align: center;
}

#formulario .form-group {
    margin: 1rem 0 1rem 0;
}

#formulario .form-input,
.form-text {
    text-align: center;
    width: 100%;
    padding: 5px;
    border: none;
    outline: none;
    resize: none;
    border-bottom: 1px solid #000;
}

#formulario .boton-wpp {
    background-color: rgb(52, 182, 101);
    border: 0;
    transition: 0.3s;
}

#formulario .boton-wpp:hover {
    background-color: rgb(40, 144, 79);
}

/* RESPONSIVE CSS
-------------------------------------------------- */

/* Pantallas pequeñas (móviles): Consultas para pantallas con un ancho menor a 576 píxeles. */
@media (max-width: 575px) {

    .main-contacto {
        padding: 0rem 0 4rem 0 !important;
    }

    .red-contacto .caja-red {
        width: 90%;
        right: 50%;
        transform: translateX(50%);
        margin-right: 0;
    }

    .red-contacto .caja-red .btn-instagram {
        width: 70px;
        height: 70px;
        border-radius: 50px;
        font-size: 50px;
    }

    .caja-contacto {
        right: 50%;
        transform: translateX(50%);
        width: 90%;
        margin: -4rem 0 0 0;
        padding: 25px 25px 25px 25px;
        border-radius: 2.5px;
    }

    .caja-contacto .titulo-contacto {
        font-size: 30px;
    }

    .banner-rosa {
        height: 700px;
    }

    .banner-rosa .info-banner {
        width: 100%;
        padding: 23.5rem 3rem 0 3rem;
    }

    .banner-rosa .info-banner h4 {
        margin: 30px 0 5px 0;
        font-size: 20px;
    }

    .banner-rosa .info-banner h4 i {
        margin-right: 10px;
    }

    .banner-rosa .info-banner h5 {
        margin: 0 0 30px 50px;
    }

}

/* Tabletas y pantallas medianas: Consultas para pantallas con un ancho entre 576 y 991 píxeles. */
@media (min-width: 576px) and (max-width: 991px) {


    .red-contacto .caja-red {
        width: 40%;
        margin-right: 2.5rem;
    }

    .caja-contacto {
        width: 40%;
        margin-right: 2.5rem;
        padding: 25px 25px 25px 25px;
    }

    .caja-contacto .titulo-contacto {
        font-size: 20px;
    }

    .banner-rosa {
        height: 325px;
    }

    .banner-rosa .info-banner {
        width: 50%;
        padding: 0 0 0 3rem;
    }

    .banner-rosa .info-banner h4 {
        margin: 30px 0 5px 0;
        font-size: 20px;
    }

    .banner-rosa .info-banner h4 i {
        margin-right: 10px;
    }

    .banner-rosa .info-banner h5 {
        margin: 0 0 30px 50px;
    }

}

/* Pantallas grandes (escritorio): Consultas para pantallas con un ancho igual o superior a 992 píxeles. */
@media (min-width: 992px) {}