/* Media container styles */
#media-container {
  display: flex; /* Arrange items in a row */
  /* flex-wrap: wrap; Wrap items to the next line if they don't fit */
  flex-direction: column;
   gap: 1rem; /* Add space between media elements */
  justify-content: center; /* Center-align media elements */
  margin-top: 3rem; /* Add some space above the media container */
}

/* Styling for images in the media container */
#media-container .media-photo {
  
  max-width: 100%; /* Prevent overflow */
  /* width: calc(33.33% - 1rem); Take one-third of the container width minus the gap */
   /* Limit the height */
  object-fit: cover; /* Maintain aspect ratio and crop if needed */
  border-radius: 2px; /* Add rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  /* transition: transform 0.3s ease; */
}
/* Styling for videos in the media container */
 #media-container .media-video {
  max-width: 100%; /* Prevent overflow */
  width: calc(33.33% - 1rem); /*Take one-third of the container width minus the gap */
  max-height: 200px; /* Limit the height */
 border-radius: 8px; /* Add rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  /* transition: transform 0.3s ease; /* Smooth hover effect */
} 


/* Add hover effects for media items */
/* #media-container .media-photo:hover,
#media-container .media-video:hover {
  transform: scale(1.05); /* Slightly enlarge the item */
/* } */

/* Ensure responsiveness on smaller screens */
@media (max-width: 768px) {
  #media-container .media-photo,
  #media-container .media-video {
    width: 100%; /* Take half of the container width minus the gap */
    max-height: 100%; /* Adjust height for smaller screens */
  }
}

@media (max-width: 480px) {
  #media-container .media-photo,
  #media-container .media-video {
    width: 100%; /* Take full width on very small screens */
    max-height: 100%; /* Adjust height for very small screens */
  }
}
.back-to-main {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight:400;
  color: #ffffff;
  background-color: #000000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.13s ease;
  margin: 0 auto;
  width:100%;
  margin-top:2rem;
  padding:1rem;
}

.back-to-main:hover {
   opacity: 60%; 
  /* background-color: #161616; */
}

.modal-iframe{
  top: -15rem; /* Adjust this value to control the part of the website shown */
  left: 0;
  width: 100%;
  height: 100vh; /* Ensure the iframe height is large enough to allow cropping */
  border: white;
  border-width: 1px;
  
}