@import url('https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100..800&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: var(--text-color);
  background: var(--theme-body);
  font-family: "Anek Bangla", sans-serif;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 12px;
}

a { text-decoration: none; color: var(--text-color);}
ul, ol {list-style: none;}
img {max-width: 100%;}
p, a, h1, h2, h3, h4, h5, h6 {line-height: 1.3;}
button {background: none; cursor: pointer; font-family: "Anek Bangla", sans-serif;}

.m-auto {margin: auto;}
.mx-auto {margin: 0 auto;}
.my-auto {margin: auto 0;}

/* height and width */
.w-auto {width: auto;}
.w-fit-content {width: fit-content;}
.w-max-content {width: max-content;}
.w-min-content {width: min-content;}
.h-auto {height: auto;}
.h-fit-content {height: fit-content;}
.h-max-content {height: max-content;}
.h-min-content {height: min-content;}

/* text decoration */
.td-none {text-decoration: none;}
.td-overline {text-decoration: overline;}
.td-through {text-decoration: line-through;}
.td-underline {text-decoration: underline;}
.td-unovline {text-decoration: underline overline;}

/* Cursor */
.pointer {cursor: pointer;}
.c-default {cursor: default;}
.c-grab {cursor: grab;}
.c-grabbing {cursor: grabbing;}
.c-move {cursor: move;}
.c-no-drop {cursor: no-drop;}

/* Overflow */
.overflow-auto {overflow: auto;}
.overflow-visible {overflow: visible;}
.overflow-hidden {overflow: hidden;}
.overflow-scroll {overflow: scroll;}
.overflow-clip {overflow: clip;}
.overflow-x-auto {overflow-x: auto;}
.overflow-x-visible {overflow-x: visible;}
.overflow-x-hidden {overflow-x: hidden;}
.overflow-x-scroll {overflow-x: scroll;}
.overflow-x-clip {overflow-x: clip;}
.overflow-y-auto {overflow-y: auto;}
.overflow-y-visible {overflow-y: visible;}
.overflow-y-hidden {overflow-y: hidden;}
.overflow-y-scroll {overflow-y: scroll;}
.overflow-y-clip {overflow-y: clip;}

/* Visibility */
.visible {visibility: visible;}
.hidden {visibility: hidden;}

/* Resize */
.resize-none {resize: none;}
.resize-both {resize: both;}
.resize-horizontal {resize: horizontal;}
.resize-vertical {resize: vertical;}

/* White Space */
.word-break {word-break: break-all;}
.space-normal {white-space: normal;}
.space-nowrap {white-space: nowrap;}
.space-pre {white-space: pre;}
.space-pre-line	{white-space: pre-line;}

/* border-radius */
.rounded-none {border-radius: 0px;}
.rounded-full {border-radius: 50%;}
.rounded {border-radius: 10px;}


/* heading */
h1, .h1 {font-size: 40px; font-weight: 700; color: var(--text-color);}
h2, .h2 {font-size: 36px; font-weight: 700; color: var(--text-color);}
h3, .h3 {font-size: 32px; font-weight: 600; color: var(--text-color);}
h4, .h4 {font-size: 28px; font-weight: 600; color: var(--text-color);}
h5, .h5 {font-size: 24px; font-weight: 500; color: var(--text-color);}
h6, .h6 {font-size: 20px; font-weight: 500; color: var(--text-color);}

/* font weight */
.fw-100 {font-weight: 100;}
.fw-200 {font-weight: 200;}
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}
.fw-900 {font-weight: 900;}

/* text align */
.text-left {text-align: left;}
.text-start {text-align: start;}
.text-right {text-align: right;}
.text-end {text-align: end;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}
.lowercase {text-transform: lowercase;}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}

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

/* Display */
.none {display: none;}
.inline {display: inline;}
.block {display: block;}
.inline-block {display: inline-block;}
.contents {display: contents;}
.flex {display: flex;}
.inline-flex {display: inline-flex;}
.grid {display: grid;}
.inline-grid{display: inline-grid;}

