/* === GLOBAL STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;        /* Prevent unwanted scrollbar */
  font-family: "Poppins", sans-serif;
  background: #f8f9f5;
}

/* === SERVICE CARDS === */
.service-card {
  width: 100%;                 /* changed from 100vw → prevents horizontal scroll/margin */
  margin: 0;                   /* no margin on left or right */
  border-radius: 0;
  background: white;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-bottom: 1px solid #ddd; /* thin separator line */
}

/* optional — make sure images or flex wrappers inside also have no gap */
.service-img, .service-content {
  flex: 1 1 50%;
  margin: 0;
  padding: 0;
}

.service-img {
  position: relative;
}

.service-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}


.service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3; /* ensures same width-to-height ratio on all screens */
}

/* Content styles */
.service-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}

/* Remove gaps between stacked cards */
.service-card + .service-card {
  border-top: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .service-card {
    flex-direction: column !important;
  }

  .service-img {
    width: 100%;
    flex: none;
  }

  .service-img img {
    aspect-ratio: 4/3; /* maintain ratio on mobile */
    width: 100%;
    height: auto; /* scales height according to width */
  }

  .service-content {
    text-align: center;
    padding: 20px;
  }
}

/* === BOOK BUTTON === */
.book-btn {
  padding: 5px 18px;
  font-size: 0.9rem;
  border-radius: 6px;
  width: auto;
  align-self: flex-start;
  background-color: #198754;
}

.book-btn:hover {
  background-color: #198754;
}

/* === GALLERY (Masonry-like using CSS columns) === */
.gallery-columns {
  column-count: 4;            
  column-gap: 0;             
  width: 100%;
}

/* responsive adjustments */
@media (max-width: 1200px) { .gallery-columns { column-count: 3; } }
@media (max-width: 900px) { .gallery-columns { column-count: 2; } }
@media (max-width: 576px) { .gallery-columns { column-count: 1; } }

/* each figure flows inside columns */
.gallery-item {
  display: inline-block;
  width: 100%;
  margin: 0;
  position: relative;
  break-inside: avoid;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gallery-item figcaption {
  padding: 12px;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.20));
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.gallery-item figcaption h5 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  color: #fff;
}

.gallery-item figcaption p {
  margin: 0;
  font-size: 0.85rem;
  max-height: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-item:hover {
  transform: translateY(-4px);
  transition: transform 0.18s ease;
}

.container-fluid.px-0 { padding-left:0; padding-right:0; }

@media (max-width:576px) { .gallery-item { border-bottom: 1px solid #ddd; } }

/* === PLANTS === */
.plant {
  position: absolute;
  width: 400px;
  opacity: 0.7;
  filter: brightness(1.1) contrast(1.1) drop-shadow(0 8px 12px rgba(0,0,0,0.25));
  animation: float 6s ease-in-out infinite;
  z-index: 0;
}

.plant-left {
  left: 0;
  bottom: 0;
  transform: rotate(-5deg);
}

.plant-right {
  right: 0;
  top: 0;
  transform: rotate(5deg);
}

@media (max-width: 400px) {
  .plant {
    display: none;
  }
}

/* === FLOAT ANIMATION === */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}