html, body {
  width: 100%; /* Ensure the width is 100% of the viewport */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}
body {
  width: 100%; /* Set width to 100% to cover the entire viewport */
  height: 100vh; /* Set height to 100vh to cover the entire viewport height */
  margin: 0; /* Remove default margin */
  background-color: #ffffff; /* Fallback background color */
  background-image: url("images/Big-Sands-Sunset-5-edit.jpg"); /* Set background image */
  background-size: cover; /* Cover the entire background */
  background-repeat: no-repeat; /* Do not repeat the background image */
  background-position: center; /* Center the background image */
  font-family: Tahoma; /* Set font family */
  font-size: 16px; /* Set font size */
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: black; /* Set text color */
  text-align: center; /* Center align text */
  font-size: 40px; /* Set font size */
  display: block; /* Ensure the h1 behaves as a block element */
  text-overflow: ellipsis; /* Optional: Add ellipsis if the text overflows */
}
.header-container {
  background-color: rgba(249, 249, 249, 0.5); /* Set the background color */
  width: 100%; /* Ensure it spans the full width of the page */
  padding-top: 20px; /* Add padding above and below the content */
  text-align: center; /* Center align the text */
  box-sizing: border-box; /* Include padding in the element's total width */
  position: relative; /* Ensure it is positioned above the body background */
  z-index: 1; /* Set a higher stacking context */
}
.header-container::before {
  content: ""; /* Create a pseudo-element */
  position: absolute; /* Position it relative to the container */
  top: 0;
  left: 0;
  width: 100%; /* Cover the full width of the container */
  height: 100%; /* Cover the full height of the container */
  background-color: rgba(249, 249, 249, 0.5); /* Set the background color */
  z-index: -1; /* Place it behind the content of the header */
}
.header-container h1 {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

.title-divider {
  border: none; /* Remove default border */
  border-top: 5px solid black; /* Add a 5px black line */
  margin: 20px auto; /* Center the divider and add spacing */
  width: 100%; /* Optional: Limit the width of the divider */
}
h2, p {
  margin: 1em auto; /* Center the headings and paragraphs with auto margins */
  text-align: center; /* Center-align the text */
}
h4, p {
  margin: 1em auto; /* Center the headings and paragraphs with auto margins */
  text-align: center; /* Center-align the text */
}
form {
  width: 60vw; /* Set form width to 60% of the viewport width */
  max-width: 500px; /* Set maximum width for the form */
  min-width: 300px; /* Set minimum width for the form */
  margin: 0 auto; /* Center the form horizontally */
  padding-bottom: 2em; /* Add padding at the bottom */
}

fieldset {
  border: none; /* Remove the default border */
  padding: 2rem 0; /* Add padding at the top and bottom */
  border-bottom: 3px solid #3b3b4f; /* Add a bottom border */
}

fieldset:last-of-type {
  border-bottom: none; /* Remove the bottom border for the last fieldset */
}

label {
  display: block; /* Make labels block-level elements */
  margin: 0.5rem 0; /* Add vertical spacing between labels */
}

input,
textarea,
select {
  margin: 10px 0 0 0; /* Add margin at the top */
  width: 100%; /* Set width to 100% of the parent container */
  min-height: 2em; /* Set a minimum height */
}

input, textarea {
  background-color: #ffffff; /* Set background color */
  border: 1px solid #0a0a23; /* Add a border */
  color: #000000; /* Set text color */
}

.inline {
  width: unset; /* Reset width to default */
  margin: 0 0.5em 0 0; /* Add horizontal margin */
  vertical-align: middle; /* Align vertically in the middle */
}

input[type="submit"] {
  display: block; /* Make the submit button a block-level element */
  width: 60%; /* Set width to 60% of the parent container */
  margin: 1em auto; /* Center the button with auto margins */
  height: 2em; /* Set height */
  font-size: 1.1rem; /* Set font size */
  background-color: #008080; /* Set background color */
  border-color: white; /* Set border color */
  min-width: 300px; /* Set minimum width */
  color: #ffffff; /* Set text color */
}

input[type="submit"]:hover {
  background-color: darkblue; /* Change background color on hover */
  cursor: pointer; /* Change cursor to pointer on hover */
}

input[type="file"] {
  padding: 1px 2px; /* Add padding inside the file input */
}

.inline {
  display: inline; /* Display elements inline */
}

a {
  color: #dfdfe2; /* Set link color */
}

/* Adjustments for checkboxes and radio buttons */
fieldset label {
  display: flex; /* Use flex layout for labels */
  align-items: center; /* Align items vertically in the center */
  margin: 0.2rem 0; /* Reduce margin to bring labels closer together */
  white-space: nowrap; /* Prevent text from wrapping */
}

label span {
  flex-grow: 1; /* Allow text to grow and take up remaining space */
}

input[type="checkbox"],
input[type="radio"] {
  width: 1em; /* Set width of checkboxes and radio buttons */
  height: 1em; /* Set height of checkboxes and radio buttons */
  margin-right: 0.5em; /* Add space between checkbox/radio button and text */
}

/* Add space between input boxes and text */
input[type="text"],
input[type="email"],
input[type="tel"],
select {
  margin-left: 10px; /* Add space to the left of input boxes */
}

/* Add space to the left of the textarea with id="details" */
textarea#details {
  margin-left: 10px; /* Add space to the left */
}