/* flex properties */
.wrap {flex-wrap: wrap;}
.nowrap {flex-wrap: nowrap;}
.flex-col {flex-direction: column;}
.flex-row {flex-direction: row;}
.flex-row-reverse {flex-direction: row-reverse;}
.flex-col-reverse {flex-direction: column-reverse;}

.items-start {align-items: start;}
.items-end {align-items: end;}
.items-center {align-items: center;}

.justify-start {justify-content: start;}
.justify-end {justify-content: end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
.justify-evenly {justify-content: space-evenly;}

.flex-items-center {display: flex; align-items: center;}
.flex-start {display: flex; align-items: center; justify-content: start;}
.flex-end {display: flex; align-items: center; justify-content: end;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-between {display: flex; align-items: center; justify-content: space-between;}
.flex-around {display: flex; align-items: center; justify-content: space-around;}
.flex-evenly {display: flex; align-items: center; justify-content: space-evenly;}

/* row and col css */
.row {display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--row-gap-y)); margin-right: calc(-0.5 * var(--row-gap-x)); margin-left: calc(-0.5 * var(--row-gap-x));}
.row>* {flex-shrink: 0; max-width: 100%; margin-top: var(--row-gap-y); padding-right: calc(var(--row-gap-x) * 0.5); padding-left: calc(var(--row-gap-x) * 0.5);}

.col {flex: 1 0 0%;}
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* display grid columns */
.grid-1 {display: grid;}
.grid-2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));}
.grid-9 {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));}
.grid-10 {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));}
.grid-11 {display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));}
.grid-12 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));}

.span-1 { grid-column: span 1;}
.span-2 { grid-column: span 2;}
.span-3 { grid-column: span 3;}
.span-4 { grid-column: span 4;}
.span-5 { grid-column: span 5;}
.span-6 { grid-column: span 6;}
.span-7 { grid-column: span 7;}
.span-8 { grid-column: span 8;}
.span-9 { grid-column: span 9;}
.span-10 { grid-column: span 10;}
.span-11 { grid-column: span 11;}
.span-12 { grid-column: span 12;}


/* Breakpoints for responsive design */

