/*
====================================================================================================================================
Outor: talisson.h.a.costa@gmail.com
Ultima atualização: 23/04/2024

1- Organização do css: Baseado no modelo BEM (Block Element Modifire);
2- Comentários: No início de cada sessão;
3- Ordem dos elementos: Os elementos aparecem no css na ordem em que são dispostos na página principal(desktop), com exceção dos elementos que são repetidos durante o código ou participam de um grupo específico de elementos(estes são separados e são referenciados no sumário)

4- SUMÁRIO:
    #Paleta de cores
    #Fontes de texto
    #Botões e leads
    #Interface mobile
    #interface intermediária
    #Interface desktop
====================================================================================================================================
*/


/*------- PALETA DE CORES -------*/
:root{
    --color-01: #FFFFFF;
    --color-01-b: #ffffff78;
    --color-02: #F9F9FB;
    --color-03: #000000;
    --color-04: #802F31;
    --color-05: #04384E;
    --color-06: #EEEAE5;


    /*variaveis do swipper*/

    --swiper-navigation-size: 4vw!important;
    --swiper-theme-color: #007aff;
    
}

/*------- FONTES DE TEXTO -------*/

.open-sans{

  font-family: "Open Sans", sans-serif;
  font-style: normal;
}

.italiana{
  font-family: "Italiana", sans-serif;
  font-style: normal;
}


/*------- BOTÕES E LEADS -------*/

button{
  padding: 5%;
  border-radius: 100px;
  border: 0;
  cursor: pointer;
  margin: 3% 0 0 0;
}

.btn-01{
  background-color: var(--color-04);
  color: var(--color-01);
  padding: 1%;
  border-radius: 10px;
  font-size: 1.3vw;
  margin: 0;

  display: none;
}

.btn-02{
  background-color: var(--color-05);
  color: var(--color-01);
  box-shadow: 3px 6px 10px var(--color-03);
  font-size: 4vw;
  margin-bottom: 1vw;
}

.btn-03{
  background-color: var(--color-01);
  color: var(--color-03);
  font-weight: 600;
  font-size: 5vw;
  margin: 5% 0;

}


/*
====================================================================================================================================
INTERFACE MOBILE  (-800px)
====================================================================================================================================
*/

/*Barra de navegação*/

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;

    background-color: var(--color-02);
    padding: 2vw 0 ;
}

.nav__logomarca{
    
    font-weight: 500;
    font-size: 7vw;
  }

.overlay-menu-mobile{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  background-color: var(--color-01-b);
  z-index: 10;
  width: 100vw;
  height: 100vh;
  
}
  .overlay-menu-mobile.open-overlay{
    display: block;
    
  }
  .icone-sair p {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    margin-left: 5vw;
    font-weight: 700;
    font-size: 10vw;
  }
  
.nav__menu-mobile{
  display: fixed;
  position: absolute;
  top:  0;
  right: 0;
  background-color:  white ;
  width: 0%;
  height: 200vh;
  z-index: 999;
  overflow: hidden;
  transition: .3s;
}

  .nav__menu-mobile.open-menu{
    width: 70%;
  }
