
@font-face {
   font-family: Montserrat-Medium;
   src: url('/Montserrat-Medium.otf');
}
@font-face {
   font-family: MontserratAlternates-Light;
   src: url('/MontserratAlternates-Light.otf');
}
@font-face {
   font-family: MontserratAlternates-Regular;
   src: url('/MontserratAlternates-Regular.otf');
}
@font-face {
   font-family: Montserrat-Medium;
  src: url('/Montserrat-ExtraLight.otf');
}
@font-face {
  font-family: Montserrat-SemiBold;
  src: url('/Montserrat-SemiBold.otf');
}
@font-face {
  font-family: Montserrat-Regular;
  src: url('/Montserrat-Regular.otf');
}

.principal{
   background: #F1F1F1;
   /* background-image: url('/fundo.png'); Imagem de fundo */
  background-size: cover; /* Faz a imagem cobrir toda a área */
  background-position: center; /* Centraliza a imagem */
}
nav{
   background: #F1F1F1;
   padding: 30px;
}
.elemento1{
  position: absolute;
  background-image: url('/elemento5.png');
  background-size: contain;
  background-repeat: no-repeat;
  top: -13%;
  left: -3%;
  width: 550px;
  height: 550px;
  transform: rotate(210deg);
  z-index: 0;

}
.elemento2 {
  position: absolute;
  background-image: url('/elementolinha.png');
  background-size: contain;
  background-repeat: no-repeat;
  top: 97.5%;
  right: 0px;
  width: 550px;
  height: 550px;

}

.elemento3{
  position: absolute;
  background-image: url('/elemento5.png');
  background-size: contain;
  background-repeat: no-repeat;
  top: -13%;
  left: -3%;
  width: 310px;
  height: 310px;
  transform: rotate(210deg);
}
li .nav-link{
  font-family: Montserrat-SemiBold;
   font-size: 15px;
   color: #2C3759;
}
li .nav-link:hover{
  color: #2C3759;
   text-decoration: underline;
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  background-color: #F1F1F1;
  color: #2C3759;
  border: none;
  font-family: Montserrat-SemiBold;
  font-size: 15px;
}

.dropdown-menu {
  font-family: Montserrat-SemiBold;
  display: none; /* Esconde o menu por padrão */
  position: absolute; /* Para que o menu não afete o layout */
  z-index: 1000; /* Para garantir que o menu fique acima de outros elementos */
}
.dropdown-menu a{
  color: #2C3759;
}
.dropdown-menu a:hover{
  background-color: #F1F1F1;
  color: #2C3759;
  text-decoration: underline;
}
.banner{
   color: #F1F1F1;
   background: #2C3759;
   background-image: url('/fundo.png'); 
   background-size: cover; 
   background-position: center;  
   text-align: center;
   padding: 5%;
   margin-bottom: 30px;
   padding-top: 150px;
}

.serv {
   display: flex;
   justify-content: center ;
}

.servicos {
  position: absolute;
   background: #b06b52; /* Cor de fundo */
   background-image: url('/fundo.png'); /* Imagem de fundo */
   background-size: cover; /* Faz a imagem cobrir toda a área */
   background-position: center; /* Centraliza a imagem */
   padding: 5% 15%; /* Espaço interno em cima e embaixo */
   max-width: 100%; /* Largura máxima */
   width: 96%; /* Largura da div */
   margin-bottom: 55px;
   
}
.servicos .card{
   border: none;
   margin: 10px;
   text-align: center;
   background:  transparent ;
   background-image: url('/fundo.png'); /* Imagem de fundo */
   background-size: cover; /* Faz a imagem cobrir toda a área */
   background-position: center; /* Centraliza a imagem */
   color: #F1F1F1;
}
.card-body{
  background:  #2C3759 ;
  background-image: url('/fundo.png'); /* Imagem de fundo */
  background-size: cover; /* Faz a imagem cobrir toda a área */
  background-position: center; /* Centraliza a imagem */
 line-height: 5px;
  
}
.card-title{
   font-size: 15px;
   font-family: Montserrat-SemiBold;
}
.card-text{
   font-family:  Montserrat-SemiBold;
   font-weight: bold;
  font-size: 13px;
}
.about {
  position: relative;
  height: 100vh;
  background: none;
  margin-bottom: 30px;
}

.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%; /* Cor ocupa 40% da tela à esquerda */
  height: 100%;
  background-color: #6e8259;
  z-index: 0;
}

.floating-content {
  position: absolute;
  left: 25%; /* Centraliza entre as duas áreas */
  top: 40%;
  transform: translateY(-50%);
  padding: 10px;
  z-index: 1;
}
.cardperfil{
  display: flex;
  width: 90%;
  max-width: 1200px;
}
.profile-card {
  /* background-color: #758CA6;  */
  padding: 80px 20px;
  height: 40%;
  text-align: center;
  margin-top: 20%;
}

