* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }



    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      font-family: 'Montserrat', sans-serif;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .slide-image {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      animation: kenburns 20s ease-in-out infinite alternate;
      transform: none !important; /* Prevents Swiper from shifting images */
    }

    @keyframes kenburns {
      0% { transform: scale(1.05); }
      100% { transform: scale(1.15); }
    }

    .overlay {
      position: absolute;
      top: 0; 
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
      z-index: 1;
    }

    .hero-text {
      position: relative;
      z-index: 2;
      color: white;
      text-align: left;
      padding-left: 5%;
      max-width: 600px;
      opacity: 0;
    }

    .hero-text.active {
      opacity: 1;
    }

    .hero-text h1 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      line-height: 1.3;
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    }

    .hero-text h1 span {
      display: block;
      margin: 5px 0;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease;
    }

    .hero-text.active h1 span:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
    .hero-text.active h1 span:nth-child(2) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
    .hero-text.active h1 span:nth-child(3) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

    .swiper-button-next,
    .swiper-button-prev {
      color: white;
      z-index: 4;
    }

    @media (max-width: 768px) {
      .hero-text {
        padding-left: 10%;
        padding-right: 10%;
        text-align: left;
      }
    }

    .hero-text .icon {
  margin-bottom: 20px;
  display: block;
}

 /* Ultra-wide screens */
    @media (min-aspect-ratio: 21/9) {
      .slide-image {
        object-fit: contain;
        background-color: #000; /* Black bars for ultrawide */
      }
      
      .hero {
        height: 70vh; /* Not too tall on ultrawide */
      }
    }
    
    /* Standard widescreen */
    @media (min-aspect-ratio: 16/9) and (max-aspect-ratio: 21/9) {
      .hero {
        height: 100vh;
      }
    }
    
    /* Traditional monitors and tablets landscape */
    @media (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9) {
      .hero {
        height: 90vh;
      }
    }
    
    /* Square-ish screens */
    @media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
      .hero {
        height: 60vh;
      }
    }
    
    /* Portrait orientation */
    @media (max-aspect-ratio: 3/4) {
      .hero {
        height: 50vh;
      }
    }
    
    /* Extra tall/narrow screens */
    @media (max-aspect-ratio: 9/16) {
      .hero {
        height: 40vh;
      }
    }
    
    /* Very small screens */
    @media (max-width: 480px) {
      .hero-text h1 {
        font-size: clamp(1.2rem, 4vw, 2rem);
      }
      
      .hero-text p {
        font-size: clamp(0.8rem, 2vw, 1rem);
      }
      
      .hero {
        min-height: 250px;
      }
    }

/* Icon colors per slide */
.hero-text .fa-lightbulb {
  color: #ffc107; /* warm yellow for 'ideas' */
}

.hero-text .fa-bullseye {
  color: #e91e63; /* pink for focus/vision */
}

.hero-text .fa-cubes {
  color: #00bcd4; /* teal for modular/exhibition */
}

.hero-text .fa-hands-helping {
  color: #f4c2a1; /* soft skin-tone peach */
}

/* Hide the navigation buttons on screens below 768px */
@media (max-width: 768px) {
  .swiper-button-next, .swiper-button-prev {
    display: none;
  }
}



.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  z-index: 9999;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-btn i {
  font-size: 30px;
  color: white;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
}


  .hero-icon {
  font-size: clamp(1.5rem, 4vw, 3rem); /* Responsive sizing */
  color: white; /* Optional: depends on your design */
  margin-bottom: 1rem; /* Optional spacing */
}

/* Optional fine-tuning with media queries */
@media (max-width: 768px) {
  .hero-icon {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .hero-icon {
    font-size: 1.5rem;
  }
}