.nav__menu-mobile__iten{
  border-bottom: 3px solid black ;
  width: 100%;
  height: 20vw;
  font-size: 6vw;
}
.nav__menu-mobile__iten a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.nav__menu-mobile__icon{
  border: 0.5vw solid black;
  border-radius: 10px;
  width: 10vw;
  height: 10vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

  .nav__menu-mobile__icon div{
    border-bottom: 0.5vw solid black;
    width: 70%;
    height: 1px;
  }

.nav__menu-desktop{
  display: none;
}

/*----Sessões em geral----*/

section{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2%;
}

.section__title{
  width: 100%;
  font-size: 6vw;
  font-weight: 300;
  margin: 0 0 2% 0;
}
/*Apresentação*/

.presentation{

  background: rgb(249,249,251);
  background: linear-gradient(223deg, rgba(249,249,251,0.7002450638458508) 0%, rgba(100,112,122,1) 40%);
  flex-wrap: wrap;
  padding: 2% 0 0 0;
  
}

.presentation__article{
  background-color: var(--color-01-b);
  border-radius: 10px;
  width: 80%;
  padding: 2% 0 8% 0;
 
}

.presentation__article__name{

  font-weight: 400;
  font-size: 5vw;

  margin: 5% 0 0  0;

}

div.divisoria{
  border-bottom: 1px solid rgba(0, 0, 0, 0.393);
  width: 60%;
  margin: 2% auto;
}

.presentation__article__text{

  font-weight: 200;
  font-size: 3.9vw;

  margin: 5% 10% 0  10%;
  text-align: justify;
  line-height: 5vw;

}

.presentation img{
  width: 50%;
}

/*Serviços*/

.services{
  background-color: var(--color-01);
  flex-wrap: wrap;
}

.services__list{
  width: 55%;
  text-align: left;
  list-style: disc;
  

}

.services__list__iten{
  margin: 2% 0;
  width: 100%;
  font-size: 3.9vw;
  font-weight: 100;
}

/*Quem sou eu*/

.about{
  background: rgb(171,155,128);
  background: linear-gradient(142deg, rgba(171,155,128,0.8010853999803046) 0%, rgba(69,63,52,0.7982842795321253) 88%);


 display: flex;
 flex-wrap: wrap-reverse;
 justify-content: space-evenly;
 align-items: center;
}

.about__article{
  background-color: var(--color-01);
  border-radius: 10px;
  width: 98%;
  padding: 2% 0 8% 0;
  margin: 2% 0;
}


.about__article__name-01{
  font-size: 5vw;
  font-weight: 700;
  margin: 5% 0 2% 0;
}


.about__article__text{
  text-align: justify;
  padding: 0 5%;
  font-size: 4.5vw;
  font-weight: 400;
  line-height: 5vw;
}

.about__article__text p{
  margin-top: .5vw;
}

.about img{
  display: none;
  border-radius: 10px;
  width: 98%;
}

/*Lead 01*/
.lead-01{
  background: rgb(161,165,175);
  background: linear-gradient(183deg, rgba(161,165,175,0.7002450638458508) 0%, rgba(67,69,73,1) 65%);

  flex-wrap: wrap;
}

.lead-01__name{
  color: var(--color-01);
  font-size: 7.5vw ;
  font-weight: 100;
  margin: 2% 0;
}

/* Contato e localização da clinica*/
.contact{
  background-color: var(--color-02);
  flex-wrap: wrap;
}
.contact__title{
  width: 100%;
  font-size: 7vw;
  margin: 2% 0 ;
}
.contatct__text{
  margin-left: 3vw;
  font-size: 5vw ;
}
.contact__article{
  width: 100%;
}
.contact__div{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6vw;
  margin: 2vw 0;
}
.contact__divisoria{
  height: 1px;
  width: 70%;
  border-bottom: 1px solid black;
}

.contact__divisoria{
  height: 1px;
  width: 70%;
  background-color: black;
}


.map{
  width: 100%;
  height: 50vw;
}


/*Galeria*/
.galery{
  background: var(--color-06);
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background: var(--color-06);
  display: flex;
  justify-content: center;
  align-items: center;

  

}

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

/*Footer*/

footer{
  background-color: var(--color-05);
  color: var(--color-01);
  padding: 5% 0;
  text-align: center;
}

.footer__name{
  font-size: 7vw;
  font-weight: 100;
 
}
.footer__text{
  margin: 5% 0 ;
  font-size: 4vw;
  font-weight: 100;
}


/*
====================================================================================================================================
INTERFACE INTERMEDIÁRIA (TABLETS E ALGUNS CELULARES NA HORIZONTAL) (>=800px)
====================================================================================================================================
*/
@media only screen and (min-width: 800px){

  /*------- BOTÕES E LEADS -------*/

button{
  padding: 4%;
  border-radius: 100px;
  border: 0;
  margin: 3% 0 0 0;
}

.btn-02{
  background-color: var(--color-05);
  color: var(--color-01);
  box-shadow: 3px 6px 10px var(--color-03);
  font-size: 3vw;
}

  /*Serviços*/
  .services__list{
    width: 50%;
    text-align: left;
    list-style: disc;
  }

  .services__list__iten{
    margin:  2% 10% ;
    width: 80%;
    font-size: 3vw;
    font-weight: 100;
  }

/*Barra de navegação*/

.icone-sair p {
  font-weight: 500;
  font-size: 8vw;
}
.nav__menu-mobile.open-menu{
  width: 50%;
}
.nav__menu-mobile__iten{
height: 15vw;
font-size: 3.5vw;
}

.nav__menu-mobile__icon{
border: 0.3vw solid black;
width: 8vw;
height: 8vw;

}
.nav__menu-mobile__icon div{
  border-bottom: 0.3vw solid black;
}




/* Contato e localização da clinica*/
.contact__article{
  width: 49%;
  height: 40vw;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly
}

.contact__title{
  font-size: 5vw;
 
}
.contatct__text{

  font-size: 3vw ;
}

.contact__divisoria{
  height: 35vw;
  width: 1px;
  margin: 0 0.5vw;
}

.map{
  height: 25vw;
}

}

/*
====================================================================================================================================
INTERFACE DESKTOP  (+1000px)
====================================================================================================================================
*/
@media only screen and (min-width: 1000px){

  /*------- BOTÕES E LEADS -------*/

button{
  padding: 2vw;
  transition: .2s;
}

button:hover{
  box-shadow: 2px 2px 3px var(--color-03);

}
.btn-02{
  font-size: 2vw;
}
.btn-03{
  font-size: 3vw;
}

/*----Sessões em geral----*/
  .section__title{
    width: 100%;
    font-size: 4vw;
    font-weight: 300;
    margin: 0 0 2% 0;
  }

  /*Barra de navegação*/

  nav{
    justify-content: space-around;
    padding: 1% 0 ;
    width: 100%;
    
  }

  .nav__logomarca{
    font-weight: 500;
    font-size: 3vw;
  }

  .nav__menu-mobile{
    display: none;
  }
  .nav__menu-mobile__icon{
    display: none;
  }

  .nav__menu-desktop{
    display: flex;
    align-items: center;
    width: 45%;
    justify-content: space-evenly;
  }

  .nav__menu-desktop__iten{
    font-size: 1.5vw;
  }

  .nav__menu-desktop__iten:hover{
    font-weight: 550;
  }
  
  .btn-01{
    display: block;
  }

  /*Apresentação*/

  .presentation__article{
    width: 50%;
    padding: 1% 0 7% 0;
  }

  .presentation__article__name{

    font-weight: 400;
    font-size: 4vw;
    margin: 5% 0 0  0;

  }

  .presentation__article__text{
    font-weight: 200;
    font-size: 2vw;

    margin: 5% 10% 0  10%;
    text-align: justify;
    line-height: 2.5vw;
  }

  .presentation img{
    width: 33%;
    margin: 0 2%;
  }

  /*Serviços*/
  .services__list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .services__list__iten{
    margin:  1% 10% ;
    font-size: 2vw;
    width: 55%;
  }

  /*Quem sou eu*/

  .about__article{
    width: 45%;
    padding: 1% 0 2% 0;
  }
  .about__article__name-01{
    font-size: 2.5vw;
    font-weight: 700;
    margin: 5% 0 2% 0;
  }
  .about__article__text{
    text-align: justify;
    padding: 0 5%;
    font-size: 2vw;
    line-height: 2.5vw;
  }

  .about img{
  display: block;
  width: 41%;
  border-radius: 10px;
}
  /* Contato e localização da clinica*/
.contact__article{
  height: 30vw;
}

.contact__div{
  width: 100%;
  height: 4vw;
  margin: 2vw 0;
}

.contact__title{
  font-size: 3vw;
  margin: 2% 0 ;
}
.contatct__text{
  margin-left: 3vw;
  font-size: 2vw ;
}
.map{
  height: 25vw;
}


  /*Lead 01*/
  .lead-01__name{
    font-size: 7vw ;
    margin: 1% 0;
  }

  /*Galeria*/

  .swiper-slide {
    width: 30%!important;
  }

  .swiper-slide img {
   
    width: 100%;
  }

  /*Footer*/

  footer{
    padding: 2% 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer__name{
    font-size: 3vw;
    width: 30%;
  }
  .footer__text{
    margin: 1% 0 ;
    font-size: 1.5vw;
    width: 30%;
  }

}