/* FONT FAMLIES */
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
* {
  padding: 0;
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: 'Roboto',sans-serif;
}
/* ======================
   Spacing Utilities
   ====================== */
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
/* Padding x */
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-auto { padding-left: auto; padding-right: auto; }
/* Padding y */
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-auto { padding-top: auto; padding-bottom: auto; }
/* Padding left */
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-auto { padding-left: auto; }

/* Padding right */
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-auto { padding-right: auto; }

/* Padding top */
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-auto { padding-top: auto; }

/* Padding bottum*/
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-auto { padding-bottom: auto; }

/* margin */
.m-1 {
  margin: 0.25rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-3 {
  margin: 0.75rem;
}
.m-4 {
  margin: 1rem;
}
.m-5 {
  margin: 1.25rem;
}
/* 
Margin left */
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-auto { margin-left: auto; }

/* 
Margin right*/
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-auto { margin-right: auto; }
/* 
Margin top*/
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-auto { margin-top: auto; }

/* 
Margin bottom*/
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-auto { margin-bottom: auto; }

/* Margin X */
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Margin Y  */
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* ======================
      Width & Height Utilities
      ====================== */
.w-1 { width: 0.25rem; }   /* 4px */
.w-2 { width: 0.5rem; }    /* 8px */
.w-3 { width: 0.75rem; }   /* 12px */
.w-4 { width: 1rem; }      /* 16px */
.w-5 { width: 1.25rem; }   /* 20px */
.w-auto { width: fit-content; }
/* Max Width Classes */
.max-w-1 {
  max-width: 0.25rem; /* 1 */
}

.max-w-2 {
  max-width: 0.5rem; /* 2 */
}

.max-w-3 {
  max-width: 0.75rem; /* 3 */
}

.max-w-4 {
  max-width: 1rem; /* 4 */
}

.max-w-5 {
  max-width: 1.25rem; /* 5 */
}
.w-full {
  width: 100%;
}
/* Min-Width Classes */
.min-w-1 {
  min-width: 0.25rem; /* 1 */
}

.min-w-2 {
  min-width: 0.5rem; /* 2 */
}

.min-w-3 {
  min-width: 1rem; /* 3 */
}

.min-w-4 {
  min-width: 2rem; /* 4 */
}

.min-w-5 {
  min-width: 3rem; /* 5 */
}

/* Min-Height Classes */
.min-h-1 {
  min-height: 0.25rem; /* 1 */
}

.min-h-2 {
  min-height: 0.5rem; /* 2 */
}

.min-h-3 {
  min-height: 1rem; /* 3 */
}

.min-h-4 {
  min-height: 2rem; /* 4 */
}

.min-h-5 {
  min-height: 3rem; /* 5 */
}


.h-full {
  height: 100%;
}
.w-screen {
  width: 100vw;
}
.h-1 { height: 0.25rem; }   /* 4px */
.h-2 { height: 0.5rem; }    /* 8px */
.h-3 { height: 0.75rem; }   /* 12px */
.h-4 { height: 1rem; }      /* 16px */
.h-5 { height: 1.25rem; }   /* 20px */
.h-auto { height: auto; }
/* Max Height Classes */
.max-h-1 {
  max-height: 0.25rem; /* 1 */
}

.max-h-2 {
  max-height: 0.5rem; /* 2 */
}

.max-h-3 {
  max-height: 0.75rem; /* 3 */
}

.max-h-4 {
  max-height: 1rem; /* 4 */
}

.max-h-5 {
  max-height: 1.25rem; /* 5 */
}


.h-screen {
  height: 100vh;
}

/* Border */
.border { border: 1px solid black; }
.border-0 { border: 0px; }
.border-2 { border: 2px solid black; }
.border-4 { border: 4px solid black; }
.border-8 { border: 8px solid black; }
.border-t { border-top: 1px solid black; }
.border-r { border-right: 1px solid black; }
.border-b { border-bottom: 1px solid black; }
.border-l { border-left: 1px solid black; }
.border-black { border-color: black; }
.border-white { border-color: white; }
.border-red { border-color: red; }
.border-gray{border-color:gray}
/* Default border styles */
.border-solid {
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.border-dashed {
  border-style: dashed;
  border-width: 1px;
  border-color: black;
}

.border-dotted {
  border-style: dotted;
  border-width: 1px;
  border-color: black;
}

/* Add more as needed */

/* ======================
      Flexbox Utilities
      ====================== */
.flex {
  display: flex;
}
.flex-col{
   flex-direction: column;
}
.flex-col-rev{
   flex-direction: column-reverse;
}
.flex-row-rev{
   flex-direction: row-reverse;
}
.inline-flex {
  display: inline-flex;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}

/* Line height utilities */
.leading-tight {
  line-height: 1.25;
}

.leading-normal {
  line-height: 1.5;
}

.leading-loose {
  line-height: 2;
}

/* Predefined line-height for values from 3 to 6 */
.leading-3 {
  line-height: 3;
}

.leading-4 {
  line-height: 4;
}

.leading-5 {
  line-height: 5;
}

.leading-6 {
  line-height: 6;
}
/* ==== letter-spacing(tracking) Utiilites ====  */
.tracking-tighter{
  letter-spacing: -0.05rem;
} 
.tracking-tight{
  letter-spacing: -0.25rem;
} 
.tracking-normal{
  letter-spacing: 0rem;
} 
.tracking-wide{
  letter-spacing: 0.05rem;
} 
.tracking-wider{
  letter-spacing: 0.1rem;
}
.tracking-widest{
  letter-spacing: -0.3rem;
} 

/* ==== Grid Utiilites ====  */
.grid {
  display: grid;
}

/* Default: Mobile-first (2 columns) */
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* Gaps */
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}

/* ======================
      Text Utilities
      ====================== */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 3.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.font-bold {
  font-weight: 700;
}
.font-semibold {
  font-weight: 600;
}
.font-normal {
  font-weight: 400;
}
/* ======================
     font Family
      ====================== */
.font-fira-sansa{
    font-family: 'Fira Sansa', sans-serif;
 }
 .font-roboto{
  font-family: 'Roboto',sans-serif;
 }
 .font-fira-code{
  font-family: 'Fira Code',monospace;
 }
 .font-fira-mono{
  font-family: 'Fira Mono',monospace;
 }

/* ======================
      Background Colors
      ====================== */
.bg-white {
  background-color: #ffffff;
}
.bg-black {
  background-color: #000000;
}
.bg-red {
  background-color: red;
}
.bg-blue {
  background-color: blue;
}
.bg-green {
  background-color: green;
}
.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-gray-200 {
  background-color: #e5e7eb;
}

/* ======================
      Text Colors
      ====================== */
.text-white {
  color: #ffffff;
}
.text-black {
  color: #000000;
}
.text-red {
  color: red;
}
.text-blue {
  color: blue;
}
.text-green {
  color: green;
}
.text-gray {
  color: #374151;
}

/* Border */
.border { border: 1px solid black; }
.border-0 { border: 0px; }
.border-2 { border: 2px solid black; }
.border-4 { border: 4px solid black; }
.border-8 { border: 8px solid black; }
.border-t { border-top: 1px solid black; }
.border-r { border-right: 1px solid black; }
.border-b { border-bottom: 1px solid black; }
.border-l { border-left: 1px solid black; }
.border-black { border-color: black; }
.border-white { border-color: white; }
.border-red { border-color: red; }
.border-gray{border-color:gray}
/* Default border styles */
.border-solid {
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.border-dashed {
  border-style: dashed;
  border-width: 1px;
  border-color: black;
}

.border-dotted {
  border-style: dotted;
  border-width: 1px;
  border-color: black;
}

/* ======================
      Border Radius
      ====================== */
.rounded {
  border-radius: 0.25rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-full {
  border-radius: 9999px;
}

/* ======================
      Shadow Utilities
      ====================== */
.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.shadow-md {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.shadow-lg {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* ======================
      Display Utilities
      ====================== */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.hidden {
  display: none;
}

/* ======================
      Position Utilities
      ====================== */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

/* ======================
      Overflow Utilities
      ====================== */
.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-auto {
  overflow: auto;
}

/* ======================
      Cursor Utilities
      ====================== */
/* Cursor Utilities */

.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* ======================
   Inset Utilities
   ====================== */

/* All sides */
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.inset-1 {
  top: 0.25rem;
  right: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
}
.inset-2 {
  top: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
}
.inset-3 {
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
}
.inset-4 {
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}

/* Individual sides */
.top-0 {
  top: 0;
}
.right-0 {
  right: 0;
}
.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}

.top-1 {
  top: 0.25rem;
}
.right-1 {
  right: 0.25rem;
}
.bottom-1 {
  bottom: 0.25rem;
}
.left-1 {
  left: 0.25rem;
}

.top-2 {
  top: 0.5rem;
}
.right-2 {
  right: 0.5rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.left-2 {
  left: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}
.right-3 {
  right: 0.75rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.left-3 {
  left: 0.75rem;
}

.top-4 {
  top: 1rem;
}
.right-4 {
  right: 1rem;
}
.bottom-4 {
  bottom: 1rem;
}
.left-4 {
  left: 1rem;
}

/* ======================
   List Style Utilities
   ====================== */
.list-none {
  list-style: none;
}
.list-disc {
  list-style: disc;
}
.list-decimal {
  list-style: decimal;
}
.list-circle {
  list-style: circle;
}
.list-square {
  list-style: square;
}
.list-inside {
  list-style-position: inside;
}
.list-outside {
  list-style-position: outside;
}
/* TOASTER STYLE */
.alert {
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translate(-50%, -100px); /* Start slightly above */
  cursor: pointer;
  width: clamp(300px, 3vw, 400px);
  height:30px ;
  font-family: "Fira Sans", sans-serif;
  padding: 5px;
  z-index: 9999;
  font-size: 1.3rem;
  color:white;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.alert.show {
  transform: translate(-50%, 0);
  opacity: 1;
}


.alert--success {
  background-color: #20bf6b;
}
.alert--error {
  background-color: #e02e2a;
}

/* BACKGROUND IMAGE STYLES */
.bg-repeat {
  background-repeat: repeat;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.bg-repeat-x {
  background-repeat: repeat-x;
}

.bg-repeat-y {
  background-repeat: repeat-y;
}

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

.bg-auto {
  background-size: auto;
}

.bg-center {
  background-position: center;
}

.bg-top {
  background-position: top;
}

.bg-bottom {
  background-position: bottom;
}

.bg-left {
  background-position: left;
}

.bg-right {
  background-position: right;
}

/* Z-Index Classes */
.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}



/* ========== Transitions ========== */
.transition {
  transition: all 0.3s ease;
}
.transition-all {
  transition: all 0.3s ease;
}
.transition-colors {
  transition: color 0.3s ease, background-color 0.3s ease;
}
.transition-transform {
  transition: transform 0.3s ease;
}

/* ========== Duration ========== */
.duration-100 {
  transition-duration: 100ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}

/* ========== Transform ========== */
.scale-90 {
  transform: scale(0.9);
}
.scale-100 {
  transform: scale(1);
}
.scale-110 {
  transform: scale(1.1);
}
.rotate-45 {
  transform: rotate(45deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

/* Overflow Utilities */

/* Horizontal Overflow (X) */
.overflow-x-auto {
  overflow-x: auto;
}

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

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-visible {
  overflow-x: visible;
}

/* Vertical Overflow (Y) */
.overflow-y-auto {
  overflow-y: auto;
}

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

.overflow-y-scroll {
  overflow-y: scroll;

}

.overflow-y-visible {
  overflow-y: visible;
}

/* Opacity Utilities */

/* 0% to 100% in common steps */
.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-100 {
  opacity: 1;
}


/* Visibility Utilities */

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}
/* NAVLINK CODE */
.nav{
  display: flex;
  padding-left:200px;
  padding-right: 200px;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: relative;
  font-family: 'Roboto', sans-serif;
}
.navlinks{
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:clamp(40px,10vw,60px);
  list-style: none;
}
.navlink{
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
  font-size: 25px;
  transition: left 0.3s ease;
  padding-bottom: 2px;
}
.navlink:hover{
  border-bottom-width: 1px;
  border-bottom-style: solid; 

}
.hamburger{
  display: none;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  right:40px;
}
.hamburger div{
  width: 40px;
  height: 2px;

  
}

/* RESPONSIVE CODE */
/* ======================
   Responsive Utilities
   ====================== */

   @media (width<800px){
     /* nav code */
     .hamburger{
      display: flex;
     }
  .navlinks{
    display: flex;
    flex-direction: column;
    width: 100vw;
    position: absolute;
    height: auto;
    left: -120%;
top:100%;
    padding: 20px 0;

  }
   }
@media (min-width: 640px) {
 
  /* Spacing - Padding */
  .sm\:p-1 {
    padding: 0.25rem;
  }
  .sm\:p-2 {
    padding: 0.5rem;
  }
  .sm\:p-3 {
    padding: 0.75rem;
  }
  .sm\:p-4 {
    padding: 1rem;
  }
  .sm\:p-5 {
    padding: 1.25rem;
  }

  /* Spacing - Margin */
  .sm\:m-1 {
    margin: 0.25rem;
  }
  .sm\:m-2 {
    margin: 0.5rem;
  }
  .sm\:m-3 {
    margin: 0.75rem;
  }
  .sm\:m-4 {
    margin: 1rem;
  }
  .sm\:m-5 {
    margin: 1.25rem;
  }

  /* Display */
  .sm\:block {
    display: block;
  }
  .sm\:inline-block {
    display: inline-block;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:inline-flex {
    display: inline-flex;
  }
  .sm\:hidden {
    display: none;
  }

  /* Text alignment */
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-center {
    text-align: center;
  }
  .sm\:text-right {
    text-align: right;
  }

  /* Width & Height */
  .sm\:w-full {
    width: 100%;
  }
  .sm\:h-full {
    height: 100%;
  }
  .sm\:w-screen {
    width: 100vw;
  }
  .sm\:h-screen {
    height: 100vh;
  }

  /* Position */
  .sm\:relative {
    position: relative;
  }
  .sm\:absolute {
    position: absolute;
  }
  .sm\:fixed {
    position: fixed;
  }
  .sm\:sticky {
    position: sticky;
  }

  /* Flex Alignment */
  .sm\:items-center {
    align-items: center;
  }
  .sm\:items-start {
    align-items: flex-start;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:justify-center {
    justify-content: center;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .md\:p-1 {
    padding: 0.25rem;
  }
  .md\:p-2 {
    padding: 0.5rem;
  }
  .md\:p-3 {
    padding: 0.75rem;
  }
  .md\:p-4 {
    padding: 1rem;
  }
  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:m-1 {
    margin: 0.25rem;
  }
  .md\:m-2 {
    margin: 0.5rem;
  }
  .md\:m-3 {
    margin: 0.75rem;
  }
  .md\:m-4 {
    margin: 1rem;
  }
  .md\:m-5 {
    margin: 1.25rem;
  }

  .md\:block {
    display: block;
  }
  .md\:inline-block {
    display: inline-block;
  }
  .md\:flex {
    display: flex;
  }
  .md\:inline-flex {
    display: inline-flex;
  }
  .md\:hidden {
    display: none;
  }

  .md\:text-left {
    text-align: left;
  }
  .md\:text-center {
    text-align: center;
  }
  .md\:text-right {
    text-align: right;
  }

  .md\:w-full {
    width: 100%;
  }
  .md\:h-full {
    height: 100%;
  }
  .md\:w-screen {
    width: 100vw;
  }
  .md\:h-screen {
    height: 100vh;
  }

  .md\:relative {
    position: relative;
  }
  .md\:absolute {
    position: absolute;
  }
  .md\:fixed {
    position: fixed;
  }
  .md\:sticky {
    position: sticky;
  }

  .md\:items-center {
    align-items: center;
  }
  .md\:items-start {
    align-items: flex-start;
  }
  .md\:items-end {
    align-items: flex-end;
  }
  .md\:justify-center {
    justify-content: center;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:justify-end {
    justify-content: flex-end;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1024px) {
  .lg\:p-1 {
    padding: 0.25rem;
  }
  .lg\:p-2 {
    padding: 0.5rem;
  }
  .lg\:p-3 {
    padding: 0.75rem;
  }
  .lg\:p-4 {
    padding: 1rem;
  }
  .lg\:p-5 {
    padding: 1.25rem;
  }

  .lg\:m-1 {
    margin: 0.25rem;
  }
  .lg\:m-2 {
    margin: 0.5rem;
  }
  .lg\:m-3 {
    margin: 0.75rem;
  }
  .lg\:m-4 {
    margin: 1rem;
  }
  .lg\:m-5 {
    margin: 1.25rem;
  }

  .lg\:block {
    display: block;
  }
  .lg\:inline-block {
    display: inline-block;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:inline-flex {
    display: inline-flex;
  }
  .lg\:hidden {
    display: none;
  }

  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-center {
    text-align: center;
  }
  .lg\:text-right {
    text-align: right;
  }

  .lg\:w-full {
    width: 100%;
  }
  .lg\:h-full {
    height: 100%;
  }
  .lg\:w-screen {
    width: 100vw;
  }
  .lg\:h-screen {
    height: 100vh;
  }

  .lg\:relative {
    position: relative;
  }
  .lg\:absolute {
    position: absolute;
  }
  .lg\:fixed {
    position: fixed;
  }
  .lg\:sticky {
    position: sticky;
  }

  .lg\:items-center {
    align-items: center;
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:items-end {
    align-items: flex-end;
  }
  .lg\:justify-center {
    justify-content: center;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:justify-end {
    justify-content: flex-end;
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1280px) {
  .xl\:p-1 {
    padding: 0.25rem;
  }
  .xl\:p-2 {
    padding: 0.5rem;
  }
  .xl\:p-3 {
    padding: 0.75rem;
  }
  .xl\:p-4 {
    padding: 1rem;
  }
  .xl\:p-5 {
    padding: 1.25rem;
  }

  .xl\:m-1 {
    margin: 0.25rem;
  }
  .xl\:m-2 {
    margin: 0.5rem;
  }
  .xl\:m-3 {
    margin: 0.75rem;
  }
  .xl\:m-4 {
    margin: 1rem;
  }
  .xl\:m-5 {
    margin: 1.25rem;
  }

  .xl\:block {
    display: block;
  }
  .xl\:inline-block {
    display: inline-block;
  }
  .xl\:flex {
    display: flex;
  }
  .xl\:inline-flex {
    display: inline-flex;
  }
  .xl\:hidden {
    display: none;
  }

  .xl\:text-left {
    text-align: left;
  }
  .xl\:text-center {
    text-align: center;
  }
  .xl\:text-right {
    text-align: right;
  }

  .xl\:w-full {
    width: 100%;
  }
  .xl\:h-full {
    height: 100%;
  }
  .xl\:w-screen {
    width: 100vw;
  }
  .xl\:h-screen {
    height: 100vh;
  }

  .xl\:relative {
    position: relative;
  }
  .xl\:absolute {
    position: absolute;
  }
  .xl\:fixed {
    position: fixed;
  }
  .xl\:sticky {
    position: sticky;
  }

  .xl\:items-center {
    align-items: center;
  }
  .xl\:items-start {
    align-items: flex-start;
  }
  .xl\:items-end {
    align-items: flex-end;
  }
  .xl\:justify-center {
    justify-content: center;
  }
  .xl\:justify-between {
    justify-content: space-between;
  }
  .xl\:justify-end {
    justify-content: flex-end;
  }
}