/* Main Content Styles */
.online-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.online-service-wrapper {
  display: flex;
  gap: 30px;
  padding: 60px 0;
}

.online-sidebar-section {
  flex: 0 0 300px;
}

.online-content-section {
  flex: 1;
}

.online-sidebar-box,
.online-content-box {
  background: white;
  padding: 30px;
  margin-bottom: 30px;
}

.online-shadow {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.online-rounded {
  border-radius: 10px;
}

.online-sidebar-title {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #333;
  font-weight: 600;
  border-bottom: 2px solid #ff6b6b;
  padding-bottom: 10px;
}

.online-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.online-menu-list li {
  margin-bottom: 10px;
}

.online-menu-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  color: #555;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.online-menu-list a:hover {
  background: #f8f9fa;
  color: #ff6b6b;
}

.online-menu-list .online-active a {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
}

.online-img-fluid {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.online-main-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 20px;
}

.online-lead {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 20px;
}

.online-service-list {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 30px;
}

.online-service-list li {
  margin-bottom: 10px;
  color: #555;
}

.online-course-details {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 5px;
  margin: 30px 0;
}

.online-timing-section {
  background: #f0f5ff;
  padding: 20px;
  border-radius: 5px;
  margin-top: 30px;
}

.online-timing-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.online-timing-list li {
  padding: 8px 0;
  color: #555;
}

.online-timing-list i {
  margin-right: 10px;
  color: #4ecdc4;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
  .online-service-wrapper {
    flex-direction: column;
  }

  .online-sidebar-section {
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .online-main-title {
    font-size: 1.5rem;
  }
}

/* Container for side-by-side layout */
.ceremony-card {
  display: flex;
  gap: 20px;
  align-items: flex-start; /* Aligns image to the top-left corner */
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
}

/* Image Wrapper: Sets the small fixed size for all images */
.ceremony-image-wrapper {
  flex: 0 0 180px; /* Fixed width of 180px - adjust as needed */
  max-width: 180px;
}

/* Specific image styling to fit the small corner box */
.ceremony-sidebar-img {
  width: 100%;
  height: 140px; /* Fixed height for uniformity */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Adjusting the text content area */
.online-course-details {
  flex: 1; /* Takes up remaining width */
  background: #f8f9fa;
  padding: 0 20px; /* Internal padding for text */
  margin: 0 !important;
  border-left: none !important;
  box-shadow: none !important; /* Removes duplicate shadow from the inner box */
}

/* Ensure headings inside look correct next to image */
.online-course-details h3 {
  margin-top: 0;
  font-size: 1.3rem;
  color: #333;
}

/* Mobile Fix: Stack them when screen is small */
@media (max-width: 768px) {
  .ceremony-card {
    flex-direction: column;
    align-items: center;
  }
  .ceremony-image-wrapper {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}
/* Container for the small image within the grey card */
.ceremony-small-img-container {
  width: 180px; /* Reduced size to match your requirement */
  margin-bottom: 15px; /* Space between image and the Title/Text below */
}

.ceremony-small-img {
  width: 100%;
  height: 120px; /* Reduced height */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Ensure the grey card itself doesn't have the orange border */
.online-course-details {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 30px;
  border-left: none !important; /* Removes the orange side line */
}

/* Header styling inside the card */
.online-course-details h3 {
  margin-top: 10px;
  font-size: 1.4rem;
  color: #333;
}

/* --- NEW GRID SYSTEM --- */

/* 1. The Container for all cards */
.ceremony-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 equal columns */
  gap: 25px; /* Spacing between cards */
  margin-top: 20px;
}

/* 2. The Individual Card Wrapper */
.ceremony-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column; /* Image on top, text on bottom */
  height: 100%; /* Ensures all cards in a row have equal height */
  transition: transform 0.3s ease;
}

.ceremony-card:hover {
  transform: translateY(-5px); /* Subtle lift on hover */
}

/* 3. Image Styling */
.ceremony-image img {
  width: 100%;
  height: 220px; /* Uniform height for all images */
  object-fit: cover; /* Prevents image stretching */
  display: block;
}

/* 4. Text Content Styling (The Grey Box) */
.ceremony-info {
  padding: 20px;
  background: #f8f9fa; /* Your light grey background */
  flex-grow: 1; /* Makes the grey area fill the card height */
}

.ceremony-info h3 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 15px;
  border-bottom: 2px solid #ff6b6b; /* Accent line under title */
  padding-bottom: 8px;
}

/* Responsive: Switch to 1 column on mobile/tablets */
@media (max-width: 991px) {
  .ceremony-grid {
    grid-template-columns: 1fr;
  }
}

/* This targets the images inside your grid cards */
.ceremony-image img {
  width: 95%;
  height: 350px;
  /* Changing 16/9 to 4/3 makes the image box taller */
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  border-radius: 8px 8px 8px 8px;
  display: block;
}

/* Optional: If you want the cards to stay the same height in a row */
.ceremony-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ceremony-info {
  flex-grow: 1; /* Pushes the bottom of the grey box to align with its neighbor */
}