/* Reset básico */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font-family: 'Segoe UI', sans-serif;

  line-height: 1.6;

  color: #333;

  background-color: #f9f9f9;

}

/* Cabeçalho */

header {

  background: #fff;

  padding: 20px 40px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.logo {
            max-width: 100px;

            border-radius: 50px; 

            box-shadow: 0 2px 5px gray;
            
        }

.banner {
            max-width: 100%;
            
        }


nav a {

  margin-left: 20px;

  text-decoration: none;

  color: #333;

}

nav a:hover {

  color: burlywood;

}

/* Hero */

.hero {

  background: #8B4513;

  color: white;

  padding: 50px 0px;

  text-align: center;

}

.hero .btn {

  background: burlywood;

  color: #8B4513;

  padding: 10px 20px;

  border-radius: 5px;

  margin-top: 10px;

  display: inline-block;

  text-decoration: none;

  font-weight: bold;

}

.hero .btn:hover {

  background: white;

}

/* Secções */

.section {

  padding: 60px 20px;

  text-align: center;

}

.cards {

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

  margin-top: 30px;

}

.card {

  background:burlywood;

  padding: 20px;

  border-radius: 8px;

  width: 280px;

  box-shadow: 0 2px 5px #333;

}

/* Testemunhos */

.testimonials blockquote {

  font-style: italic;

  margin: 20px auto;

  max-width: 600px;

}

/* CTA */

.cta {

  background: burlywood;

  color: #8B4513;

  padding: 60px 20px;

  text-align: center;

}

.cta .btn {

  background: #8B4513;

  color: white;

  padding: 10px 20px;

  border-radius: 5px;

  text-decoration: none;

  font-weight: bold;

  margin-top: 20px;

  display: inline-block;

}

/* Rodapé */

footer {

  background: #f1f1f1;

  padding: 20px;

  text-align: center;

}

.socials a {

  margin: 0 10px;

  color: #333;

  text-decoration: none;

}

/* Mensagem-direita */

.mensagem-direita {

  position: fixed;

  top: 20%;

  right: 0;

  background-color: bisque;

  padding:20px 2px;

  border-radius: 8px 0 0 8px; 

  box-shadow: 0 2px 5px #333;

  font-family: 'Segoe UI', sans-serif;

  color: #8B4513;

  font-size: 18px;

}

/* 4 Imagens na Horizontal */

.container {

  display: flex;

  justify-content: center; /* Centraliza as imagens horizontalmente */

  gap: 20px; /* Espaço entre as imagens */

  margin-top: 20px;

}

.container img {

  width: 200px; /* Ajusta o tamanho da imagem */

  height: 270px;

  border: 2px solid #ccc;

  border-radius: 8px;

}