/* --- Carousel container --- */
  .hero-carousel {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
  }

  .carousel-slide {
    display: flex;
    transition: transform 0.7s ease-in-out;
  }

  .slide-item {
    flex: 0 0 100%;
    height: 420px;
    background-size: cover;
    background-position: center;
  }

  /* --- Arrows --- */
  .prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 10px 14px;
    font-size: 22px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    transition: background 0.3s ease;
  }

  .prev:hover, .next:hover {
    background: rgba(0,0,0,0.8);
  }
  .prev { left: 20px; }
  .next { right: 20px; }

  /* --- Dots --- */
  .dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 6;
  }

  .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .dot.active { background: #fff; }

  /* --- Contact Buttons --- */
  .contact-buttons {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 25px;
    z-index: 10;
  }

/* Default (Desktop) */
.contact-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 50px;       /* Big padding for desktop */
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* --- Tablet screens --- */
@media (max-width: 1024px) {
  .contact-buttons a {
    padding: 18px 42px;     /* Slightly smaller buttons */
    font-size: 20px;
    gap: 8px;
  }
}

/* --- Mobile screens --- */
@media (min-width: 768px) {
  .contact-buttons a {
    padding: 24px 44px;     /* Compact size for mobile */
    font-size: 28px;
    gap: 6px;
  }
}

/* --- Small Mobile (like 480px and below) --- */
@media (max-width: 480px) {
  .contact-buttons a {
    padding: 12px 25px;
    font-size: 15px;
    gap: 5px;
  }
}


  .contact-buttons a img {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: transform 0.3s;
  }

  .contact-buttons a span {
    letter-spacing: 0.5px;
  }

  .contact-buttons a:hover img {
    transform: scale(1.15);
  }

  .contact-buttons a.whatsapp {
    background: rgba(37, 211, 102, 0.85);
  }
  .contact-buttons a.whatsapp:hover {
    background: rgba(37, 211, 102, 1);
  }

  .contact-buttons a.call {
    background: rgba(10, 132, 255, 0.85);
  }
  .contact-buttons a.call:hover {
    background: rgba(10, 132, 255, 1);
  }

  /* --- Responsive --- */
  @media (max-width: 1024px) {
    .hero-carousel { height: 360px; }
    .slide-item { height: 360px; }
  }

  @media (min-width: 480px) {
    .hero-carousel { height: 420px; }
    .slide-item { height: 420px; }
  }

  @media (max-width: 768px) {
    .hero-carousel { height: 300px; }
    .slide-item { height: 300px; }
    .contact-buttons {
      flex-direction: flex;
      bottom: 35px;
      gap: 18px;
    }
    .contact-buttons a {
      width: 200px;
      justify-content: center;
      font-size: 16px;
    }
    .contact-buttons a img {
      width: 28px;
      height: 28px;
    }
  }

  @media (max-width: 480px) {
    .hero-carousel { height: 240px; }
    .slide-item { height: 240px; }
    .contact-buttons a {
      width: 150px;
      font-size: 15px;
      padding: 10px 18px;
    }
    .contact-buttons a img {
      width: 26px;
      height: 26px;
    }
  }