body{
    margin: 0%;
    height: auto;
    
}
header{
height: 50px;
width: auto;
position: fixed;
left: 0px;
right: 0px;
top: 0px;
z-index: 10;

}
.barra{
width: auto;
top: 0;
height: 50px;
display:flex;
justify-content:space-around;
background-color: #a7cfee;
font-family: 'Inter', sans-serif;
align-items: center;
border: 8px solid transparent;
}

ul{ 
    width:780px; 
    list-style: none;      
}
ul li{
    float:left; /* posicona a propriedade CSS que usamos na tela, seja um elemento em bloco ou em linha */
    background-color: #4988B8;
    position: relative;/* Posiciona o item filho ao lado da LI qdo item pai */
    border-radius: 25px;
    display:flex;
    /* display:inline-table; */
    margin-right: 20px;
    margin-left: 20px;
    width: 116px;
    font-weight: 400;
    text-align: center;
}
ul li a{
    display: flex; /* Renderiza o elemento HTML como bloco, tal como os parágrafos e os cabeçalhos o são */
    padding: 8px;
    text-decoration:dashed;
    color: #ffffff;
    width: 110px;
    align-items: center;
    justify-content: center;
}
ul li:hover > a{ /* Quando passarmos o mouse sobre a LI colocamos estilo no A */
    background-color: #2B4F6B;
    border-radius: 25px; 
    position:relative;
}

ul li ul{
    display:none;
    position:absolute;
    top: 34px;
    left: -45px;
    text-align: center;
    width: 110px;
}

ul li:hover ul{
    width: 210px; 
    display: block; 
}

.painel{
  position: relative;
  top: 60px;
  border-radius: 15px;
  margin-left: 50px;
  margin-right: 50px;
  background: transparent ;
  height: 600px;
}

.texto1{
    position: relative;
    margin-left: 350px;
    margin-right: 350px;
    border-radius: 15px;
    text-align: center;
    justify-content: center;
    font-size: x-large;
    color: #5FAFEB;
    font-family: 'Gill Sans MT';
    background: #002646;
    top: 10px;
}

.adestramento{
  position: relative;
  width: 30%;
  height: 345px;
  color: #A7CFEE;
  text-shadow: 2px 2px 10px #000;
  border-radius: 25px;
  margin-left: 20px;
  top: 0px;
}

.texto2{
    position: relative;
    margin-right: 15px;
    text-align: center;
    color: #00375e;
    bottom: 320px;

}
.texto3{
    position: relative;
    margin-right: 15px;
    text-align: center;
    color: #002747;
    bottom: 250px;
}

.retangulo{
position: relative;
width: 30%;
height:355px;
background: #A7CFEE;
border-radius: 15px;
text-align: center;
align-items: center;
justify-content: center;
margin-right: 25px;
float: right;
bottom: 534px;
border-radius: 20%;

}

.primeira{
  position: relative;
  color: #4988B8;
  font-size: 50px;
  bottom: 20px;
}
.gratuita{
  position: relative;
  color: #4988B8;
  font-size: 50px;
  bottom: 50px;
}
.agende{
  color: #35658a;
  position: relative;
  bottom: 60px;
}

.atendimento{
  color: #35658a;
  font-size: large;
  position: relative;
  bottom: 60px;
}
.img{
   position: relative;
  margin-right: 160px;
  width: 40px;
  height: 40px;
  bottom: 55px; 
}

.link{
  width: 40px;
  height: 40px; 
}

.contato{
  color: #35658a;
  position: relative;
  align-items: center;
  bottom: 115px;
  margin-left: 110px;
  width: 170px;
}

.painel2{
  position: relative;
  background-color: #A7CFEE;
  border-radius: 15px;
  margin-left: 50px;
  margin-right: 50px;
  bottom: 45px;
  height: 620px;
}
.linha1{
  position: relative;
  background: #5FAFEB;
  border-radius: 15px;
  top: 10px;
  color: #002646; 
  text-align: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.titulo1{
  font-family: 'Gill Sans MT'
}

.coluna1{
  display: inline-block;
  width: 33.33%;
  vertical-align: top; 
  /* box-sizing: border-box; */
  text-align: center;
  
}

.text1{
  margin-left: 65px;
color: #002646;

}

.text2{
   margin-left: 80px; 
   margin-right: 20px;
  color: #002646;
}

.coluna2{
  display: inline-block;
  width: 33.33%; /* Divide o espaço igualmente entre as três divs */
  vertical-align: top; /* Alinha as divs verticalmente no topo */
}

.text3{
  width: 250px;
   position: relative;
  color: #A7CFEE;
  text-shadow: 2px 2px 10px #000;
  border-radius: 15px; 
  margin-left: 60px;
   top: 10px; 
}

.text4{
  color: #002646;
  text-align: center;
  font-size: xx-large;
}

.text5{
  color: #002646;
  text-align: center;
  font-size: large;
}

.text6{
  text-align: center;
  color: #002646;
  font-size: large;
}

.coluna3{
  vertical-align: top; /* Alinha as divs verticalmente no topo */
  position: relative;
  box-sizing: border-box;
  width: 350px;
  height: 375px;
  background: #b0ddff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  text-align: center;
  bottom: 410px;
  float: right;
  margin-right: 10px;
}

.pacotes{
  color: #2B4F6B;
}

.valor{
  color: #4988B8;
} 

.button {
padding: 1.3em 3em;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: #2B4F6B;
background-color: #5FAFEB;
border: none;
border-radius: 450px;
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
top: 10px;
position: relative;
left: 44px;
margin-right: 80px;
background-image: url('Carrinho.png');
background-repeat: no-repeat;
background-position: left;
background-size: contain;
background-size: 45px;
background-position-x: 25px;
padding-left: 70px; 
}

button:hover {
  background-color: #4988B8;
  box-shadow: 0px 15px 20px rgba(255, 255, 255, 0.4);
  color: #fff;
  transform: translateY(-7px);
  background-image: url('Carrinho2.png');
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  background-size: 45px;
  background-position-x: 25px;
  padding-left: 70px; 
  } 

button:active {
  transform: translateY(-1px);
} 

.linha2{
  position: relative;
  background: #5FAFEB;
  border-radius: 15px;
  height: 100px;
  top: 10px;
  color: #002646;
  margin-left: 10px;
  margin-right: 10px;
}

.titulo2{
  font-family: 'Gill Sans MT';
  position: relative;
  top: 10px;
  margin-left: 40px;
  
}

.logo2{   
  width: 45px; 
  position: relative;
  margin-left: 550px; 
  top: 55px;
  
 

}

.numero{
  position: relative;
  width: 155px;
  margin-right:75px;
  bottom: 60px;
  float: right;
}  

 footer{
  position:absolute;
  margin: 0px;
  bottom: -950px;  /*sempre deixar do mesmo tamanho do height body da pagina porem negativo (-) */
  width: 100%;
  height: 210px;
  background-color: #A7CFEE;
  color: #2B4F6B;
  justify-content: space-between;
  /* border: 10px solid transparent; */

}
.rodape1{
    float: left;
    margin-left: 5px;
    margin-right: 0px;
    text-align: center;
    position: relative;
    top: 20px;
}
.rodape2{
    float:left;
    margin-left: 110px;
    margin-right: 0px;
    align-content: center;
    position: relative;
    top: 25px;
}

.mapa{
    position: relative;
    bottom: -5px;
    float: right ;
    margin-right: 30px;
    
}

.redes{
  margin: 10px;
  width: 40px;
}