@media (min-width: 600px) {
  /* heading */
  .md\:h1 {font-size: 40px; font-weight: 700; color: var(--text-color);}
  .md\:h2 {font-size: 36px; font-weight: 700; color: var(--text-color);}
  .md\:h3 {font-size: 32px; font-weight: 600; color: var(--text-color);}
  .md\:h4 {font-size: 28px; font-weight: 600; color: var(--text-color);}
  .md\:h5 {font-size: 24px; font-weight: 500; color: var(--text-color);}
  .md\:h6 {font-size: 20px; font-weight: 500; color: var(--text-color);}

  /* font weight */
  .md\:fw-100 {font-weight: 100;}
  .md\:fw-200 {font-weight: 200;}
  .md\:fw-300 {font-weight: 300;}
  .md\:fw-400 {font-weight: 400;}
  .md\:fw-500 {font-weight: 500;}
  .md\:fw-600 {font-weight: 600;}
  .md\:fw-700 {font-weight: 700;}
  .md\:fw-800 {font-weight: 800;}
  .md\:fw-900 {font-weight: 900;}

  /* text align */
  .md\:text-left {text-align: left;}
  .md\:text-start {text-align: start;}
  .md\:text-right {text-align: right;}
  .md\:text-end {text-align: end;}
  .md\:text-center {text-align: center;}
  .md\:text-justify {text-align: justify;}
  .md\:lowercase {text-transform: lowercase;}
  .md\:uppercase {text-transform: uppercase;}
  .md\:capitalize {text-transform: capitalize;}

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

  /* Display */
  .md\:none {display: none;}
  .md\:inline {display: inline;}
  .md\:block {display: block;}
  .md\:inline-block {display: inline-block;}
  .md\:contents {display: contents;}
  .md\:flex {display: flex;}
  .md\:inline-flex {display: inline-flex;}
  .md\:grid {display: grid;}
  .md\:inline-grid{display: inline-grid;}

  /* flex properties */
  .md\:wrap {flex-wrap: wrap;}
  .md\:nowrap {flex-wrap: nowrap;}
  .md\:flex-col {flex-direction: column;}
  .md\:flex-row {flex-direction: row;}
  .md\:flex-row-reverse {flex-direction: row-reverse;}
  .md\:flex-col-reverse {flex-direction: column-reverse;}

  .md\:items-start {align-items: start;}
  .md\:items-end {align-items: end;}
  .md\:items-center {align-items: center;}

  .md\:justify-start {justify-content: start;}
  .md\:justify-end {justify-content: end;}
  .md\:justify-center {justify-content: center;}
  .md\:justify-between {justify-content: space-between;}
  .md\:justify-around {justify-content: space-around;}
  .md\:justify-evenly {justify-content: space-evenly;}

  .md\:flex-items-center {display: flex; align-items: center;}
  .md\:flex-start {display: flex; align-items: center; justify-content: start;}
  .md\:flex-end {display: flex; align-items: center; justify-content: end;}
  .md\:flex-center {display: flex; align-items: center; justify-content: center;}
  .md\:flex-between {display: flex; align-items: center; justify-content: space-between;}
  .md\:flex-around {display: flex; align-items: center; justify-content: space-around;}
  .md\:flex-evenly {display: flex; align-items: center; justify-content: space-evenly;}

  /* col */
  .md\:col { flex: 1 0 0%; }
  .md\:col-auto { flex: 0 0 auto; width: auto; }
  .md\:col-1 { flex: 0 0 auto; width: 8.333333%; }
  .md\:col-2 { flex: 0 0 auto; width: 16.666667%; }
  .md\:col-3 { flex: 0 0 auto; width: 25%; }
  .md\:col-4 { flex: 0 0 auto; width: 33.333333%; }
  .md\:col-5 { flex: 0 0 auto; width: 41.666667%; }
  .md\:col-6 { flex: 0 0 auto; width: 50%; }
  .md\:col-7 { flex: 0 0 auto; width: 58.333333%; }
  .md\:col-8 { flex: 0 0 auto; width: 66.666667%; }
  .md\:col-9 { flex: 0 0 auto; width: 75%; }
  .md\:col-10 { flex: 0 0 auto; width: 83.333333%; }
  .md\:col-11 { flex: 0 0 auto; width: 91.666667%; }
  .md\:col-12 { flex: 0 0 auto; width: 100%; }

  /* display grid columns */
  .md\:grid-1 {display: grid;}
  .md\:grid-2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
  .md\:grid-3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
  .md\:grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
  .md\:grid-5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));}
  .md\:grid-6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));}
  .md\:grid-7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));}
  .md\:grid-8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));}
  .md\:grid-9 {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));}
  .md\:grid-10 {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));}
  .md\:grid-11 {display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));}
  .md\:grid-12 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));}

  /* grid col span */
  .md\:span-1 { grid-column: span 1;}
  .md\:span-2 { grid-column: span 2;}
  .md\:span-3 { grid-column: span 3;}
  .md\:span-4 { grid-column: span 4;}
  .md\:span-5 { grid-column: span 5;}
  .md\:span-6 { grid-column: span 6;}
  .md\:span-7 { grid-column: span 7;}
  .md\:span-8 { grid-column: span 8;}
  .md\:span-9 { grid-column: span 9;}
  .md\:span-10 { grid-column: span 10;}
  .md\:span-11 { grid-column: span 11;}
  .md\:span-12 { grid-column: span 12;}
}

