/* Reset some default styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Apply a natural box layout model to all elements */
html {
  font-size: 100%; /* this defines what 1rem is */
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #eae8e8;
  color: #333;
}

/* Header */

/* Header and Navigation Styles - matched to the scrolled style in index.html */


/* Hero Section */
.hero {
    position: relative;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
/* Main Content */
.section-content {
  padding: 3rem;
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero h1 {
    position: relative;
    color: #fff;
    z-index: 1;
}
.content-block {
    display: flex;
    align-items: center;
    margin: 2rem auto; /* Top and bottom margin with auto horizontal margins for centering */
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden; /* This will clip the image if it overflows the content block */
    max-width: 80%; /* Set a maximum width for the content block */
    border-radius: 8px; /* Optional: if you want rounded corners */
  }

  .content-block img {
    width: 100%; /* Adjust to be full width of the container */
    height: 50vh; /* Maintain aspect ratio */
    max-width: 400px; /* Set a max-width if necessary */
    object-fit: cover; /* Cover the area of the image container */
    padding: 10px;
}
@media screen and (max-width: 1024px) { /* For tablets */
  .content-block {
      flex-direction: column; /* Stack the image and content vertically */
      max-width: 100%; /* Full width */
  }
}


@media screen and (max-width: 768px) { /* For phones */
  .hero h1 {
      font-size: 2em; /* Smaller text for hero */
  }

  .content-block {
      flex-direction: column;
      margin: 1rem auto;
  }
  
  .content-block img {
      max-width: 100%; /* Make image take full width */
  }

  .text-content {
      padding: 1rem; /* Adjust padding */
  }
}

.text-content {
  padding: 1.2rem;
}

.text-content h2 {
  color: #0056b3;
  margin-bottom: 1rem;
}

/* Footer */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
}
h2 {
    text-align: center;
    margin-top: 2rem; /* Add space above the h2 */
    margin-bottom: 1rem; /* Add space below the h2 for separation */
  }
  .section-content > h2 {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }


  
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: rgba(0,0,0,0.07); /* Make it slightly transparent */
  color: white;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: background-color 0.5s;
  flex-wrap: wrap; /* Allow the navbar to wrap on smaller screens */

}

.navbar.header-scrolled {
  background-color: #ffffff; /* Solid color on scroll */
  color: #333;
}
.logo {
  height: 55px; /* Adjust the height to fit your design */
}

.nav-links {
  list-style: none;
  display: flex;
  padding-left: 0;
  
}

.nav-links .dropdown {
  position: relative; /* Context for positioning the dropdown */
}

.nav-links li {
padding: 5px 10px;
}
.dropdown {
  position: relative; /* Context for positioning the dropdown */
  display: inline-block; /* So that width can be applied */
}
.dropdown a {
  /* Assuming you want to style the dropdown trigger */
  padding: 0 20px; /* Adjust padding to control width */
}
.nav-links a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: rgb(139  , 84, 36); /* Highlight color */
}

.dropdown-content {
  display: none;
  position: fixed; /* Fixed position relative to the viewport */
  top: 60px; /* Adjust this value so the dropdown starts right below the navbar */
  left: 0;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.871);
  backdrop-filter: blur(10px);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  column-count: 2; /* Replace with the number of columns you want */
  column-gap: 20px; /* Adjust the gap between columns */

}


.dropdown-content li 
{
  color: black;
  padding: 8px 12px; /* Padding inside each list item */
  text-decoration:none;
  display: block;
  text-align: left;
  clear: both; /* Clear any floats */
}



/* Style the dropdown content to be displayed when hovering over the dropdown */
.dropdown:hover .dropdown-content {
  display: grid; /* Show as a grid on hover */
  grid-template-columns: repeat(2, 1fr); /* Example for two columns */


}

/* You might want to add styles for when hovering over the dropdown items */
.dropdown-content li:hover {
  background-color: #ddd;
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: larger;
}
.header-scrolled {
  background-color: #fff; /* Or any color that contrasts well with your header content */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: adds a shadow for better visibility */
  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for background and shadow */
}

.header-scrolled .nav-links a {
  color: rgb(139  , 84, 36); /* New text color when the header-scrolled class is active */
  transition: color 0.3s; /* Smooth transition for text color */
}.dropdown-link {
  color: black; /* Text color */
  text-decoration: none; /* No underline */
  padding: 8px 12px; /* Padding */
  display: block; /* Full-width link */
  background-color: transparent; /* Transparent background */
  transition: background-color 0.3s, color 0.3s; /* Smooth transitions for hover effects */
}

.dropdown-link:hover {
  background-color: #ddd; /* Background color on hover */
  color: black; /* Text color on hover */
}   

.dropdown-content a {
  font-size: 16px; /* Adjust the font size as needed */
  color: black; /* Set a different color */
  font-weight: normal; /* Set the weight to normal if desired */
}
.nav-links .dropdown .dropdown-content a {
  font-size: 16px; /* Set the desired font size */
  color: black; /* Set the desired color */
  font-weight: normal; /* Set the desired font weight */
  text-decoration: none; /* Removes underline from links */
  padding: 8px 12px; /* Optional: Adds padding for better spacing */
}


.dropdown-title {
  font-size: 18px; /* Set the font size for the title */
  font-weight: bold; /* Make it bold */
  color: black; /* Set the title color */
  padding: 20px 20px; /* Set the padding for the title */
  text-align:right; /* Center the text */
  pointer-events: none; /* Disable pointer events so it can't be clicked */
  grid-column: 1 / -1; /* This will make the title span all columns */

}