@import url('https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100..800&display=swap');
/**** Global Css ****/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-optical-sizing: auto;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    font-size: 100%;
    box-sizing: inherit;
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}

body {
    box-sizing: border-box;
    font-family: "Anek Bangla", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #090B0E;
    /* background: #F6F8F9; */
    background: #fff;
    overflow-x: hidden;
    height: -webkit-fill-available;
}

.container-sm {width: 100%; max-width: 1000px; height: auto; margin: 0 auto; padding: 0 1.25rem;}
.container {width: 100%; max-width: 1200px; height: auto; margin: 0 auto; padding: 0 8px;}
.container-md {width: 100%; max-width: 1400px; height: auto; margin: 0 auto; padding: 0 1.25rem;}
.container-full {max-width: 100%; height: auto; margin: 0 auto;}
.section {padding: 1rem 1.25rem 1rem;}

h1, .h1 {font-size: 32px; line-height: 1.2; font-weight: 700;}
h2, .h2 {font-size: 28px; line-height: 1.2; font-weight: 700;}
h3, .h3 {font-size: 24px; line-height: 1.2; font-weight: 600;}
h4, .h4 {font-size: 20px; line-height: 1.2; font-weight: 600;}
h5, .h5 {font-size: 16px; line-height: 1.2; font-weight: 500;}
h6, .h6 {font-size: 12px; line-height: 1.2; font-weight: 500;}

p {color: #77787B;}

b {font-weight: bold;}
u {text-decoration: underline;}
ul {list-style: none;}
a {text-decoration: none; line-height: normal;}
img {max-width: 100%;}

/* 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;}
.italic {font-style: italic;}
.normal {font-style: normal;}

/* text align */
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.justify {text-align: justify;}
.lowercase {text-transform: lowercase;}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}
.muted {color: var(--color-muted);}
.middle {vertical-align: middle;}

/* 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;}

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

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

/* Display */
.none {display: none !important;}
.flex {display: flex;}
.inline-flex {display: inline-flex;}
.grid {display: grid;}
.block {display: block;}
.inline {display: inline;}
.inline-block {display: inline-block;}
.flex-start {display: flex; align-items: center; justify-content: start; text-align: start;}
.flex-end {display: flex; align-items: center; justify-content: end; text-align: end;}
.flex-center {display: flex; align-items: center; justify-content: center; text-align: 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;}

/* display flex direction */
.wrap {flex-wrap: wrap;}
.nowrap {flex-wrap: nowrap;}
.grow {flex-grow: 1;}
.shrink {flex-shrink: 1;}
.flex-col {flex-direction: column;}
.flex-row {flex-direction: row;}
.flex-row-reverse {flex-direction: row-reverse;}
.flex-col-reverse {flex-direction: column-reverse;}

/* justify content: for flex */
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-around {justify-content: space-around;}
.justify-evenly {justify-content: space-evenly;}

/* align items: for flex */
.items-start {align-items: flex-start;}
.items-end {align-items: flex-end;}
.items-center {align-items: center;}
.items-baseline {align-items: baseline;}

/* Justify Items: for grid */
.justify-items-start {justify-items: start;}
.justify-items-end {justify-items: end;}
.justify-items-center {justify-items: center;}

/* 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;}

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

/* row col */
.row {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}

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

/* display grid columns */
.grid-1 {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.8rem;}
.grid-2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem;}
.grid-3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem;}
.grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem;}
.grid-5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.8rem;}
.grid-6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.8rem;}
.grid-7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.8rem;}
.grid-8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.8rem;}
.grid-9 {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1.8rem;}
.grid-10 {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1.8rem;}
.grid-11 {display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 1.8rem;}
.grid-12 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}
.grid-row {grid-auto-flow: row;}
.grid-col {grid-auto-flow: column;}

/* 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-sm {border-radius: 4px;}
.rounded {border-radius: 8px;}
.rounded-md {border-radius: 12px;}
.rounded-lg {border-radius: 16px;}
.rounded-xl {border-radius: 20px;}
.rounded-2xl {border-radius: 24px;}
.rounded-3xl {border-radius: 28px;}
.rounded-t {border-radius: 8px 8px 0px 0px;}
.rounded-b {border-radius: 0px 0px 8px 8px;}
.rounded-l {border-radius: 8px 0px 0px 8px;}
.rounded-r {border-radius: 0px 8px 8px 0px;}

/* box shadow */
.shadow {box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);}
.shadow-md {box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);}
.shadow-lg {box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);}
.shadow-xl {box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}


