.card img {
  height: 350px;
  object-fit: cover;
}


/* Navbar + floating square logo styles */
.navbar { position: relative; z-index: 1030; }

/* the floating logo "bubble" — partially outside the left of the container */
.brand-bubble {
  position: absolute;
  left: -36px;                   /* how far the logo floats out of the brand */
  top: 75%;
  transform: translateY(-50%);
  width: 180px;                   /* default logo size, tweak as needed */
  height: 120px;
  object-fit: cover;             /* preserve square and cover area */
  border-radius: 5px;           /* slight rounding — remove if you want perfectly square */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  border: 3px solid rgba(255,255,255,0.06);
  background: #fff;              /* fallback if image has transparency */
  z-index: 1025;                 /* below nav elements like toggler but above background */
}

/* push brand text to the right so it doesn't overlap with the logo */
.navbar .navbar-brand {
  padding-left: calc(150px + 0.5rem);  /* 80px = logo width, adjust if you change width */
  font-weight: 700;
  color: #fff !important;
  white-space: nowrap;
}

/* responsive adjustments for smaller screens */
@media (max-width: 576px) {
  .brand-bubble {
    display: none; /* hide floating logo on very small screens to save space */
  }
  .navbar .navbar-brand {
    padding-left: 0;
  }
  
}
/* Hide owl-nav buttons on mobile (e.g., screens below 768px) */
@media (max-width: 767px) {
    .owl-nav {
        display: none !important;
    }
}
/* medium screens: smaller logo size */
@media (min-width: 576px) and (max-width: 992px) {
  .brand-bubble {
    left: -28px;
    width: 64px;
    height: 64px;
  }
  .navbar .navbar-brand {
    padding-left: calc(64px + 0.5rem);
  }
}

/* if you want the logo aligned more to the top edge of the nav instead of vertical center:
   replace `top: 50%; transform...` with `top: 12px; transform: none;` */
.hero-carousel .hero-slide {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 80vh;
}

.hero-carousel .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  width: 40px !important ; 
  height: 40px !important;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7) !important;
  color: #000 !important;
  border-radius: 50% !important;
  padding: 5px 12px !important;
  font-size:18px !important;
}

.owl-carousel .owl-nav button.owl-prev {
  left: 20px;
}

.owl-carousel .owl-nav button.owl-next {
  right: 20px;
}

.owl-dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
}


 #gallery-carousel .owl-nav button.owl-prev,
  #gallery-carousel .owl-nav button.owl-next {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    border: none;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
  }


  .gallery-img {
          height: 500px;
          object-fit: cover;
          border-radius: 8px;
          transition: transform 0.3s ease;
        }

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