/* Reset styles */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Teko:wght@300..700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Teko", sans-serif;
  text-align: center;
  margin-top: 10%;
  background: #dddddd; /*dark was #222222*/
  color:  #53583b;
}

h1 {
  font-size: 500%;
  font-weight: bold;
}

@media (max-width: 768px) {
	h1 {font-size: 200%;}
	body{margin-top: 25%}
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center; /* Center-align text within the container */
  padding-top: 50px;
  background-color: #FFFFFF; /* dark was #191919 */
  border: 2px solid #53583b;
  border-radius: 5px;
}

/* Navbar container */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  padding: 20px 20px;
}


/* Nav links */
.navbar .nav-links {
  list-style: none;
  display: flex;
  gap: 15px;
}

.navbar .nav-links li {
  display: inline;
  position: relative; /* Important for dropdown positioning */
}

.navbar .nav-links a {
  color: #737373;
  text-decoration: none;
  font-size: 150%;
  transition: color 0.3s;
}

.navbar .nav-links a:hover {
  color: #00bcd4;
}

.dropdown-menu {
  position: absolute;
  top: 100%; /* Position it below the parent item */
  left: 0;
  background-color: #FFFFFF;
  border: 1px solid #53583b;
  width: 100px; /* Adjust width of dropdown */
  list-style: none;
  padding: 10px 0;
  margin-top: 5px;
  z-index: 10; /* Ensure it appears above other elements */
  opacity: 0; /* Initially hide it */
  visibility: hidden; /* Hide it initially */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Smooth fade-in */
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu, .dropdown-menu:hover {
  opacity: 1; /* Show it */
  visibility: visible; /* Make it visible */
  transition: opacity 0.3s ease, visibility 0.3s linear 0s; /* Smooth fade-out on hover out */
}

/* Dropdown item link */
.dropdown-menu li {
  padding: 8px 15px;
}

.dropdown-menu a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.dropdown-menu a:hover {
  color: #00bcd4;
}

.info-container {
    opacity: 0;
	max-height: 0;
	overflow: hidden;
    margin-top: 20px;
    padding: 20px;
    background-color: #e7f7ff;
    border: 1px solid #b5d4e7;
    border-radius: 4px;
    max-width: 600px;
    margin: 20px auto;
	transition: opacity 0.3s ease, max-height 0.3s ease; /* Smooth transition */
}
.info-container.active {
    opacity: 1; /* Fully visible */
    max-height: 200px; /* Expand to fit content (adjust to your needs) */
}

.image-container {
	display: flex;
	opacity: 0;
	max-height: 0;
	align-items: center;
    text-align: center; /* Centers content horizontally */
    margin: 20px auto; /* Adds vertical spacing and centers the container */
	gap: 20px;
    max-width: 400px; /* Limits the width of the image container */
	transition: opacity 0.2s ease, max-height 0.5s ease; /* fade out*/
}
.image-container.active {
    opacity: 1; /* Fully visible */
    max-height: 200px; /* Expand to fit content (adjust to your needs) */
	transition: opacity 0.4s ease, max-height 0.4s ease; /* fade in */
}

.responsive-image {
    width: 100%; /* Makes the image responsive */
    max-width: 100px; /* Limits the maximum width of the image */
    height: auto; /* Maintains aspect ratio */
    border-radius: 8px; /* Adds rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
}
.image-text {
    max-width: 100%; /* Adjust size */
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
@media (max-width: 768px) {
	.image-container {max-width: 200px}
	.image-text{font-size: 80%}
	.info-container {max-width: 300px}
}