.profile-card img {
  width: 300px;
  height: 410px;
  border-radius: 50%;
  object-fit: cover;
  padding: 10px;
}

.profile-card h2 {
  
  margin-top: 15px;
  font-size: 24px;
  color: #2C3759;
}

.profile-card p {
  color: #2C3759;
  margin: 5px 0 20px;
  font-size: 14px;
  font-family:  Montserrat-SemiBold;

}

.info-section {
  margin-top: 12%;
  padding: 40px;
  width: 60%;
}

.info-section h1 {
  font-size: 46px;
  color: #2C3759;
  font-family:  Montserrat-SemiBold;

}

.info-section p {
  font-family:  Montserrat-SemiBold;

  margin-top: 10px;
  color: #2C3759;
  line-height: 1.6;
}

.texto{
  display: grid;
  justify-content: right;
}

.contato{

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5%;
  background: #758CA6; /* Cor de fundo */
  width: 100%;
  height: 280px;
  margin-top: 32%;

}
.dados{
  max-width: 100%;
}
.dados .col{
  
  text-align: center;
  padding: 30px;
  border: none;
  border-bottom: 1px solid black;
  background: #2C3759;
  background-image: url('/fundo.png'); /* Imagem de fundo */
  background-size: cover; /* Faz a imagem cobrir toda a área */
  background-position: center; /* Centraliza a imagem */
  color: #F1F1F1;
  font-family: Montserrat-SemiBold;
}
.rodape{
  
  color: #F1F1F1;
  text-align: center;
  padding: 20px;
  background: #2C3759;
  background-image: url('/fundo.png'); /* Imagem de fundo */
  background-size: cover; /* Faz a imagem cobrir toda a área */
  background-position: center; /* Centraliza a imagem */
}
footer{
  background: #2C3759;
  background-image: url('/fundo.png'); /* Imagem de fundo */
  background-size: cover; /* Faz a imagem cobrir toda a área */
  background-position: center; /* Centraliza a imagem */
  /*font-family:  Montserrat-SemiBold;*/

}
.fi{
  margin: 10px;
}
  
.parte1{
  background: #2C3759; /* Cor de fundo */
   background-image: url('/fundo.png'); /* Imagem de fundo */
   background-size: cover; /* Faz a imagem cobrir toda a área */
   background-position: center; /* Centraliza a imagem */
   color: #F1F1F1;
   font-family:  Montserrat-SemiBold;

}
.imagem{
  display: flex;
  justify-content: center;
  align-items: center;
}
.imagem img{
  max-width:380px;
  max-height:380px;
  width: 100%;
  height: 550px;
  border-radius: 0px;
}
.parte2{
  background: #b06b52; /* Cor de fundo */
   background-image: url('/fundo.png'); /* Imagem de fundo */
   background-size: cover; /* Faz a imagem cobrir toda a área */
   background-position: center; /* Centraliza a imagem */
   color: #F1F1F1;
   font-family:  Montserrat-SemiBold;

}

.parte3{
  background: #6e8259; /* Cor de fundo */
  background-image: url('/fundo.png'); /* Imagem de fundo */
  background-size: cover; /* Faz a imagem cobrir toda a área */
  background-position: center; /* Centraliza a imagem */
  color: #F1F1F1;
  font-family:  Montserrat-SemiBold;

}

.btnagendar{
  background-color: #EAEAEA;
  padding: 8px 15px 8px 15px; 
  border-radius: 20px;
  color: #b06b52;
  font-size: 15px;
  margin: 0px 10px 50px 10px;
  font-family: MontserratAlternates-Light;
}
.btnagendar2{
  background-color: #2C3759;
  padding: 8px 15px 8px 15px; 
  border-radius: 20px;
  color: #F1F1F1;
  font-size: 15px;
  margin: 0px 10px 50px 10px;
  font-family: MontserratAlternates-Light;
}
.btnagendar3{
  background-color: #b06b52;
  padding: 8px 15px 8px 15px; 
  border-radius: 20px;
  color: #F1F1F1;
  font-size: 15px;
  margin: 0px 10px 50px 10px;
  font-family: MontserratAlternates-Light;
}
.btnagendar4{
  background-color: #2C3759;
  padding: 8px 15px 8px 15px; 
  border-radius: 20px;
  color: #F1F1F1;
  font-size: 15px;
  margin: 0px 10px 50px 10px;
  font-family: MontserratAlternates-Light;
}
.btnagendar5{
  background-color: #6e8259;
  padding: 8px 20px 8px 20px; 
  color: #F1F1F1;
  font-size: 15px;
  font-family: MontserratAlternates-Light;
  position: absolute;
  top: 90%;
  left: 10%;
  right: 10%;
  border: none;
}
.btnagendar5:hover{
  background-color: #758CA6;
}

