body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #f4f7fb;
  color: #22303f;
  line-height: 1.6;
}

header { 
  background: linear-gradient(90deg, #3c2160, rgb(31, 85, 31));
  color: white;
  padding: 35px 20px;
  text-align: center;
}
 
header h1 {
  margin: 0 0 8px;
  font-size: 38px;
}
header p {
    margin: 0 0 18px;
    color: white;

}
nav {
    margin-top: 15px;
}

nav a {
    display: inline-block;
    margin: 4px;
    padding: 10px 16px;
    background-color: white;
    color: #123c69;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

nav a:hover,
nav a:focus {
    background-color: yellow;
    color: #123c69;
    outline:3px solid white;
}
main {
    max-width: 1050px;
    margin: 0 auto;
    padding: 30px 20px 50px;
}

h2 {
    color: #123c69;
    font-size: 30px;
    text-align: center;
}
h3 {
    color: #123c69;
}

.hero,
.info-box,
.form-section {
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(18, 60, 105, 0.10);
  padding: 25px;
  margin-bottom: 25px;
}
.hero {
    text-align: center;
}
.intro img,
.card img {
  width: 100%;
  border-radius: 10px;
  margin-top: 15px;
}
.button {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 22px;
    background-color: #a83210;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.button:hover,
.button:focus {
    background-color: #802608;
    outline: 3px solid #123c69;
}
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
}

.card {
  width: 300px;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(18, 60, 105, 0.10);
}
.card h3 {
    margin-top: 15px;
}
.tips-list {
    background-color: white;
    padding: 25px 25px 25px 45px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(18, 60, 105, 0.10);
}
 form {
    display: grid;
    gap: 8px;
    max-width: 500px;
    margin:0 auto;
    text-align: left;
 }
 label {
    font-weight: bold;
    color: #123c69;
 }
 input,
 select,
 textarea {
    padding: 12px;
    border: 2px solid #b6d5e8;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #e76f51;
  outline: 3px solid blueviolet;
}

footer {
  background-color: #3c2160;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}

@media (max-width: 700px) {
  header h1 {
    font-size: 28px;
  }

  nav a {
    display: block;
    margin: 6px auto;
    width: fit-content;
  }

  .card {
    width: 100%;
  }

  h2 {
    font-size: 25px;
  }
}