/* Gallery Welcome Section */
.welcome-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background-color: #f9f9f9;
    flex-wrap: wrap;
}

/* Gallery Welcome Image */
.welcome-image {
    width: 50%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
}

/* Welcome Text */
.welcome-text {
    width: 50%;
    padding-left: 20px;
    font-size: 18px;
    color: #444;
    line-height: 1.6;
}

/* Heading Font & Style */
.welcome-text h2 {
    font-size: 26px;
    font-family: 'Great Vibes', cursive;
    color: #222;
    margin-bottom: 10px;
}

/* Paragraph Spacing */
.welcome-text p {
    margin-bottom: 15px;
}

h3 {
  font-size: 28px; /* Adjust size for readability */
  color: #333; /* Dark grey for better contrast */
  text-align: center; /* Center align */
  margin-bottom: 20px; /* Space below the heading */
  font-weight: 600; /* Semi-bold for emphasis */
  text-transform: capitalize; /* Capitalize each word */
  letter-spacing: 1px; /* Add slight spacing between letters */
  position: relative; /* For adding decorative underline */
}

h3::after {
  content: '';  
  display: block;
  width: 80px; /* Length of the underline */
  height: 3px; /* Thickness of the underline */
  background-color: #ff6f61; /* Accent color */
  margin: 8px auto 0; /* Centered underline */
  border-radius: 5px; /* Rounded edges */
}


/* Gallery Styling */
.gallery {
    padding: 30px;
    text-align: center;
    background: #f8f8f8; /* Light background for contrast */
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly reduced size */
    gap: 18px; /* Adjusted gap */
    padding: 25px;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.gallery-item {
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.gallery-item:hover {
    transform: scale(1.08); /* Smooth hover effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.gallery-item img {
    width: 100%;
    height: 220px; /* Reduced height slightly */
    object-fit: cover;
    border-radius: 10px;
}

.description {
    font-size: 15px;
    margin-top: 8px;
    color: #444;
    font-weight: 500;
}

.pagination {
    text-align: right;
    margin-top: 20px;
    margin-bottom: 10px;
}

.pagination button {
    padding: 6px 9px;
    margin: 5px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #c2c2c2;
    background: #f8f8f8;
}

.pagination button:hover {
    background: #ddd;
}

.pagination button.active {
    background: #0b8b1c;
    color: white;
    font-weight: bold;
}



/* Lightbox Styling */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Dark overlay */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Lightbox Content with White Border */
.lightbox-content {
    background: white; /* White border */
    padding: 15px; /* Evenly distributed padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0; /* Square edges */
    position: relative;
}

/* Lightbox Image with a Thin Black Border */
.lightbox img {
    max-width: 90%;
    max-height: 70vh;
    border: 0.5px solid black; /* Very thin black line */
    display: block;
}

/* Lightbox Description Inside the Border */
#lightbox-desc {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding: 12px 15px; /* Balanced padding */
    background: white; /* Background matches border */
}

/* Close Button */
#close-lightbox {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
    border-radius: 50%;
}



/* Mobile Responsive Design */
@media (max-width: 500px) {
    /* Adjust Welcome Section */
    .welcome-section {
      flex-direction: column; /* Stack elements */
      padding: 20px;
    }
  
    .welcome-image {
      width: 100%; /* Full width */
      max-height: 250px; /* Reduce image height */
    }
  
    .welcome-text {
      width: 100%;
      padding-left: 0;
      text-align: center;
      font-size: 14px; /* Reduce font size */
    }
  
    .welcome-text h2 {
      font-size: 20px;
    }
  
    h3 {
      font-size: 20px; /* Smaller font size for better mobile fit */
      margin-bottom: 15px; /* Less margin for compact look */
      letter-spacing: 0.5px; /* Reduce letter spacing */
    }

    h3::after {
      width: 60px; /* Shorter underline for mobile */
      height: 2px; /* Thinner underline */
    }

    /* Adjust Gallery Layout */
    .gallery {
      padding: 15px;
    }
  
    .gallery-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Three images in a row */
      gap: 10px;
      padding: 10px;
    }
  
    .gallery-item {
      padding: 8px;
    }
  
    .gallery-item img {
      height: 120px; /* Reduce image height */
    }
  
    .description {
      font-size: 10px; /* Reduce font size */
    }
  
    /* Lightbox Adjustments */
    .lightbox img {
      max-width: 95%;
      max-height: 60vh;
    }
  
    #lightbox-desc {
      font-size: 14px;
      padding: 8px;
    }
  
    #close-lightbox {
      font-size: 24px;
      top: 10px;
      right: 15px;
      padding: 6px 10px;
    }
  
    /* Pagination Adjustments */    
    .pagination {
      text-align: center;
      margin-top: 10px;
      margin-bottom: 05px;
    }   
    .pagination button {
      font-size: 10px;
      padding: 4px 6px;
    }
  }