body {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


header {
  background-color: #03919b;
  color: white;
  text-align: center;
  padding: 20px 0;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.row {
  display: flex;
  flex: 1;
}

.section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #9dded6;
}

main {
  background-image: url(beach\ scene.png);
  background-size: cover;
}

.round-button {
  width: 200px; /* Set a fixed width */
  height: 200px; /* Set a fixed height, equal to the width */
  line-height: 50px; /* Center the text vertically */
  border-radius: 50%; /* This ensures the button is round */
  border: 2px solid #ec5064;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  text-align: center; /* Center the text horizontally */
  font-size: 14px; /* Adjust font size as needed */
  padding: 0; /* Remove padding */
  display: inline-block; /* Align the button correctly */
}

footer {
  background-color: #03919b; /* Dark background for the footer */
  color: white;
  text-align: center;
  padding: 30px 0;
  position: relative;
}

@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }

  .section {
    margin-bottom: 10px;
  }
}
.button-1 {
  background-image: url(palm\ icon.png);
  background-size: cover;
}

.button-2 {
  background-image: url(house\ 2.png);
  background-size: cover;
}

.button1 {
  width: 200px; /* Set a fixed width */
  height: 200px; /* Set a fixed height, equal to the width */
  line-height: 50px; /* Center the text vertically */
  border-radius: 50%; /* This ensures the button is round */
  border: 2px solid #ec5064;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  text-align: center; /* Center the text horizontally */
  font-size: 14px; /* Adjust font size as needed */
  padding: 0; /* Remove padding */
  display: inline-block; /* Align the button correctly */
  background-image: url(palm\ icon.png);
  background-size: cover;
}

.button2 {
  width: 200px; /* Set a fixed width */
  height: 200px; /* Set a fixed height, equal to the width */
  line-height: 50px; /* Center the text vertically */
  border-radius: 50%; /* This ensures the button is round */
  border: 2px solid #ec5064;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  text-align: center; /* Center the text horizontally */
  font-size: 14px; /* Adjust font size as needed */
  padding: 0; /* Remove padding */
  display: inline-block; /* Align the button correctly */
  background-image: url(beachhouse.png);
  background-size: cover;
}

.button3 {
  width: 200px; /* Set a fixed width */
  height: 200px; /* Set a fixed height, equal to the width */
  line-height: 50px; /* Center the text vertically */
  border-radius: 50%; /* This ensures the button is round */
  border: 2px solid #ec5064;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  text-align: center; /* Center the text horizontally */
  font-size: 14px; /* Adjust font size as needed */
  padding: 0; /* Remove padding */
  display: inline-block; /* Align the button correctly */
  background-image: url(palm\ icon.png);
  background-size: cover;
}

.button4 {
  width: 200px; /* Set a fixed width */
  height: 200px; /* Set a fixed height, equal to the width */
  line-height: 50px; /* Center the text vertically */
  border-radius: 50%; /* This ensures the button is round */
  border: 2px solid #ec5064;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  text-align: center; /* Center the text horizontally */
  font-size: 14px; /* Adjust font size as needed */
  padding: 0; /* Remove padding */
  display: inline-block; /* Align the button correctly */
  background-image: url(resort-icondark.png);
  background-size: contain;
}

.button4:hover {
  background-image: url(cgwords2.png);
}

.button1:hover {
  background-image: url(juliafamwords.png);
}

.button2:hover {
  background-image: url(thehousewords.png);
}

.button3:hover {
  background-image: url(scottsfamilywords.png);
}

.button5:hover {
  background-image: url(messageboadwords.png);
}

.button6:hover {
  background-image: url(need\ to\ get\ away\ text\ 2.png);
}

.button5 {
  width: 200px; /* Set a fixed width */
  height: 200px; /* Set a fixed height, equal to the width */
  line-height: 50px; /* Center the text vertically */
  border-radius: 50%; /* This ensures the button is round */
  border: 2px solid #ec5064;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  text-align: center; /* Center the text horizontally */
  font-size: 14px; /* Adjust font size as needed */
  padding: 0; /* Remove padding */
  display: inline-block; /* Align the button correctly */
  background-image: url(mail-iconblack.png);
  background-size: cover;
}

.button6 {
  width: 200px; /* Set a fixed width */
  height: 200px; /* Set a fixed height, equal to the width */
  line-height: 50px; /* Center the text vertically */
  border-radius: 50%; /* This ensures the button is round */
  border: 2px solid #ec5064;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  text-align: center; /* Center the text horizontally */
  font-size: 14px; /* Adjust font size as needed */
  padding: 0; /* Remove padding */
  display: inline-block; /* Align the button correctly */
  background-image: url(darkcompass2.png);
  background-size: cover;
}

.section-1 {
  background-image: url(sunset1.png);
  background-size: cover;
}

.section-2 {
  background-image: url(sunset1.png);
  background-size: cover;
}

.section-3 {
  background-image: url(sunset1.png);
  background-size: cover;
}

.section-4 {
  background-image: url(sunset1.png);
  background-size: cover;
}

.section-5 {
  background-image: url(sunset1.png);
  background-size: cover;
}

.section-6 {
  background-image: url(sunset1.png);
  background-size: cover;
}

.footer-link:first-child {
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.footer-link:nth-child(2) {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
}

.footer-link:nth-child(3) {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.footer-link {
    color: white;
    text-decoration: underline;
    font-style: bold;
    padding: 10px;
    margin-top: 50px;
}