@import "tailwindcss";

@font-face {
  font-family: "ClashGrotesk";
  src: url("/src/assets/fonts/ClashGrotesk-Bold.woff2") format("woff2"), url("/src/assets/fonts/ClashGrotesk-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: "Inter", sans-serif;
}

@theme {
  /* Brand background */
  --color-primarys: #f56a01;
  --color-secondarys: #1b2d46;
  --color-bg-counter: #f1f6f7;
  --color-bg-border: #d1d5d9;
  --color-footer: #001026;

  /* Text/Fonts color */
  --color-text-primarys: #252c38;
  --color-text-secondarys: #374253;
  --color-text-muted: #636e7e;
  --color-text-accent: #f56a01;
  --color-rating-star: #ffb21a;
  --color-text-rating: #1d232c;
  --color-text-highlight: #414e62;
  --color-footerLink: #D1D5D9;
  --color-index_2card: color: rgba(255, 255, 255, 0.20);
  --color-index_2text: #ECEDEF;
  --color-dark-navy: #2C3E50;
  --color-pageination: #3B4759;



  /* Container */
  /* --custom-container-max-width: 1320px; */

  /* font family */
  --font-inter: "Inter", sans-serif;
  --font-lato: "Lato", sans-serif;
  --font-clash-grotesk: "ClashGrotesk", sans-serif;
}

.custom-container {
  width: 100%;
  margin-inline: auto;

  }

  /* Small screens ≥ 640px */
  @media (min-width: 640px) {
    .custom-container {
      max-width: 640px;
    }
  }

  /* Medium screens ≥ 768px */
  @media (min-width: 768px) {
    .custom-container {
      max-width: 768px;
    }
  }

  /* Large screens ≥ 1024px */
  @media (min-width: 1024px) {
    .custom-container {
      max-width: 1024px;
    }
  }

  /* Extra Large ≥ 1280px */
  @media (min-width: 1280px) {
    .custom-container {
      max-width: 1280px;
    }
  }

  /* Ultra Wide ≥ 1536px */
  @media (min-width: 1536px) {
    .custom-container {
      max-width: 1536px;
    }
  }

  /* Custom largest ≥ 1766px */
  @media (min-width: 1766px) {
    .custom-container {
      max-width: 1766px;
    }
  }


.shadow-soft {
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.10);
}

         @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .animate-scrolling {
            animation: scroll 8s linear infinite;
            will-change: transform;
        }

        .animate-scroll:hover {
            animation-play-state: paused;
        }


   /* marquee animation and pause helper */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: scroll 20s linear infinite;
  will-change: transform;
}
.paused { animation-play-state: paused !important; }


      /* Progress bar animation */
       @keyframes fillProgress {
            from {
                width: 0%;
            }
        }
        
        .progress-fill {
            animation: fillProgress 1.5s ease-out forwards;
        }

        



  @keyframes scroll-vertical {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-50%);
    }
  }

  .animate-scroll {
    animation: scroll-vertical 20s linear infinite;
    will-change: transform;
  }

  .pause-scroll:hover {
    animation-play-state: paused;
  }

  .scroll-track {
    display: flex;
    flex-direction: column;
  }


/* Runtime fallback so the animation works without rebuild */
@keyframes scroll-vertical {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

.animate-scroll {
  animation: scroll-vertical 20s linear infinite;
  will-change: transform;
}

.pause-scroll:hover {
  animation-play-state: paused;
}

.scroll-track {
  display: flex;
  flex-direction: column;
}

/* accordion-content  */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 400ms ease, opacity 300ms ease;
}

.accordion-content.open {
  max-height: 500px;
  opacity: 1;
}

.icon {
  transition: transform 300ms ease;
}

.icon.open {
  transform: rotate(135deg); 
}


.accordion-item {
  transition: background-color 300ms ease;
}

.accordion-item.active {
  background-color: #F5F7FB;
  color: #ffffffe6;
}

   .toggle-background {
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .toggle-option {
            transition: color 0.25s ease;
        }

        .toggle-option.active {
            color: white;
        }