/* Revised responsive styles.css */
:root {
  --green: #086000;
  --links: hsla(115, 100%, 23%, 0.714);
  --linkHover: #063800;
  --white: #f0f0f0;
  --black: #000000;
  --dark: #333;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --sage-green: #BCB88A;
  --wood-brown: #5C5248;
  --slate-gray: #708090;
  --cornsilk: #FFF8DC;
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  background-color: var(--white);
}

h1, h2, h3 {
  font-family: 'Quicksand', sans-serif;
}

.logo {
  max-width: 333px;
  height: auto;
  content: url('logo.png');
  filter: drop-shadow(0 -3em 4em var(--black)) drop-shadow(0 3em 4em var(--black));
}

header {
  background-image: 
  linear-gradient(45deg, var(--green) 25%, transparent 25%, transparent 75%, var(--green) 75%, var(--green)), 
  linear-gradient(-45deg, var(--green) 25%, transparent 25%, transparent 75%, var(--green) 75%, var(--green));  background-size: 60px 60px;
  background-repeat: repeat;
  padding: 20px;
  text-align: center;
  overflow: hidden;
  cursor: auto;
}

header h1 {
  display: none;
}

.hero {
/*   width: 200%; */
/*  height: auto;  Full viewport height */
  background-image: radial-gradient(rgba(0, 176, 23, 0.697), rgba(0, 150, 17, 0.664)), url('your-background-image.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 20px;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color:#4e0505;
}

.hero-content button {
  padding: 12px 24px;
  font-size: 1rem;
  background-color: #811616;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  
}

.hero-content button:hover {
  background-color: #4e0505;
}

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.flex-item {
  flex: 1;
  min-height: 200px;
  padding: 10px;
  margin: 5px;
/*   background-color: var(--white); */
  border-radius: 5px;
  box-shadow: 0 2px 5px var(--shadow-color);
}

nav {
  display: flex;
  justify-content: center;
  background: var(--white);
  padding: 10px;
  z-index: 9;
  cursor: auto;

}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

nav ul li {
  margin: 5px;
}

nav ul li a {
  display: inline-block;
  padding: 10px 20px;
  color: var(--white);
  text-shadow: var(--black) .1em .1em 3px;
  font-weight: 900;
  text-decoration: none;
  background-color: var(--links);
  border-radius: 9px;
  transition: background-color 0.3s ease-in-out;
  filter: drop-shadow(0 0 3px var(--black));
}

nav ul li a:hover, nav ul li a:focus {
  background-color: var(--linkHover);
  text-shadow: var(--black) 0 0 3px;
}

#game-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
  border: 1px solid var(--black);
  margin: 0 auto;
  overflow: hidden;
  background: url('greenGrass.jpg');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

#hole {
  position: absolute;
  width: 66px;
  height: 66px;
  background-color: var(--black);
  border-radius: 50%;
  top: 15%;
  left: 5%;
  z-index: 2;
}

#ball {
  position: absolute;
  width: 25px;
  height: 25px;
  background: radial-gradient(circle at 30% 30%, var(--white) 5%, #a4c7ff 50%, #9ec7ff 90%);
  border-radius: 50%;
  top: 10%;
  left: 10%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: .3em .3em 10px var(--black);
  transition: transform 0.1s ease;
  z-index: 4;
}

#putter-cursor {
  position: absolute;
  width: 15px;
  height: 90px;
  background: radial-gradient(circle at 50% 50%, #ac8f00 0%, #ffe44b 80%, #726522 100%);
  pointer-events: none;
  transform-origin: left center;
  left: 550%;
  z-index: 3;
  border-radius: 2px;
  border-left: rgb(109, 105, 42) 1px solid;
  border-right: rgb(100, 100, 100) 1px solid;
  box-shadow: -.5em 0 18px var(--black);
  rotate: 180deg;
}

#overlay {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.696);
  color: var(--white);
  z-index: 9999;
}

#text {
  font-size: 40px;
  text-align: center;
}

/* About Section Styles */
.wrapper{
/*   padding: 20px; */
  background-color: #FFF;
  box-shadow: 0 2px 5px var(--shadow-color);
/*   margin: 20px auto; */
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

#about h2 {
  font-size: 28px;
  color: var(--green);
  text-align: center;
  margin-bottom: 15px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  background-color: var(--green);
  border-radius: 8px;
  box-shadow: 0 2px 5px var(--shadow-color);
  padding: 15px;
  margin: 10px;
  flex-basis: calc(45% - 20px);
  text-align: center;
  color: #fff;

}

.card .icon {
  height: auto;
}

.card p {
  font-size: 1rem;
}

.card img {
  filter: drop-shadow(0 0 20px hsl(0, 0%, 100%)) drop-shadow(0 0 20px hsl(0, 0%, 100%));
}

