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

@layer components {
  .nav__link {
    @apply relative text-base font-medium w-fit hover:text-[#D60050];
  }
  .custom-position {
    object-position: 60% -3px;
  }
  .mainBgColor {
    background-color: #D60050;
  }
  .mainColor{
    color: #D60050;
  }
  .navigation-loader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0006;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }
  
  .dots {
    li{
      margin: 0 10px;
    }

    button::before {
      font-size:  2rem !important;
      color: #D60050 !important;
    }
  }

  body.overflow-hidden {
    overflow: hidden;
  }
  
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
      display: none;
  }
 /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
}
}