body{
    margin: 0%;
    height: 650px;
    
}
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; 
}

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

.painel2{
  position: relative;
  background-color: #A7CFEE;
  border-radius: 15px;
  height: 600px;
  top: 20px;
  margin-left: 50px;
  margin-right: 50px;

}
.linha1{
  position: relative;
  background: #5FAFEB;
  border-radius: 15px;
  top: 10px;
  color: #002646;
  text-align: 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{
color: #002646;
}

.text2{
  height: 50px;
  width: 225px;
  margin-left: 100px;
  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 */
  box-sizing: border-box;
  

}

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

.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{
  display: inline-block;
  vertical-align: top; /* Alinha as divs verticalmente no topo */
  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;

}

.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: 45px;
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;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
}

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

}

.logo2{
  position: relative;
  margin-left: 525px; 
  float: left;
  width: 45px; 
}

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

 footer{
  position:absolute;
  margin: 0px;
  bottom: -670px;  /*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;
}