html,body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif}
    .container{max-width:1200px}
    .shadow-soft{box-shadow:0 10px 30px hsla(229, 84%, 5%, 0.06)}
    /* .hero-overlay{background-image:linear-gradient(to bottom,rgba(60,165,70,.65),rgba(153,216,63,.35)),url('../img/hero-ecotech.jpg');background-size:cover;background-position:center} */
    .hero-overlay{
      background-image: url(../img/hero-ecotech4.webp);
    background-size: 30%;
    background-position: 90% 100%;
    background-repeat: no-repeat;
    background-color: #000;
    }
@keyframes fadeInOut {
  0%   { opacity: 0; }
  20%,80%  { opacity: 1; }
  100% { opacity: 0; }
}
.fade-in-out {
  animation: fadeInOut 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .fade-in-out { animation: none; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

#ai-chat-widget {
    z-index: 9999;
}
#ai-chat-window {
    z-index: 10000;
}
#ai-chat-messages{
    overflow-y: auto;
    height: 200px;
}
/* Put this in your global CSS for scroll each sections*/
/* html, body { height: 100%; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
section { scroll-snap-align: start; min-height: 100vh; } */

  @keyframes logoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .logo-track {
    width: max-content;
    animation: logoScroll 28s linear infinite;
  }
  .group:hover .logo-track {
    animation-play-state: paused;
  }
@media only screen and (max-width: 768px) {
#ai-chat-widget{display:none !important;}
}


/* ===== Font Awesome 6.7.2 — Minimal build for selected icons only ===== */

/* 1) Font faces (point to your package's webfonts) */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900; /* solid */
  font-display: swap;
  src: url("./../webfonts/fa-solid-900.woff2") format("woff2"),
       url("./../webfonts/fa-solid-900.woff") format("woff");
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400; /* regular */
  font-display: swap;
  src: url("./../webfonts/fa-regular-400.woff2") format("woff2"),
       url("./../webfonts/fa-regular-400.woff") format("woff");
}
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400; /* brands */
  font-display: swap;
  src: url("./../webfonts/fa-brands-400.woff2") format("woff2"),
       url("./../webfonts/fa-brands-400.woff") format("woff");
}

/* 2) Base classes */
.fa, .fas, .far, .fab {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fas { font-family: "Font Awesome 6 Free"; font-weight: 900;}
.far, .fa-regular { font-family: "Font Awesome 6 Free"; font-weight: 400;}
.fab, .fa-brands { font-family: "Font Awesome 6 Brands"; font-weight: 400;}
.fa-brands{font-style: normal;}
/* 3) Only the specific icons you listed */
/* Solid */
.fa-plus::before         { content: "\f067"; } /* plus */
.fa-edit::before         { content: "\f044"; } /* pen-to-square (alias edit) */
.fa-trash::before        { content: "\f1f8"; } /* trash */
.fa-robot::before        { content: "\f544"; } /* robot */
.fa-times::before        { content: "\f00d"; } /* xmark (alias times) */
.fa-paper-plane::before  { content: "\f1d8"; } /* paper-plane (also used by .far) */
.fa-bars::before         { content: "\f0c9"; } /* bars */

/* Regular (only paper-plane needed) */
.far.fa-paper-plane::before { content: "\f1d8"; }

/* Brands */
.fa-whatsapp::before     { content: "\f232"; } /* WhatsApp */
.fa-facebook-f::before   { content: "\f39e"; } /* Facebook F */
.fa-twitter::before      { content: "\f099"; } /* Twitter (bird) */
.fa-linkedin-in::before  { content: "\f0e1"; } /* LinkedIn In */
.fa-instagram::before    { content: "\f16d"; } /* Instagram */

/* 4) Optional utility: ensure icon elements don’t collapse */
.fa, .fas, .far, .fab { min-width: 1em; text-align: center; }

/*youtube video lazy load*/
.youtube-placeholder {
    position: relative;
    background: #f8f9fa;
    /*border-radius: 12px;*/
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.youtube-placeholder:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.youtube-placeholder.loaded {
    cursor: default;
    height:500px;
}

.youtube-placeholder.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.placeholder-content {
    transition: all 0.3s ease;
}

.youtube-placeholder:hover .placeholder-content {
    transform: scale(1.02);
}


@media (max-width: 768px) {
  .hero-overlay {
    background-image: none !important;
    background-color: #000; /* keep the background color */
  }
  /*youtube video lazy load*/
    .youtube-placeholder {
        margin: 10px 0;
    }

    
}