/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Background Image for the entire body with low opacity */
body {
  background: url("../img/background.png") no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, sans-serif;
}

/* Overlay with low opacity to ensure content readability */
body::before {
  content: "";
  position: fixed; /* Change to fixed to cover the viewport and scroll with content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: -1;
  pointer-events: none; /* Ensure overlay doesn't block interactions */
}

/* Container adjustments to reduce margins and paddings */
.container {
  padding: 0;
  margin: 0;
  width: 100%;
  position: relative; /* Ensure proper stacking context */
  z-index: 1; /* Ensure content is above the overlay */
  max-width: 2000px;
}

/* Styles for the logo */
.logo-wrapper {
  background-color: rgba(132, 158, 120, 0.8);
  width: 100vw;
  box-sizing: border-box;
  padding: 0;
  margin: 50px 0;
  display: flex;
  justify-content: center;
}

.logo-container {
  max-width: 1200px; /* Optional: set a max width for the content */
  margin: 0 auto; /* Center the content */
}

/* Responsive styles for the logo image */
.logo-img {
  max-width: 100%; /* Ensure the logo does not exceed container width */
  height: auto; /* Maintain aspect ratio */
}

/* Styles for the description */
.description-container {
  padding: 0 15px; /* Add padding for smaller screens */
}

.description {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(240, 240, 240, 0.9)
  ); /* Subtle gradient background */
  padding: 25px 30px; /* Increase padding for a more spacious layout */
  border-radius: 12px; /* Softer rounding for a modern look */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Add a soft shadow for depth */
  margin: 0 auto; /* Center the description horizontally */
  text-align: center; /* Center the text inside the description */
  cursor: pointer;
}

/* Modern style for the heading */
.description h2 {
  color: #2c3e50; /* Darker, more elegant color */
  font-size: 2.75rem; /* Slightly larger font size for emphasis */
  font-weight: 700; /* Bold weight for prominence */
  margin-bottom: 15px; /* Space below the heading */
  letter-spacing: 1px; /* Slight letter spacing for a clean look */
}

/* Modern style for the paragraph */
.description p {
  color: #333; /* Softer gray for readability */
  font-size: 1.5rem; /* Slightly larger font size */
  line-height: 1.6; /* Increase line height for better readability */
  margin-bottom: 0; /* Remove bottom margin to keep things tight */
}

/* Add a hover effect to the description box */
.description:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1),
    rgba(240, 240, 240, 1)
  ); /* Brighter gradient on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
  transform: translateY(-5px); /* Lift the description on hover */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Styles for the video container */
.videos {
  padding: 0 20px; /* Padding around the section */
}

.video-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between videos */
}

.video-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  flex: 1;
  max-width: 850px;
  height: auto;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  margin-left: 10px;
  margin-right: 10px;
}

.video-container iframe {
  border: none;
  border-radius: 12px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.youtube-embed {
  position: relative;
}

.youtube-embed::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cGF0aCBkPSJNMTAsMEwgMTAsMTAwIEwgMTAwLDEwMCBMIDEwMCwwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMTAiLz48cGF0aCBkPSJNMTAsMEwgMTAwLDEwMCBMIDIwMCwwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMTAiLz48L3N2Zz4=")
    no-repeat center;
  background-size: 30px;
  z-index: 10;
  pointer-events: none; /* Ensure it doesn't block interactions */
}

/* Styles for the contact information card */
.contact-info-wrapper {
  padding: 0 15px; /* Match padding with the description section */
  margin: 0 auto 50px 0;
}

.contact-info .card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
  max-width: 1200px; /* Ensure card takes full width of the wrapper */
  width: 100%; /* Ensure the card takes full width of the wrapper */
}

.contact-info .card-body {
  padding: 30px; /* Increase padding inside the card body */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(240, 240, 240, 0.1)
  );
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  text-align: center; /* Center text inside the card body */
}

.contact-info-wrapper .container {
  max-width: 2000px; /* Same max-width as .description-container */
}
/* Style adjustments for the contact header */
.contact-info h3 {
  color: #2c3e50; /* Attractive blue color */
  font-size: 2.75rem; /* Slightly larger font size for emphasis */
  font-weight: 700; /* Bold weight for prominence */
  margin-bottom: 15px; /* Larger font size */
  margin-bottom: 20px; /* Space below the header */
}

/* Styles for the contact items with hover effect */
.contact-info .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px; /* Add padding for better spacing */
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
    transform 0.3s ease;
  border-radius: 8px; /* Add slight rounding */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(240, 240, 240, 0.1)
  ); /* Initial background color */
}

/* Hover effect for contact items */
.contact-info .contact-item:hover {
  background-color: rgba(0, 123, 255, 0.1); /* Change background on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  transform: translateY(-3px); /* Slight lift on hover */
}

/* Styles for icon container */
.contact-info .icon-container {
  margin-right: 10px;
  transition: transform 0.3s ease;
}

/* Rotate icon slightly on hover */
.contact-info .contact-item:hover .icon-container {
  transform: rotate(-10deg); /* Rotate icon for a dynamic effect */
}

/* Styles for the icons */
.contact-info .icon {
  width: 30px;
  height: 30px;
  transition: filter 0.3s ease;
}

/* Lighten the icon color on hover */
.contact-info .contact-item:hover .icon {
  filter: brightness(1.2);
}

/* Styles for the text inside contact items */
.contact-text {
  font-size: 1.5rem;
  color: #333;
}
.post {
  cursor: pointer;
}

/* Footer Styles */
.footer {
  position: relative; /* Ensure proper stacking context */
  background: rgba(255, 255, 255, 0.6); /* Dark background with opacity */
  color: #333;
  padding: 10px 0;
  text-align: center;
  z-index: 1; /* Ensure it is above other content */
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

/* Footer content alignment */
.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Wrap content if necessary */
  font-size: 1.3rem;
}

.footer-copyright,
.footer-link,
.footer-rights {
  margin: 0 5px;
}

.footer-link {
  color: #007bff;
  text-decoration: underline;
}

.footer-link:hover {
  text-decoration: underline;
}
.footer:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1),
    rgba(240, 240, 240, 1)
  ); /* Brighter gradient on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
  }
}