/* Masonry Gallery Styles */
.masonry-gallery {
  column-count: 4; /* Adjust the number of columns based on the screen size */
  column-gap: 1rem;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  position: relative;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.masonry-item img:hover {
  transform: scale(1.05);
}

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

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  z-index: 10000;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  z-index: 10000;
}

.lightbox-arrow.left {
  left: 20px;
}

.lightbox-arrow.right {
  right: 20px;
}

/* Responsive Masonry */
@media (max-width: 1200px) {
  .masonry-gallery {
    column-count: 3;
  }
  .custom-padding-top {
    padding-top: 120px !important;
  }
}

@media (max-width: 768px) {
  .masonry-gallery {
    column-count: 2;
  }
  .custom-padding-top {
    padding-top: 120px !important;
  }
}

@media (max-width: 576px) {
  .masonry-gallery {
    column-count: 1;
  }
  .custom-padding-top {
    padding-top: 120px !important;
  }
}

.portrait-video {
  width: 100%; /* Full width for responsiveness */
  max-height: 70vh; /* Maximum height to keep them in portrait mode */
  object-fit: contain; /* Ensures the video fits within the container */
}

.video-container {
  position: relative;
  overflow: hidden;
  padding-top: 100%; /* Adjust this value to maintain aspect ratio */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Ensure the section is visible on all devices */
.section.custom-angled {
  display: block !important; /* Override any 'display: none' */
}

/* Fix for mobile devices if the content is hidden or not appearing */
@media (max-width: 991.98px) {
  .section-angled-layer-bottom {
    display: block !important; /* Make the angled layer visible */
  }
}

/* Fallback for the appear animation */
.appear-animation {
  opacity: 1 !important; /* Ensure it is visible by default */
  transition: opacity 0.5s ease-in-out; /* Smooth transition */
}

/* Ensure the feature box does not disappear on mobile */
.feature-box {
  display: block !important; /* Override any hidden display styles */
}

/* Move the feature box 200px to the left on mobile */
@media (max-width: 768px) {
  .feature-box {
    position: relative; /* Make the element movable */
    left: -200px; /* Move it 200px to the left */
  }
}

/* WhatsApp green colour for phone number and icon */
.whatsapp-green {
  color: #25d366; /* WhatsApp green hex code */
}

.whatsapp-green:hover {
  color: #128c7e; /* Darker WhatsApp green for hover effect */
}

/* CSS for the white overlay */
.white-overlay {
  position: absolute; /* Absolute positioning relative to the parent */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* White color with 50% opacity */
  z-index: 1; /* Ensure the overlay is on top */
}