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

@font-face {
  font-family: "Inter";
  src: url("/font/NewTegomin-Regular.ttf");
}

@font-face {
  font-family: "Custom-2";
  src: url("/font/Nosifer-Regular.ttf");
}
.custom-shadow {
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.25); /* #00000040 */
}

:root {
  /* --primary: #51c27c; */
  --primary: #202327;
  --secondary: #f06a3d;

  --bg: #fbfbfb;
  --hot-bg: #ff000018;

  --dark: #000;
  /* --footer-dark: #092131; */

  --gray: #555555;
  --gray-1: #656565;
  --gray-2: #676767;
  --gray-3: #aaaaaa;

  --slate: #e8e8e8;
  --slate-1: #f8f8f8;
  --slate-2: #f6f6f7;
  --slate-3: #f3f5f8;
  --slate-4: #fafafa;

  /* --border-color: #d2eadd; */
  --border-color: #e1e6e3;

  --border-dark: #525255;
}

body,
html {
  scroll-behavior: smooth !important;
  font-family: "SolaimanLipi", Arial, sans-serif !important;
}

@layer base {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  ::-webkit-file-upload-button {
    display: none;
  }

  :is(.dark .dark\:stroke-white) {
    stroke: #fff;
  }

  body {
    @apply dark:bg-[#202327];
  }
}

@layer components {
  .category-text {
    @apply text-2xl md:text-3xl pl-4 dark:text-white text-[var(--primary)] relative before:absolute before:bg-[var(--primary)] before:w-[3px] before:h-[80%] before:left-0 before:top-0 before:bottom-0 before:my-auto;
  }
}

/**================================================== *
 * ==========  Scroll Bar  ========== *
 * ================================================== */
.sidebar-scrollbar-none::-webkit-scrollbar {
  display: none;
}

.sidebar-scrollbar-none {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* =======  End of Scroll Bar  ======= */

/**================================================== *
 * ==========  Archive  ========== *
 * ================================================== */
.archive-date-picker .react-datepicker-wrapper {
  display: inline !important;
}
.archive-date-picker .react-datepicker__close-icon {
  right: 5px;
}
.archive-date-picker .react-datepicker__close-icon::after {
  background-color: transparent;
  color: var(--gray);
  font-size: 28px;
}

/* =======  End of Archive  ======= */

/**================================================== *
 * ==========  Spin  ========== *
 * ================================================== */
.spin-icon {
  display: inline;
  /* width: 20px;
  height: 20px; */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* =======  End of Spin  ======= */

/**================================================== *
 * ==========  slick slider  ========== *
 * ================================================== */
.slick-dots li {
  display: none;
}

.slick-dots li.slick-active {
  display: block;
}

/* =======  End of slick slider  ======= */

/**================================================== *
 * ==========  scroll to top  ========== *
 * ================================================== */

.scrollToTop {
  position: fixed;
  bottom: 0;
  right: 24px;
  z-index: 100000000;

  transform: translateY(100%);
}

.scrollActive {
  bottom: 70px;
  transform: translateY(0%);
}
/* .news_view img {
  width: 100%;
  max-height: 250px;
} */
/* =======  End of scroll to top  ======= */

@keyframes slideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 3.5s ease-out;
}


.video-controls {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-container:hover .video-controls {
  opacity: 1;
}

.group:hover .video-controls {
  opacity: 1;
}

.video-controls {
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(5px);
}

@keyframes zoomOut {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

.animate-zoomOut {
  animation: zoomOut 2.5s ease-out forwards;
}

.my-ckeditor-content a {
  color: rgb(13, 110, 253) !important; /* or any blue shade you prefer */
}