@media (min-width: 900px) {
  /* heading */
  .lg\:h1 {font-size: 40px; font-weight: 700; color: var(--text-color);}
  .lg\:h2 {font-size: 36px; font-weight: 700; color: var(--text-color);}
  .lg\:h3 {font-size: 32px; font-weight: 600; color: var(--text-color);}
  .lg\:h4 {font-size: 28px; font-weight: 600; color: var(--text-color);}
  .lg\:h5 {font-size: 24px; font-weight: 500; color: var(--text-color);}
  .lg\:h6 {font-size: 20px; font-weight: 500; color: var(--text-color);}

  /* font weight */
  .lg\:fw-100 {font-weight: 100;}
  .lg\:fw-200 {font-weight: 200;}
  .lg\:fw-300 {font-weight: 300;}
  .lg\:fw-400 {font-weight: 400;}
  .lg\:fw-500 {font-weight: 500;}
  .lg\:fw-600 {font-weight: 600;}
  .lg\:fw-700 {font-weight: 700;}
  .lg\:fw-800 {font-weight: 800;}
  .lg\:fw-900 {font-weight: 900;}

  /* text align */
  .lg\:text-left {text-align: left;}
  .lg\:text-start {text-align: start;}
  .lg\:text-right {text-align: right;}
  .lg\:text-end {text-align: end;}
  .lg\:text-center {text-align: center;}
  .lg\:text-justify {text-align: justify;}
  .lg\:lowercase {text-transform: lowercase;}
  .lg\:uppercase {text-transform: uppercase;}
  .lg\:capitalize {text-transform: capitalize;}

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

  /* Display */
  .lg\:none {display: none;}
  .lg\:inline {display: inline;}
  .lg\:block {display: block;}
  .lg\:inline-block {display: inline-block;}
  .lg\:contents {display: contents;}
  .lg\:flex {display: flex;}
  .lg\:inline-flex {display: inline-flex;}
  .lg\:grid {display: grid;}
  .lg\:inline-grid{display: inline-grid;}

  /* flex properties */
  .lg\:wrap {flex-wrap: wrap;}
  .lg\:nowrap {flex-wrap: nowrap;}
  .lg\:flex-col {flex-direction: column;}
  .lg\:flex-row {flex-direction: row;}
  .lg\:flex-row-reverse {flex-direction: row-reverse;}
  .lg\:flex-col-reverse {flex-direction: column-reverse;}

  .lg\:items-start {align-items: start;}
  .lg\:items-end {align-items: end;}
  .lg\:items-center {align-items: center;}

  .lg\:justify-start {justify-content: start;}
  .lg\:justify-end {justify-content: end;}
  .lg\:justify-center {justify-content: center;}
  .lg\:justify-between {justify-content: space-between;}
  .lg\:justify-around {justify-content: space-around;}
  .lg\:justify-evenly {justify-content: space-evenly;}

  .lg\:flex-items-center {display: flex; align-items: center;}
  .lg\:flex-start {display: flex; align-items: center; justify-content: start;}
  .lg\:flex-end {display: flex; align-items: center; justify-content: end;}
  .lg\:flex-center {display: flex; align-items: center; justify-content: center;}
  .lg\:flex-between {display: flex; align-items: center; justify-content: space-between;}
  .lg\:flex-around {display: flex; align-items: center; justify-content: space-around;}
  .lg\:flex-evenly {display: flex; align-items: center; justify-content: space-evenly;}

  /* col */
  .lg\:col { flex: 1 0 0%; }
  .lg\:col-auto { flex: 0 0 auto; width: auto; }
  .lg\:col-1 { flex: 0 0 auto; width: 8.333333%; }
  .lg\:col-2 { flex: 0 0 auto; width: 16.666667%; }
  .lg\:col-3 { flex: 0 0 auto; width: 25%; }
  .lg\:col-4 { flex: 0 0 auto; width: 33.333333%; }
  .lg\:col-5 { flex: 0 0 auto; width: 41.666667%; }
  .lg\:col-6 { flex: 0 0 auto; width: 50%; }
  .lg\:col-7 { flex: 0 0 auto; width: 58.333333%; }
  .lg\:col-8 { flex: 0 0 auto; width: 66.666667%; }
  .lg\:col-9 { flex: 0 0 auto; width: 75%; }
  .lg\:col-10 { flex: 0 0 auto; width: 83.333333%; }
  .lg\:col-11 { flex: 0 0 auto; width: 91.666667%; }
  .lg\:col-12 { flex: 0 0 auto; width: 100%; }

  /* display grid columns */
  .lg\:grid-1 {display: grid;}
  .lg\:grid-2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
  .lg\:grid-3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
  .lg\:grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
  .lg\:grid-5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));}
  .lg\:grid-6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));}
  .lg\:grid-7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));}
  .lg\:grid-8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));}
  .lg\:grid-9 {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));}
  .lg\:grid-10 {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));}
  .lg\:grid-11 {display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));}
  .lg\:grid-12 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));}

  /* grid col span */
  .lg\:span-1 { grid-column: span 1;}
  .lg\:span-2 { grid-column: span 2;}
  .lg\:span-3 { grid-column: span 3;}
  .lg\:span-4 { grid-column: span 4;}
  .lg\:span-5 { grid-column: span 5;}
  .lg\:span-6 { grid-column: span 6;}
  .lg\:span-7 { grid-column: span 7;}
  .lg\:span-8 { grid-column: span 8;}
  .lg\:span-9 { grid-column: span 9;}
  .lg\:span-10 { grid-column: span 10;}
  .lg\:span-11 { grid-column: span 11;}
  .lg\:span-12 { grid-column: span 12;}
}

