* {
    margin: 0px;
    z-index: 10;
}


.space {
    margin-bottom: 75px;
}

.inline {
    display: flex;
    justify-content: space-between;
}

.inrow {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* ENLACES */

a {
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
    color: white;
}


/* TÍTULOS Y TEXTO */

h1, h2, h3, h4, h5 {
    font-family: "Montserrat", sans-serif;
    text-align: center;
}

h1 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 38px;
    letter-spacing: 5px;
    color: #993954;
    margin-bottom: 50px;
    margin-top: 30px;
}

h2 {
    color: #993954;
    text-align: left;
}

p {
    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    text-align: justify;
    margin-bottom: 25px;
}

i {
    font-family: "Allura", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    color: #993954;
}

/* SECCIONES ****************************************************************************************** */

#inicio, #dra-ionescu {
    margin-bottom: -5px;
}

#inicio, #principios, #dra-ionescu, #tratamientos, #redes-sociales, #contacto, #que-dicen-de-nosotros {
    padding-top: 35px;
}

#principios, #dra-ionescu, #tratamientos, #redes-sociales, #contacto {
    padding-left: 20%;
    padding-right: 20%;
}


/* Inicio ********************************/

#inicio {
    margin-top: -35px;
}

#inicio video {
    width: 100%;
}

.video-text {
    /* background-color: rgba(250, 105, 146, 0.3); */
    padding: 30px;
    border-radius: 30px;
    width: 315px;
    float: right;
    margin-top: -25%;
    margin-right: 70px;
    z-index: 5;
    position: relative;
}


/* Principios ****************************/

#principios {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('assets/8.png');
    background-size: cover; /* Para que la imagen cubra toda la pantalla */
    background-size: 100% 100%; /* Expande la imagen a todo el ancho y alto */
    background-position: center; /* Centrar la imagen */
    background-repeat: no-repeat; /* Evitar que la imagen se repita */

    padding-bottom: 55px;
}

.foto-estetica img {
    width: 450px;
    max-width: 450px;
    margin-right: 30px;
}


/* Dra. Ionescu **************************/

.foto-dra img {
    width: 350px;
    max-width: 350px;
    margin-left: 30px;
}


/* Tratamientos *************************/
#tratamientos {
    background-color: #993954;
    padding-bottom: 55px;

}

#tratamientos h1 {
    color: white;
}

#tratamientos p {
    color: white;
}

.tratamiento h4 {
    color: white;
    text-align: left;
    text-transform: uppercase;
    font-weight: 400;
}

.tratamiento {
    cursor: pointer;
    padding: 10px;
    border-radius: 15px;
}

.tratamiento:hover {
    /* background-color: pink; */
    background-color: rgba(250, 105, 146, 0.2);
    font-weight: bold;
}

.contenido {
    margin-left: 20px;
    padding: 10px;
    /* border: 1px solid #ddd; */
    /* width: 300px; */
    color: white;
    background-color: rgba(250, 105, 146, 0.2);
    border-radius: 30px;
    padding: 30px;
    max-width: 450px;
}

.contenido p {
    font-size: 17px;
    line-height: 28px;
}

/* Estilo para el tratamiento seleccionado */
.seleccionado {
    background-color: rgba(250, 105, 146, 0.2);
    font-weight: bold;
}


/* Redes Sociales ***********************/
#redes-sociales {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('assets/8.png');
    background-size: cover; /* Para que la imagen cubra toda la pantalla */
    background-size: 100% 100%; /* Expande la imagen a todo el ancho y alto */
    background-position: center; /* Centrar la imagen */
    background-repeat: no-repeat; /* Evitar que la imagen se repita */

    padding-bottom: 55px;
}

.youtube-list {
    width: 660px;
    height: 380px;
}


/* Contacto *****************************/



.imagen-contacto img {
    width: 250px;
    max-width: 250px;
    margin-bottom: -25px;
    margin-top: 70px;
}

#contacto {
    padding-bottom: 20px;
}

#contacto h3 {
    text-align: left;
    font-size: 17px;
    font-weight: 500;
}

.iconos-contacto {
    fill: black;
    width: 30px;
    height: 30px;
    margin-bottom: 7px;
}

input[type=mail] {
    width: 300px;
    height: 33px;
    border-radius: 5px;
    border: none;
    background-color: pink;
}

input[type=submit] {
    height: 36px;
    min-width: 100px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #993954;
    color: white;
    text-align: center;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
}

input[type=submit]:hover {
    background-color: pink;
    color: #993954;
    cursor: pointer;
}

#contacto svg {
    fill: #993954;
    width: 100px;
    padding-right: 30px;
}

#contacto a {
    color: #993954;
    font-weight: bold;
}

#contacto b {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
}

.cita {
    margin-top: 10px;
    margin-left: 30px;
    background-color: #993954;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
}

.cita:hover {
    cursor: pointer;
    background-color: pink;
    color: #993954;
}

/* QUE DICEN DE NOSOTROS ************************************************************ */

.slider {
    display: flex;
    justify-content: space-around;
}