/* General footer styling */
footer {
  align-self: flex-end; /* Align footer to the end */
  padding: 10px; /* Add padding */
  width: 100vw; /* Set width to 100% */
  text-align: center; /* Center-align the text */
  background-color: rgba(247, 187, 58, 0.8); /* Set background color */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  border: 1px solid black; /* Add a thin black border */
}

/* Footer buttons container */
.footer-buttons {
  display: block; /* Display buttons as block-level elements */
  justify-content: center; /* Center the buttons horizontally */
  flex-wrap: wrap; /* Allow buttons to wrap to the next line if needed */
  gap: 10px; /* Add space between buttons */
  margin-bottom: 20px; /* Add margin at the bottom */
}

.button {
  display: inline-block; /* Display buttons inline */
  padding: 10px 20px; /* Add padding inside the button */
  font-size: 16px; /* Set font size */
  color: white; /* Set text color */
  background-color: #008080; /* Set background color */
  text-align: center; /* Center-align the text */
  text-decoration: none; /* Remove underline from text */
  border-radius: 5px; /* Add rounded corners */
  margin-top: 20px; /* Add margin at the top */
  margin: 5px; /* Add margin around the button */
  border-color: aliceblue; /* Set border color */
  border-width: 1px; /* Set border width */
  border-style: solid; /* Set border style */
  width: auto; /* Allow button width to adjust automatically */
}

.button:hover {
  background-color: darkblue; /* Change background color on hover */
}

/* Styling for links within p elements */
p a {
  color: black; /* Set the link text color to black */
  text-decoration: none; /* Remove the underline */
}

/* Styling for links within p elements on hover */
p a:hover {
  color: rgb(0, 0, 139); /* Change the color on hover */
}

/* Social icons container */
/* Social icons container */
.social-icons {
    display: flex;
    justify-content: center; /* Center the icons horizontally */
    gap: 10px; /* Add space between icons */
      align-items: center; /* Center icons vertically */
    margin-bottom: 20px; /* Add margin at the bottom to separate from the text */
}
.facebook-social-icon {
  background-color: #1877f3;    /* Facebook blue */
  color: #fff;                  /* White "f" */
  border: 2px solid #000;       /* Black border */
  border-radius: 8px;
}
.facebook-social-icon i {
    color: #fff !important; /* Force white f */
}
.facebook-social-icon:hover {
  background-color: #145db2;    /* Slightly darker blue on hover */
  color: #fff;
  border-color: #222;
}
.youtube-social-icon {
  background-color: #ff0000;    /* YouTube red */
  color: #fff;                  /* White icon */
  border: 2px solid #000;       /* Black border (optional, for consistency) */
  border-radius: 8px;           /* Rounded corners */
}
.youtube-social-icon i {
  color: #fff !important;       /* Force white arrow */
}
.youtube-social-icon:hover {
  background-color: #cc0000;    /* Darker red on hover */
  color: #fff;
  border-color: #222;
}
.instagram-social-icon {
  background-color: #fff;           /* White background */
  color: #e1306c;                   /* Pink icon color */
  border: 2px solid #e1306c;        /* Pink border */
  border-radius: 50%;               /* Make it a circle */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.instagram-social-icon i {
  color: #e1306c !important;        /* Pink icon */
  font-size: 36px;
}
.instagram-social-icon:hover {
  background-color: #e1306c;        /* Pink background on hover */
  color: #fff;
  border-color: #e1306c;
}
.instagram-social-icon:hover i {
  color: #fff !important;           /* White icon on hover */
}
/* General Social icon styling */
.social-icon {
  color: black; /* Set icon color */
  font-size: 24px; /* Set icon size */
  text-decoration: none; /* Remove underline from icons */
  border: 2px solid black; /* Add a black border */
  border-radius: 15%; /* Make the border circular */
  padding: 5px; /* Add padding inside the border */
  display: inline-flex; /* Ensure proper alignment */
  align-items: center; /* Center the icon vertically */
  justify-content: center; /* Center the icon horizontally */
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s, border 0.2s;
   border: none; /* Remove default border for all icons */
}
.social-icon:hover {
  color: #008080; /* Change icon color on hover */
  border-color: #008080; /* Change border color on hover */
}