:root {
  --hero-overlay: linear-gradient(90deg, rgba(179,64,35,.8) 0%, rgba(122,35,32,.75) 45%, rgba(29,29,29,.6) 100%);
}

/* Navbar */
.navbar {
  background: linear-gradient(90deg, #1d1d1d 0%, #7a2320 55%, #b34023 100%) !important;
}
.navbar .nav-link,
.navbar-brand span,
.navbar-brand img {
  color: #fff !important;
}
/* Hero Section Animation */
    .hero {
      position: relative;
      min-height: 85vh;
      display: grid;
      place-items: center;
      color: #fff;
      overflow: hidden;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0% 100%);
    }

    .hero-slider {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
      animation: heroFade 18s linear infinite;
      will-change: opacity;
    }
    
    /* Add the overlay to each slide */
    .hero-slide::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--hero-overlay);
    }

    /* Stagger the animations for each slide */
    .hero-slide:nth-child(1) {
      /* Image from Unsplash by Pedro Lastra */
      background-image: url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?q=80&w=2574&auto=format&fit=crop');
      animation-delay: 0s;
    }
    .hero-slide:nth-child(2) {
      /* Image from Unsplash by Digital Marketing Agency NTWRK */
      background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2670&auto=format&fit=crop');
      animation-delay: 6s;
    }
    .hero-slide:nth-child(3) {
      /* Image from Unsplash by R ARCHITECTURE */
      background-image: url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?q=80&w=2670&auto=format&fit=crop');
      animation-delay: 12s;
    }

    /* Keyframe animation for the fade effect */
    @keyframes heroFade {
      0% { opacity: 0; }
      8% { opacity: 1; } /* Fade in */
      33% { opacity: 1; } /* Hold */
      41% { opacity: 0; } /* Fade out */
      100% { opacity: 0; }
    }
    
    /* Ensure hero content is on top of the slider */
    .hero .container {
        position: relative;
        z-index: 2;
    }

    /* Mobile adjustments for hero section */
    @media (max-width: 991.98px) {
        .hero {
            min-height: 100vh;
            padding-top: 120px; /* Add more space at top to show more slider */
        }
        
        .hero .container {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        
        /* Adjust form positioning on mobile */
        .hero .glass-card {
            margin-top: 4rem; /* Increased space between text and form */
        }
        
        /* Add more space between text content and form */
        .hero .col-lg-7 {
            margin-bottom: 3rem;
        }
        
        /* Additional spacing for the form column */
        .hero .col-lg-5 {
            padding-top: 2rem;
        }
    }

    .hero .headline {
      font-weight: 700;
      letter-spacing: .5px;
      line-height: 1.1;
    }
    .brand-accent { color: #ffd166; }
    .glass-card {
      background: rgba(255,255,255,.95);
      backdrop-filter: blur(6px);
      border: 0;
      border-radius: 1rem;
      box-shadow: 0 1rem 2rem rgba(0,0,0,.25);
    }

    /* Ticker */
    .ticker {
      background: #fff;
      border-top: 1px solid rgba(0,0,0,.08);
      border-bottom: 1px solid rgba(0,0,0,.08);
      overflow: hidden;
      white-space: nowrap;
    }
    .ticker__track {
      display: inline-block;
      padding-block: .5rem;
      animation: ticker-move 20s linear infinite;
    }
    .ticker__item {
      display: inline-block;
      margin-inline: 1.25rem;
      color: #E8674D;
      font-family: 'Ostra Centra', sans-serif;
    }
    @keyframes ticker-move {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

/* About */
.about-section {
  background-color: #fff;
  text-align: center;
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}
.about-section h2 { font-weight: bold; margin-bottom: 1rem; }
.about-section p { max-width: 800px; margin: 0 auto 1.5rem; color: #555; }
.highlight { font-weight: bold; color: #ff7f00; }
.section-content { font-size: 1.1rem; line-height: 1.6; }
.btn-download {
  background-color: #e94b2c;
  color: #fff;
  border-radius: .5rem;
  padding: .75rem 1.5rem;
  font-weight: 500;
}
.btn-download:hover { background-color: #cf3f22; color: #fff; }

/* Video */
.video-section { background-color: #ffffff; }
.video-embed iframe {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}

/* Gallery / Services */
.gallery-section { background-color: #f8f9fa; }
.gallery-item { text-align: center; margin-bottom: 20px; }
.square-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Location */
.location-section { text-align: center; padding: 20px; }
.location-map {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  background: url('map.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}

/* Features (full-screen section on image) */
.features-section {
  background: url('./data/hero.png') center/cover no-repeat;
  min-height: 100vh;
  padding: 80px 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.features-section h3 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #ffd166;
  margin-bottom: 30px;
}
.feature-item { margin-bottom: 30px; text-align: left; }
.feature-item h4 { font-size: 1.5rem; font-weight: 500; color: #fff; }
.feature-item p { font-size: 1rem; color: #f1f1f1; }
.feature-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Partners */
.partners-section { background-color: #f8f9fa; }
.partner-logo { max-width: 150px; margin-bottom: 10px; }
.partner-description { color: #6c757d; font-size: .9rem; }
.partners-section h3 { font-weight: 600; font-size: 2rem; margin-bottom: 30px; }
.partners-section .row { display: flex; justify-content: center; }
.partners-section .col-md-3 { margin-bottom: 20px; }
.partners-section .col-md-12 { margin-top: 20px; }

/* Footer */
.footer {
  background: linear-gradient(to right, #4e9fd1, #5b9bd5);
  color: #fff;
}
.footer h4 { font-size: 1.8rem; font-weight: 600; margin-bottom: 20px; }
.social-links { list-style: none; padding: 0; }
.social-icon {
  display: inline-block;
  margin: 0 15px;
  color: #fff;
  font-size: 1.1rem;
  text-decoration: none;
}
.social-icon i { margin-right: 8px; }
.social-icon:hover { color: #ffd166; }
.footer-logo-img { max-width: 150px; height: auto; }

/* Social icon images styling */
.social-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.social-icon:hover .social-icon-img {
  transform: scale(1.1);
}
/* Base marquee (you likely already have similar) */
.partners-marquee {
  overflow: hidden;
  position: relative;
  /* nice edge fade; optional */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--gap, 32px);
  width: max-content;
  animation: partners-marquee 22s linear infinite;
  will-change: transform;
}

/* Limit viewport to exactly 3 logos + gaps */
.partners-marquee--3col {
  /* Tweak these two to control sizing */
  --logo-w: min(120px, 24vw); /* responsive width per logo */
  --gap: 32px;

  /* Viewport width = 3 logos + 2 gaps */
  width: calc(4 * var(--logo-w) + 2 * var(--gap));
  margin-inline: auto; /* center within container */
}

.partner-logo {
  width: var(--logo-w);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

/* Hover to pause (optional) */
.partners-marquee:hover .marquee-track { animation-play-state: paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Keyframes: if you have one duplicate set, -50% equals one loop;
   if you repeat arbitrarily, you can keep this value—it will still loop smoothly. */
@keyframes partners-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Small screens: slightly tighter layout */
@media (max-width: 576px) {
  .partners-marquee--3col {
    --logo-w: min(96px, 26vw);
    --gap: 20px;
    width: calc(3 * var(--logo-w) + 2 * var(--gap));
  }

 
}

/* Mobile-only margin for formHH */
@media (max-width: 991.98px) {
  #formHH {
    margin-top: 100px !important;
  }
}

.projects-section {
  background-color: #f8f9fa;
  text-align: center;
}

.projects-section h3 {
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 30px;
}

.project-image {
  width: 100%;
  aspect-ratio: 16/9;  /* Keeps rectangular shape */
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

@media (hover:hover) and (pointer:fine) {
  .project-image:hover {
    transform: scale(1.03);
  }
}

#projectModal .modal-body img {
  object-fit: contain;
  max-height: 100vh;
  background-color: #000;
}


 .trihub-section {
            background-color: #3a4f4b; /* Dark green background from image */
            color: #ffffff; /* White text color */
            border-radius: 1rem; /* Rounded corners */
        }

        /* Style for the highlighted yellow text */
        .highlight-text {
            color: #f7b800; /* Vibrant yellow from image */
            font-weight: 700; /* Bold */
        }

        /* Style for the main description text */
        .description-text {
            max-width: 800px; /* Limit width for readability */
            font-size: 1.1rem;
            line-height: 1.6;
        }
        
        /* Styling for the groups and functions section */
        .integration-item {
            display: flex;
            flex-wrap: wrap; /* Allow items to wrap on smaller screens */
            align-items: center;
            gap: 0.5rem 1rem; /* Spacing between items */
        }

        .integration-item .label {
            font-weight: 700;
            white-space: nowrap; /* Prevent label from breaking */
        }
        
        /* The vertical bar before each highlighted item */
        .highlight-text::before {
            content: '|';
            color: #f7b800;
            margin-right: 1rem;
            font-weight: 700;
        }
        
        /* Download button styling */
        .btn-download {
            background: linear-gradient(135deg, #f7b800 0%, #e6a800 100%);
            color: #3a4f4b;
            border: none;
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(247, 184, 0, 0.3);
        }
        
        .btn-download:hover {
            background: linear-gradient(135deg, #e6a800 0%, #d49a00 100%);
            color: #3a4f4b;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(247, 184, 0, 0.4);
        }
        
        .btn-download:active {
            transform: translateY(0);
        }
        
        /* Service section styling */
        .service-item {
            padding: 20px;
            border-radius: 15px;
            transition: all 0.3s ease;
        }
        
        .service-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .service-title {
            color: #3a4f4b;
            font-weight: 600;
            font-size: 1.2rem;
        }
        
        /* WhatsApp button styling */
        .btn-whatsapp {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            font-weight: 600;
            border-radius: 25px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
            font-size: 0.9rem;
        }
        
        .btn-whatsapp:hover {
            background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
        }
        
        .btn-whatsapp:active {
            transform: translateY(0);
        }
        
        /* WhatsApp icon styling */
        .whatsapp-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
            vertical-align: middle;
        }