* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;}



body {
    background: #f4f4f4;}


/* HEADER */
header{
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: 20px 50px;
    background: rgba(0,0,0,0.6); 
    color: white;
    z-index: 10;}

nav a {
    margin-left: 20px;
    text-decoration: none;
    color: white;
    transition: 0.3s;}

nav a:hover {
    color: #ff7a18;}

/* HERO */

.hero {
   height: 150vh;
   background: url("imagem-viagem.jpg.jpg") no-repeat center/cover;
   position:relative;
   display: flex;
   justify-content: center;
   align-items: center;}


   /* EFEITO ESCURO NA IMAGEM */

 .overlay {
   position: absolute;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.5);}  


   /* CONTEUDO */ 

.hero-content {
  position:relative;
  color: white;
  align-items: center;
  max-width: 600px;}

.hero-content h2 {
  font-size: 3rem;
  margin-bottom: 15px;}

.hero-content p {
  margin-bottom: 20px;
  font-size: 1.2rem;}


  /* BOTÃO */ 

button {
  padding: 12px 15px;
  border: none;
  background: linear-gradient(45deg, #ff7a18, #ff5200);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.3s;}

button:hover {
  transform: scale(1.05);}


  /* INFO */

.info {
 padding: 80px 20px;
 text-align: center;}

.cards {
 display: flex;
 justify-content: center;
 gap: 25px;
 margin-top: 40px;
 flex-wrap: wrap;}

.card {
 background: white;
 padding: 25px;
 border-radius: 25px;
 width: 250px;
 box-shadow: 0 6px 15px rgba(0,0,0,0.1);
 transition: 0.3s;}

.card:hover {
 transform: translateY(-10px);}

 /* FOOTER */

footer {
 background: #0a2540;
 color: white;
 text-align:center;
 padding: 0.5px;}