/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap'); */



  @font-face {
    font-family: 'Athletics';
    src: url("/assets/fonts/Athletics/Athletics\ Regular.otf");
  }
  
  @font-face {
    font-family: 'Graphik';
    src: url("/assets/fonts/Graphik/GraphikRegular.otf");
  }

  *{
    -webkit-tap-highlight-color: transparent;
}

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {

    .secondary-btn{
        @apply font-bold text-lg text-center capitalize text-white flex flex-row min-w-[159px] h-[62px] justify-center items-center py-5 px-[30px] gap-[10px] bg-chekkit-green border-chekkit-green border rounded-2xl transition-all duration-200 ease-out lg:hover:bg-chekkit-dark-green lg:hover:border-chekkit-dark-green
    }

    .tertiary-btn{
        @apply font-bold text-lg text-center capitalize bg-chekkit-feint-lime shadow-chekkit-grey-shadow text-chekkit-green flex flex-row min-w-[159px] h-[62px] justify-center items-center py-5 px-[30px] gap-[10px] rounded-2xl transition-all duration-200 ease-out lg:hover:bg-chekkit-lighter-lime lg:hover:border-chekkit-lighter-lime
    }

    .master-btn{
        @apply font-bold text-lg text-center capitalize bg-chekkit-lime shadow-chekkit-play-btn-shadow text-chekkit-green flex flex-row min-w-[159px] h-[62px] justify-center items-center py-5 px-[30px] gap-[10px] rounded-2xl transition-all duration-200 ease-out lg:hover:bg-chekkit-dark-lime  lg:hover:border-chekkit-dark-lime
    }

    .primary-btn{
        @apply font-bold text-lg text-center capitalize bg-transparent text-chekkit-green flex flex-row min-w-[159px] h-[62px] justify-center items-center py-5 px-[30px] gap-[10px] border-chekkit-green border rounded-2xl transition-all duration-200 ease-out lg:hover:bg-chekkit-light-lime
    } 

    .nav-links{
        @apply font-medium text-lg capitalize text-chekkit-grey transition-all duration-200 ease-out lg:hover:text-chekkit-neutral-content
    }

    .footer-links{
      @apply transition-all duration-200 ease-out lg:hover:opacity-40
    }

    .container{
      @apply z-10 w-full h-full max-w-[85rem] mx-auto px-4 sm:px-8 md:px-10
    }

    .features-header{
      @apply text-chekkit-green text-3xl md:text-4xl lg:text-6xl relative font-extrabold mb-5 before:content-['FEATURES'] before:font-black before:absolute before:text-[50px] md:before:text-[70px] lg:before:text-[120px] before:opacity-[0.05] before:bottom-[50%] before:right-[10%] before:left-[10%] md:before:bottom-5 lg:before:bottom-2
    }

    .features-list, .content-list{
        @apply marker:content-[url('/assets/images/list-disc.svg')] list-none
    }

    .hero {
        @apply relative overflow-hidden bg-hero bg-cover bg-no-repeat font-Athletics
    }

    .hero-text-wrapper{
     @apply flex flex-col gap-5 font-semibold items-center text-center text-white justify-center max-w-[50rem] mx-auto h-full
    }

    .faq-header {
      @apply text-chekkit-green text-center text-3xl mb-20 xl:mb-0 md:text-4xl lg:text-6xl relative font-extrabold before:content-['FAQs'] before:font-black before:absolute md:before:text-[70px] lg:before:text-[120px] before:opacity-[0.05] before:bottom-[70%] before:right-[10%] before:left-[10%] md:before:bottom-5 lg:before:bottom-2
    }


}


/* header navbar */
.active-nav {
  opacity: 1;
  display: block;
  transform: translateY(20px);
}

.show-sidebar {
  display: block;
}

/* faq */

.faq-details {
  box-shadow: 0px 5px 16px #080f340f;
  border: 2px solid transparent;
}

.faq .cta-btn {
  display: flex;
  margin: 50px auto 20px;
}

.toggle {
  width: 100%;
  background-color: transparent;
  align-items: center;
  display: grid;
  grid-template-columns: 2fr 0.2fr;
  justify-content: space-between;
  font-weight: 500;
  color: #170f49;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px 0;
  text-align: left;
}

.toggle-icon-btn {
  background: #ffffff;
  width: 30px;
  height: 30px;
  box-shadow: 0px 5px 16px rgba(8, 15, 52, 0.06);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: end;
}

.content {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: all 0.5s;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #6f6c90;
  font-weight: 400;
}

@media (min-width: 768px) {
  .toggle-icon-btn {
    width: 50px;
    height: 50px;
  }
}