* {
    margin: 0;
    padding: 0;
}



body {
    background-color: #F3FBFB;
}

a{
    text-decoration: none;
    color: white;
    font-family: 'poppins';
    font-size: 1em;
    font-weight: 500;
    
}

.menuResponsive--button{
  display: none;
}    

.menu__responisve{
    display: none;
}


.whatsApp{
    width: fit-content;
    height: fit-content;
    position: sticky;
    top: 85vh;
    left: 90vw;
    z-index: 100;
}


.whatsApp a img{
    opacity: 0.6;
    width: 8vw;
}


.whatsApp a img:hover {
    opacity: 1;
  }
  

/*-------Header-----------------------------------*/


header {

    display: flex;
    flex-direction: row;
    background-color: #89D0B6;
    justify-content: space-between;
    align-items: center;
    height: 14vh;
    position: sticky;
    top: 0; 
    z-index: 1000;
}

.header__logo{
    margin-left: 50%;
    display: flex;
    align-items: center;

}

.header__logo__container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13vw;
}




nav{
   
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-family: 'poppins';
    margin-right: 10vw;
    color: white;
    font-size: 1.4vh;    
    font-weight: 300;
}

nav a{
    margin-left: 1rem;
    margin-right: 1.8rem;
   
}

.text__nav{
    display: flex;
    flex-direction: row;
    margin-right: 3rem;
}

.text__nav--home{
    display: flex;
    flex-direction: row;
    font-size: 1.4vw;
    margin-right: 16vw;
}

.text__nav--home a{

}

.social{
    margin-right: 10%;
    /*width: 2rem;*/
    display: flex;
    justify-content: space-around;
}

.social img{
    width: 2rem;
    margin-right: 1rem;
}


.toggle-nav{
    display: none;
}

.active{
    display: none;
}

.menuResponsive{
    display: none;
}

/*------------------Main---------------------------*/

.main{
    margin-top: -4.5vh;
    transform: translateY(-5vh);
    background-image: url("img/CONSULTORIO/banner1.png");
    background-size: cover;
    height: 70vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
}

.main svg{
    margin-left: 50vw;
}

.main--img{
    display: block;
  /*  width: auto;
    height: 100%;*/
    width: 50vw;
    height: 70vh;   
}
.container__text{
    display: flex;
    
    flex-direction: column;
    justify-content: center;
    margin-right: 7vw;
    transform: translatey(15%);
    margin-bottom: 7%;
   
}

.container__text--center{
   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.container__text--center h3{
    margin-bottom: 30%;
    transform: translateX(24vw);
    margin-top: 5vh;
    max-width: 30rem;
    text-align: center;
    font-family: 'Roboto';
    color: white;
    font-size:  .9rem;
    line-height: 1.8rem;
}


.container__img{
    
}



/*------------------About me---------------------------*/


.about{
    height: 145vh;  
    display: flex;
    flex-direction: column;
    margin-top: 10vh;
}

.banner{
  height: 8vh;   
  width: 100vw;
}

.about__content{
    height: 14%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

}




.about__content--text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60%;
    font-family: 'Poppins';
    font-size: 2rem;
}



.about__content--text p {
    font-family: "Poppins";
   
}



/*.swiper {
    width: 40vw;
    height: 40vh;
  }




  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

 
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
*/
.containers{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

}

.containerSkills{

    margin: 1rem;
   /* width:max-context*/
   width: 25rem;
    height: 70vh;
    border-radius: 10px;
    background-color: #5BD1AA;
}

.containerSkills--img{

   /*height: 50%;*/
   height: 300px;
  
}

.containerSkills--img--Estefania{
    box-sizing: content-box;
    width: 100%;
   /* width: 400px;*/
  
  /*background-image: url("img/CONSULTORIO/ESTEFANIA.jpg");
    background-size: cover;*/
}


.containerSkills--img--Estefania img{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
   
    width:100%;
    height:100%;
 }

.containerSkills--img--Francisco{
   
    box-sizing: content-box;
    width: 100%;
   /* background-image: url("img/CONSULTORIO/FRANCISCO.jpg");
    background-size: cover;*/
}

.containerSkills--img--Francisco img{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
   
    width:100%;
    height:100%;
 }

.containerSkills--text{
    padding: 2vh;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 50%;
}


.containerSkills__Titulo{
    font-family: 'Poppins';
    padding-right: 4vw;
    font-size: 100%;
    margin-bottom: 2vh;
    color: white;
}
.containerSkills ul{
    font-family: 'Poppins';
    color: #FFFFFF;
    font-size: 80%;
    font-weight: 400;
    padding:  0 1rem 1rem 1rem;    
}

.containerSkills img{
    width: 50%;
}

.consultas{
    margin-top: 5rem;
}

.consultas--center{
    display: flex;
    justify-content: center;
    align-items: center;    
    
}