/* Breakpoints for responsive design */
@media only screen and (min-width: 768px) { /* Small devices (sm) */
    
    .section {
        padding: 6rem 1.25rem 1rem;
    }

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

    /* text align */
    .sm\:center {text-align: center;}
    .sm\:left {text-align: left;}
    .sm\:right {text-align: right;}
    .sm\:justify {text-align: justify;}
    .sm\:lowercase {text-transform: lowercase;}
    .sm\:uppercase {text-transform: uppercase;}
    .sm\:capitalize {text-transform: capitalize;}
    .sm\:muted {color: var(--color-muted);}
    .sm\:middle {vertical-align: middle;}

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

    /* Visibility */
    .sm\:visible {visibility: visible;}
    .sm\:hidden {visibility: hidden;}
    .sm\:collapse {visibility: collapse;}

    /* Display */
    .sm\:none {display: none !important;}
    .sm\:flex {display: flex;}
    .sm\:inline-flex {display: inline-flex;}
    .sm\:grid {display: grid;}
    .sm\:block {display: block !important;}
    .sm\:inline {display: inline;}
    .sm\:inline-block {display: inline-block;}
    .sm\:flex-start {display: flex; align-items: center; justify-content: start; text-align: start;}
    .sm\:flex-end {display: flex; align-items: center; justify-content: end; text-align: end;}
    .sm\:flex-center {display: flex; align-items: center; justify-content: center; text-align: center;}
    .sm\:flex-between {display: flex; align-items: center; justify-content: space-between;}
    .sm\:flex-around {display: flex; align-items: center; justify-content: space-around;}
    .sm\:flex-evenly {display: flex; align-items: center; justify-content: space-evenly;}

    /* display flex direction */
    .sm\:wrap {flex-wrap: wrap;}
    .sm\:nowrap {flex-wrap: nowrap;}
    .sm\:grow {flex-grow: 1;}
    .sm\:shrink {flex-shrink: 1;}
    .sm\:flex-col {flex-direction: column;}
    .sm\:flex-row {flex-direction: row;}
    .sm\:flex-row-reverse {flex-direction: row-reverse;}
    .sm\:flex-col-reverse {flex-direction: column-reverse;}

    /* justify content: for flex */
    .sm\:justify-start {justify-content: flex-start;}
    .sm\:justify-end {justify-content: flex-end;}
    .sm\:justify-center {justify-content: center;}
    .sm\:justify-between {justify-content: space-between;}
    .sm\:justify-around {justify-content: space-around;}
    .sm\:justify-evenly {justify-content: space-evenly;}

    /* align items: for flex */
    .sm\:items-start {align-items: flex-start;}
    .sm\:items-end {align-items: flex-end;}
    .sm\:items-center {align-items: center;}
    .sm\:items-baseline {align-items: baseline;}

    /* Justify Items: for grid */
    .sm\:justify-items-start {justify-items: start;}
    .sm\:justify-items-end {justify-items: end;}
    .sm\:justify-items-center {justify-items: center;}

    /* row and col-span */
    .sm\:row {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}

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

    /* display grid columns */
    .sm\:grid-1 {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-9 {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-10 {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-11 {display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-12 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}
    .sm\:grid-row {grid-auto-flow: row;}
    .sm\:grid-col {grid-auto-flow: column;}
}

@media only screen and (min-width: 1080px) {/* Medium devices (md) */
    /* 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;}
    .md\:italic {font-style: italic;}
    .md\:normal {font-style: normal;}

    /* text align */
    .md\:center {text-align: center;}
    .md\:left {text-align: left;}
    .md\:right {text-align: right;}
    .md\:justify {text-align: justify;}
    .md\:lowercase {text-transform: lowercase;}
    .md\:uppercase {text-transform: uppercase;}
    .md\:capitalize {text-transform: capitalize;}
    .md\:muted {color: var(--color-muted);}
    .md\:middle {vertical-align: middle;}

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

    /* Visibility */
    .md\:visible {visibility: visible;}
    .md\:hidden {visibility: hidden;}
    .md\:collapse {visibility: collapse;}

    /* Display */
    .md\:none {display: none !important;}
    .md\:flex {display: flex;}
    .md\:inline-flex {display: inline-flex;}
    .md\:grid {display: grid;}
    .md\:block {display: block !important;}
    .md\:inline {display: inline;}
    .md\:inline-block {display: inline-block;}
    .md\:flex-start {display: flex; align-items: center; justify-content: start; text-align: start;}
    .md\:flex-end {display: flex; align-items: center; justify-content: end; text-align: end;}
    .md\:flex-center {display: flex; align-items: center; justify-content: center; text-align: 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;}

    /* display flex direction */
    .md\:wrap {flex-wrap: wrap;}
    .md\:nowrap {flex-wrap: nowrap;}
    .md\:grow {flex-grow: 1;}
    .md\:shrink {flex-shrink: 1;}
    .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;}

    /* justify content: for flex */
    .md\:justify-start {justify-content: flex-start;}
    .md\:justify-end {justify-content: flex-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;}

    /* align items: for flex */
    .md\:items-start {align-items: flex-start;}
    .md\:items-end {align-items: flex-end;}
    .md\:items-center {align-items: center;}
    .md\:items-baseline {align-items: baseline;}

    /* Justify Items: for grid */
    .md\:justify-items-start {justify-items: start;}
    .md\:justify-items-end {justify-items: end;}
    .md\:justify-items-center {justify-items: center;}

    /* row and col-span */
    .md\:row {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}

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

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

@media only screen and (min-width: 1280px) { /* Large devices (lg) */
    /* 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;}
    .lg\:italic {font-style: italic;}
    .lg\:normal {font-style: normal;}

    /* text align */
    .lg\:center {text-align: center;}
    .lg\:left {text-align: left;}
    .lg\:right {text-align: right;}
    .lg\:justify {text-align: justify;}
    .lg\:lowercase {text-transform: lowercase;}
    .lg\:uppercase {text-transform: uppercase;}
    .lg\:capitalize {text-transform: capitalize;}
    .lg\:muted {color: var(--color-muted);}
    .lg\:middle {vertical-align: middle;}

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

    /* Visibility */
    .lg\:visible {visibility: visible;}
    .lg\:hidden {visibility: hidden;}
    .lg\:collapse {visibility: collapse;}

    /* Display */
    .lg\:none {display: none !important;}
    .lg\:flex {display: flex;}
    .lg\:inline-flex {display: inline-flex;}
    .lg\:grid {display: grid;}
    .lg\:block {display: block !important;}
    .lg\:inline {display: inline;}
    .lg\:inline-block {display: inline-block;}
    .lg\:flex-start {display: flex; align-items: center; justify-content: start; text-align: start;}
    .lg\:flex-end {display: flex; align-items: center; justify-content: end; text-align: end;}
    .lg\:flex-center {display: flex; align-items: center; justify-content: center; text-align: 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;}

    /* display flex direction */
    .lg\:wrap {flex-wrap: wrap;}
    .lg\:nowrap {flex-wrap: nowrap;}
    .lg\:grow {flex-grow: 1;}
    .lg\:shrink {flex-shrink: 1;}
    .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;}

    /* justify content: for flex */
    .lg\:justify-start {justify-content: flex-start;}
    .lg\:justify-end {justify-content: flex-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;}

    /* align items: for flex */
    .lg\:items-start {align-items: flex-start;}
    .lg\:items-end {align-items: flex-end;}
    .lg\:items-center {align-items: center;}
    .lg\:items-baseline {align-items: baseline;}

    /* Justify Items: for grid */
    .lg\:justify-items-start {justify-items: start;}
    .lg\:justify-items-end {justify-items: end;}
    .lg\:justify-items-center {justify-items: center;}

    /* row and col-span */
    .lg\:row {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}

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

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

@media only screen and (min-width: 1480px) {/* Extra large devices (xl) */
    /* 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;}
    .xl\:italic {font-style: italic;}
    .xl\:normal {font-style: normal;}

    /* text align */
    .xl\:center {text-align: center;}
    .xl\:left {text-align: left;}
    .xl\:right {text-align: right;}
    .xl\:justify {text-align: justify;}
    .xl\:lowercase {text-transform: lowercase;}
    .xl\:uppercase {text-transform: uppercase;}
    .xl\:capitalize {text-transform: capitalize;}
    .xl\:muted {color: var(--color-muted);}
    .xl\:middle {vertical-align: middle;}

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

    /* Visibility */
    .xl\:visible {visibility: visible;}
    .xl\:hidden {visibility: hidden;}
    .xl\:collapse {visibility: collapse;}

    /* Display */
    .xl\:none {display: none !important;}
    .xl\:flex {display: flex;}
    .xl\:inline-flex {display: inline-flex;}
    .xl\:grid {display: grid;}
    .xl\:block {display: block !important;}
    .xl\:inline {display: inline;}
    .xl\:inline-block {display: inline-block;}
    .xl\:flex-start {display: flex; align-items: center; justify-content: start; text-align: start;}
    .xl\:flex-end {display: flex; align-items: center; justify-content: end; text-align: end;}
    .xl\:flex-center {display: flex; align-items: center; justify-content: center; text-align: 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;}

    /* display flex direction */
    .xl\:wrap {flex-wrap: wrap;}
    .xl\:nowrap {flex-wrap: nowrap;}
    .xl\:grow {flex-grow: 1;}
    .xl\:shrink {flex-shrink: 1;}
    .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;}

    /* justify content: for flex */
    .xl\:justify-start {justify-content: flex-start;}
    .xl\:justify-end {justify-content: flex-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;}

    /* align items: for flex */
    .xl\:items-start {align-items: flex-start;}
    .xl\:items-end {align-items: flex-end;}
    .xl\:items-center {align-items: center;}
    .xl\:items-baseline {align-items: baseline;}

    /* Justify Items: for grid */
    .xl\:justify-items-start {justify-items: start;}
    .xl\:justify-items-end {justify-items: end;}
    .xl\:justify-items-center {justify-items: center;}

    /* row and col-span */
    .xl\:row {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}

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

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

@media only screen and (min-width: 1680px) { /* Extra Extra large devices (xxl) */
    /* font weight */
    .xxl\:fw-100 {font-weight: 100;}
    .xxl\:fw-200 {font-weight: 200;}
    .xxl\:fw-300 {font-weight: 300;}
    .xxl\:fw-400 {font-weight: 400;}
    .xxl\:fw-500 {font-weight: 500;}
    .xxl\:fw-600 {font-weight: 600;}
    .xxl\:fw-700 {font-weight: 700;}
    .xxl\:fw-800 {font-weight: 800;}
    .xxl\:fw-900 {font-weight: 900;}
    .xxl\:italic {font-style: italic;}
    .xxl\:normal {font-style: normal;}

    /* text align */
    .xxl\:center {text-align: center;}
    .xxl\:left {text-align: left;}
    .xxl\:right {text-align: right;}
    .xxl\:justify {text-align: justify;}
    .xxl\:lowercase {text-transform: lowercase;}
    .xxl\:uppercase {text-transform: uppercase;}
    .xxl\:capitalize {text-transform: capitalize;}
    .xxl\:muted {color: var(--color-muted);}
    .xxl\:middle {vertical-align: middle;}

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

    /* Visibility */
    .xxl\:visible {visibility: visible;}
    .xxl\:hidden {visibility: hidden;}
    .xxl\:collapse {visibility: collapse;}

    /* Display */
    .xxl\:none {display: none !important;}
    .xxl\:flex {display: flex;}
    .xxl\:inline-flex {display: inline-flex;}
    .xxl\:grid {display: grid;}
    .xxl\:block {display: block !important;}
    .xxl\:inline {display: inline;}
    .xxl\:inline-block {display: inline-block;}
    .xxl\:flex-start {display: flex; align-items: center; justify-content: start; text-align: start;}
    .xxl\:flex-end {display: flex; align-items: center; justify-content: end; text-align: end;}
    .xxl\:flex-center {display: flex; align-items: center; justify-content: center; text-align: center;}
    .xxl\:flex-between {display: flex; align-items: center; justify-content: space-between;}
    .xxl\:flex-around {display: flex; align-items: center; justify-content: space-around;}
    .xxl\:flex-evenly {display: flex; align-items: center; justify-content: space-evenly;}

    /* display flex direction */
    .xxl\:wrap {flex-wrap: wrap;}
    .xxl\:nowrap {flex-wrap: nowrap;}
    .xxl\:grow {flex-grow: 1;}
    .xxl\:shrink {flex-shrink: 1;}
    .xxl\:flex-col {flex-direction: column;}
    .xxl\:flex-row {flex-direction: row;}
    .xxl\:flex-row-reverse {flex-direction: row-reverse;}
    .xxl\:flex-col-reverse {flex-direction: column-reverse;}

    /* justify content: for flex */
    .xxl\:justify-start {justify-content: flex-start;}
    .xxl\:justify-end {justify-content: flex-end;}
    .xxl\:justify-center {justify-content: center;}
    .xxl\:justify-between {justify-content: space-between;}
    .xxl\:justify-around {justify-content: space-around;}
    .xxl\:justify-evenly {justify-content: space-evenly;}

    /* align items: for flex */
    .xxl\:items-start {align-items: flex-start;}
    .xxl\:items-end {align-items: flex-end;}
    .xxl\:items-center {align-items: center;}
    .xxl\:items-baseline {align-items: baseline;}

    /* Justify Items: for grid */
    .xxl\:justify-items-start {justify-items: start;}
    .xxl\:justify-items-end {justify-items: end;}
    .xxl\:justify-items-center {justify-items: center;}

    /* row and col-span */
    .xxl\:row {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}

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

    /* display grid columns */
    .xxl\:grid-1 {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-6 {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-8 {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-9 {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-10 {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-11 {display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-12 {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.8rem;}
    .xxl\:grid-row {grid-auto-flow: row;}
    .xxl\:grid-col {grid-auto-flow: column;}
}