@import "tailwindcss";

@font-face {
  font-family: "Noto Serif Bengali";
  src: url("../fonts/NotoSerifBengali-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Bengali";
  src: url("../fonts/NotoSerifBengali-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@theme {
  --breakpoint-sm: 40rem; /* ~640px */
  --breakpoint-md: 48rem; /* ~768px */
  --breakpoint-lg: 64rem; /* ~1024px */
  --breakpoint-xl: 80rem; /* ~1280px */
  --breakpoint-2xl: 86rem; /* ~1536px  */
  --font-noto: "Noto Serif Bengali", sans-serif;
}

@layer base {
  body {
    font-family: var(--font-noto);
    font-weight: 400; /* default weight */
  }
  h2 {
    font-weight: 600;
  }
}

@utility container {
  width: 100%;
  max-width: 100%; /* default fluid */

  margin-inline: auto; /* center horizontally */

  padding-left: 10px;
  padding-right: 10px;

  /* At sm and up, adjust padding or max-width if needed */
  @variant sm {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }

  @variant md {
    max-width: var(--breakpoint-md);
  }

  @variant lg {
    max-width: var(--breakpoint-lg);
  }

  @variant xl {
    max-width: var(--breakpoint-xl);
  }
  @variant xl {
    max-width: var(--breakpoint-2xl);
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

.shape {
  @apply relative inline-block bg-green-600 text-white font-semibold text-xl px-4 py-2 after:content-[''] after:absolute after:top-0 after:right-[-15px] after:w-0 after:h-0 after:border-t-[22px] after:border-b-[22px] after:border-l-[15px] after:border-t-transparent after:border-b-transparent after:border-l-green-600;
}

.add-border {
  @apply relative before:content-[''] before:z-10 before:absolute before:w-[98%] before:h-[98%]  before:border-solid before:border-gray-200;
}

.border-right {
  @apply before:-right-[10px] before:top-[1%] before:border-r-[1px];
}
.border-bottom {
  @apply before:-bottom-[10px] before:right-[1%] before:border-b-[1px];
}
.border-top {
  @apply before:-top-[10px] before:right-[1%] before:border-t-[1px];
}
.border-left {
  @apply before:-left-[10px] before:top-[1%] before:border-l-[1px];
}

.section-gap {
  @apply py-[20px] lg:py-[30px];
}