/* Body styles */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  /* background-image: url("assets/bg.png");  */
  /* Add background image */
  background-size: cover;
  background-position: center;
  color: #6e0d25; /* Text color */
  display: flex;
  flex-direction: column; /* Ensure footer is at the bottom */
  min-height: 100vh;
}

/* Fixed header styles */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* Transparent white background */
  padding: 0px 0; /* Adjusted padding */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow for a subtle effect */
  z-index: 999; /* Ensure it's above other content */
}

/* Container styles */
.container {
  max-width: 800px;
  text-align: center;
  margin: auto; /* Center horizontally */
  margin-top: 60px; /* Adjust to make space for the fixed header */
}

/* Logo container styles */
.logo-container {
  margin-bottom: 40px;
  margin-top: 20px;
}

.logo-container img {
  width: 100px; /* Adjust the size as needed */
  height: 100px;
  margin: 0 10px; /* Reduce margin for smaller screens */
  vertical-align: middle;
  border-radius: 50%; /* Make the image circular */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for smooth scaling and shadow */
}

.logo-container img:hover {
  transform: scale(1.1); /* Scale the logo on hover */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
}

/* Main content styles */
main {
  padding-top: 100px; /* Adjust to make space for the fixed header */
}

/* Header styles */
h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #6e0d25; /* Header text color */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a subtle text shadow */
  animation: fadeInUp 1s ease; /* Add animation for header */
}

/* Paragraph styles */
p {
  font-size: 18px;
  margin-bottom: 30px;
  color: #6e0d25; /* Paragraph text color */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add a subtle text shadow */
  animation: fadeInUp 1s ease; /* Add animation for paragraphs */
}

/* Button styles */
.btn {
  display: inline-block;
  background-color: #6e0d25; /* Button hover background color */
  color: #fff;
  padding: 25px 40px;
  border: none;
  border-radius: 50px; /* Make the button circular */
  cursor: pointer;
  font-size: 18px;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Add transition for background color and box shadow */
  margin-bottom: 10px;
}

.btn:hover {
  background-color: #d4af37; /* Button background color */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
}

.btn:focus {
  outline: none;
}

/* Media queries for responsiveness */
@media screen and (max-width: 600px) {
  .container {
    max-width: 90%; /* Adjust maximum width for smaller screens */
  }

  .logo-container {
    margin-top: 15px;
  }

  .logo-container img {
    width: 80px; /* Decrease image size for smaller screens */
    height: 80px;
    margin: 0 5px; /* Reduce margin for smaller screens */
  }

  h1 {
    font-size: 24px; /* Decrease font size for smaller screens */
  }

  p {
    font-size: 16px; /* Decrease font size for smaller screens */
  }

  .btn {
    padding: 20px 50px; /* Adjust padding for smaller screens */
    font-size: 16px; /* Decrease font size for smaller screens */
    margin-bottom: 10px;
  }
}

/* Footer logos styles */
footer {
  background-color: #6e0d25;
}
.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center; /* Align logos vertically */
  margin-bottom: 20px;
}

.footer-logos img {
  max-width: 60px; /* Set maximum width for logos */
  max-height: 40px; /* Set maximum height for logos */
  margin: 0 10px; /* Adjust spacing between logos */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for smooth scaling and shadow */
  border-radius: 50%; /* Make the image circular */
}

.footer-logos img:hover {
  transform: scale(1.1); /* Scale the logo on hover */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
}

/* About Us link styles */
footer a.about-us {
  color: #fff; /* Set link color */
  text-decoration: none; /* Remove default underline */
  margin-top: -10px; /* Adjust the top margin to move the link higher */
  display: inline-block; /* Ensure hover effect works properly */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add text shadow */
  transition: color 0.3s ease; /* Add transition for color change */
}

footer a.about-us:hover {
  color: #9b4d67; /* Lighten color on hover */
}

footer a.home {
  color: #6e0d25; /* Set link color */
  text-decoration: none; /* Remove default underline */
  margin-top: -10px; /* Adjust the top margin to move the link higher */
  display: inline-block; /* Ensure hover effect works properly */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add text shadow */
  transition: color 0.3s ease; /* Add transition for color change */
}

footer a.home:hover {
  color: #9b4d67; /* Lighten color on hover */
}