h4, h3{
  font-family: Montserrat-SemiBold;
}

h5{
  font-family:  Montserrat-SemiBold;

}

h1{
  font-family:  Montserrat-SemiBold;

}


.cf:before,
.cf:after {
 content: " ";
 display: table;
}

.cf:after {
 clear: both;
}

.main-container {
 position: relative;
 background-color: #758CA6;
 background-image: url('/fundo.png'); /* Imagem de fundo */
 background-size: cover; /* Faz a imagem cobrir toda a área */
 background-position: center; /* Centraliza a imagem */
}


.container {
 position: relative;
 padding: 25px;
}

/*animation element sliding left*/

/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
 float: left;
 width: 30%;
 height: 320px;
 margin: 0% 1.5% 3% 1.5%;
 background: #EAEAEA;
 padding: 15px;
 box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
 border: solid 1px #6e8259;
 color: #1e2e7a;
 display: flex;
 justify-content: center;
 align-items: center;
 font-family: MontserratAlternates-light;
}

.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
 box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.animation-element.slide-left.testimonial .left{
 float: left;
 margin-right: 15px;
}

.animation-element.slide-left.testimonial img {
 width: 100px;
 height: 100px;
 border-radius: 25px;
 box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}

.animation-element.slide-left.testimonial .content {
 float: left;
 width:100%;
 margin-bottom: 10px;
}

.animation-element.slide-left.testimonial .rating{
 color: #1e2e7a;
}

.animation-element.slide-left.testimonial i {
 margin-right: 5px;
}
.background-area{
   display: none;
   position: relative;
   padding: 20px;

}
@media screen and (max-width: 768px) {
.texto h3{
   font-size: 20px;
   margin-bottom: 0%;
}
.texto p{
   font-size: 13px;
}

.about {
   position: relative;
   height: 50vh;
   background: none;
   margin-bottom: 30px;
 }
 
 .about::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 40%; /* Cor ocupa 40% da tela à esquerda */
   height: 100%;
   background-color: #6e8259;
   z-index: 0;
 }
 
 .floating-content {
   left: 5%; /* Centraliza entre as duas áreas */
   top: 42%;
 }
 .cardperfil{
   display: flex;
   width: 90%;
   max-width: 1200px;
 }
 
 .servicos {
   position: relative;
    margin-bottom: 5px;
 }
 .servicos .card{
   margin: 20px;
   text-align: center;
   background:  transparent ;
   background-image: url('/fundo.png'); /* Imagem de fundo */
   background-size: cover; /* Faz a imagem cobrir toda a área */
   background-position: center; /* Centraliza a imagem */
   color: #F1F1F1;
}
.info-section {
display: none;

 }
 .background-area{
   display: grid;
   position: relative;
   padding: 20px;
}
.banner{
   padding-top: 40px;
  position: relative;

    
}

.elemento1 {
  position: absolute;
  background-image: url('/elemento5.png');
  background-size: contain;
  background-repeat: no-repeat;
  top: -13%;
  left: -3%;
  width: 550px;
  height: 550px;
  transform: rotate(210deg);
  z-index: 1; /* Elemento abaixo do banner, mas acima das frases */
}

.banner h4, 
.banner h5 {
  position: relative;
  z-index: 100; /* As frases ficam acima do elemento */
}


.nav{
   padding: 0px;
   position: absolute;
   left: 0%;
   margin-left: 5px;
   z-index: 110; /* Valor alto para ficar acima do elemento */
}
li .nav-link{
    font-size: 10px;
 }
 .nav-item.dropdown:hover .dropdown-menu {
   font-size: 10px;
 }
.btnagendar5{
   top: 87%;
}
.contato{
   margin-top: 10%;
}
.contato h1{
   font-size: 25px;
}
.animation-element.slide-left.testimonial {
   float: none;
   width: 100%;
   font-size: 15px;
   text-align: center;
}
.rodape{
   font-size: 10px;
   padding-right: 0%;
   margin-right: 0%;
}
footer{
   width: 100%;
   font-size: 10px;
   padding-right: 0%;
   margin-right: 0%;
}
footer .container{
   padding-right: 0%;
   margin: 0%;
   padding-bottom: 0%;   

}
footer p{
   padding-top: 5px;
  

}
.dados {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.dados .col {
  text-align: center;
  font-size: 15px;
  padding: 20px;
  width: 100%;
}



}
@media (max-width: 480px) {

   .elemento1 {
      top: 0%;
      left: -10%;
      width: 180px;
      height: 200px;
  }
  .elemento2 {
        top: 130.5%;
   opacity: 0.2;
}
.elemento3 {
   top: 0%;
      left: -10%;
      width: 180px;
      height: 200px;
}
.dados {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding-right: 0;
  margin-right: 0;
}

.dados .col {
  text-align: center;
  font-size: 15px;
  padding: 20px 0;
  width: 100%;
}


}