/* Portrait Image Styles */
.portrait {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 50%;
  border: 5px solid var(--green);
  box-shadow: 0 1rem 1rem var(--shadow-color);
  display: block;
  margin: 1em auto;
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 770px) {
  #game-container {
    height: 80vh;
  }

  #ball {
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
  }

  #hole {
    width: 50px;
    height: 50px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 600px) {
  .card, .portrait {
    flex-basis: calc(100% - 20px);
    margin: 10px auto;
  }

  .portrait {
    max-width: 200px;
  }
}

@media screen and (max-width: 480px) {
  .logo {
    max-width: 200px;
  }

  nav ul li a {
    padding: 8px 16px;
  }

  #text {
    font-size: 24px;
  }
}

.hours {
  background-color: var(--green); /* Light background for contrast */
  border: 1px solid #673e3eaa; /* Light border */
  border-radius: 8px; /* Rounded corners */
  padding: 15px; /* Padding around the content */
  margin: 20px auto; /* Center the block with margin */
  max-width: 400px; /* Maximum width for the hours section */
  text-align: left; /* Align text to the left */
  color: white; /* Light text color for contrast */
}

.hours h2 {
  color: white; /* Use your primary color variable for headings */
  margin-bottom: 10px; /* Space below the heading */
}

.hours ul {
  list-style-type: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
}

.hours li {
  margin-bottom: 5px; /* Space between list items */
}

.selected {
  filter: saturate(2); /* Increase saturation */
  background-color: var(--green); /* Change background color */
}


#tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px;
}

.tab-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  width: 150px; /* Set a fixed width */
  height: auto; /* Increase height to accommodate larger icons */
  margin: 5px;
  background-color: var(--green);
  filter:brightness(1.3);
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  font-weight: 900;
}

.tab-button i {
  font-size: 4rem; /* Increase size */
  margin-bottom: 10px;
  color: var(--white);
}


.tab-button:hover {
  background-color: var(--dark);
}

.tab-button.active,
.tab-button:hover {
  background-color: var(--green);
  filter: saturate(2);
  color: white; /* For better contrast */
}

.tab-button::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--green);
  margin-top: 5px;
}

.tab-button span {
  /* Add this to ensure text is at the bottom */
  margin-top: auto;
}

.menuCategories, .menuSubCategories {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; 
}

.wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.menuItem {
  width: calc(33.33% - 20px);
  margin: 10px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .menuItem {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .menuItem {
    width: calc(100% - 20px);
  }
}

#map-container {
  position: relative;
  width: 100%;
  margin-top: 20px;
  padding-bottom: 75%; /* 4:3 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 1200px; /* Maximum width */
  margin: 0 auto; /* Center the container */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.173); /* Subtle shadow */
}

#map-container iframe {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 95vh;
  border: none;
}

@media (max-width: 768px) {
  #map-container {
    padding-bottom: 100%; /* Square aspect ratio for smaller screens */
  }
}

form {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

label {
  display: block;
  margin-top: 20px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #6cb929;
}

/* Footer styles */
footer {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  background-color: var(--green) hue-rotate(-33deg) opacity(0.333);
  color: rgb(0, 0, 0);
}

footer ul {
  list-style-type: none;
  padding: 0;
}

footer a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-weight: 900;
  margin: 15px;

}

footer a:hover {
  text-decoration: underline;
}

/* Responsive design */
@media (max-width: 600px) {
  nav ul {
      flex-direction: column;
  }
  
  nav ul li {
      text-align: center;
  }
}

.banner {
  background-color: #f0f0f0;
  color: #002b06;
  text-align: center;
  padding: 9px;
  font-weight: bold;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.carousel-container {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background-color: #f0f0f0;
  border-radius: 50%;
  margin: 0 auto;
  border: solid 1em #f0f0f0;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  filter: drop-shadow(0 1em 15px hsl(0, 0%, 0%));
  border-radius: 50%;
}

.carousel img.active {
  opacity: 1;
}

.card-image-top {
  width: 100%;
  height: auto; /* Adjust as needed */
  object-fit: cover;
}

.card-body {
  padding: .7rem;
}

.card-title {
  font-size: 1.25em;
  color:#ffffff;
  border-radius: .5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  color: #ffffff;
  
}

.price {
  font-weight: bold;
  display: block;
  margin-top: 0.5rem;
}

.scroll-to-top {
  position: fixed;
  bottom: 20px; /* Position it 20px from the bottom */
  right: 30px; /* Position it 30px from the right */
  background-color: #409400; /* Background color */
  color: white; /* Text color */
  border: none; /* Remove borders */
  border-radius: 50%; /* Rounded corners */
  width: 50px; /* Width of the button */
  height: 50px; /* Height of the button */
  font-size: 24px; /* Font size for the arrow */
  cursor: pointer; /* Pointer cursor on hover */
  display: none; /* Initially hidden */
}

.scroll-to-top.show {
  display: block; /* Show when scrolled down */
}

.modifier,
.price {

  color: #ffffff;
  margin-top: 5px;
}

.category-description {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 20px 0;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-style: italic;
  color: #555;
}