/*--------FLEX-----------*/
.fl {
  display: flex;
  align-items: center;
}

.fl-w {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.fl-c {
  display: flex;
  flex-flow: column;
}

.fl-j-st {
  justify-content: flex-start;
}

.fl-j-en {
  justify-content: flex-end;
}

.fl-j-ce {
  justify-content: center;
}

.fl-j-sp-be {
  justify-content: space-between;
}

.fl-j-sp-ar {
  justify-content: space-around;
}

.fl-j-stj {
  justify-content: stretch;
}

.fl-al-st {
  align-items: flex-start;
}

.fl-al-en {
  align-items: flex-end;
}

.fl-al-ce {
  align-items: center;
}

.fl-al-stj {
  align-items: stretch;
}

.fl-al-no {
  align-items: normal;
}

.fl-gr-1 {
  flex-grow: 1;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.w-max-content {
  width: max-content;
}

/*--------GRID-----------*/
.grid {
  display: grid;
  gap: 10px;
}

.d-grid-middle {
  vertical-align: middle;
  display: grid;
}

/*--------DIRECTION-----------*/
.rtl {
  direction: rtl;
  text-align: right;
}

.ltr {
  direction: ltr;
  text-align: left;
}

/*--------POSITION-----------*/
.po-re {
  position: relative;
}

.po-ab {
  position: absolute;
  top: 0;
  left: 0;
}

.po-fx {
  position: fixed;
  top: 0;
  left: 0;
}

/*--------BORDER-----------*/
.bo {
  border: solid 1px var(--border);
}

.bo-t {
  border-top: solid 1px var(--border);
}

.bo-r {
  border-right: solid 1px var(--border);
}

.bo-b {
  border-bottom: solid 1px var(--border);
}

.bo-l {
  border-left: solid 1px var(--border);
}

/*--------BORDER-RADIUS-----------*/
.bo-ra-4 {
  border-radius: 4px;
}

.bo-ra-10 {
  border-radius: 10px;
}

.bo-ra-cr {
  border-radius: 50%;
}

/*--------COLUMNS-----------*/
.col-1 {
  grid-template-columns: repeat(1, auto);
}

.col-2 {
  grid-template-columns: repeat(2, auto);
}

.col-3 {
  grid-template-columns: repeat(3, auto);
}

.col-4 {
  grid-template-columns: repeat(4, auto);
}

.col-5 {
  grid-template-columns: repeat(5, auto);
}

.col-6 {
  grid-template-columns: repeat(6, auto);
}

.col-7 {
  grid-template-columns: repeat(7, auto);
}

.col-8 {
  grid-template-columns: repeat(8, auto);
}

.col-9 {
  grid-template-columns: repeat(9, auto);
}

.col-10 {
  grid-template-columns: repeat(10, auto);
}

.col-11 {
  grid-template-columns: repeat(11, auto);
}

.col-12 {
  grid-template-columns: repeat(12, auto);
}

/*--------COLUMN SPAN-----------*/
.col-s-2 {
  grid-column: span 2;
}

.col-s-3 {
  grid-column: span 3;
}

.col-s-4 {
  grid-column: span 4;
}

.col-s-5 {
  grid-column: span 5;
}

.col-s-6 {
  grid-column: span 6;
}

.col-s-7 {
  grid-column: span 7;
}

/*--------ROW SPAN-----------*/
.r-s-2 {
  grid-row: span 2;
}

.r-s-3 {
  grid-row: span 3;
}

.r-s-4 {
  grid-row: span 4;
}

.r-s-5 {
  grid-row: span 5;
}

.r-s-6 {
  grid-row: span 6;
}

.r-s-7 {
  grid-row: span 7;
}

/*--------GAPS-----------*/
.g-0 {
  gap: 0;
}

.g-5 {
  gap: 5px;
}

.g-10 {
  gap: 10px;
}

.g-15 {
  gap: 15px;
}

.g-20 {
  gap: 20px;
}

.g-25 {
  gap: 25px;
}

.g-30 {
  gap: 30px;
}

/*--------PADDING-----------*/
.p-0 {
  padding: 0;
}

.p-5 {
  padding: 5px;
}

.p-10 {
  padding: 10px;
}

.p-15 {
  padding: 15px;
}

.p-20 {
  padding: 20px;
}

.p-25 {
  padding: 25px;
}

.p-30 {
  padding: 30px;
}

.p-x-0 {
  padding-right: 0;
  padding-left: 0;
}

.p-x-5 {
  padding-right: 5px;
  padding-left: 5px;
}

.p-x-10 {
  padding-right: 10px;
  padding-left: 10px;
}

.p-x-15 {
  padding-right: 15px;
  padding-left: 15px;
}

.p-x-20 {
  padding-right: 20px;
  padding-left: 20px;
}

.p-x-25 {
  padding-right: 25px;
  padding-left: 25px;
}

.p-x-30 {
  padding-right: 30px;
  padding-left: 30px;
}


.p-y-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.p-y-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.p-y-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.p-y-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.p-y-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.p-y-25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.p-y-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

/*--------MARGIN-----------*/
.m-au {
  margin: auto;
}

.m-0 {
  margin: 0!important;
}

/*--------COLORS-----------*/
.bg-wh {
  background: #fff;
}

.bg-pop {
  background: var(--popup-bg);
}

.bg-1 {
  background: var(--bg-1);
}

/*--------Z_INDEX-----------*/
.z-l1 {
  z-index: 9;
}

.z-l2 {
  z-index: 999;
}

.z-l3 {
  z-index: 99999;
}

.z-l4 {
  z-index: 9999999;
}

.z-mx {
  z-index: 999999999999;
}

/*--------CURSOR-----------*/
.cr-p {
  cursor: pointer;
}

/*--------BOX-SHADOW-----------*/
.bx-sh-md {
  box-shadow: 0 2px 3px -1px #00000052;
}

.bx-sh-lg {
  box-shadow: 0px 8px 12px -5px #0000005e;
}

/*--------BUTTON-----------*/
.bu {
  background: var(--primary);
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  font-size: 13px;
  box-shadow: 0 3px 4px -2px #00000094;
  border: solid 1px var(--primary);
  cursor: pointer;
}

.bu:active {
  transform: scale(.93);
}

.bu.disabled {
  background: var(--disable-bg) !important;
  border-color: var(--disable-bg) !important;
  box-shadow: none !important;
}

.rtl .bu {
  padding: 5px 15px 7px;
}

.bu-se {
  background: #fff;
  color: var(--primary);;
  border: solid 1px;
}

.bu-li {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--primary);
}

.bu-li:hover {
  background: #eee;
}

/*--------OVERFLOW-----------*/
.ov-au {
  overflow: auto;
}

.ov-au-x {
  overflow-x: auto;
}

.ov-au-y {
  overflow-y: auto;
}

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

/*--------TEXT-ALIGN-----------*/
.te-al-c {
  text-align: center!important;
}

.te-al-r {
  text-align: right!important;
}

.te-al-l {
  text-align: left!important;
}

/*--------FONT-----------*/
label {
  margin: 0;
}

.fo-co-wh {
  color: #fff;
}


.fo-co-pr {
  color: var(--text-primary);
}

.fo-co-se {
  color: var(--gray-light);
}

.fo-sz-sm {
  font-size: 11px;
}

.fo-sz-md {
  font-size: 13px;
}

.fo-sz-lg {
  font-size: 16px;
}

.fo-sz-lx {
  font-size: 20px;
}

.fo-fa-ir {
  font-family: 'iranyekan';
}

.fo-wh-b{
  font-weight: bold;
}

/*--------ANIMATIO-----------*/
.tr-all-2 {
  transition: all .2s ease;
}

/*--------DISABLED-----------*/
.disabled {
  pointer-events: none;
  color: var(--disable-font);
}


/*-------BREAK POINTS---------------
  lx: width < 1920
  i-xl: width < 1680
  ----------------------------
  lg: width < 1440
  i-lg: width < 1366
  ii-lg: width < 1280
  ----------------------------
  md: width < 1024
  i-md: width < 800
  ii-md: width < 768
  iii-md : width < 640
  iv-md : width < 540
  ----------------------------
  sm: width < 480
  i-sm: width < 400
  ii-sm: width < 300
  iii-sm: width < 200
-------------------------------------*/


/*----- xl ------*/
@media (max-width: 1920px) {
  .xl-hide {
    display: none !important;
  }

  .xl-1 {
    grid-template-columns: repeat(1, auto);
  }

  .xl-2 {
    grid-template-columns: repeat(2, auto);
  }

  .xl-3 {
    grid-template-columns: repeat(3, auto);
  }

  .xl-4 {
    grid-template-columns: repeat(4, auto);
  }

  .xl-5 {
    grid-template-columns: repeat(5, auto);
  }

  .xl-6 {
    grid-template-columns: repeat(6, auto);
  }

  .xl-7 {
    grid-template-columns: repeat(7, auto);
  }

  .xl-8 {
    grid-template-columns: repeat(8, auto);
  }

  .xl-9 {
    grid-template-columns: repeat(9, auto);
  }

  .xl-10 {
    grid-template-columns: repeat(10, auto);
  }

  .xl-11 {
    grid-template-columns: repeat(11, auto);
  }

  .xl-12 {
    grid-template-columns: repeat(12, auto);
  }

  .xl-col-s-1 {
    grid-column: span 1;
  }

  .xl-col-s-2 {
    grid-column: span 2;
  }

  .xl-col-s-3 {
    grid-column: span 3;
  }

  .xl-col-s-4 {
    grid-column: span 4;
  }

  .xl-col-s-5 {
    grid-column: span 5;
  }

  .xl-col-s-6 {
    grid-column: span 6;
  }

  .xl-col-s-7 {
    grid-column: span 7;
  }

  .xl-col-s-8 {
    grid-column: span 8;
  }

  .xl-col-s-9 {
    grid-column: span 9;
  }

  .xl-col-s-10 {
    grid-column: span 10;
  }

  .xl-col-s-11 {
    grid-column: span 11;
  }

  .xl-col-s-12 {
    grid-column: span 12;
  }

  .xl-g-0 {
    gap: 0;
  }

  .xl-g-5 {
    gap: 5px;
  }

  .xl-g-10 {
    gap: 10px;
  }

  .xl-g-15 {
    gap: 15px;
  }

  .xl-g-20 {
    gap: 20px;
  }

  .xl-g-25 {
    gap: 25px;
  }

  .xl-g-30 {
    gap: 30px;
  }

  .xl-p-0 {
    padding: 0;
  }

  .xl-p-5 {
    padding: 5px;
  }

  .xl-p-10 {
    padding: 10px;
  }

  .xl-p-15 {
    padding: 15px;
  }

  .xl-p-20 {
    padding: 20px;
  }

  .xl-p-25 {
    padding: 25px;
  }

  .xl-p-30 {
    padding: 30px;
  }
}

/*----- i-xl ------*/
@media (max-width: 1680px) {
  .i-xl-hide {
    display: none !important;
  }

  .i-xl-1 {
    grid-template-columns: repeat(1, auto);
  }

  .i-xl-2 {
    grid-template-columns: repeat(2, auto);
  }

  .i-xl-3 {
    grid-template-columns: repeat(3, auto);
  }

  .i-xl-4 {
    grid-template-columns: repeat(4, auto);
  }

  .i-xl-5 {
    grid-template-columns: repeat(5, auto);
  }

  .i-xl-6 {
    grid-template-columns: repeat(6, auto);
  }

  .i-xl-7 {
    grid-template-columns: repeat(7, auto);
  }

  .i-xl-8 {
    grid-template-columns: repeat(8, auto);
  }

  .i-xl-9 {
    grid-template-columns: repeat(9, auto);
  }

  .i-xl-10 {
    grid-template-columns: repeat(10, auto);
  }

  .i-xl-11 {
    grid-template-columns: repeat(11, auto);
  }

  .i-xl-12 {
    grid-template-columns: repeat(12, auto);
  }

  .i-xl-col-s-1 {
    grid-column: span 1;
  }

  .i-xl-col-s-2 {
    grid-column: span 2;
  }

  .i-xl-col-s-3 {
    grid-column: span 3;
  }

  .i-xl-col-s-4 {
    grid-column: span 4;
  }

  .i-xl-col-s-5 {
    grid-column: span 5;
  }

  .i-xl-col-s-6 {
    grid-column: span 6;
  }

  .i-xl-col-s-7 {
    grid-column: span 7;
  }

  .i-xl-col-s-8 {
    grid-column: span 8;
  }

  .i-xl-col-s-9 {
    grid-column: span 9;
  }

  .i-xl-col-s-10 {
    grid-column: span 10;
  }

  .i-xl-col-s-11 {
    grid-column: span 11;
  }

  .i-xl-col-s-12 {
    grid-column: span 12;
  }

  .i-xl-g-0 {
    gap: 0;
  }

  .i-xl-g-5 {
    gap: 5px;
  }

  .i-xl-g-10 {
    gap: 10px;
  }

  .i-xl-g-15 {
    gap: 15px;
  }

  .i-xl-g-20 {
    gap: 20px;
  }

  .i-xl-g-25 {
    gap: 25px;
  }

  .i-xl-g-30 {
    gap: 30px;
  }

  .i-xl-p-0 {
    padding: 0;
  }

  .i-xl-p-5 {
    padding: 5px;
  }

  .i-xl-p-10 {
    padding: 10px;
  }

  .i-xl-p-15 {
    padding: 15px;
  }

  .i-xl-p-20 {
    padding: 20px;
  }

  .i-xl-p-25 {
    padding: 25px;
  }

  .i-xl-p-30 {
    padding: 30px;
  }
}

/*----- lg ------*/
@media (max-width: 1440px) {
  .lg-hide {
    display: none !important;
  }

  .lg-1 {
    grid-template-columns: repeat(1, auto);
  }

  .lg-2 {
    grid-template-columns: repeat(2, auto);
  }

  .lg-3 {
    grid-template-columns: repeat(3, auto);
  }

  .lg-4 {
    grid-template-columns: repeat(4, auto);
  }

  .lg-5 {
    grid-template-columns: repeat(5, auto);
  }

  .lg-6 {
    grid-template-columns: repeat(6, auto);
  }

  .lg-7 {
    grid-template-columns: repeat(7, auto);
  }

  .lg-8 {
    grid-template-columns: repeat(8, auto);
  }

  .lg-9 {
    grid-template-columns: repeat(9, auto);
  }

  .lg-10 {
    grid-template-columns: repeat(10, auto);
  }

  .lg-11 {
    grid-template-columns: repeat(11, auto);
  }

  .lg-12 {
    grid-template-columns: repeat(12, auto);
  }

  .lg-col-s-1 {
    grid-column: span 1;
  }

  .lg-col-s-2 {
    grid-column: span 2;
  }

  .lg-col-s-3 {
    grid-column: span 3;
  }

  .lg-col-s-4 {
    grid-column: span 4;
  }

  .lg-col-s-5 {
    grid-column: span 5;
  }

  .lg-col-s-6 {
    grid-column: span 6;
  }

  .lg-col-s-7 {
    grid-column: span 7;
  }

  .lg-col-s-8 {
    grid-column: span 8;
  }

  .lg-col-s-9 {
    grid-column: span 9;
  }

  .lg-col-s-10 {
    grid-column: span 10;
  }

  .lg-col-s-11 {
    grid-column: span 11;
  }

  .lg-col-s-12 {
    grid-column: span 12;
  }

  .lg-g-0 {
    gap: 0;
  }

  .lg-g-5 {
    gap: 5px;
  }

  .lg-g-10 {
    gap: 10px;
  }

  .lg-g-15 {
    gap: 15px;
  }

  .lg-g-20 {
    gap: 20px;
  }

  .lg-g-25 {
    gap: 25px;
  }

  .lg-g-30 {
    gap: 30px;
  }

  .lg-p-0 {
    padding: 0;
  }

  .lg-p-5 {
    padding: 5px;
  }

  .lg-p-10 {
    padding: 10px;
  }

  .lg-p-15 {
    padding: 15px;
  }

  .lg-p-20 {
    padding: 20px;
  }

  .lg-p-25 {
    padding: 25px;
  }

  .lg-p-30 {
    padding: 30px;
  }
}

/*----- i-lg ------*/
@media (max-width: 1366px) {
  .i-lg-hide {
    display: none !important;
  }

  .i-lg-1 {
    grid-template-columns: repeat(1, auto);
  }

  .i-lg-2 {
    grid-template-columns: repeat(2, auto);
  }

  .i-lg-3 {
    grid-template-columns: repeat(3, auto);
  }

  .i-lg-4 {
    grid-template-columns: repeat(4, auto);
  }

  .i-lg-5 {
    grid-template-columns: repeat(5, auto);
  }

  .i-lg-6 {
    grid-template-columns: repeat(6, auto);
  }

  .i-lg-7 {
    grid-template-columns: repeat(7, auto);
  }

  .i-lg-8 {
    grid-template-columns: repeat(8, auto);
  }

  .i-lg-9 {
    grid-template-columns: repeat(9, auto);
  }

  .i-lg-10 {
    grid-template-columns: repeat(10, auto);
  }

  .i-lg-11 {
    grid-template-columns: repeat(11, auto);
  }

  .i-lg-12 {
    grid-template-columns: repeat(12, auto);
  }

  .i-lg-col-s-1 {
    grid-column: span 1;
  }

  .i-lg-col-s-2 {
    grid-column: span 2;
  }

  .i-lg-col-s-3 {
    grid-column: span 3;
  }

  .i-lg-col-s-4 {
    grid-column: span 4;
  }

  .i-lg-col-s-5 {
    grid-column: span 5;
  }

  .i-lg-col-s-6 {
    grid-column: span 6;
  }

  .i-lg-col-s-7 {
    grid-column: span 7;
  }

  .i-lg-col-s-8 {
    grid-column: span 8;
  }

  .i-lg-col-s-9 {
    grid-column: span 9;
  }

  .i-lg-col-s-10 {
    grid-column: span 10;
  }

  .i-lg-col-s-11 {
    grid-column: span 11;
  }

  .i-lg-col-s-12 {
    grid-column: span 12;
  }

  .i-lg-g-0 {
    gap: 0;
  }

  .i-lg-g-5 {
    gap: 5px;
  }

  .i-lg-g-10 {
    gap: 10px;
  }

  .i-lg-g-15 {
    gap: 15px;
  }

  .i-lg-g-20 {
    gap: 20px;
  }

  .i-lg-g-25 {
    gap: 25px;
  }

  .i-lg-g-30 {
    gap: 30px;
  }

  .i-lg-p-0 {
    padding: 0;
  }

  .i-lg-p-5 {
    padding: 5px;
  }

  .i-lg-p-10 {
    padding: 10px;
  }

  .i-lg-p-15 {
    padding: 15px;
  }

  .i-lg-p-20 {
    padding: 20px;
  }

  .i-lg-p-25 {
    padding: 25px;
  }

  .i-lg-p-30 {
    padding: 30px;
  }
}

/*----- ii-lg ------*/
@media (max-width: 1280px) {
  .ii-lg-hide {
    display: none !important;
  }

  .ii-lg-1 {
    grid-template-columns: repeat(1, auto);
  }

  .ii-lg-2 {
    grid-template-columns: repeat(2, auto);
  }

  .ii-lg-3 {
    grid-template-columns: repeat(3, auto);
  }

  .ii-lg-4 {
    grid-template-columns: repeat(4, auto);
  }

  .ii-lg-5 {
    grid-template-columns: repeat(5, auto);
  }

  .ii-lg-6 {
    grid-template-columns: repeat(6, auto);
  }

  .ii-lg-7 {
    grid-template-columns: repeat(7, auto);
  }

  .ii-lg-8 {
    grid-template-columns: repeat(8, auto);
  }

  .ii-lg-9 {
    grid-template-columns: repeat(9, auto);
  }

  .ii-lg-10 {
    grid-template-columns: repeat(10, auto);
  }

  .ii-lg-11 {
    grid-template-columns: repeat(11, auto);
  }

  .ii-lg-12 {
    grid-template-columns: repeat(12, auto);
  }

  .ii-lg-col-s-1 {
    grid-column: span 1;
  }

  .ii-lg-col-s-2 {
    grid-column: span 2;
  }

  .ii-lg-col-s-3 {
    grid-column: span 3;
  }

  .ii-lg-col-s-4 {
    grid-column: span 4;
  }

  .ii-lg-col-s-5 {
    grid-column: span 5;
  }

  .ii-lg-col-s-6 {
    grid-column: span 6;
  }

  .ii-lg-col-s-7 {
    grid-column: span 7;
  }

  .ii-lg-col-s-8 {
    grid-column: span 8;
  }

  .ii-lg-col-s-9 {
    grid-column: span 9;
  }

  .ii-lg-col-s-10 {
    grid-column: span 10;
  }

  .ii-lg-col-s-11 {
    grid-column: span 11;
  }

  .ii-lg-col-s-12 {
    grid-column: span 12;
  }

  .ii-lg-g-0 {
    gap: 0;
  }

  .ii-lg-g-5 {
    gap: 5px;
  }

  .ii-lg-g-10 {
    gap: 10px;
  }

  .ii-lg-g-15 {
    gap: 15px;
  }

  .ii-lg-g-20 {
    gap: 20px;
  }

  .ii-lg-g-25 {
    gap: 25px;
  }

  .ii-lg-g-30 {
    gap: 30px;
  }

  .ii-lg-p-0 {
    padding: 0;
  }

  .ii-lg-p-5 {
    padding: 5px;
  }

  .ii-lg-p-10 {
    padding: 10px;
  }

  .ii-lg-p-15 {
    padding: 15px;
  }

  .ii-lg-p-20 {
    padding: 20px;
  }

  .ii-lg-p-25 {
    padding: 25px;
  }

  .ii-lg-p-30 {
    padding: 30px;
  }
}

/*----- md ------*/
@media (max-width: 1024px) {
  .md-hide {
    display: none !important;
  }

  .md-1 {
    grid-template-columns: repeat(1, auto);
  }

  .md-2 {
    grid-template-columns: repeat(2, auto);
  }

  .md-3 {
    grid-template-columns: repeat(3, auto);
  }

  .md-4 {
    grid-template-columns: repeat(4, auto);
  }

  .md-5 {
    grid-template-columns: repeat(5, auto);
  }

  .md-6 {
    grid-template-columns: repeat(6, auto);
  }

  .md-7 {
    grid-template-columns: repeat(7, auto);
  }

  .md-8 {
    grid-template-columns: repeat(8, auto);
  }

  .md-9 {
    grid-template-columns: repeat(9, auto);
  }

  .md-10 {
    grid-template-columns: repeat(10, auto);
  }

  .md-11 {
    grid-template-columns: repeat(11, auto);
  }

  .md-12 {
    grid-template-columns: repeat(12, auto);
  }

  .md-col-s-1 {
    grid-column: span 1;
  }

  .md-col-s-2 {
    grid-column: span 2;
  }

  .md-col-s-3 {
    grid-column: span 3;
  }

  .md-col-s-4 {
    grid-column: span 4;
  }

  .md-col-s-5 {
    grid-column: span 5;
  }

  .md-col-s-6 {
    grid-column: span 6;
  }

  .md-col-s-7 {
    grid-column: span 7;
  }

  .md-col-s-8 {
    grid-column: span 8;
  }

  .md-col-s-9 {
    grid-column: span 9;
  }

  .md-col-s-10 {
    grid-column: span 10;
  }

  .md-col-s-11 {
    grid-column: span 11;
  }

  .md-col-s-12 {
    grid-column: span 12;
  }

  .md-g-0 {
    gap: 0;
  }

  .md-g-5 {
    gap: 5px;
  }

  .md-g-10 {
    gap: 10px;
  }

  .md-g-15 {
    gap: 15px;
  }

  .md-g-20 {
    gap: 20px;
  }

  .md-g-25 {
    gap: 25px;
  }

  .md-g-30 {
    gap: 30px;
  }

  .md-p-0 {
    padding: 0;
  }

  .md-p-5 {
    padding: 5px;
  }

  .md-p-10 {
    padding: 10px;
  }

  .md-p-15 {
    padding: 15px;
  }

  .md-p-20 {
    padding: 20px;
  }

  .md-p-25 {
    padding: 25px;
  }

  .md-p-30 {
    padding: 30px;
  }
}

/*----- i-md ------*/
@media (max-width: 800px) {
  .i-md-hide {
    display: none !important;
  }

  .i-md-1 {
    grid-template-columns: repeat(1, auto);
  }

  .i-md-2 {
    grid-template-columns: repeat(2, auto);
  }

  .i-md-3 {
    grid-template-columns: repeat(3, auto);
  }

  .i-md-4 {
    grid-template-columns: repeat(4, auto);
  }

  .i-md-5 {
    grid-template-columns: repeat(5, auto);
  }

  .i-md-6 {
    grid-template-columns: repeat(6, auto);
  }

  .i-md-7 {
    grid-template-columns: repeat(7, auto);
  }

  .i-md-8 {
    grid-template-columns: repeat(8, auto);
  }

  .i-md-9 {
    grid-template-columns: repeat(9, auto);
  }

  .i-md-10 {
    grid-template-columns: repeat(10, auto);
  }

  .i-md-11 {
    grid-template-columns: repeat(11, auto);
  }

  .i-md-12 {
    grid-template-columns: repeat(12, auto);
  }

  .i-md-col-s-1 {
    grid-column: span 1;
  }

  .i-md-col-s-2 {
    grid-column: span 2;
  }

  .i-md-col-s-3 {
    grid-column: span 3;
  }

  .i-md-col-s-4 {
    grid-column: span 4;
  }

  .i-md-col-s-5 {
    grid-column: span 5;
  }

  .i-md-col-s-6 {
    grid-column: span 6;
  }

  .i-md-col-s-7 {
    grid-column: span 7;
  }

  .i-md-col-s-8 {
    grid-column: span 8;
  }

  .i-md-col-s-9 {
    grid-column: span 9;
  }

  .i-md-col-s-10 {
    grid-column: span 10;
  }

  .i-md-col-s-11 {
    grid-column: span 11;
  }

  .i-md-col-s-12 {
    grid-column: span 12;
  }

  .i-md-g-0 {
    gap: 0;
  }

  .i-md-g-5 {
    gap: 5px;
  }

  .i-md-g-10 {
    gap: 10px;
  }

  .i-md-g-15 {
    gap: 15px;
  }

  .i-md-g-20 {
    gap: 20px;
  }

  .i-md-g-25 {
    gap: 25px;
  }

  .i-md-g-30 {
    gap: 30px;
  }

  .i-md-p-0 {
    padding: 0;
  }

  .i-md-p-5 {
    padding: 5px;
  }

  .i-md-p-10 {
    padding: 10px;
  }

  .i-md-p-15 {
    padding: 15px;
  }

  .i-md-p-20 {
    padding: 20px;
  }

  .i-md-p-25 {
    padding: 25px;
  }

  .i-md-p-30 {
    padding: 30px;
  }
}

/*----- ii-md ------*/
@media (max-width: 768px) {
  .i-md-hide {
    display: none !important;
  }

  .ii-md-1 {
    grid-template-columns: repeat(1, auto);
  }

  .ii-md-2 {
    grid-template-columns: repeat(2, auto);
  }

  .ii-md-3 {
    grid-template-columns: repeat(3, auto);
  }

  .ii-md-4 {
    grid-template-columns: repeat(4, auto);
  }

  .ii-md-5 {
    grid-template-columns: repeat(5, auto);
  }

  .ii-md-6 {
    grid-template-columns: repeat(6, auto);
  }

  .ii-md-7 {
    grid-template-columns: repeat(7, auto);
  }

  .ii-md-8 {
    grid-template-columns: repeat(8, auto);
  }

  .ii-md-9 {
    grid-template-columns: repeat(9, auto);
  }

  .ii-md-10 {
    grid-template-columns: repeat(10, auto);
  }

  .ii-md-11 {
    grid-template-columns: repeat(11, auto);
  }

  .ii-md-12 {
    grid-template-columns: repeat(12, auto);
  }

  .ii-md-col-s-1 {
    grid-column: span 1;
  }

  .ii-md-col-s-2 {
    grid-column: span 2;
  }

  .ii-md-col-s-3 {
    grid-column: span 3;
  }

  .ii-md-col-s-4 {
    grid-column: span 4;
  }

  .ii-md-col-s-5 {
    grid-column: span 5;
  }

  .ii-md-col-s-6 {
    grid-column: span 6;
  }

  .ii-md-col-s-7 {
    grid-column: span 7;
  }

  .ii-md-col-s-8 {
    grid-column: span 8;
  }

  .ii-md-col-s-9 {
    grid-column: span 9;
  }

  .ii-md-col-s-10 {
    grid-column: span 10;
  }

  .ii-md-col-s-11 {
    grid-column: span 11;
  }

  .ii-md-col-s-12 {
    grid-column: span 12;
  }

  .ii-md-g-0 {
    gap: 0;
  }

  .ii-md-g-5 {
    gap: 5px;
  }

  .ii-md-g-10 {
    gap: 10px;
  }

  .ii-md-g-15 {
    gap: 15px;
  }

  .ii-md-g-20 {
    gap: 20px;
  }

  .ii-md-g-25 {
    gap: 25px;
  }

  .ii-md-g-30 {
    gap: 30px;
  }

  .ii-md-p-0 {
    padding: 0;
  }

  .ii-md-p-5 {
    padding: 5px;
  }

  .ii-md-p-10 {
    padding: 10px;
  }

  .ii-md-p-15 {
    padding: 15px;
  }

  .ii-md-p-20 {
    padding: 20px;
  }

  .ii-md-p-25 {
    padding: 25px;
  }

  .ii-md-p-30 {
    padding: 30px;
  }
}

/*----- iii-md ------*/
@media (max-width: 640px) {
  .iii-md-hide {
    display: none !important;
  }

  .iii-md-1 {
    grid-template-columns: repeat(1, auto);
  }

  .iii-md-2 {
    grid-template-columns: repeat(2, auto);
  }

  .iii-md-3 {
    grid-template-columns: repeat(3, auto);
  }

  .iii-md-4 {
    grid-template-columns: repeat(4, auto);
  }

  .iii-md-5 {
    grid-template-columns: repeat(5, auto);
  }

  .iii-md-6 {
    grid-template-columns: repeat(6, auto);
  }

  .iii-md-7 {
    grid-template-columns: repeat(7, auto);
  }

  .iii-md-8 {
    grid-template-columns: repeat(8, auto);
  }

  .iii-md-9 {
    grid-template-columns: repeat(9, auto);
  }

  .iii-md-10 {
    grid-template-columns: repeat(10, auto);
  }

  .iii-md-11 {
    grid-template-columns: repeat(11, auto);
  }

  .iii-md-12 {
    grid-template-columns: repeat(12, auto);
  }

  .iii-md-col-s-1 {
    grid-column: span 1;
  }

  .iii-md-col-s-2 {
    grid-column: span 2;
  }

  .iii-md-col-s-3 {
    grid-column: span 3;
  }

  .iii-md-col-s-4 {
    grid-column: span 4;
  }

  .iii-md-col-s-5 {
    grid-column: span 5;
  }

  .iii-md-col-s-6 {
    grid-column: span 6;
  }

  .iii-md-col-s-7 {
    grid-column: span 7;
  }

  .iii-md-col-s-8 {
    grid-column: span 8;
  }

  .iii-md-col-s-9 {
    grid-column: span 9;
  }

  .iii-md-col-s-10 {
    grid-column: span 10;
  }

  .iii-md-col-s-11 {
    grid-column: span 11;
  }

  .iii-md-col-s-12 {
    grid-column: span 12;
  }

  .iii-md-g-0 {
    gap: 0;
  }

  .iii-md-g-5 {
    gap: 5px;
  }

  .iii-md-g-10 {
    gap: 10px;
  }

  .iii-md-g-15 {
    gap: 15px;
  }

  .iii-md-g-20 {
    gap: 20px;
  }

  .iii-md-g-25 {
    gap: 25px;
  }

  .iii-md-g-30 {
    gap: 30px;
  }

  .iii-md-p-0 {
    padding: 0;
  }

  .iii-md-p-5 {
    padding: 5px;
  }

  .iii-md-p-10 {
    padding: 10px;
  }

  .iii-md-p-15 {
    padding: 15px;
  }

  .iii-md-p-20 {
    padding: 20px;
  }

  .iii-md-p-25 {
    padding: 25px;
  }

  .iii-md-p-30 {
    padding: 30px;
  }
}

/*----- iv-md ------*/
@media (max-width: 540px) {
  .iv-md-hide {
    display: none !important;
  }

  .iv-md-1 {
    grid-template-columns: repeat(1, auto);
  }

  .iv-md-2 {
    grid-template-columns: repeat(2, auto);
  }

  .iv-md-3 {
    grid-template-columns: repeat(3, auto);
  }

  .iv-md-4 {
    grid-template-columns: repeat(4, auto);
  }

  .iv-md-5 {
    grid-template-columns: repeat(5, auto);
  }

  .iv-md-6 {
    grid-template-columns: repeat(6, auto);
  }

  .iv-md-7 {
    grid-template-columns: repeat(7, auto);
  }

  .iv-md-8 {
    grid-template-columns: repeat(8, auto);
  }

  .iv-md-9 {
    grid-template-columns: repeat(9, auto);
  }

  .iv-md-10 {
    grid-template-columns: repeat(10, auto);
  }

  .iv-md-11 {
    grid-template-columns: repeat(11, auto);
  }

  .iv-md-12 {
    grid-template-columns: repeat(12, auto);
  }

  .iv-md-col-s-1 {
    grid-column: span 1;
  }

  .iv-md-col-s-2 {
    grid-column: span 2;
  }

  .iv-md-col-s-3 {
    grid-column: span 3;
  }

  .iv-md-col-s-4 {
    grid-column: span 4;
  }

  .iv-md-col-s-5 {
    grid-column: span 5;
  }

  .iv-md-col-s-6 {
    grid-column: span 6;
  }

  .iv-md-col-s-7 {
    grid-column: span 7;
  }

  .iv-md-col-s-8 {
    grid-column: span 8;
  }

  .iv-md-col-s-9 {
    grid-column: span 9;
  }

  .iv-md-col-s-10 {
    grid-column: span 10;
  }

  .iv-md-col-s-11 {
    grid-column: span 11;
  }

  .iv-md-col-s-12 {
    grid-column: span 12;
  }

  .iv-md-g-0 {
    gap: 0;
  }

  .iv-md-g-5 {
    gap: 5px;
  }

  .iv-md-g-10 {
    gap: 10px;
  }

  .iv-md-g-15 {
    gap: 15px;
  }

  .iv-md-g-20 {
    gap: 20px;
  }

  .iv-md-g-25 {
    gap: 25px;
  }

  .iv-md-g-30 {
    gap: 30px;
  }

  .iv-md-p-0 {
    padding: 0;
  }

  .iv-md-p-5 {
    padding: 5px;
  }

  .iv-md-p-10 {
    padding: 10px;
  }

  .iv-md-p-15 {
    padding: 15px;
  }

  .iv-md-p-20 {
    padding: 20px;
  }

  .iv-md-p-25 {
    padding: 25px;
  }

  .iv-md-p-30 {
    padding: 30px;
  }
}

/*----- sm ------*/
@media (max-width: 480px) {
  .sm-hide {
    display: none !important;
  }

  .sm-1 {
    grid-template-columns: repeat(1, auto);
  }

  .sm-2 {
    grid-template-columns: repeat(2, auto);
  }

  .sm-3 {
    grid-template-columns: repeat(3, auto);
  }

  .sm-4 {
    grid-template-columns: repeat(4, auto);
  }

  .sm-5 {
    grid-template-columns: repeat(5, auto);
  }

  .sm-6 {
    grid-template-columns: repeat(6, auto);
  }

  .sm-7 {
    grid-template-columns: repeat(7, auto);
  }

  .sm-8 {
    grid-template-columns: repeat(8, auto);
  }

  .sm-9 {
    grid-template-columns: repeat(9, auto);
  }

  .sm-10 {
    grid-template-columns: repeat(10, auto);
  }

  .sm-11 {
    grid-template-columns: repeat(11, auto);
  }

  .sm-12 {
    grid-template-columns: repeat(12, auto);
  }

  .sm-col-s-1 {
    grid-column: span 1;
  }

  .sm-col-s-2 {
    grid-column: span 2;
  }

  .sm-col-s-3 {
    grid-column: span 3;
  }

  .sm-col-s-4 {
    grid-column: span 4;
  }

  .sm-col-s-5 {
    grid-column: span 5;
  }

  .sm-col-s-6 {
    grid-column: span 6;
  }

  .sm-col-s-7 {
    grid-column: span 7;
  }

  .sm-col-s-8 {
    grid-column: span 8;
  }

  .sm-col-s-9 {
    grid-column: span 9;
  }

  .sm-col-s-10 {
    grid-column: span 10;
  }

  .sm-col-s-11 {
    grid-column: span 11;
  }

  .sm-col-s-12 {
    grid-column: span 12;
  }

  .sm-g-0 {
    gap: 0;
  }

  .sm-g-5 {
    gap: 5px;
  }

  .sm-g-10 {
    gap: 10px;
  }

  .sm-g-15 {
    gap: 15px;
  }

  .sm-g-20 {
    gap: 20px;
  }

  .sm-g-25 {
    gap: 25px;
  }

  .sm-g-30 {
    gap: 30px;
  }

  .sm-p-0 {
    padding: 0;
  }

  .sm-p-5 {
    padding: 5px;
  }

  .sm-p-10 {
    padding: 10px;
  }

  .sm-p-15 {
    padding: 15px;
  }

  .sm-p-20 {
    padding: 20px;
  }

  .sm-p-25 {
    padding: 25px;
  }

  .sm-p-30 {
    padding: 30px;
  }
}

/*----- i-sm ------*/
@media (max-width: 400px) {
  .i-sm-hide {
    display: none !important;
  }

  .i-sm-1 {
    grid-template-columns: repeat(1, auto);
  }

  .i-sm-2 {
    grid-template-columns: repeat(2, auto);
  }

  .i-sm-3 {
    grid-template-columns: repeat(3, auto);
  }

  .i-sm-4 {
    grid-template-columns: repeat(4, auto);
  }

  .i-sm-5 {
    grid-template-columns: repeat(5, auto);
  }

  .i-sm-6 {
    grid-template-columns: repeat(6, auto);
  }

  .i-sm-7 {
    grid-template-columns: repeat(7, auto);
  }

  .i-sm-8 {
    grid-template-columns: repeat(8, auto);
  }

  .i-sm-9 {
    grid-template-columns: repeat(9, auto);
  }

  .i-sm-10 {
    grid-template-columns: repeat(10, auto);
  }

  .i-sm-11 {
    grid-template-columns: repeat(11, auto);
  }

  .i-sm-12 {
    grid-template-columns: repeat(12, auto);
  }

  .i-sm-col-s-1 {
    grid-column: span 1;
  }

  .i-sm-col-s-2 {
    grid-column: span 2;
  }

  .i-sm-col-s-3 {
    grid-column: span 3;
  }

  .i-sm-col-s-4 {
    grid-column: span 4;
  }

  .i-sm-col-s-5 {
    grid-column: span 5;
  }

  .i-sm-col-s-6 {
    grid-column: span 6;
  }

  .i-sm-col-s-7 {
    grid-column: span 7;
  }

  .i-sm-col-s-8 {
    grid-column: span 8;
  }

  .i-sm-col-s-9 {
    grid-column: span 9;
  }

  .i-sm-col-s-10 {
    grid-column: span 10;
  }

  .i-sm-col-s-11 {
    grid-column: span 11;
  }

  .i-sm-col-s-12 {
    grid-column: span 12;
  }

  .i-sm-g-0 {
    gap: 0;
  }

  .i-sm-g-5 {
    gap: 5px;
  }

  .i-sm-g-10 {
    gap: 10px;
  }

  .i-sm-g-15 {
    gap: 15px;
  }

  .i-sm-g-20 {
    gap: 20px;
  }

  .i-sm-g-25 {
    gap: 25px;
  }

  .i-sm-g-30 {
    gap: 30px;
  }

  .i-sm-p-0 {
    padding: 0;
  }

  .i-sm-p-5 {
    padding: 5px;
  }

  .i-sm-p-10 {
    padding: 10px;
  }

  .i-sm-p-15 {
    padding: 15px;
  }

  .i-sm-p-20 {
    padding: 20px;
  }

  .i-sm-p-25 {
    padding: 25px;
  }

  .i-sm-p-30 {
    padding: 30px;
  }
}

/*----- ii-sm ------*/
@media (max-width: 300px) {
  .ii-sm-hide {
    display: none !important;
  }

  .ii-sm-1 {
    grid-template-columns: repeat(1, auto);
  }

  .ii-sm-2 {
    grid-template-columns: repeat(2, auto);
  }

  .ii-sm-3 {
    grid-template-columns: repeat(3, auto);
  }

  .ii-sm-4 {
    grid-template-columns: repeat(4, auto);
  }

  .ii-sm-5 {
    grid-template-columns: repeat(5, auto);
  }

  .ii-sm-6 {
    grid-template-columns: repeat(6, auto);
  }

  .ii-sm-7 {
    grid-template-columns: repeat(7, auto);
  }

  .ii-sm-8 {
    grid-template-columns: repeat(8, auto);
  }

  .ii-sm-9 {
    grid-template-columns: repeat(9, auto);
  }

  .ii-sm-10 {
    grid-template-columns: repeat(10, auto);
  }

  .ii-sm-11 {
    grid-template-columns: repeat(11, auto);
  }

  .ii-sm-12 {
    grid-template-columns: repeat(12, auto);
  }

  .ii-sm-col-s-1 {
    grid-column: span 1;
  }

  .ii-sm-col-s-2 {
    grid-column: span 2;
  }

  .ii-sm-col-s-3 {
    grid-column: span 3;
  }

  .ii-sm-col-s-4 {
    grid-column: span 4;
  }

  .ii-sm-col-s-5 {
    grid-column: span 5;
  }

  .ii-sm-col-s-6 {
    grid-column: span 6;
  }

  .ii-sm-col-s-7 {
    grid-column: span 7;
  }

  .ii-sm-col-s-8 {
    grid-column: span 8;
  }

  .ii-sm-col-s-9 {
    grid-column: span 9;
  }

  .ii-sm-col-s-10 {
    grid-column: span 10;
  }

  .ii-sm-col-s-11 {
    grid-column: span 11;
  }

  .ii-sm-col-s-12 {
    grid-column: span 12;
  }

  .ii-sm-g-0 {
    gap: 0;
  }

  .ii-sm-g-5 {
    gap: 5px;
  }

  .ii-sm-g-10 {
    gap: 10px;
  }

  .ii-sm-g-15 {
    gap: 15px;
  }

  .ii-sm-g-20 {
    gap: 20px;
  }

  .ii-sm-g-25 {
    gap: 25px;
  }

  .ii-sm-g-30 {
    gap: 30px;
  }

  .ii-sm-p-0 {
    padding: 0;
  }

  .ii-sm-p-5 {
    padding: 5px;
  }

  .ii-sm-p-10 {
    padding: 10px;
  }

  .ii-sm-p-15 {
    padding: 15px;
  }

  .ii-sm-p-20 {
    padding: 20px;
  }

  .ii-sm-p-25 {
    padding: 25px;
  }

  .ii-sm-p-30 {
    padding: 30px;
  }
}

/*----- iii-sm ------*/
@media (max-width: 200px) {
  .iii-sm-hide {
    display: none !important;
  }

  .iii-sm-1 {
    grid-template-columns: repeat(1, auto);
  }

  .iii-sm-2 {
    grid-template-columns: repeat(2, auto);
  }

  .iii-sm-3 {
    grid-template-columns: repeat(3, auto);
  }

  .iii-sm-4 {
    grid-template-columns: repeat(4, auto);
  }

  .iii-sm-5 {
    grid-template-columns: repeat(5, auto);
  }

  .iii-sm-6 {
    grid-template-columns: repeat(6, auto);
  }

  .iii-sm-7 {
    grid-template-columns: repeat(7, auto);
  }

  .iii-sm-8 {
    grid-template-columns: repeat(8, auto);
  }

  .iii-sm-9 {
    grid-template-columns: repeat(9, auto);
  }

  .iii-sm-10 {
    grid-template-columns: repeat(10, auto);
  }

  .iii-sm-11 {
    grid-template-columns: repeat(11, auto);
  }

  .iii-sm-12 {
    grid-template-columns: repeat(12, auto);
  }

  .iii-sm-col-s-1 {
    grid-column: span 1;
  }

  .iii-sm-col-s-2 {
    grid-column: span 2;
  }

  .iii-sm-col-s-3 {
    grid-column: span 3;
  }

  .iii-sm-col-s-4 {
    grid-column: span 4;
  }

  .iii-sm-col-s-5 {
    grid-column: span 5;
  }

  .iii-sm-col-s-6 {
    grid-column: span 6;
  }

  .iii-sm-col-s-7 {
    grid-column: span 7;
  }

  .iii-sm-col-s-8 {
    grid-column: span 8;
  }

  .iii-sm-col-s-9 {
    grid-column: span 9;
  }

  .iii-sm-col-s-10 {
    grid-column: span 10;
  }

  .iii-sm-col-s-11 {
    grid-column: span 11;
  }

  .iii-sm-col-s-12 {
    grid-column: span 12;
  }

  .iii-sm-g-0 {
    gap: 0;
  }

  .iii-sm-g-5 {
    gap: 5px;
  }

  .iii-sm-g-10 {
    gap: 10px;
  }

  .iii-sm-g-15 {
    gap: 15px;
  }

  .iii-sm-g-20 {
    gap: 20px;
  }

  .iii-sm-g-25 {
    gap: 25px;
  }

  .iii-sm-g-30 {
    gap: 30px;
  }

  .iii-sm-p-0 {
    padding: 0;
  }

  .iii-sm-p-5 {
    padding: 5px;
  }

  .iii-sm-p-10 {
    padding: 10px;
  }

  .iii-sm-p-15 {
    padding: 15px;
  }

  .iii-sm-p-20 {
    padding: 20px;
  }

  .iii-sm-p-25 {
    padding: 25px;
  }

  .iii-sm-p-30 {
    padding: 30px;
  }
}