/* CSS Reset - Removes default browser styles for consistency */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* General body styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* Gradient */
}

/* --- HEADER STYLES --- */
header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  clear: both; /* Ensure header is not affected by floated elements */
}
/* Header styles */
/* Header styles */
header {
  background: url('horizon.jpg') no-repeat center center/cover;
  color: rgb(0, 0, 0);
  padding: 20px 20px; /* Reduce padding to shrink vertical size */
  text-align: center;
  position: relative;
  height: 200px; /* Decrease height to make image shorter */
  max-width: 1200px; /* Keep width limited for centering */
  margin: 0 auto; /* Center header */
}


/* --- NAVIGATION STYLES --- */
nav {
  background-color: #444;
  padding: 10px;
}

/* Remove bullet points from navigation */
nav ul {
  list-style-type: none;
  text-align: center;
}

/* Style navigation links */
nav ul li {
  display: inline;
  margin-right: 20px;
  float: left; /* Float the list items horizontally */
}

nav ul li a {
  text-decoration: none; /* Remove underline */
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #d4dce4; /* Subtle hover effect */
}

/* --- MAIN CONTENT STYLES --- */
main {
  padding: 20px;
  font-family: Arial, sans-serif; /* Main font with fallback */
  color: #222;
  clear: both; /* Ensure content doesn't wrap around floated elements */
}

/* Class selector for special highlights */
.highlight {
  color: #ffffff;
  font-weight: bold;
}

/* ID selector for an important message box */
#important-message {
  background-color: #0a0a0a; /* Changed background to make text visible */
  color: #fff;
  padding: 15px;
  text-align: center;
  font-size: 20px;
  border-radius: 5px;
  clear: both; /* Ensure this message box doesn't interfere with floated elements */
}

/* --- IMAGE STYLES --- */
img {
  max-width: 100%;
  height: auto;
  display: block;
  float: left; /* Example: images can float to the left */
  margin-right: 20px; /* Add space next to floated images */
}

/* --- FOOTER STYLES --- */
footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
  font-size: 14px;
  clear: both; /* Ensure footer is always at the bottom */
}

/* Base Styles (Mobile First Approach) */
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.mobile-only {
  display: block;
}

.tablet-desktop-only {
  display: none;
}

/* Tablet Styles (768px and up) */
@media screen and (min-width: 768px) {
  /* Show tablet/desktop content and hide mobile-specific content */
  .mobile-only {
    display: none;
  }
  .tablet-desktop-only {
    display: block;
  }

  .container {
    flex-direction: row; /* Two-column layout */
    justify-content: space-between;
  }
}

/* Desktop Styles (1024px and up) */
@media screen and (min-width: 1024px) {
  body {
    background: linear-gradient(to right, #6a11cb, #2575fc); /* Different gradient for desktop */
  }

  a:hover {
    color: #000000; /* Dynamic pseudo-class for hover effect */
  }
}

/* Large Desktop Styles (1440px and up) */
@media screen and (min-width: 1440px) {
  body {
    font-size: 18px;
  }
}

/* Print Styles */
@media print {
  body {
    background: none;
    color: black;
  }

  .container {
    flex-direction: column;
  }
}

.hotel-list {
  list-style: none; /* Removes bullet points */
  padding: 0;
  margin: 20px 0;
  text-align: left;
  max-width: 600px;
  margin: auto;
}

.hotel-list li {
  background: #f3f7f3;
  padding: 10px;
  margin: 5px 0;
  border-left: 5px solid rgb(0, 0, 0); /* Green left border for styling */
}

/* Ensure the page takes up the full viewport height */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Make the main content area take up remaining space */
main {
  flex: 1;
}

/* Footer stays at the bottom */
footer {
  background: rgb(0, 0, 0);
  color: white;
  padding: 20px;
  text-align: center;
  width: 100%;
  clear: both; /* Ensure footer is below content */
}