.slides {
    margin: 5px;
    display: flex;
}

.slides h2{
    font-size: 18px;
    font-weight: 500;
    color: dimgray;
    text-align: center;
}

.contenedor-imagen-slide {
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide {
    width: 50%;
}

.slide img {
    width: 320px;
}

.boton-slide {
    display: none;
}

/* NEWSLETTER ************************************************************************* */
.div-newsletter {
    margin-top: 50px;
    display: flex; 
    justify-content: center;
}

.div-newsletter a {
    color: #993954;
}

.div-newsletter input[type=mail], 
.div-newsletter input[type=text], 
.div-newsletter input[type=tel], 
.div-newsletter input[type=number] {
    width: 300px;
    height: 30px;
    border-radius: 5px;
    border: none;
    background-color: pink;
    margin-bottom: 10px;
    padding-left: 5px;
}


.div-newsletter input[type=submit] {
    margin-top: 20px;
    margin-bottom: 30px;
}


/* **************************************************************************************************** */


/* HEADER */
.header {
    background-color: rgba(250, 105, 146, 0.4);
    position: fixed;
    top: 0;
    width: 100%;
   z-index: 99;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;

}

.menu a {
    padding: 10px;
    font-size: 18px;
    text-transform: uppercase;

}

.menu a:hover {
    color: black;

}


/* FOOTER */

.footer {
    background-color: black;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 15%;
    padding-right: 15%;
    display: flex;
    justify-content: space-between;
    
}

.footer p {
    color: white;
    font-size: 14px;
    margin-bottom: 10px;
}

.footer svg {
    fill: white;
    width: 40px;
    margin: 5px;
}

.instagram svg:hover {
    fill:  rgba(250, 105, 146, 1);
}

.youtube svg:hover {
    fill: red;
}

.whatsapp svg:hover {
    fill: green;
}

.footer a:hover {
    color: pink;
}

.logo-footer {
    height: 200px;
}


/* RESPONSIVE ********************************************************************************** */

@media (max-width: 1920px) {
    #principios, #dra-ionescu, #tratamientos, #redes-sociales, #contacto {
        padding-left: 15%;
        padding-right: 15%;
    }
    .menu a {
        font-size: 16px;
    }
}


@media (max-width: 1400px) {
    #principios, #dra-ionescu, #tratamientos, #redes-sociales, #contacto {
        padding-left: 10%;
        padding-right: 10%;
    }
    .menu a {
        font-size: 14px;
    }
    .footer {
        padding-left: 15%;
        padding-right: 15%;
    }
}


@media (max-width: 1200px) {
    #principios, #dra-ionescu, #tratamientos, #redes-sociales, #contacto {
        padding-left: 35px;
        padding-right: 35px;
    }
    h1 {
        font-size: 34px;
    }

    .footer {
        padding-left: 30px;
        padding-right: 30px;
    }
}


@media (max-width: 900px) {
    #principios, #dra-ionescu, #tratamientos, #redes-sociales, #contacto {
        padding-left: 20px;
        padding-right: 20px;
    }
    h1 {
        font-size: 30px;
    }

    .slider {
        justify-content: center;
    }

    .slides {
        flex-direction: column;
    }

    .slide {
        min-width: 100%;
    }

    .footer {
        padding-left: 10px;
        padding-right: 10px;
    }
}


@media (max-width: 600px) {

    html {
        width: 100%;
        height: 100%;
    }
    
    .inline {
        flex-direction: column;
        align-items: center;
    }

    h1 {
        font-size: 22px;
    }

    .tratamiento h4 {
        font-size: 14px;
    }

    .youtube-list {
        width: 360px;
    }

    .foto-estetica {
        margin-right: 0;
    }

    .video-background {
        margin: 0;
        padding: 0;
        position: relative;
    }

    .video-text {
        /* margin-top: 0; */
        /* display: none; */
        /* display: ; */
        width: 80%;
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 200;
        margin-right: 0;
        margin-top: 500px;
    }

    .video-text h2 {
        text-align: center;
        font-size: 15px;
    }

    .video-text p {
        text-align: center;
    }

    p {
        font-size: 15px;
    }

    p i {
        font-size: 20px;
    }

    .contenido {
        margin-left: 0;
    }

    .contenido p {
        font-size: 15px;
        line-height: 24px;
    }

    .menu {
        /* display: none; */
        height: 55px;
    }

    .big-icon-contact {
        display: none;
    }

    .line {
        display: flex !important;
        justify-content: left !important;
        flex-direction: row !important;
    }

    .slide img {
        width: 200px;
    }

    .slides h2 {
        font-size: 15px;
    }

    .logo-footer {
        height: 100px;
    }

    #inicio {
        width: 100%;
        height: 100%;
    }

    .video-background {
        display: flex;
        justify-content: center;  /* Centra el video horizontalmente */
        /* overflow: hidden; */
        object-fit: cover;
    }

    .video-background video {
        height: 100vh;
        width: 100vw;
        object-fit: cover;
    }

}