.consultas--list{
    margin-top: 4rem;
    height: 100%;
    width: 72%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.consultas--list__container{
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center; 
    width: 100%;
    height:100%;  
    margin: 1rem;
    list-style-type:none;
    background-color: #58D0A7;
    font-family: 'Poppins';
    font-size: 1.4vw;
    color:white;
    border-radius: 10px;
}

.consultas--list__container--green{
    background-color: #49B590; 
    height:100%;
}

.consultas--list__container div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    width: 20vw;
  
}



/*------------------My work---------------------------*/

.work{
    height: max-content;  
    display: flex;
    flex-direction: column;
    height: 90vh;
    margin-top: 10vh;
    background-image: url("img/CONSULTORIO/ESTUDIOS\ BACKGOUND.jpg");
}

.work__header{

    margin-top: 6vh;
    height: 15vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
   
    justify-content: center;
    align-items: center;
    margin-bottom: 2vh;
}

.work__header h2{
    
    text-align: center;
    font-size: 2rem;
    font-family: 'Poppins';
    margin-top: 3rem;
    color: black;
}

.work__header p{
    display: flex;
    text-align: center;
    margin-top: 1vh;
    font-family: "Poppins";
    width: 70%;
    font-size: 1.2rem;
}



.work__projects{
    
    margin-left: 10%;
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;   
    margin-top: 3%;
}

.work__projects--card{
    padding: 1vw;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: white;
    border-radius: 10px;  
    height: 25vh;
    width: 20vw;
}

.work__projects__card--svg svg path{
    fill: #49B590;
  
}


.work__projects--card p{
    text-align: center;
    justify-content: center;
}

.work__projects--card:hover{
    background-color: #49B590;
    color: white;
    transform : scale(1.03);
    -moz-transform : scale(1.03); /* Firefox */
    -webkit-transform : scale(1.03); /* Chrome - Safari */
    -o-transform : scale(1.03); /* Opera */
    -ms-transform : scale(1.03); /* IE9 */
}

.work__projects--card:hover >.work__projects__card--svg svg path {
    fill: white;
}

    


.project--item{
    margin: 2%;
    display: flex;
    flex-direction: column;
    width: 10vw;
    font-family: "Poppins";
    text-align: center;
    font-weight: 400;
}

.project--item input{
    border-radius: 10px;
    width: 17vw;
    height: min-content;
}

.project--item__p{
    width: 17vw;
  text-align: center;
}


.zoom{
    transition: 0.2s ease;
     -moz-transition: 0.2s ease; /* Firefox */
     -webkit-transition: 0.2s ease; /* Chrome - Safari */
     -o-transition: 0.2s ease; /* Opera */
}


/*------------------cirugias---------------------------*/

.cirugias{
    height: max-content;  
    display: flex;
    flex-direction: column;
    height: 90vh;
}

.card--cirugias{
    border-radius: 20px;  
    height: 17vh;
    width: 15vw;
    background-color: #A1ECD387;
    font-size: .8vw;
    font-family:'Poppins', Courier, monospace;
}

.work__cirujia{
    
    margin-left: 20%;
    width: 60vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  
    grid-gap: 10px;   
    margin-top: 3%;
}

/*------------------Consultorio---------------------------*/

.consultorio{
        height: max-content;  
        display: flex;
        flex-direction: column;
        height: 90vh  

}

.swiper {
    display: none;
    width: 0vw;
    height: 0vh;
}

.consultorio__grid{
    margin-left: 13%;
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;   
    margin-top: 3%;
}

.consultorio__grid img{
    width: 80%;
    height: 90%;
}

/*------------------contacto---------------------------*/

.contacto{
    height: max-content;  
    display: flex;
    flex-direction: column;
    height: 60vh;
      
}

.contacto--header{
   /* transform: translateY(-5vh);*/
}

.contact__info__container{
    margin-top: 5vh;
    margin-left: 15vw;
    background-color: #58D0A7;
    width: 70%;
    height: 25%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    color: white;
    border-radius: 10px;
}



.text__nav--texto{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-left: 1vw;
    font-size: 1.4vw;
}

