body,
    html {
      font-family: "Switzer", sans-serif;
      font-style: normal;
      font-size: 16px;
    }
    
    /*hero-animation*/
    .animate_grey{
        width: 450px;
      height: 450px;
       position: relative;
          display: grid;
      place-items: center;
      perspective: 1000px;
       transform-origin: center;
    }
    .animation-wrapper {
      position: relative;
      width: 650px;
      height: 650px;
      display: grid;
      place-items: center;
      perspective: 1000px;
      /*transform: scale(min(1, calc(100vw / 450)));*/
      transform-origin: center;
    }

    .scene {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
    }

    .layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      transform-style: preserve-3d;
    }

    .hexagon {
      position: absolute;
      aspect-ratio: 1/cos(30deg);
      clip-path: 
        polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
        var(--b) 50%,
        calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
        calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
        calc(100% - var(--b)) 50%,
        calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
        calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
        var(--b) 50%);
      background: #ff5a43;
      
    }

    .center-logo {
      position: absolute;
      width: 110px;
      height: 110px;
      display: flex;
      justify-content: center;
      align-items: center;
      filter: drop-shadow(0 0 15px rgba(255, 90, 67, 0.9)) 
              drop-shadow(0 0 30px rgba(255, 90, 67, 0.5));
      animation: pulse-glow 3s infinite alternate ease-in-out;
      z-index: 10;
    }

    .center-logo svg {
      width: 100%;
      height: 100%;
      stroke: #ff5a43;
      fill: none;
      animation: spin-cw 20s infinite linear;
    }

    .ring {
      --b: 1px;
      opacity: 0.4;
    }

    .ring-1 { height: 240px; animation: spin-cw 15s infinite linear; }
    .ring-2 { height: 330px; animation: spin-ccw 20s infinite linear; }
    .ring-3 { height: 430px; animation: spin-cw 25s infinite linear; }
    .ring-4 { height: 520px; animation: spin-ccw 30s infinite linear; }
    .ring-5 { height: 620px; animation: spin-cw 35s infinite linear; }
.animate_grey  .ring-1 { height: 40px;  }
  .animate_grey  .ring-2 { height: 160px;  }
 .animate_grey   .ring-3 { height: 230px; }
  .animate_grey .ring-4 { height: 320px;  }
   .animate_grey .ring-5 { height: 420px; }

    .dot {
      position: absolute;
      background-color: #F16147;
      border-radius: 50%;
      box-shadow: 
        0 0 8px rgba(255, 90, 67, 1),
        0 0 15px rgba(255, 90, 67, 0.8),
        0 0 30px rgba(255, 90, 67, 0.6);
    }

    .dot-a { width: 10px; height: 10px; top: 10%; right: 15%; animation: cross-a 12s infinite alternate ease-in-out 0s; }
    .dot-b { width: 6px;  height: 6px;  bottom: 15%; right: 20%; animation: cross-b 14s infinite alternate ease-in-out 2s; }
    .dot-c { width: 8px;  height: 8px;  bottom: 5%; left: 10%; animation: cross-c 11s infinite alternate ease-in-out 1s; }
    .dot-d { width: 10px; height: 10px; top: 30%; left: 15%; animation: cross-d 13s infinite alternate ease-in-out 3s; }

    @keyframes pulse-glow {
      0% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 10px rgba(255, 90, 67, 0.7)) 
                drop-shadow(0 0 20px rgba(255, 90, 67, 0.3));
      }
      100% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 20px rgba(255, 90, 67, 1)) 
                drop-shadow(0 0 40px rgba(255, 90, 67, 0.6));
      }
    }

    @keyframes spin-cw {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
      
    }

    @keyframes spin-ccw {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }

    @keyframes cross-a {
      0% { transform: translate(0px, 0px) scale(0.8); opacity: 0.5; }
      100% { transform: translate(-280px, 320px) scale(1.2); opacity: 1; }
    }

    @keyframes cross-b {
      0% { transform: translate(0px, 0px) scale(0.8); opacity: 0.5; }
      100% { transform: translate(-240px, -280px) scale(1.2); opacity: 1; }
    }

    @keyframes cross-c {
      0% { transform: translate(0px, 0px) scale(0.8); opacity: 0.5; }
      100% { transform: translate(320px, -360px) scale(1.2); opacity: 1; }
    }

    @keyframes cross-d {
      0% { transform: translate(0px, 0px) scale(0.8); opacity: 0.5; }
      100% { transform: translate(280px, 160px) scale(1.2); opacity: 1; }
    }
    
    /*text-aniamtions*/
    @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* ─── SCROLL REVEAL ─── */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .bannerHeading,
  .fade-1{
       opacity: 0;
    animation: fadeUp 0.8s ease 0.3s forwards;
  }
  .bannerPara,
  .fade-2{
         opacity: 0;
    animation: fadeUp 0.8s ease 0.5s forwards;
  }
  .fade-3{
       opacity: 0;
    animation: fadeUp 0.8s ease 0.7s forwards;
  }
  .fade-4{
        opacity: 0;
    animation: fadeUp 0.8s ease 0.8s forwards;
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
   .reveal-delay-5 { transition-delay: 0.5s; }
  .reveal-delay-6 { transition-delay: 0.6s; }
  .reveal-delay-7 { transition-delay: 0.7s; }
  .reveal-delay-8 { transition-delay: 0.8s; }
   .reveal-delay-9 { transition-delay: 0.9s; }
  .reveal-delay-10 { transition-delay: 1s; }