@media (min-width: 1200px) {
  /* heading */
  .xl\:h1 {font-size: 40px; font-weight: 700; color: var(--text-color);}
  .xl\:h2 {font-size: 36px; font-weight: 700; color: var(--text-color);}
  .xl\:h3 {font-size: 32px; font-weight: 600; color: var(--text-color);}
  .xl\:h4 {font-size: 28px; font-weight: 600; color: var(--text-color);}
  .xl\:h5 {font-size: 24px; font-weight: 500; color: var(--text-color);}
  .xl\:h6 {font-size: 20px; font-weight: 500; color: var(--text-color);}

  /* font weight */
  .xl\:fw-100 {font-weight: 100;}
  .xl\:fw-200 {font-weight: 200;}
  .xl\:fw-300 {font-weight: 300;}
  .xl\:fw-400 {font-weight: 400;}
  .xl\:fw-500 {font-weight: 500;}
  .xl\:fw-600 {font-weight: 600;}
  .xl\:fw-700 {font-weight: 700;}
  .xl\:fw-800 {font-weight: 800;}
  .xl\:fw-900 {font-weight: 900;}

  /* text align */
  .xl\:text-left {text-align: left;}
  .xl\:text-start {text-align: start;}
  .xl\:text-right {text-align: right;}
  .xl\:text-end {text-align: end;}
  .xl\:text-center {text-align: center;}
  .xl\:text-justify {text-align: justify;}
  .xl\:lowercase {text-transform: lowercase;}
  .xl\:uppercase {text-transform: uppercase;}
  .xl\:capitalize {text-transform: capitalize;}

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

  /* Display */
  .xl\:none {display: none;}
  .xl\:inline {display: inline;}
  .xl\:block {display: block;}
  .xl\:inline-block {display: inline-block;}
  .xl\:contents {display: contents;}
  .xl\:flex {display: flex;}
  .xl\:inline-flex {display: inline-flex;}
  .xl\:grid {display: grid;}
  .xl\:inline-grid{display: inline-grid;}

  /* flex properties */
  .xl\:wrap {flex-wrap: wrap;}
  .xl\:nowrap {flex-wrap: nowrap;}
  .xl\:flex-col {flex-direction: column;}
  .xl\:flex-row {flex-direction: row;}
  .xl\:flex-row-reverse {flex-direction: row-reverse;}
  .xl\:flex-col-reverse {flex-direction: column-reverse;}

  .xl\:items-start {align-items: start;}
  .xl\:items-end {align-items: end;}
  .xl\:items-center {align-items: center;}

  .xl\:justify-start {justify-content: start;}
  .xl\:justify-end {justify-content: end;}
  .xl\:justify-center {justify-content: center;}
  .xl\:justify-between {justify-content: space-between;}
  .xl\:justify-around {justify-content: space-around;}
  .xl\:justify-evenly {justify-content: space-evenly;}

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

  /* col */
  .xl\:col { flex: 1 0 0%; }
  .xl\:col-auto { flex: 0 0 auto; width: auto; }
  .xl\:col-1 { flex: 0 0 auto; width: 8.333333%; }
  .xl\:col-2 { flex: 0 0 auto; width: 16.666667%; }
  .xl\:col-3 { flex: 0 0 auto; width: 25%; }
  .xl\:col-4 { flex: 0 0 auto; width: 33.333333%; }
  .xl\:col-5 { flex: 0 0 auto; width: 41.666667%; }
  .xl\:col-6 { flex: 0 0 auto; width: 50%; }
  .xl\:col-7 { flex: 0 0 auto; width: 58.333333%; }
  .xl\:col-8 { flex: 0 0 auto; width: 66.666667%; }
  .xl\:col-9 { flex: 0 0 auto; width: 75%; }
  .xl\:col-10 { flex: 0 0 auto; width: 83.333333%; }
  .xl\:col-11 { flex: 0 0 auto; width: 91.666667%; }
  .xl\:col-12 { flex: 0 0 auto; width: 100%; }

  /* display grid columns */
  .xl\:grid-1 {display: grid;}
  .xl\:grid-2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
  .xl\:grid-3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
  .xl\:grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
  .xl\:grid-5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));}
  .xl\:grid-6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));}
  .xl\:grid-7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));}
  .xl\:grid-8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));}
  .xl\:grid-9 {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));}
  .xl\:grid-10 {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));}
  .xl\:grid-11 {display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));}
  .xl\:grid-12 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));}

  /* grid col span */
  .xl\:span-1 { grid-column: span 1;}
  .xl\:span-2 { grid-column: span 2;}
  .xl\:span-3 { grid-column: span 3;}
  .xl\:span-4 { grid-column: span 4;}
  .xl\:span-5 { grid-column: span 5;}
  .xl\:span-6 { grid-column: span 6;}
  .xl\:span-7 { grid-column: span 7;}
  .xl\:span-8 { grid-column: span 8;}
  .xl\:span-9 { grid-column: span 9;}
  .xl\:span-10 { grid-column: span 10;}
  .xl\:span-11 { grid-column: span 11;}
  .xl\:span-12 { grid-column: span 12;}
}