.contact__info__container--green{
    background-color: #49B590;    
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.contact__info__container svg{
    margin-top: 1vw;
    margin-left: 1vw;
}





/*------------------Footer---------------------------*/

footer {
    display: flex;
    flex-direction: column;
    background-color: #A1ECD3;
    justify-content: space-around;
    align-items: center;
    height: 36vh;
    color: white;
    font-family: 'Poppins';
}

.banner__footer{
    margin-top: 2vh;
    width: 80%;
}

.footer__container{
    
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.footer__nav{
    display: flex;
    color: white;
    width: 30%;
}

.footer__nav--texto{
    margin-left: 1vw;
}

.footer_copyright{
    margin-right: 4vw;
}

.social__footer{
    margin-right: 10%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}


.social__footer img{
    width: 2rem;
    margin-right: 1rem;
}

/*------------ Modal (background)---------- */
.modal {
    display: flex; /* Hidden by default */
    justify-content: center;
    align-items: center;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    opacity: 0;
    background-color: #000000bd;
    overflow-y:hidden;
  }
   
 

/*-----------------------------------------------------Responsive---------------------------------------*/

@media (max-width: 668px) {

    .whatsApp a img{

        width: 20vw;
    }
    

/*-----header----*/  

    .header__logo__container{

        width: 28vw;
    }


    .toggle-nav{
        display: none;
    }
    
    .text__nav{
        display: flex;
        flex-direction: row;
       
        margin-right: 0rem;
    }
    
    /*.text__nav--home{
        display: none;
        width: 40vw;
        flex-direction: column;
        margin: 1vw;
        font-size: 3vw;
        margin-right: 0vw;
    }*/

    .text__nav--home{
        display: none;
    }

     .text__nav--home.active{
        display: inline;
        position: absolute;
        width: max-content;
        flex-direction: column;
        margin: 0vw;
        font-size: 5vw;
        margin-top: 24vh;
        margin-left: 25vw;
        animation-name: dropDown;
        animation-timing-function: ease-in;
        animation-duration: .5s;
        background-color: #58D0A7;
        opacity: .9;
    }


    .menuResponsive{
        display: block;
        font-size: 3rem;
        text-align: center;
         color: white;
    }

    .menuResponsive.active{
        color: black;
    }

    @keyframes dropDown {
        from {opacity:0}
        to {opacity:.8}
      }


/*-----home----*/    





   .main{
        margin-top: 0vh;
        background-image: url("img/CONSULTORIO/banner1.png");
        background-size: cover;

        height: 75vh;
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content:center;
        align-items: center;
    }

    .main svg{
        margin-left: 0vw;
        width: 80%;
    }


    .container__text--center h3{
        
        transform: translateX(2.2vw);
  
        color:white;
        font-weight: bold;
    
    }
    

/*------------------Footer---------------------------*/

footer {
    display: flex;
    flex-direction: column;
  
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    color: white;
    font-family: 'Poppins';
}

.footer__container{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.footer__nav{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 1vh;
}

.footer__nav--texto{
    font-size: 3vw;
}

.footer_copyright{
    font-size: 2vw;
    margin-bottom: 4vh;

}

/*------------------About me---------------------------*/


.about{
   /* height: 220vh;  */
    height: 97rem;
    display: flex;
    flex-direction: column;
    margin-top: 10vh;
}

.about__content--text{
    font-size: 5vw;
    height: fit-content;

}

.containers{
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

}



.containerSkills{

    margin: 1rem;
    width: 80%;
    /*height: 65vh;*/
    height: 100%;
   
}

.containerSkills__Titulo{

    padding-right: 4vw;
    font-size: 5.5vw;
    margin-bottom: 2vh;
  
}
.containerSkills ul{

    color: #FFFFFF;
    font-size: 3vw;
    font-weight: 400; 
}

.containerSkills--img{

    /*height: 50%;*/
    height: 260px;
   
 }



.about__content--text p{
    margin-top: 10vh;
    margin-bottom: 10vh;
   position: relative;
}

.consultas--center{
  transform: translateY(-10vh);
  margin-left: 5vw;
  width: 90vw;
}

.consultas--list{
    width: 100%;
}

.consultas--list__container{
    width: 100%;
    font-size: .5rem;
    text-align: center;
}

.consultas--list__container--green{
    padding-right: 2vw;
    padding-left: 2vw;
}

/*------------------My work---------------------------*/

.work{

    height: 110vh;
    margin-top: 10vh;
    
}

.work__header h2{
   
    font-size: 5vw;
}


.work__projects{
    
    margin-left: 10%;
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;   
    margin-top: 3%;
}

.work__projects--card{
    font-size: 3vw;
   
    height: 25vh;
    width: 35vw;
}

/*------------------cirugias---------------------------*/

.work__cirujia{
    margin-top: 10%;
    margin-left: 10%;
   
    grid-template-columns: repeat(2, 1fr);
    height: max-content;
    grid-gap: 10px;   
   
}

.cirugias{
    height: 150vh;
}

/*------------------Consultorio---------------------------*/

.consultorio{
    margin-top: 4vh;
    height: 50vh  

}

.swiper-button-next {
    --swiper-navigation-color:white;
  }
  
  .swiper-button-prev {
    --swiper-navigation-color:white;
  }

.consultorio__grid{
    display: none;
}
.swiper {
    width: 80vw;
    height: 40vh;
  }

  .swiper-slide {

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


/*------------------Contacto---------------------------*/

.contacto{
    margin-top: 4vh;
      
}

.contact__info__container{
    transform: translateX(2vw);
    margin: 4vh;
    padding: 2vh;

    width: 70%;
    height: 50%;

    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;
 
}

.contact__info__container--green{
    padding: 1vh; 
    height: 30%;
 
}

.text__nav--texto{
    width: 63vw;
    font-size: 3vw;
}

}