@media (max-width: 399px) {
  /* heading */
  .xs\:h1 {font-size: 40px; font-weight: 700; color: var(--text-color);}
  .xs\:h2 {font-size: 36px; font-weight: 700; color: var(--text-color);}
  .xs\:h3 {font-size: 32px; font-weight: 600; color: var(--text-color);}
  .xs\:h4 {font-size: 28px; font-weight: 600; color: var(--text-color);}
  .xs\:h5 {font-size: 24px; font-weight: 500; color: var(--text-color);}
  .xs\:h6 {font-size: 20px; font-weight: 500; color: var(--text-color);}

  /* font weight */
  .xs\:fw-100 {font-weight: 100;}
  .xs\:fw-200 {font-weight: 200;}
  .xs\:fw-300 {font-weight: 300;}
  .xs\:fw-400 {font-weight: 400;}
  .xs\:fw-500 {font-weight: 500;}
  .xs\:fw-600 {font-weight: 600;}
  .xs\:fw-700 {font-weight: 700;}
  .xs\:fw-800 {font-weight: 800;}
  .xs\:fw-900 {font-weight: 900;}

  /* text align */
  .xs\:text-left {text-align: left;}
  .xs\:text-start {text-align: start;}
  .xs\:text-right {text-align: right;}
  .xs\:text-end {text-align: end;}
  .xs\:text-center {text-align: center;}
  .xs\:text-justify {text-align: justify;}
  .xs\:lowercase {text-transform: lowercase;}
  .xs\:uppercase {text-transform: uppercase;}
  .xs\:capitalize {text-transform: capitalize;}

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

  /* Display */
  .xs\:none {display: none;}
  .xs\:inline {display: inline;}
  .xs\:block {display: block;}
  .xs\:inline-block {display: inline-block;}
  .xs\:contents {display: contents;}
  .xs\:flex {display: flex;}
  .xs\:inline-flex {display: inline-flex;}
  .xs\:grid {display: grid;}
  .xs\:inline-grid{display: inline-grid;}

  /* flex properties */
  .xs\:wrap {flex-wrap: wrap;}
  .xs\:nowrap {flex-wrap: nowrap;}
  .xs\:flex-col {flex-direction: column;}
  .xs\:flex-row {flex-direction: row;}
  .xs\:flex-row-reverse {flex-direction: row-reverse;}
  .xs\:flex-col-reverse {flex-direction: column-reverse;}

  .xs\:items-start {align-items: start;}
  .xs\:items-end {align-items: end;}
  .xs\:items-center {align-items: center;}

  .xs\:justify-start {justify-content: start;}
  .xs\:justify-end {justify-content: end;}
  .xs\:justify-center {justify-content: center;}
  .xs\:justify-between {justify-content: space-between;}
  .xs\:justify-around {justify-content: space-around;}
  .xs\:justify-evenly {justify-content: space-evenly;}

  .xs\:flex-items-center {display: flex; align-items: center;}
  .xs\:flex-start {display: flex; align-items: center; justify-content: start;}
  .xs\:flex-end {display: flex; align-items: center; justify-content: end;}
  .xs\:flex-center {display: flex; align-items: center; justify-content: center;}
  .xs\:flex-between {display: flex; align-items: center; justify-content: space-between;}
  .xs\:flex-around {display: flex; align-items: center; justify-content: space-around;}
  .xs\:flex-evenly {display: flex; align-items: center; justify-content: space-evenly;}

  /* col */
  .xs\:col { flex: 1 0 0%; }
  .xs\:col-auto { flex: 0 0 auto; width: auto; }
  .xs\:col-1 { flex: 0 0 auto; width: 8.333333%; }
  .xs\:col-2 { flex: 0 0 auto; width: 16.666667%; }
  .xs\:col-3 { flex: 0 0 auto; width: 25%; }
  .xs\:col-4 { flex: 0 0 auto; width: 33.333333%; }
  .xs\:col-5 { flex: 0 0 auto; width: 41.666667%; }
  .xs\:col-6 { flex: 0 0 auto; width: 50%; }
  .xs\:col-7 { flex: 0 0 auto; width: 58.333333%; }
  .xs\:col-8 { flex: 0 0 auto; width: 66.666667%; }
  .xs\:col-9 { flex: 0 0 auto; width: 75%; }
  .xs\:col-10 { flex: 0 0 auto; width: 83.333333%; }
  .xs\:col-11 { flex: 0 0 auto; width: 91.666667%; }
  .xs\:col-12 { flex: 0 0 auto; width: 100%; }

  /* display grid columns */
  .xs\:grid-1 {display: grid;}
  .xs\:grid-2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
  .xs\:grid-3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
  .xs\:grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));}
  .xs\:grid-5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));}
  .xs\:grid-6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));}
  .xs\:grid-7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));}
  .xs\:grid-8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));}
  .xs\:grid-9 {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));}
  .xs\:grid-10 {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));}
  .xs\:grid-11 {display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));}
  .xs\:grid-12 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));}

  /* grid col span */
  .xs\:span-1 { grid-column: span 1;}
  .xs\:span-2 { grid-column: span 2;}
  .xs\:span-3 { grid-column: span 3;}
  .xs\:span-4 { grid-column: span 4;}
  .xs\:span-5 { grid-column: span 5;}
  .xs\:span-6 { grid-column: span 6;}
  .xs\:span-7 { grid-column: span 7;}
  .xs\:span-8 { grid-column: span 8;}
  .xs\:span-9 { grid-column: span 9;}
  .xs\:span-10 { grid-column: span 10;}
  .xs\:span-11 { grid-column: span 11;}
  .xs\:span-12 { grid-column: span 12;}
}