/** global **/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --font-primary: "Inter", sans-serif;
  --font-title: "Poppins", sans-serif;
}

:root {
  --text-4: 4px;
  --text-7: 7px;
  --text-9: 9px;
  --text-10: 10px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-25: 25px;
  --text-26: 26px;
  --text-30: 30px;
  --text-40: 40px;
  --text-50: 50px;
  --text-60: 60px;
  --text-80: 80px;
  --text-100: 100px;
  --text-120: 120px;
  --text-150: 150px;
  --text-170: 170px;
  --text-200: 200px;
  --text-220: 220px;
  --text-250: 250px;
  --text-300: 300px;
  --text-400: 400px;
  --text-500: 500px;
}

:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-border: #DDDDDD;
  --color-dark-1: #343a40;
  --color-dark-2: #54595e;
  --color-dark-3: #797d80;
  --color-dark-4: #a7a7a8;
  --color-dark-5: #d8d8d8;
  --color-light-1: #e9ecef;
  --color-light-2: #F5F5F5;
  --color-light-3: #f0faf7;
  --color-light-4: #fcfcfc;
  --color-blue-1: #5551ff;
  --color-blue-2: #eff5fb;
  --color-green-1: #a6f6e4;
  --color-green-2: #73E6CB;
  --color-green-3: #3EBB9E;
  --color-green-4: #00674F;
  --color-green-5: #0A3C30;
  --color-yellow-1: #d33b17;
  --color-yellow-2: #eb651d;
  --color-yellow-3: #f79e6e;
  --color-yellow-4: #ffd0b7;
  --color-yellow-5: #ffeee5;
  --color-brown-1: #923E01;
  --color-purple-1: #7E53F9;
  --color-red-1: #D93025;
  --color-red-2: #F1416C;
  --color-red-3: #FFF5F8;
  --color-info-1: #CDE9F6;
  --color-info-2: #4780AA;
  --color-warning-1: #F7F3D7;
  --color-warning-2: #927238;
  --color-error-1: #ECC8C5;
  --color-error-2: #AB3331;
  --color-success-1: #DEF2D7;
  --color-success-2: #5B7052;
}

[data-anim-wrap] {
  pointer-events: none;
}

[data-anim-wrap].animated {
  pointer-events: auto;
}

@-webkit-keyframes reveal {
  100% {
    opacity: 1;
  }
}

@keyframes reveal {
  100% {
    opacity: 1;
  }
}

[data-anim^='slide-'],
[data-anim-child^='slide-'] {
  opacity: 0;
  transition-property: opacity, transform;
  pointer-events: none;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

[data-anim^='slide-'].is-in-view,
[data-anim-child^='slide-'].is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

[data-anim^='slide-up'],
[data-anim-child^='slide-up'] {
  transform: translate3d(0, 40px, 0);
}

[data-anim^='slide-down'],
[data-anim-child^='slide-down'] {
  transform: translate3d(0, -40px, 0);
}

[data-anim^='slide-right'],
[data-anim-child^='slide-right'] {
  transform: translate3d(-40px, 0, 0);
}

[data-anim^='slide-left'],
[data-anim-child^='slide-left'] {
  transform: translate3d(40px, 0, 0);
}

[data-anim^='fade'],
[data-anim-child^='fade'] {
  opacity: 0;
  transition-property: opacity;
  pointer-events: none;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

[data-anim^='fade'].is-in-view,
[data-anim-child^='fade'].is-in-view {
  opacity: 1;
  pointer-events: auto;
}

[data-anim*="delay-1"],
[data-anim-child*="delay-1"] {
  transition-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

[data-anim*="delay-1"]::after,
[data-anim-child*="delay-1"]::after {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

[data-anim*="delay-1"]>*,
[data-anim-child*="delay-1"]>* {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

[data-anim*="delay-2"],
[data-anim-child*="delay-2"] {
  transition-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

[data-anim*="delay-2"]::after,
[data-anim-child*="delay-2"]::after {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

[data-anim*="delay-2"]>*,
[data-anim-child*="delay-2"]>* {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

[data-anim*="delay-3"],
[data-anim-child*="delay-3"] {
  transition-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

[data-anim*="delay-3"]::after,
[data-anim-child*="delay-3"]::after {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

[data-anim*="delay-3"]>*,
[data-anim-child*="delay-3"]>* {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

[data-anim*="delay-4"],
[data-anim-child*="delay-4"] {
  transition-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

[data-anim*="delay-4"]::after,
[data-anim-child*="delay-4"]::after {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

[data-anim*="delay-4"]>*,
[data-anim-child*="delay-4"]>* {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

[data-anim*="delay-5"],
[data-anim-child*="delay-5"] {
  transition-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

[data-anim*="delay-5"]::after,
[data-anim-child*="delay-5"]::after {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

[data-anim*="delay-5"]>*,
[data-anim-child*="delay-5"]>* {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

[data-anim*="delay-6"],
[data-anim-child*="delay-6"] {
  transition-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

[data-anim*="delay-6"]::after,
[data-anim-child*="delay-6"]::after {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

[data-anim*="delay-6"]>*,
[data-anim-child*="delay-6"]>* {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

[data-anim*="delay-7"],
[data-anim-child*="delay-7"] {
  transition-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

[data-anim*="delay-7"]::after,
[data-anim-child*="delay-7"]::after {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

[data-anim*="delay-7"]>*,
[data-anim-child*="delay-7"]>* {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

[data-anim*="delay-8"],
[data-anim-child*="delay-8"] {
  transition-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

[data-anim*="delay-8"]::after,
[data-anim-child*="delay-8"]::after {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

[data-anim*="delay-8"]>*,
[data-anim-child*="delay-8"]>* {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

[data-anim*="delay-9"],
[data-anim-child*="delay-9"] {
  transition-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

[data-anim*="delay-9"]::after,
[data-anim-child*="delay-9"]::after {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

[data-anim*="delay-9"]>*,
[data-anim-child*="delay-9"]>* {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

[data-anim*="delay-10"],
[data-anim-child*="delay-10"] {
  transition-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

[data-anim*="delay-10"]::after,
[data-anim-child*="delay-10"]::after {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

[data-anim*="delay-10"]>*,
[data-anim-child*="delay-10"]>* {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

[data-anim*="delay-11"],
[data-anim-child*="delay-11"] {
  transition-delay: 1.1s;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

[data-anim*="delay-11"]::after,
[data-anim-child*="delay-11"]::after {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

[data-anim*="delay-11"]>*,
[data-anim-child*="delay-11"]>* {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

[data-anim*="delay-12"],
[data-anim-child*="delay-12"] {
  transition-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

[data-anim*="delay-12"]::after,
[data-anim-child*="delay-12"]::after {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

[data-anim*="delay-12"]>*,
[data-anim-child*="delay-12"]>* {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

[data-anim*="delay-13"],
[data-anim-child*="delay-13"] {
  transition-delay: 1.3s;
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

[data-anim*="delay-13"]::after,
[data-anim-child*="delay-13"]::after {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

[data-anim*="delay-13"]>*,
[data-anim-child*="delay-13"]>* {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

[data-anim*="delay-14"],
[data-anim-child*="delay-14"] {
  transition-delay: 1.4s;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

[data-anim*="delay-14"]::after,
[data-anim-child*="delay-14"]::after {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

[data-anim*="delay-14"]>*,
[data-anim-child*="delay-14"]>* {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

[data-anim*="delay-15"],
[data-anim-child*="delay-15"] {
  transition-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

[data-anim*="delay-15"]::after,
[data-anim-child*="delay-15"]::after {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

[data-anim*="delay-15"]>*,
[data-anim-child*="delay-15"]>* {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

[data-anim*="delay-16"],
[data-anim-child*="delay-16"] {
  transition-delay: 1.6s;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

[data-anim*="delay-16"]::after,
[data-anim-child*="delay-16"]::after {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

[data-anim*="delay-16"]>*,
[data-anim-child*="delay-16"]>* {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

[data-anim*="delay-17"],
[data-anim-child*="delay-17"] {
  transition-delay: 1.7s;
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

[data-anim*="delay-17"]::after,
[data-anim-child*="delay-17"]::after {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

[data-anim*="delay-17"]>*,
[data-anim-child*="delay-17"]>* {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

[data-anim*="delay-18"],
[data-anim-child*="delay-18"] {
  transition-delay: 1.8s;
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

[data-anim*="delay-18"]::after,
[data-anim-child*="delay-18"]::after {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

[data-anim*="delay-18"]>*,
[data-anim-child*="delay-18"]>* {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

[data-anim*="delay-19"],
[data-anim-child*="delay-19"] {
  transition-delay: 1.9s;
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

[data-anim*="delay-19"]::after,
[data-anim-child*="delay-19"]::after {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

[data-anim*="delay-19"]>*,
[data-anim-child*="delay-19"]>* {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

[data-anim*="delay-20"],
[data-anim-child*="delay-20"] {
  transition-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

[data-anim*="delay-20"]::after,
[data-anim-child*="delay-20"]::after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

[data-anim*="delay-20"]>*,
[data-anim-child*="delay-20"]>* {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}


/* animation */
.ani1 {
  -webkit-animation: ani1 10s infinite ease-in-out alternate;
  animation: ani1 10s infinite ease-in-out alternate;
}

.ani2 {
  -webkit-animation: ani2 10s infinite ease-in-out alternate;
  animation: ani2 10s infinite ease-in-out alternate;
}

.ani3 {
  -webkit-animation: ani3 4s infinite ease-in-out alternate;
  animation: ani3 4s infinite ease-in-out alternate;
}

.ani4 {
  -webkit-animation: ani4 7s infinite ease-in-out alternate;
  animation: ani4 7s infinite ease-in-out alternate;
}

.ani5 {
  -webkit-animation: ani5 7s infinite ease-in-out alternate;
  animation: ani5 7s infinite ease-in-out alternate;
}

.ani6 {
  -webkit-animation: ani6 7s infinite ease-in-out alternate;
  animation: ani6 7s infinite ease-in-out alternate;
}

.ani7 {
  -webkit-animation: ani7 7s infinite ease-in-out alternate;
  animation: ani7 7s infinite ease-in-out alternate;
}

.ani8 {
  -webkit-animation: ani8 2000ms infinite ease-in-out alternate;
  animation: ani8 2000ms infinite ease-in-out alternate;
}

@keyframes ani1 {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  20% {
    -webkit-transform: translate(-73px, 1px) rotate(-36deg);
    transform: translate(-73px, 1px) rotate(-36deg);
  }

  40% {
    -webkit-transform: translate(-141px, -72px) rotate(-72deg);
    transform: translate(-141px, -72px) rotate(-72deg);
  }

  60% {
    -webkit-transform: translate(-83px, -122px) rotate(-108deg);
    transform: translate(-83px, -122px) rotate(-108deg);
  }

  80% {
    -webkit-transform: translate(40px, -72px) rotate(-144deg);
    transform: translate(40px, -72px) rotate(-144deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes ani2 {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  20% {
    -webkit-transform: translate(20px, 1px) rotate(36deg);
    transform: translate(20px, 1px) rotate(36deg);
  }

  40% {
    -webkit-transform: translate(100px, 72px) rotate(72deg);
    transform: translate(100px, 72px) rotate(72deg);
  }

  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
    transform: translate(83px, 122px) rotate(108deg);
  }

  80% {
    -webkit-transform: translate(40px, 72px) rotate(144deg);
    transform: translate(40px, 72px) rotate(144deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes ani3 {
  0% {
    transform: scale(0.8, 0.8);
  }

  50% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(0.8, 0.8);
  }
}

@keyframes ani4 {

  0%,
  100% {
    transform: translateX(0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  50% {
    transform: translateX(-20px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}

@keyframes ani5 {

  0%,
  100% {
    transform: translateX(0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }

  50% {
    transform: translateX(20px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}

@keyframes ani6 {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  20% {
    -webkit-transform: translate(-13px, 1px) rotate(-6deg);
    transform: translate(-13px, 1px) rotate(-6deg);
  }

  40% {
    -webkit-transform: translate(-41px, -22px) rotate(-22deg);
    transform: translate(-41px, -22px) rotate(-22deg);
  }

  60% {
    -webkit-transform: translate(-33px, -22px) rotate(-50deg);
    transform: translate(-33px, -22px) rotate(-50deg);
  }

  80% {
    -webkit-transform: translate(40px, -72px) rotate(-50deg);
    transform: translate(40px, -72px) rotate(-50deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes ani7 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ani8 {
  from {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  to {
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    transform: translateY(-7px);
  }
}


/* Zaten varsa bu kısmı eklemeyin */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1280px;
  }
}


/*** Them Color ***/
.bg-white {
  background-color: var(--color-white) !important
}

.bg-black {
  background-color: var(--color-black) !important
}

.bg-border {
  background-color: var(--color-border) !important
}

.bg-dark-1 {
  background-color: var(--color-dark-1) !important
}

.bg-dark-2 {
  background-color: var(--color-dark-2) !important
}

.bg-dark-3 {
  background-color: var(--color-dark-3) !important
}

.bg-dark-4 {
  background-color: var(--color-dark-4) !important
}

.bg-dark-5 {
  background-color: var(--color-dark-5) !important
}

.bg-light-1 {
  background-color: var(--color-light-1) !important
}

.bg-light-2 {
  background-color: var(--color-light-2) !important
}

.bg-light-3 {
  background-color: var(--color-light-3) !important
}

.bg-light-4 {
  background-color: var(--color-light-4) !important
}

.bg-light-5 {
  background-color: var(--color-light-5) !important
}

.bg-blue-1 {
  background-color: var(--color-blue-1) !important
}

.bg-blue-2 {
  background-color: var(--color-blue-2) !important
}

.bg-blue-3 {
  background-color: var(--color-blue-3) !important
}

.bg-green-1 {
  background-color: var(--color-green-1) !important
}

.bg-green-2 {
  background-color: var(--color-green-2) !important
}

.bg-green-3 {
  background-color: var(--color-green-3) !important
}

.bg-green-4 {
  background-color: var(--color-green-4) !important
}

.bg-green-5 {
  background-color: var(--color-green-5) !important
}

.bg-yellow-1 {
  background-color: var(--color-yellow-1) !important
}

.bg-yellow-2 {
  background-color: var(--color-yellow-2) !important
}

.bg-yellow-3 {
  background-color: var(--color-yellow-3) !important
}

.bg-yellow-4 {
  background-color: var(--color-yellow-4) !important
}

.bg-yellow-5 {
  background-color: var(--color-yellow-5) !important
}

.bg-pg-gradyan {
  background: linear-gradient(113deg, var(--color-green-4) 0%, var(--color-green-1) 100%);
}

.bg-gradyan-1 {
  background: radial-gradient(101.06% 233.34% at 29.14% 50%, rgba(198, 215, 235, .4) 0, #c6d7eb 61.98%), #fff;
}

.bg-gradyan-2 {
  background: radial-gradient(101.06% 233.34% at 29.14% 50%, rgba(204, 231, 214, .4) 0, #cce7d6 61.98%), #fff;
}

.bg-gradyan-3 {
  background: radial-gradient(101.06% 233.34% at 29.14% 50%, hsla(22, 36%, 85%, .4) 0, #e7d6cc 61.98%), #fff
}

.bg-footer-gradyan {
  background: linear-gradient(90deg, #EAC645 0%, #F2A173 17.57%, #97DEC0 49.15%, #6C87E6 59.32%, #CE4EEE 78.05%, #EF5B2C 100%);
}

.bg-gradyan-partner {
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
}

.bg-yellow-gradyan-1 {
  background: linear-gradient(135deg, var(--color-yellow-1), var(--color-yellow-3)) !important;
}

.bg-brown-1 {
  background-color: var(--color-brown-1) !important
}

.bg-purple-1 {
  background-color: var(--color-purple-1) !important
}

.bg-red-1 {
  background-color: var(--color-red-1) !important
}

.bg-red-2 {
  background-color: var(--color-red-2) !important
}

.bg-red-3 {
  background-color: var(--color-red-3) !important
}

.bg-info-1 {
  background-color: var(--color-info-1) !important
}

.bg-info-2 {
  background-color: var(--color-info-2) !important
}

.bg-warning-1 {
  background-color: var(--color-warning-1) !important
}

.bg-warning-2 {
  background-color: var(--color-warning-2) !important
}

.bg-error-1 {
  background-color: var(--color-error-1) !important
}

.bg-error-2 {
  background-color: var(--color-error-2) !important
}

.bg-success-1 {
  background-color: var(--color-success-1) !important
}

.bg-success-2 {
  background-color: var(--color-success-2) !important
}

.bg-blue-1-05 {
  background-color: rgb(247 247 247 / 81%);
}

.bg-white-10 {
  background-color: rgba(255, 255, 255, 0.1)
}

.bg-white-20 {
  background-color: rgba(255, 255, 255, 0.2)
}

.bg-white-50 {
  background-color: rgba(255, 255, 255, 0.5)
}

.bg-black-20 {
  background-color: rgba(0, 0, 0, 0.2)
}

.bg-black-10 {
  background-color: rgba(0, 0, 0, 0.1)
}

.text-white {
  color: var(--color-white)
}

.text-black {
  color: var(--color-black)
}

.text-border {
  color: var(--color-border)
}

.text-dark-1 {
  color: var(--color-dark-1)
}

.text-dark-2 {
  color: var(--color-dark-2)
}

.text-dark-3 {
  color: var(--color-dark-3)
}

.text-dark-4 {
  color: var(--color-dark-4)
}

.text-dark-5 {
  color: var(--color-dark-5)
}

.text-light-1 {
  color: var(--color-light-1)
}

.text-light-2 {
  color: var(--color-light-2)
}

.text-light-3 {
  color: var(--color-light-3)
}

.text-blue-1 {
  color: var(--color-blue-1)
}

.text-blue-2 {
  color: var(--color-blue-2)
}

.text-blue-3 {
  color: var(--color-blue-3)
}

.text-green-1 {
  color: var(--color-green-1)
}

.text-green-2 {
  color: var(--color-green-2)
}

.text-green-3 {
  color: var(--color-green-3)
}

.text-green-4 {
  color: var(--color-green-4)
}

.text-green-5 {
  color: var(--color-green-5)
}

.text-yellow-1 {
  color: var(--color-yellow-1)
}

.text-yellow-2 {
  color: var(--color-yellow-2)
}

.text-yellow-3 {
  color: var(--color-yellow-3)
}

.text-yellow-4 {
  color: var(--color-yellow-4)
}

.text-yellow-5 {
  color: var(--color-yellow-5)
}

.text-brown-1 {
  color: var(--color-brown-1)
}

.text-purple-1 {
  color: var(--color-purple-1)
}

.text-red-1 {
  color: var(--color-red-1)
}

.text-red-2 {
  color: var(--color-red-2)
}

.text-red-3 {
  color: var(--color-red-3)
}

.text-info-1 {
  color: var(--color-info-1)
}

.text-info-2 {
  color: var(--color-info-2)
}

.text-warning-1 {
  color: var(--color-warning-1)
}

.text-warning-2 {
  color: var(--color-warning-2)
}

.text-error-1 {
  color: var(--color-error-1)
}

.text-error-2 {
  color: var(--color-error-2)
}

.text-success-1 {
  color: var(--color-success-1)
}

.text-success-2 {
  color: var(--color-success-2)
}

.text-inherit {
  color: inherit
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5)
}

.text-gradyan-1 {
  color: var(--color-yellow-1);
  background: linear-gradient(135deg, var(--color-yellow-1), var(--color-yellow-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.bg-blur {
  background: #ffffff0a;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.bg-blur-1 {
  background: #a6a6a6a3;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.bg-blur-2 {
  background: #eff5fb24;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bg-blur-3 {
  background: #ffffff8f;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.bg-blur-4 {
  background: #0000001c;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bg-blur-5 {
  background: #0000001c;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}


/*** BTN STYLE ***/
button {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  text-decoration: none;
}

button:focus {
  outline: 0;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  vertical-align: middle;
  text-align: center;
  padding: 12px 24px;
  line-height: 1;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  border-radius: 40px;
  height: 40px;
  border: 1px solid transparent;
  transition: all 0.5s ease;
  box-shadow: 0 2px 5px 0px #0000001c;
}

.button i.ml-none,
.button svg.ml-none {
  margin-left: 0px !important;
}

.button i,
.button svg {
  margin-left: -6px !important;
}

.button.-sm {
  padding: 0;
  font-size: 12px;
  border-radius: 8px;
  height: 30px;
  line-height: 30px;
}

.button.-md {
  padding: 0;
  font-size: 14px;
  border-radius: 10px;
  height: 45px;
  line-height: 45px;
}

.button.-lg {
  padding: 0;
  border-radius: 16px;
  height: 60px;
  font-size: 16px;
  line-height: 60px;
}

.button.-min-180 {
  min-width: 180px;
}

.button.-underline:hover {
  text-decoration: underline;
}

.button.-white:hover {
  border-color: var(--color-white);
  background-color: var(--color-white) !important;
  color: white !important;
}

.button.-outline-white {
  border-color: var(--color-white);
}

.button.-outline-white:hover {
  background-color: var(--color-white);
  border-color: transparent;
  color: white !important;
}

.button.-black:hover {
  border-color: var(--color-black);
  background-color: var(--color-black) !important;
  color: white !important;
}

.button.-outline-black {
  border-color: var(--color-black);
}

.button.-outline-black:hover {
  background-color: var(--color-black);
  border-color: transparent;
  color: white !important;
}

.button.-border:hover {
  border-color: var(--color-border);
  background-color: var(--color-border) !important;
  color: white !important;
}

.button.-outline-border {
  border-color: var(--color-border);
}

.button.-outline-border:hover {
  background-color: var(--color-border);
  border-color: transparent;
  color: white !important;
}

.button.-dark-1:hover {
  border-color: var(--color-dark-4);
  background-color: var(--color-dark-4) !important;
  color: white !important;
}

.button.-outline-dark-1 {
  border-color: var(--color-dark-1);
  background-color: transparent;
}

.button.-outline-dark-1:hover {
  background-color: var(--color-dark-1);
  border-color: transparent;
  color: white !important;
}

.button.-dark-2:hover {
  border-color: var(--color-dark-2);
  background-color: var(--color-dark-2) !important;
  color: white !important;
}

.button.-outline-dark-2 {
  border-color: var(--color-dark-2);
}

.button.-outline-dark-2:hover {
  background-color: var(--color-dark-2);
  border-color: transparent;
  color: white !important;
}

.button.-dark-3:hover {
  border-color: var(--color-dark-3);
  background-color: var(--color-dark-3) !important;
  color: white !important;
}

.button.-outline-dark-3 {
  border-color: var(--color-dark-3);
}

.button.-outline-dark-3:hover {
  background-color: var(--color-dark-3);
  border-color: transparent;
  color: white !important;
}

.button.-dark-4:hover {
  border-color: var(--color-dark-4);
  background-color: var(--color-dark-4) !important;
  color: white !important;
}

.button.-outline-dark-4 {
  border-color: var(--color-dark-4);
}

.button.-outline-dark-4:hover {
  background-color: var(--color-dark-4);
  border-color: transparent;
  color: white !important;
}

.button.-light-1:hover {
  border-color: var(--color-light-1);
  background-color: var(--color-light-1) !important;
  color: white !important;
}

.button.-outline-light-1 {
  border-color: var(--color-light-1);
}

.button.-outline-light-1:hover {
  background-color: var(--color-light-1);
  border-color: transparent;
  color: white !important;
}

.button.-light-2:hover {
  border-color: var(--color-dark-4) !important;
  background-color: var(--color-light-2) !important;
  color: var(--color-dark-4) !important;
}

.button.-outline-light-2 {
  border-color: var(--color-light-2);
}

.button.-outline-light-2:hover {
  background-color: var(--color-light-2);
  border-color: transparent;
}

.button.-light-3:hover {
  border-color: var(--color-light-3);
  background-color: var(--color-light-3) !important;
  color: var(--color-green-2) !important;
}

.button.-outline-light-3 {
  border-color: var(--color-light-3);
}

.button.-outline-light-3:hover {
  background-color: var(--color-light-3);
  border-color: transparent;
  color: white !important;
}

.button.-blue-1:hover {
  border-color: var(--color-blue-1) !important;
  background-color: var(--color-blue-1) !important;
  color: white !important;
}

.button.-outline-blue-1 {
  border-color: var(--color-blue-1);
}

.button.-outline-blue-1:hover {
  background-color: var(--color-blue-1);
  border-color: transparent;
  color: white !important;
}

.button.-blue-2:hover {
  border-color: var(--color-blue-2);
  background-color: var(--color-blue-2) !important;
  color: white !important;
}

.button.-outline-blue-2 {
  border-color: var(--color-blue-2);
}

.button.-outline-blue-2:hover {
  background-color: var(--color-blue-2);
  border-color: transparent;
  color: white !important;
}

.button.-green-1:hover {
  border-color: var(--color-green-1);
  background-color: var(--color-green-1) !important;
  color: white !important;
}

.button.-outline-green-1 {
  border-color: var(--color-green-1);
}

.button.-outline-green-1:hover {
  background-color: var(--color-green-1);
  border-color: transparent;
  color: white !important;
}

.button.-green-2:hover {
  border-color: var(--color-green-2);
  background-color: var(--color-green-2) !important;
  color: white !important;
}

.button.-outline-green-2 {
  border-color: var(--color-green-2);
}

.button.-outline-green-2:hover {
  background-color: var(--color-green-2);
  border-color: transparent;
  color: white !important;
}

.button.-green-3:hover {
  border-color: var(--color-green-3);
  background-color: var(--color-green-3) !important;
  color: white !important;
}

.button.-outline-green-3 {
  border-color: var(--color-green-3);
}

.button.-outline-green-3:hover {
  background-color: var(--color-green-3);
  border-color: transparent;
  color: white !important;
}

.button.-green-4:hover {
  border-color: var(--color-green-4);
  background-color: var(--color-green-4) !important;
  color: white !important;
}

.button.-outline-green-4 {
  border-color: var(--color-green-4);
}

.button.-outline-green-4:hover {
  background-color: var(--color-green-4);
  border-color: transparent;
  color: white !important;
}

.button.-green-5:hover {
  border-color: var(--color-green-5);
  background-color: var(--color-green-5) !important;
  color: white !important;
}

.button.-outline-green-5 {
  border-color: var(--color-green-5);
}

.button.-outline-green-5:hover {
  background-color: var(--color-green-5);
  border-color: transparent;
  color: white !important;
}

.bg-pg-gradyan:hover {
  opacity: .7;
}


.button.-yellow-1 {
  border-color: var(--color-yellow-1);
  background-color: var(--color-yellow-1);
  color: white;
}

.button.-yellow-1:hover {
  border-color: var(--color-yellow-1);
  background-color: var(--color-yellow-1) !important;
  color: white !important;
}

.button.-outline-yellow-1 {
  border-color: var(--color-yellow-1);
  background-color: transparent !important;
}

.button.-outline-yellow-1:hover {
  background-color: var(--color-yellow-1);
  border-color: transparent;
  color: white !important;
}

.button.-yellow-2 {
  border-color: var(--color-yellow-2);
  background-color: var(--color-yellow-2);
  color: white;
}

.button.-yellow-2:hover {
  border-color: var(--color-yellow-2);
  background-color: var(--color-yellow-2) !important;
  color: white !important;
}

.button.-outline-yellow-2 {
  border-color: var(--color-yellow-2);
  background-color: transparent !important;
}

.button.-outline-yellow-2:hover {
  background-color: var(--color-yellow-2);
  border-color: transparent;
  color: white !important;
}

.button.-yellow-3 {
  border-color: var(--color-yellow-3);
  background-color: var(--color-yellow-3);
  color: white;
}

.button.-yellow-3:hover {
  border-color: var(--color-yellow-3);
  background-color: var(--color-yellow-3);
  color: white;
}

.button.-outline-yellow-3 {
  border-color: var(--color-yellow-3);
  background-color: transparent !important;
}

.button.-outline-yellow-3:hover {
  background-color: var(--color-yellow-3);
  border-color: transparent;
  color: white !important;
}

.button.-yellow-4 {
  border-color: var(--color-yellow-4);
  background-color: var(--color-yellow-4);
  color: white;
}

.button.-yellow-4:hover {
  border-color: var(--color-yellow-4);
  background-color: var(--color-yellow-4) !important;
  color: white !important;
}

.button.-outline-yellow-4 {
  border-color: var(--color-yellow-4);
  background-color: transparent !important;
}

.button.-outline-yellow-4:hover {
  background-color: var(--color-yellow-4);
  border-color: transparent;
  color: white !important;
}

.button.-yellow-5 {
  border-color: var(--color-yellow-5);
  background-color: var(--color-yellow-5);
  color: white;
}

.button.-yellow-5:hover {
  border-color: var(--color-yellow-5);
  background-color: var(--color-yellow-5) !important;
  color: var(--color-yellow-1) !important;
}

.button.-outline-yellow-5 {
  border-color: var(--color-yellow-5);
  background-color: transparent !important;
}

.button.-outline-yellow-5:hover {
  background-color: var(--color-yellow-5);
  border-color: transparent;
  color: white !important;
}




.button.-brown-1:hover {
  border-color: var(--color-brown-1);
  background-color: var(--color-brown-1) !important;
  color: white !important;
}

.button.-outline-brown-1 {
  border-color: var(--color-brown-1);
}

.button.-outline-brown-1:hover {
  background-color: var(--color-brown-1);
  border-color: transparent;
  color: white !important;
}

.button.-purple-1:hover {
  border-color: var(--color-purple-1);
  background-color: var(--color-purple-1) !important;
  color: white !important;
}

.button.-outline-purple-1 {
  border-color: var(--color-purple-1);
}

.button.-outline-purple-1:hover {
  background-color: var(--color-purple-1);
  border-color: transparent;
  color: white !important;
}

.button.-red-1 {
  border-color: none;
  background-color: var(--color-red-1) !important;
  color: white !important;
}

.button.-red-1:hover {
  border-color: none;
  background-color: var(--color-red-2) !important;
  color: white !important;
}

.button.-red-1:hover svg {
  color: var(--color-white) !important;
}

.button.-outline-red-1 {
  background-color: transparent !important;
  border-color: var(--color-red-1) !important;
  color: var(--color-red-1) !important;
}

.button.-outline-red-1:hover svg {
  color: var(--color-white) !important;
}

.button.-outline-red-1:hover {
  background-color: var(--color-red-1) !important;
  border-color: none !important;
  color: var(--color-white) !important;
}

.button.-red-2:hover {
  border-color: var(--color-red-2);
  background-color: var(--color-red-2) !important;
  color: white !important;
}

.button.-outline-red-2 {
  border-color: var(--color-red-2);
}

.button.-outline-red-2:hover {
  background-color: var(--color-red-2);
  border-color: transparent;
  color: white !important;
}

.button.-red-3:hover {
  border-color: var(--color-red-3);
  background-color: var(--color-red-3) !important;
  color: white !important;
}

.button.-outline-red-3 {
  border-color: var(--color-red-3);
}

.button.-outline-red-3:hover {
  background-color: var(--color-red-3);
  border-color: transparent;
  color: white !important;
}

.button.-info-1:hover {
  border-color: var(--color-info-1);
  background-color: var(--color-info-1) !important;
  color: white !important;
}

.button.-outline-info-1 {
  border-color: var(--color-info-1);
}

.button.-outline-info-1:hover {
  background-color: var(--color-info-1);
  border-color: transparent;
  color: white !important;
}

.button.-info-2:hover {
  border-color: var(--color-info-2);
  background-color: var(--color-info-2) !important;
  color: white !important;
}

.button.-outline-info-2 {
  border-color: var(--color-info-2);
}

.button.-outline-info-2:hover {
  background-color: var(--color-info-2);
  border-color: transparent;
  color: white !important;
}

.button.-warning-1:hover {
  border-color: var(--color-warning-1);
  background-color: var(--color-warning-1) !important;
  color: white !important;
}

.button.-outline-warning-1 {
  border-color: var(--color-warning-1);
}

.button.-outline-warning-1:hover {
  background-color: var(--color-warning-1);
  border-color: transparent;
  color: white !important;
}

.button.-warning-2:hover {
  border-color: var(--color-warning-2);
  background-color: var(--color-warning-2) !important;
  color: white !important;
}

.button.-outline-warning-2 {
  border-color: var(--color-warning-2);
}

.button.-outline-warning-2:hover {
  background-color: var(--color-warning-2);
  border-color: transparent;
  color: white !important;
}

.button.-error-1:hover {
  border-color: var(--color-error-1);
  background-color: var(--color-error-1) !important;
  color: white !important;
}

.button.-outline-error-1 {
  border-color: var(--color-error-1);
}

.button.-outline-error-1:hover {
  background-color: var(--color-error-1);
  border-color: transparent;
  color: white !important;
}

.button.-error-2:hover {
  border-color: var(--color-error-2);
  background-color: var(--color-error-2) !important;
  color: white !important;
}

.button.-outline-error-2 {
  border-color: var(--color-error-2);
}

.button.-outline-error-2:hover {
  background-color: var(--color-error-2);
  border-color: transparent;
  color: white !important;
}

.button.-success-1:hover {
  border-color: var(--color-success-1);
  background-color: var(--color-success-1) !important;
  color: white !important;
}

.button.-outline-success-1 {
  border-color: var(--color-success-1);
}

.button.-outline-success-1:hover {
  background-color: var(--color-success-1);
  border-color: transparent;
  color: white !important;
}

.button.-success-2:hover {
  border-color: var(--color-success-2);
  background-color: var(--color-success-2) !important;
  color: white !important;
}

.button.-outline-success-2 {
  border-color: var(--color-success-2);
}

.button.-outline-success-2:hover {
  background-color: var(--color-success-2);
  border-color: transparent;
  color: white !important;
}

.button.-white:hover {
  background-color: var(--color-light-3) !important;
  color: var(--color-dark-1) !important;
}

.button.-blue-1-05:hover {
  background-color: rgba(53, 84, 209, 0.05) !important;
  color: var(--color-blue-1) !important;
}

.button.-outline-white:hover {
  background-color: white !important;
  color: var(--color-dark-1) !important;
}


/*** ratio ***/
.ratio>* {
  position: relative;
  display: block;
  overflow: hidden;
  width: auto;
  height: auto;
  left: auto;
  top: auto;
}

.ratio::before {
  display: block;
  width: 100%;
  content: "";
}

[class*="ratio-"] {
  display: block;
  width: 100%;
  position: relative;
}

[class*="ratio-"]>* {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 1. Common Aspect Ratios */
.ratio-1\:1 {
  aspect-ratio: 1 / 1;
}

/* Square */
.ratio-2\:1 {
  aspect-ratio: 2 / 1;
}

.ratio-3\:2 {
  aspect-ratio: 3 / 2;
}

.ratio-4\:1 {
  aspect-ratio: 4 / 1;
}

.ratio-4\:2 {
  aspect-ratio: 4 / 2;
}

.ratio-4\:3 {
  aspect-ratio: 4 / 3;
}

.ratio-5\:1 {
  aspect-ratio: 5 / 1;
}

.ratio-5\:2 {
  aspect-ratio: 5 / 2;
}

.ratio-5\:3 {
  aspect-ratio: 5 / 3;
}

.ratio-5\:4 {
  aspect-ratio: 5 / 4;
}

.ratio-16\:9 {
  aspect-ratio: 16 / 9;
}

/* HD / Standard video */
.ratio-21\:9 {
  aspect-ratio: 21 / 9;
}

/* CinemaScope */
.ratio-32\:9 {
  aspect-ratio: 32 / 9;
}

/* UltraWide */
.ratio-9\:10 {
  aspect-ratio: 9 / 10;
}

.ratio-9\:11 {
  aspect-ratio: 9 / 11;
}

.ratio-9\:12 {
  aspect-ratio: 9 / 12;
}

.ratio-9\:13 {
  aspect-ratio: 9 / 13;
}

.ratio-9\:14 {
  aspect-ratio: 9 / 14;
}

.ratio-9\:15 {
  aspect-ratio: 9 / 15;
}

.ratio-9\:16 {
  aspect-ratio: 9 / 16;
}

/* Vertical video */
.ratio-3\:4 {
  aspect-ratio: 3 / 4;
}

.ratio-4\:5 {
  aspect-ratio: 4 / 5;
}

.ratio-2\:3 {
  aspect-ratio: 2 / 3;
}

.ratio-5\:7 {
  aspect-ratio: 5 / 7;
}

/* Postcard */
.ratio-3\:5 {
  aspect-ratio: 3 / 5;
}

.ratio-4\:6 {
  aspect-ratio: 4 / 6;
}

/* 2. Social Media Specific Ratios */
.ratio-instagram-square {
  aspect-ratio: 1 / 1;
}

.ratio-instagram-story {
  aspect-ratio: 9 / 16;
}

.ratio-instagram-portrait {
  aspect-ratio: 4 / 5;
}

.ratio-youtube-standard {
  aspect-ratio: 16 / 9;
}

.ratio-youtube-shorts {
  aspect-ratio: 9 / 16;
}

.ratio-facebook-feed {
  aspect-ratio: 16 / 9;
}

.ratio-facebook-story {
  aspect-ratio: 9 / 16;
}

.ratio-tiktok {
  aspect-ratio: 9 / 16;
}

/* 3. UI / Component Ratios */
.ratio-card {
  aspect-ratio: 4 / 3;
}

.ratio-card-wide {
  aspect-ratio: 3 / 2;
}

.ratio-card-tall {
  aspect-ratio: 2 / 3;
}

.ratio-banner {
  aspect-ratio: 21 / 9;
}

.ratio-hero {
  aspect-ratio: 32 / 9;
}

.ratio-thumb {
  aspect-ratio: 16 / 9;
}

.ratio-thumb-sm {
  aspect-ratio: 4 / 3;
}

.ratio-thumb-vert {
  aspect-ratio: 3 / 4;
}

/* 4. Design-Specific Ratios */
.ratio-golden-landscape {
  aspect-ratio: 1.618 / 1;
}

.ratio-golden-portrait {
  aspect-ratio: 1 / 1.618;
}

/** eski oran **/
.ratio-6\:5 {
  aspect-ratio: 6 / 5;
}

.ratio-8\:5 {
  aspect-ratio: 8 / 5;
}

.ratio-64\:45 {
  aspect-ratio: 64 / 45;
}

.ratio-23\:18 {
  aspect-ratio: 23 / 18;
}

.ratio-41\:35 {
  aspect-ratio: 41 / 35;
}

.ratio-41\:43 {
  aspect-ratio: 41 / 43;
}

.ratio-41\:44 {
  aspect-ratio: 41 / 44;
}

.ratio-41\:45 {
  aspect-ratio: 41 / 45;
}

.ratio-63\:55 {
  aspect-ratio: 63 / 55;
}

/* 5. Responsive Examples (only 1 sample each) */
@media (max-width: 1199px) {

  /* 1. Common Aspect Ratios */
  .xl\:ratio-1\:1 {
    aspect-ratio: 1 / 1;
  }

  /* Square */
  .xl\:ratio-2\:1 {
    aspect-ratio: 2 / 1;
  }

  .xl\:ratio-3\:2 {
    aspect-ratio: 3 / 2;
  }

  .xl\:ratio-4\:1 {
    aspect-ratio: 4 / 1;
  }

  .xl\:ratio-4\:2 {
    aspect-ratio: 4 / 2;
  }

  .xl\:ratio-4\:3 {
    aspect-ratio: 4 / 3;
  }

  .xl\:ratio-5\:1 {
    aspect-ratio: 5 / 1;
  }

  .xl\:ratio-5\:2 {
    aspect-ratio: 5 / 2;
  }

  .xl\:ratio-5\:3 {
    aspect-ratio: 5 / 3;
  }

  .xl\:ratio-5\:4 {
    aspect-ratio: 5 / 4;
  }

  .xl\:ratio-16\:9 {
    aspect-ratio: 16 / 9;
  }

  /* HD / Standard video */
  .xl\:ratio-21\:9 {
    aspect-ratio: 21 / 9;
  }

  /* CinemaScope */
  .xl\:ratio-32\:9 {
    aspect-ratio: 32 / 9;
  }

  /* UltraWide */
  .xl\:ratio-9\:10 {
    aspect-ratio: 9 / 10;
  }

  .xl\:ratio-9\:11 {
    aspect-ratio: 9 / 11;
  }

  .xl\:ratio-9\:12 {
    aspect-ratio: 9 / 12;
  }

  .xl\:ratio-9\:13 {
    aspect-ratio: 9 / 13;
  }

  .xl\:ratio-9\:14 {
    aspect-ratio: 9 / 14;
  }

  .xl\:ratio-9\:15 {
    aspect-ratio: 9 / 15;
  }

  .xl\:ratio-9\:16 {
    aspect-ratio: 9 / 16;
  }

  /* Vertical video */
  .xl\:ratio-3\:4 {
    aspect-ratio: 3 / 4;
  }

  .xl\:ratio-4\:5 {
    aspect-ratio: 4 / 5;
  }

  .xl\:ratio-2\:3 {
    aspect-ratio: 2 / 3;
  }

  .xl\:ratio-5\:7 {
    aspect-ratio: 5 / 7;
  }

  /* Postcard */
  .xl\:ratio-3\:5 {
    aspect-ratio: 3 / 5;
  }

  .xl\:ratio-4\:6 {
    aspect-ratio: 4 / 6;
  }

  /* 2. Social Media Specific Ratios */
  .xl\:ratio-instagram-square {
    aspect-ratio: 1 / 1;
  }

  .xl\:ratio-instagram-story {
    aspect-ratio: 9 / 16;
  }

  .xl\:ratio-instagram-portrait {
    aspect-ratio: 4 / 5;
  }

  .xl\:ratio-youtube-standard {
    aspect-ratio: 16 / 9;
  }

  .xl\:ratio-youtube-shorts {
    aspect-ratio: 9 / 16;
  }

  .xl\:ratio-facebook-feed {
    aspect-ratio: 16 / 9;
  }

  .xl\:ratio-facebook-story {
    aspect-ratio: 9 / 16;
  }

  .xl\:ratio-tiktok {
    aspect-ratio: 9 / 16;
  }

  /* 3. UI / Component Ratios */
  .xl\:ratio-card {
    aspect-ratio: 4 / 3;
  }

  .xl\:ratio-card-wide {
    aspect-ratio: 3 / 2;
  }

  .xl\:ratio-card-tall {
    aspect-ratio: 2 / 3;
  }

  .xl\:ratio-banner {
    aspect-ratio: 21 / 9;
  }

  .xl\:ratio-hero {
    aspect-ratio: 32 / 9;
  }

  .xl\:ratio-thumb {
    aspect-ratio: 16 / 9;
  }

  .xl\:ratio-thumb-sm {
    aspect-ratio: 4 / 3;
  }

  .xl\:ratio-thumb-vert {
    aspect-ratio: 3 / 4;
  }

  /* 4. Design-Specific Ratios */
  .xl\:ratio-golden-landscape {
    aspect-ratio: 1.618 / 1;
  }

  .xl\:ratio-golden-portrait {
    aspect-ratio: 1 / 1.618;
  }

  /** eski oran **/
  .xl\:ratio-6\:5 {
    aspect-ratio: 6 / 5;
  }

  .xl\:ratio-8\:5 {
    aspect-ratio: 8 / 5;
  }

  .xl\:ratio-64\:45 {
    aspect-ratio: 64 / 45;
  }

  .xl\:ratio-23\:18 {
    aspect-ratio: 23 / 18;
  }

  .xl\:ratio-41\:35 {
    aspect-ratio: 41 / 35;
  }

  .xl\:ratio-41\:43 {
    aspect-ratio: 41 / 43;
  }

  .xl\:ratio-41\:44 {
    aspect-ratio: 41 / 44;
  }

  .xl\:ratio-41\:45 {
    aspect-ratio: 41 / 45;
  }

  .xl\:ratio-63\:55 {
    aspect-ratio: 63 / 55;
  }
}

@media (max-width: 991px) {

  /* 1. Common Aspect Ratios */
  .lg\:ratio-1\:1 {
    aspect-ratio: 1 / 1;
  }

  /* Square */
  .lg\:ratio-2\:1 {
    aspect-ratio: 2 / 1;
  }

  .lg\:ratio-3\:2 {
    aspect-ratio: 3 / 2;
  }

  .lg\:ratio-4\:1 {
    aspect-ratio: 4 / 1;
  }

  .lg\:ratio-4\:2 {
    aspect-ratio: 4 / 2;
  }

  .lg\:ratio-4\:3 {
    aspect-ratio: 4 / 3;
  }

  .lg\:ratio-5\:1 {
    aspect-ratio: 5 / 1;
  }

  .lg\:ratio-5\:2 {
    aspect-ratio: 5 / 2;
  }

  .lg\:ratio-5\:3 {
    aspect-ratio: 5 / 3;
  }

  .lg\:ratio-5\:4 {
    aspect-ratio: 5 / 4;
  }

  .lg\:ratio-16\:9 {
    aspect-ratio: 16 / 9;
  }

  /* HD / Standard video */
  .lg\:ratio-21\:9 {
    aspect-ratio: 21 / 9;
  }

  /* CinemaScope */
  .lg\:ratio-32\:9 {
    aspect-ratio: 32 / 9;
  }

  /* UltraWide */
  .lg\:ratio-9\:10 {
    aspect-ratio: 9 / 10;
  }

  .lg\:ratio-9\:11 {
    aspect-ratio: 9 / 11;
  }

  .lg\:ratio-9\:12 {
    aspect-ratio: 9 / 12;
  }

  .lg\:ratio-9\:13 {
    aspect-ratio: 9 / 13;
  }

  .lg\:ratio-9\:14 {
    aspect-ratio: 9 / 14;
  }

  .lg\:ratio-9\:15 {
    aspect-ratio: 9 / 15;
  }

  .lg\:ratio-9\:16 {
    aspect-ratio: 9 / 16;
  }

  /* Vertical video */
  .lg\:ratio-3\:4 {
    aspect-ratio: 3 / 4;
  }

  .lg\:ratio-4\:5 {
    aspect-ratio: 4 / 5;
  }

  .lg\:ratio-2\:3 {
    aspect-ratio: 2 / 3;
  }

  .lg\:ratio-5\:7 {
    aspect-ratio: 5 / 7;
  }

  /* Postcard */
  .lg\:ratio-3\:5 {
    aspect-ratio: 3 / 5;
  }

  .lg\:ratio-4\:6 {
    aspect-ratio: 4 / 6;
  }

  /* 2. Social Media Specific Ratios */
  .lg\:ratio-instagram-square {
    aspect-ratio: 1 / 1;
  }

  .lg\:ratio-instagram-story {
    aspect-ratio: 9 / 16;
  }

  .lg\:ratio-instagram-portrait {
    aspect-ratio: 4 / 5;
  }

  .lg\:ratio-youtube-standard {
    aspect-ratio: 16 / 9;
  }

  .lg\:ratio-youtube-shorts {
    aspect-ratio: 9 / 16;
  }

  .lg\:ratio-facebook-feed {
    aspect-ratio: 16 / 9;
  }

  .lg\:ratio-facebook-story {
    aspect-ratio: 9 / 16;
  }

  .lg\:ratio-tiktok {
    aspect-ratio: 9 / 16;
  }

  /* 3. UI / Component Ratios */
  .lg\:ratio-card {
    aspect-ratio: 4 / 3;
  }

  .lg\:ratio-card-wide {
    aspect-ratio: 3 / 2;
  }

  .lg\:ratio-card-tall {
    aspect-ratio: 2 / 3;
  }

  .lg\:ratio-banner {
    aspect-ratio: 21 / 9;
  }

  .lg\:ratio-hero {
    aspect-ratio: 32 / 9;
  }

  .lg\:ratio-thumb {
    aspect-ratio: 16 / 9;
  }

  .lg\:ratio-thumb-sm {
    aspect-ratio: 4 / 3;
  }

  .lg\:ratio-thumb-vert {
    aspect-ratio: 3 / 4;
  }

  /* 4. Design-Specific Ratios */
  .lg\:ratio-golden-landscape {
    aspect-ratio: 1.618 / 1;
  }

  .lg\:ratio-golden-portrait {
    aspect-ratio: 1 / 1.618;
  }

  /** eski oran **/
  .lg\:ratio-6\:5 {
    aspect-ratio: 6 / 5;
  }

  .lg\:ratio-8\:5 {
    aspect-ratio: 8 / 5;
  }

  .lg\:ratio-64\:45 {
    aspect-ratio: 64 / 45;
  }

  .lg\:ratio-23\:18 {
    aspect-ratio: 23 / 18;
  }

  .lg\:ratio-41\:35 {
    aspect-ratio: 41 / 35;
  }

  .lg\:ratio-41\:43 {
    aspect-ratio: 41 / 43;
  }

  .lg\:ratio-41\:44 {
    aspect-ratio: 41 / 44;
  }

  .lg\:ratio-41\:45 {
    aspect-ratio: 41 / 45;
  }

  .lg\:ratio-63\:55 {
    aspect-ratio: 63 / 55;
  }
}

@media (max-width: 767px) {

  /* 1. Common Aspect Ratios */
  .md\:ratio-1\:1 {
    aspect-ratio: 1 / 1;
  }

  /* Square */
  .md\:ratio-2\:1 {
    aspect-ratio: 2 / 1;
  }

  .md\:ratio-3\:2 {
    aspect-ratio: 3 / 2;
  }

  .md\:ratio-4\:1 {
    aspect-ratio: 4 / 1;
  }

  .md\:ratio-4\:2 {
    aspect-ratio: 4 / 2;
  }

  .md\:ratio-4\:3 {
    aspect-ratio: 4 / 3;
  }

  .md\:ratio-5\:1 {
    aspect-ratio: 5 / 1;
  }

  .md\:ratio-5\:2 {
    aspect-ratio: 5 / 2;
  }

  .md\:ratio-5\:3 {
    aspect-ratio: 5 / 3;
  }

  .md\:ratio-5\:4 {
    aspect-ratio: 5 / 4;
  }

  .md\:ratio-16\:9 {
    aspect-ratio: 16 / 9;
  }

  /* HD / Standard video */
  .md\:ratio-21\:9 {
    aspect-ratio: 21 / 9;
  }

  /* CinemaScope */
  .md\:ratio-32\:9 {
    aspect-ratio: 32 / 9;
  }

  /* UltraWide */
  .md\:ratio-9\:10 {
    aspect-ratio: 9 / 10;
  }

  .md\:ratio-9\:11 {
    aspect-ratio: 9 / 11;
  }

  .md\:ratio-9\:12 {
    aspect-ratio: 9 / 12;
  }

  .md\:ratio-9\:13 {
    aspect-ratio: 9 / 13;
  }

  .md\:ratio-9\:14 {
    aspect-ratio: 9 / 14;
  }

  .md\:ratio-9\:15 {
    aspect-ratio: 9 / 15;
  }

  .md\:ratio-9\:16 {
    aspect-ratio: 9 / 16;
  }

  /* Vertical video */
  .md\:ratio-3\:4 {
    aspect-ratio: 3 / 4;
  }

  .md\:ratio-4\:5 {
    aspect-ratio: 4 / 5;
  }

  .md\:ratio-2\:3 {
    aspect-ratio: 2 / 3;
  }

  .md\:ratio-5\:7 {
    aspect-ratio: 5 / 7;
  }

  /* Postcard */
  .md\:ratio-3\:5 {
    aspect-ratio: 3 / 5;
  }

  .md\:ratio-4\:6 {
    aspect-ratio: 4 / 6;
  }

  /* 2. Social Media Specific Ratios */
  .md\:ratio-instagram-square {
    aspect-ratio: 1 / 1;
  }

  .md\:ratio-instagram-story {
    aspect-ratio: 9 / 16;
  }

  .md\:ratio-instagram-portrait {
    aspect-ratio: 4 / 5;
  }

  .md\:ratio-youtube-standard {
    aspect-ratio: 16 / 9;
  }

  .md\:ratio-youtube-shorts {
    aspect-ratio: 9 / 16;
  }

  .md\:ratio-facebook-feed {
    aspect-ratio: 16 / 9;
  }

  .md\:ratio-facebook-story {
    aspect-ratio: 9 / 16;
  }

  .md\:ratio-tiktok {
    aspect-ratio: 9 / 16;
  }

  /* 3. UI / Component Ratios */
  .md\:ratio-card {
    aspect-ratio: 4 / 3;
  }

  .md\:ratio-card-wide {
    aspect-ratio: 3 / 2;
  }

  .md\:ratio-card-tall {
    aspect-ratio: 2 / 3;
  }

  .md\:ratio-banner {
    aspect-ratio: 21 / 9;
  }

  .md\:ratio-hero {
    aspect-ratio: 32 / 9;
  }

  .md\:ratio-thumb {
    aspect-ratio: 16 / 9;
  }

  .md\:ratio-thumb-sm {
    aspect-ratio: 4 / 3;
  }

  .md\:ratio-thumb-vert {
    aspect-ratio: 3 / 4;
  }

  /* 4. Design-Specific Ratios */
  .md\:ratio-golden-landscape {
    aspect-ratio: 1.618 / 1;
  }

  .md\:ratio-golden-portrait {
    aspect-ratio: 1 / 1.618;
  }

  /** eski oran **/
  .md\:ratio-6\:5 {
    aspect-ratio: 6 / 5;
  }

  .md\:ratio-8\:5 {
    aspect-ratio: 8 / 5;
  }

  .md\:ratio-64\:45 {
    aspect-ratio: 64 / 45;
  }

  .md\:ratio-23\:18 {
    aspect-ratio: 23 / 18;
  }

  .md\:ratio-41\:35 {
    aspect-ratio: 41 / 35;
  }

  .md\:ratio-41\:43 {
    aspect-ratio: 41 / 43;
  }

  .md\:ratio-41\:44 {
    aspect-ratio: 41 / 44;
  }

  .md\:ratio-41\:45 {
    aspect-ratio: 41 / 45;
  }

  .md\:ratio-63\:55 {
    aspect-ratio: 63 / 55;
  }
}

@media (max-width: 575px) {

  /* 1. Common Aspect Ratios */
  .sm\:ratio-1\:1 {
    aspect-ratio: 1 / 1;
  }

  /* Square */
  .sm\:ratio-2\:1 {
    aspect-ratio: 2 / 1;
  }

  .sm\:ratio-3\:2 {
    aspect-ratio: 3 / 2;
  }

  .sm\:ratio-4\:1 {
    aspect-ratio: 4 / 1;
  }

  .sm\:ratio-4\:2 {
    aspect-ratio: 4 / 2;
  }

  .sm\:ratio-4\:3 {
    aspect-ratio: 4 / 3;
  }

  .sm\:ratio-5\:1 {
    aspect-ratio: 5 / 1;
  }

  .sm\:ratio-5\:2 {
    aspect-ratio: 5 / 2;
  }

  .sm\:ratio-5\:3 {
    aspect-ratio: 5 / 3;
  }

  .sm\:ratio-5\:4 {
    aspect-ratio: 5 / 4;
  }

  .sm\:ratio-16\:9 {
    aspect-ratio: 16 / 9;
  }

  /* HD / Standard video */
  .sm\:ratio-21\:9 {
    aspect-ratio: 21 / 9;
  }

  /* CinemaScope */
  .sm\:ratio-32\:9 {
    aspect-ratio: 32 / 9;
  }

  /* UltraWide */
  .sm\:ratio-9\:10 {
    aspect-ratio: 9 / 10;
  }

  .sm\:ratio-9\:11 {
    aspect-ratio: 9 / 11;
  }

  .sm\:ratio-9\:12 {
    aspect-ratio: 9 / 12;
  }

  .sm\:ratio-9\:13 {
    aspect-ratio: 9 / 13;
  }

  .sm\:ratio-9\:14 {
    aspect-ratio: 9 / 14;
  }

  .sm\:ratio-9\:15 {
    aspect-ratio: 9 / 15;
  }

  .sm\:ratio-9\:16 {
    aspect-ratio: 9 / 16;
  }

  /* Vertical video */
  .sm\:ratio-3\:4 {
    aspect-ratio: 3 / 4;
  }

  .sm\:ratio-4\:5 {
    aspect-ratio: 4 / 5;
  }

  .sm\:ratio-2\:3 {
    aspect-ratio: 2 / 3;
  }

  .sm\:ratio-5\:7 {
    aspect-ratio: 5 / 7;
  }

  /* Postcard */
  .sm\:ratio-3\:5 {
    aspect-ratio: 3 / 5;
  }

  .sm\:ratio-4\:6 {
    aspect-ratio: 4 / 6;
  }

  /* 2. Social Media Specific Ratios */
  .sm\:ratio-instagram-square {
    aspect-ratio: 1 / 1;
  }

  .sm\:ratio-instagram-story {
    aspect-ratio: 9 / 16;
  }

  .sm\:ratio-instagram-portrait {
    aspect-ratio: 4 / 5;
  }

  .sm\:ratio-youtube-standard {
    aspect-ratio: 16 / 9;
  }

  .sm\:ratio-youtube-shorts {
    aspect-ratio: 9 / 16;
  }

  .sm\:ratio-facebook-feed {
    aspect-ratio: 16 / 9;
  }

  .sm\:ratio-facebook-story {
    aspect-ratio: 9 / 16;
  }

  .sm\:ratio-tiktok {
    aspect-ratio: 9 / 16;
  }

  /* 3. UI / Component Ratios */
  .sm\:ratio-card {
    aspect-ratio: 4 / 3;
  }

  .sm\:ratio-card-wide {
    aspect-ratio: 3 / 2;
  }

  .sm\:ratio-card-tall {
    aspect-ratio: 2 / 3;
  }

  .sm\:ratio-banner {
    aspect-ratio: 21 / 9;
  }

  .sm\:ratio-hero {
    aspect-ratio: 32 / 9;
  }

  .sm\:ratio-thumb {
    aspect-ratio: 16 / 9;
  }

  .sm\:ratio-thumb-sm {
    aspect-ratio: 4 / 3;
  }

  .sm\:ratio-thumb-vert {
    aspect-ratio: 3 / 4;
  }

  /* 4. Design-Specific Ratios */
  .sm\:ratio-golden-landscape {
    aspect-ratio: 1.618 / 1;
  }

  .sm\:ratio-golden-portrait {
    aspect-ratio: 1 / 1.618;
  }

  /** eski oran **/
  .sm\:ratio-6\:5 {
    aspect-ratio: 6 / 5;
  }

  .sm\:ratio-8\:5 {
    aspect-ratio: 8 / 5;
  }

  .sm\:ratio-64\:45 {
    aspect-ratio: 64 / 45;
  }

  .sm\:ratio-23\:18 {
    aspect-ratio: 23 / 18;
  }

  .sm\:ratio-41\:35 {
    aspect-ratio: 41 / 35;
  }

  .sm\:ratio-41\:43 {
    aspect-ratio: 41 / 43;
  }

  .sm\:ratio-41\:44 {
    aspect-ratio: 41 / 44;
  }

  .sm\:ratio-41\:45 {
    aspect-ratio: 41 / 45;
  }

  .sm\:ratio-63\:55 {
    aspect-ratio: 63 / 55;
  }
}

/*** Zindex ***/
.z-n1 {
  z-index: -1 !important
}

.z-0 {
  z-index: 0 !important
}

.z-1 {
  z-index: 1 !important
}

.z-2 {
  z-index: 2 !important
}

.z-3 {
  z-index: 3 !important
}

.z-4 {
  z-index: 4 !important
}

.z-5 {
  z-index: 5 !important
}

.z-10 {
  z-index: 10 !important
}

.z-50 {
  z-index: 50 !important
}

.z-100 {
  z-index: 100 !important
}

.z-200 {
  z-index: 200 !important
}

.z-500 {
  z-index: 500 !important
}

.z-900 {
  z-index: 900 !important
}

.z-1000 {
  z-index: 1000 !important
}

/*** Letter Space ***/
.ls-0 {
  letter-spacing: 0px !important
}

.ls-1 {
  letter-spacing: 1px !important
}

.ls-2 {
  letter-spacing: 2px !important
}

.ls-3 {
  letter-spacing: 3px !important
}

.ls-4 {
  letter-spacing: 4px !important
}

.ls-5 {
  letter-spacing: 5px !important
}

.ls-10 {
  letter-spacing: 10px !important
}

.ls-n1 {
  letter-spacing: -1px !important
}

.ls-n2 {
  letter-spacing: -2px !important
}

.ls-n3 {
  letter-spacing: -3px !important
}

.ls-n4 {
  letter-spacing: -4px !important
}

.ls-n5 {
  letter-spacing: -5px !important
}

.ls-n10 {
  letter-spacing: -10px !important
}

/*** Line Height ***/
.lh-0 {
  line-height: 0 !important
}

.lh-1 {
  line-height: 1 !important
}

.lh-11 {
  line-height: 1.1 !important
}

.lh-12 {
  line-height: 1.2 !important
}

.lh-13 {
  line-height: 1.3 !important
}

.lh-14 {
  line-height: 1.4 !important
}

.lh-15 {
  line-height: 1.5 !important
}

.lh-16 {
  line-height: 1.6 !important
}

.lh-17 {
  line-height: 1.7 !important
}

.lh-18 {
  line-height: 1.8 !important
}

.lh-19 {
  line-height: 1.9 !important
}

.lh-2 {
  line-height: 2 !important
}

.lh-3 {
  line-height: 3 !important
}

.lh-4 {
  line-height: 4 !important
}

/*** Font Size ***/
.text-4 {
  font-size: var(--text-4) !important;
}

.text-7 {
  font-size: var(--text-7) !important;
}

.text-9 {
  font-size: var(--text-9) !important;
}

.text-10 {
  font-size: var(--text-10) !important;
}

.text-12 {
  font-size: var(--text-12) !important;
}

.text-13 {
  font-size: var(--text-13) !important;
}

.text-14 {
  font-size: var(--text-14) !important;
}

.text-15 {
  font-size: var(--text-15) !important;
}

.text-16 {
  font-size: var(--text-16) !important;
}

.text-18 {
  font-size: var(--text-18) !important;
}

.text-20 {
  font-size: var(--text-20) !important;
}

.text-22 {
  font-size: var(--text-22) !important;
}

.text-24 {
  font-size: var(--text-24) !important;
}

.text-25 {
  font-size: var(--text-25) !important;
}

.text-26 {
  font-size: var(--text-26) !important;
}

.text-30 {
  font-size: var(--text-30) !important;
}

.text-40 {
  font-size: var(--text-40) !important;
}

.text-50 {
  font-size: var(--text-50) !important;
}

.text-60 {
  font-size: var(--text-60) !important;
}

.text-80 {
  font-size: var(--text-80) !important;
}

.text-100 {
  font-size: var(--text-100) !important;
}

.text-120 {
  font-size: var(--text-120) !important;
}

.text-150 {
  font-size: var(--text-150) !important;
}

.text-170 {
  font-size: var(--text-170) !important;
}

.text-200 {
  font-size: var(--text-200) !important;
}

.text-220 {
  font-size: var(--text-220) !important;
}

.text-250 {
  font-size: var(--text-250) !important;
}

.text-300 {
  font-size: var(--text-300) !important;
}

.text-400 {
  font-size: var(--text-400) !important;
}

.text-500 {
  font-size: var(--text-500) !important;
}

@media (max-width: 1199px) {
  .xl\:text-4 {
    font-size: var(--text-4) !important;
  }

  .xl\:text-7 {
    font-size: var(--text-7) !important;
  }

  .xl\:text-9 {
    font-size: var(--text-9) !important;
  }

  .xl\:text-10 {
    font-size: var(--text-10) !important;
  }

  .xl\:text-12 {
    font-size: var(--text-12) !important;
  }

  .xl\:text-13 {
    font-size: var(--text-13) !important;
  }

  .xl\:text-14 {
    font-size: var(--text-14) !important;
  }

  .xl\:text-15 {
    font-size: var(--text-15) !important;
  }

  .xl\:text-16 {
    font-size: var(--text-16) !important;
  }

  .xl\:text-18 {
    font-size: var(--text-18) !important;
  }

  .xl\:text-20 {
    font-size: var(--text-20) !important;
  }

  .xl\:text-22 {
    font-size: var(--text-22) !important;
  }

  .xl\:text-24 {
    font-size: var(--text-24) !important;
  }

  .xl\:text-25 {
    font-size: var(--text-25) !important;
  }

  .xl\:text-26 {
    font-size: var(--text-26) !important;
  }

  .xl\:text-30 {
    font-size: var(--text-30) !important;
  }

  .xl\:text-40 {
    font-size: var(--text-40) !important;
  }

  .xl\:text-50 {
    font-size: var(--text-50) !important;
  }

  .xl\:text-60 {
    font-size: var(--text-60) !important;
  }

  .xl\:text-80 {
    font-size: var(--text-80) !important;
  }

  .xl\:text-100 {
    font-size: var(--text-100) !important;
  }

  .xl\:text-120 {
    font-size: var(--text-120) !important;
  }

  .xl\:text-150 {
    font-size: var(--text-150) !important;
  }

  .xl\:text-170 {
    font-size: var(--text-170) !important;
  }

  .xl\:text-200 {
    font-size: var(--text-200) !important;
  }

  .xl\:text-220 {
    font-size: var(--text-220) !important;
  }

  .xl\:text-250 {
    font-size: var(--text-250) !important;
  }

  .xl\:text-300 {
    font-size: var(--text-300) !important;
  }

  .xl\:text-400 {
    font-size: var(--text-400) !important;
  }

  .xl\:text-500 {
    font-size: var(--text-500) !important;
  }
}

@media (max-width: 991px) {
  .lg\:text-4 {
    font-size: var(--text-4) !important;
  }

  .lg\:text-7 {
    font-size: var(--text-7) !important;
  }

  .lg\:text-9 {
    font-size: var(--text-9) !important;
  }

  .lg\:text-10 {
    font-size: var(--text-10) !important;
  }

  .lg\:text-12 {
    font-size: var(--text-12) !important;
  }

  .lg\:text-13 {
    font-size: var(--text-13) !important;
  }

  .lg\:text-14 {
    font-size: var(--text-14) !important;
  }

  .lg\:text-15 {
    font-size: var(--text-15) !important;
  }

  .lg\:text-16 {
    font-size: var(--text-16) !important;
  }

  .lg\:text-18 {
    font-size: var(--text-18) !important;
  }

  .lg\:text-20 {
    font-size: var(--text-20) !important;
  }

  .lg\:text-22 {
    font-size: var(--text-22) !important;
  }

  .lg\:text-24 {
    font-size: var(--text-24) !important;
  }

  .lg\:text-25 {
    font-size: var(--text-25) !important;
  }

  .lg\:text-26 {
    font-size: var(--text-26) !important;
  }

  .lg\:text-30 {
    font-size: var(--text-30) !important;
  }

  .lg\:text-40 {
    font-size: var(--text-40) !important;
  }

  .lg\:text-50 {
    font-size: var(--text-50) !important;
  }

  .lg\:text-60 {
    font-size: var(--text-60) !important;
  }

  .lg\:text-80 {
    font-size: var(--text-80) !important;
  }

  .lg\:text-100 {
    font-size: var(--text-100) !important;
  }

  .lg\:text-120 {
    font-size: var(--text-120) !important;
  }

  .lg\:text-150 {
    font-size: var(--text-150) !important;
  }

  .lg\:text-170 {
    font-size: var(--text-170) !important;
  }

  .lg\:text-200 {
    font-size: var(--text-200) !important;
  }

  .lg\:text-220 {
    font-size: var(--text-220) !important;
  }

  .lg\:text-250 {
    font-size: var(--text-250) !important;
  }

  .lg\:text-300 {
    font-size: var(--text-300) !important;
  }

  .lg\:text-400 {
    font-size: var(--text-400) !important;
  }

  .lg\:text-500 {
    font-size: var(--text-500) !important;
  }
}

@media (max-width: 767px) {
  .md\:text-4 {
    font-size: var(--text-4) !important;
  }

  .md\:text-7 {
    font-size: var(--text-7) !important;
  }

  .md\:text-9 {
    font-size: var(--text-9) !important;
  }

  .md\:text-10 {
    font-size: var(--text-10) !important;
  }

  .md\:text-12 {
    font-size: var(--text-12) !important;
  }

  .md\:text-13 {
    font-size: var(--text-13) !important;
  }

  .md\:text-14 {
    font-size: var(--text-14) !important;
  }

  .md\:text-15 {
    font-size: var(--text-15) !important;
  }

  .md\:text-16 {
    font-size: var(--text-16) !important;
  }

  .md\:text-18 {
    font-size: var(--text-18) !important;
  }

  .md\:text-20 {
    font-size: var(--text-20) !important;
  }

  .md\:text-22 {
    font-size: var(--text-22) !important;
  }

  .md\:text-24 {
    font-size: var(--text-24) !important;
  }

  .md\:text-25 {
    font-size: var(--text-25) !important;
  }

  .md\:text-26 {
    font-size: var(--text-26) !important;
  }

  .md\:text-30 {
    font-size: var(--text-30) !important;
  }

  .md\:text-40 {
    font-size: var(--text-40) !important;
  }

  .md\:text-50 {
    font-size: var(--text-50) !important;
  }

  .md\:text-60 {
    font-size: var(--text-60) !important;
  }

  .md\:text-80 {
    font-size: var(--text-80) !important;
  }

  .md\:text-100 {
    font-size: var(--text-100) !important;
  }

  .md\:text-120 {
    font-size: var(--text-120) !important;
  }

  .md\:text-150 {
    font-size: var(--text-150) !important;
  }

  .md\:text-170 {
    font-size: var(--text-170) !important;
  }

  .md\:text-200 {
    font-size: var(--text-200) !important;
  }

  .md\:text-220 {
    font-size: var(--text-220) !important;
  }

  .md\:text-250 {
    font-size: var(--text-250) !important;
  }

  .md\:text-300 {
    font-size: var(--text-300) !important;
  }

  .md\:text-400 {
    font-size: var(--text-400) !important;
  }

  .md\:text-500 {
    font-size: var(--text-500) !important;
  }
}

@media (max-width: 575px) {
  .sm\:text-4 {
    font-size: var(--text-4) !important;
  }

  .sm\:text-7 {
    font-size: var(--text-7) !important;
  }

  .sm\:text-9 {
    font-size: var(--text-9) !important;
  }

  .sm\:text-10 {
    font-size: var(--text-10) !important;
  }

  .sm\:text-12 {
    font-size: var(--text-12) !important;
  }

  .sm\:text-13 {
    font-size: var(--text-13) !important;
  }

  .sm\:text-14 {
    font-size: var(--text-14) !important;
  }

  .sm\:text-15 {
    font-size: var(--text-15) !important;
  }

  .sm\:text-16 {
    font-size: var(--text-16) !important;
  }

  .sm\:text-18 {
    font-size: var(--text-18) !important;
  }

  .sm\:text-20 {
    font-size: var(--text-20) !important;
  }

  .sm\:text-22 {
    font-size: var(--text-22) !important;
  }

  .sm\:text-24 {
    font-size: var(--text-24) !important;
  }

  .sm\:text-25 {
    font-size: var(--text-25) !important;
  }

  .sm\:text-26 {
    font-size: var(--text-26) !important;
  }

  .sm\:text-30 {
    font-size: var(--text-30) !important;
  }

  .sm\:text-40 {
    font-size: var(--text-40) !important;
  }

  .sm\:text-50 {
    font-size: var(--text-50) !important;
  }

  .sm\:text-60 {
    font-size: var(--text-60) !important;
  }

  .sm\:text-80 {
    font-size: var(--text-80) !important;
  }

  .sm\:text-100 {
    font-size: var(--text-100) !important;
  }

  .sm\:text-120 {
    font-size: var(--text-120) !important;
  }

  .sm\:text-150 {
    font-size: var(--text-150) !important;
  }

  .sm\:text-170 {
    font-size: var(--text-170) !important;
  }

  .sm\:text-200 {
    font-size: var(--text-200) !important;
  }

  .sm\:text-220 {
    font-size: var(--text-220) !important;
  }

  .sm\:text-250 {
    font-size: var(--text-250) !important;
  }

  .sm\:text-300 {
    font-size: var(--text-300) !important;
  }

  .sm\:text-400 {
    font-size: var(--text-400) !important;
  }

  .sm\:text-500 {
    font-size: var(--text-500) !important;
  }
}

@media (max-width: 479px) {
  .xs\:text-4 {
    font-size: var(--text-4) !important;
  }

  .xs\:text-7 {
    font-size: var(--text-7) !important;
  }

  .xs\:text-9 {
    font-size: var(--text-9) !important;
  }

  .xs\:text-10 {
    font-size: var(--text-10) !important;
  }

  .xs\:text-12 {
    font-size: var(--text-12) !important;
  }

  .xs\:text-13 {
    font-size: var(--text-13) !important;
  }

  .xs\:text-14 {
    font-size: var(--text-14) !important;
  }

  .xs\:text-15 {
    font-size: var(--text-15) !important;
  }

  .xs\:text-16 {
    font-size: var(--text-16) !important;
  }

  .xs\:text-18 {
    font-size: var(--text-18) !important;
  }

  .xs\:text-20 {
    font-size: var(--text-20) !important;
  }

  .xs\:text-22 {
    font-size: var(--text-22) !important;
  }

  .xs\:text-24 {
    font-size: var(--text-24) !important;
  }

  .xs\:text-25 {
    font-size: var(--text-25) !important;
  }

  .xs\:text-26 {
    font-size: var(--text-26) !important;
  }

  .xs\:text-30 {
    font-size: var(--text-30) !important;
  }

  .xs\:text-40 {
    font-size: var(--text-40) !important;
  }

  .xs\:text-50 {
    font-size: var(--text-50) !important;
  }

  .xs\:text-60 {
    font-size: var(--text-60) !important;
  }

  .xs\:text-80 {
    font-size: var(--text-80) !important;
  }

  .xs\:text-100 {
    font-size: var(--text-100) !important;
  }

  .xs\:text-120 {
    font-size: var(--text-120) !important;
  }

  .xs\:text-150 {
    font-size: var(--text-150) !important;
  }

  .xs\:text-170 {
    font-size: var(--text-170) !important;
  }

  .xs\:text-200 {
    font-size: var(--text-200) !important;
  }

  .xs\:text-220 {
    font-size: var(--text-220) !important;
  }

  .xs\:text-250 {
    font-size: var(--text-250) !important;
  }

  .xs\:text-300 {
    font-size: var(--text-300) !important;
  }

  .xs\:text-400 {
    font-size: var(--text-400) !important;
  }

  .xs\:text-500 {
    font-size: var(--text-500) !important;
  }
}


/*** Font Position ***/
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

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

@media (max-width: 1199px) {
  .xl\:text-center {
    text-align: center !important;
  }

  .xl\:text-right {
    text-align: right !important;
  }

  .xl\:text-left {
    text-align: left !important;
  }
}

@media (max-width: 991px) {
  .lg\:text-center {
    text-align: center !important;
  }

  .lg\:text-right {
    text-align: right !important;
  }

  .lg\:text-left {
    text-align: left !important;
  }
}

@media (max-width: 767px) {
  .md\:text-center {
    text-align: center !important;
  }

  .md\:text-right {
    text-align: right !important;
  }

  .md\:text-left {
    text-align: left !important;
  }
}

@media (max-width: 575px) {
  .sm\:text-center {
    text-align: center !important;
  }

  .sm\:text-right {
    text-align: right !important;
  }

  .sm\:text-left {
    text-align: left !important;
  }
}

/*** Font Weight ***/
.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

/*** T R B L ***/
.top-0 {
  top: 0 !important;
}

.right-0 {
  right: 0 !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.left-0 {
  left: 0 !important;
}

.mr-n0 {
  margin-right: 0px !important;
}

.mr-n1 {
  margin-right: -5px !important;
}

.mr-n2 {
  margin-right: -10px !important;
}

.mr-n3 {
  margin-right: -15px !important;
}

.mr-n4 {
  margin-right: -20px !important;
}

.mr-n5 {
  margin-right: -25px !important;
}

.mr-n6 {
  margin-right: -50px !important;
}

.mr-n7 {
  margin-right: -75px !important;
}

.mr-n8 {
  margin-right: -100px !important;
}

.mr-n9 {
  margin-right: -125px !important;
}

.mr-n10 {
  margin-right: -150px !important;
}

.ml-n0 {
  margin-left: 0px !important;
}

.ml-n1 {
  margin-left: -5px !important;
}

.ml-n2 {
  margin-left: -10px !important;
}

.ml-n3 {
  margin-left: -15px !important;
}

.ml-n4 {
  margin-left: -20px !important;
}

.ml-n5 {
  margin-left: -25px !important;
}

.ml-n6 {
  margin-left: -50px !important;
}

.ml-n7 {
  margin-left: -75px !important;
}

.ml-n8 {
  margin-left: -100px !important;
}

.ml-n9 {
  margin-left: -125px !important;
}

.ml-n10 {
  margin-left: -150px !important;
}

.mt-n0 {
  margin-top: 0px !important;
}

.mt-n1 {
  margin-top: -5px !important;
}

.mt-n2 {
  margin-top: -10px !important;
}

.mt-n3 {
  margin-top: -15px !important;
}

.mt-n4 {
  margin-top: -20px !important;
}

.mt-n5 {
  margin-top: -25px !important;
}

.mt-n6 {
  margin-top: -50px !important;
}

.mt-n7 {
  margin-top: -75px !important;
}

.mt-n8 {
  margin-top: -100px !important;
}

.mt-n9 {
  margin-top: -125px !important;
}

.mt-n10 {
  margin-top: -150px !important;
}

.mb-n1 {
  margin-bottom: -5px !important;
}

.mb-n0 {
  margin-bottom: 0px !important;
}

.mb-n2 {
  margin-bottom: -10px !important;
}

.mb-n3 {
  margin-bottom: -15px !important;
}

.mb-n4 {
  margin-bottom: -20px !important;
}

.mb-n5 {
  margin-bottom: -25px !important;
}

.mb-n6 {
  margin-bottom: -50px !important;
}

.mb-n7 {
  margin-bottom: -75px !important;
}

.mb-n8 {
  margin-bottom: -100px !important;
}

.mb-n9 {
  margin-bottom: -125px !important;
}

.mb-n10 {
  margin-bottom: -150px !important;
}

@media (max-width: 1199px) {
  .xl\:mr-n0 {
    margin-right: 0px !important;
  }

  .xl\:mr-n1 {
    margin-right: -5px !important;
  }

  .xl\:mr-n2 {
    margin-right: -10px !important;
  }

  .xl\:mr-n3 {
    margin-right: -15px !important;
  }

  .xl\:mr-n4 {
    margin-right: -20px !important;
  }

  .xl\:mr-n5 {
    margin-right: -25px !important;
  }

  .xl\:mr-n6 {
    margin-right: -50px !important;
  }

  .xl\:mr-n7 {
    margin-right: -75px !important;
  }

  .xl\:mr-n8 {
    margin-right: -100px !important;
  }

  .xl\:mr-n9 {
    margin-right: -125px !important;
  }

  .xl\:mr-n10 {
    margin-right: -150px !important;
  }

  .xl\:ml-n0 {
    margin-left: 0px !important;
  }

  .xl\:ml-n1 {
    margin-left: -5px !important;
  }

  .xl\:ml-n2 {
    margin-left: -10px !important;
  }

  .xl\:ml-n3 {
    margin-left: -15px !important;
  }

  .xl\:ml-n4 {
    margin-left: -20px !important;
  }

  .xl\:ml-n5 {
    margin-left: -25px !important;
  }

  .xl\:ml-n6 {
    margin-left: -50px !important;
  }

  .xl\:ml-n7 {
    margin-left: -75px !important;
  }

  .xl\:ml-n8 {
    margin-left: -100px !important;
  }

  .xl\:ml-n9 {
    margin-left: -125px !important;
  }

  .xl\:ml-n10 {
    margin-left: -150px !important;
  }

  .xl\:mt-n0 {
    margin-top: 0px !important;
  }

  .xl\:mt-n1 {
    margin-top: -5px !important;
  }

  .xl\:mt-n2 {
    margin-top: -10px !important;
  }

  .xl\:mt-n3 {
    margin-top: -15px !important;
  }

  .xl\:mt-n4 {
    margin-top: -20px !important;
  }

  .xl\:mt-n5 {
    margin-top: -25px !important;
  }

  .xl\:mt-n6 {
    margin-top: -50px !important;
  }

  .xl\:mt-n7 {
    margin-top: -75px !important;
  }

  .xl\:mt-n8 {
    margin-top: -100px !important;
  }

  .xl\:mt-n9 {
    margin-top: -125px !important;
  }

  .xl\:mt-n10 {
    margin-top: -150px !important;
  }

  .xl\:mb-n0 {
    margin-bottom: 0px !important;
  }

  .xl\:mb-n1 {
    margin-bottom: -5px !important;
  }

  .xl\:mb-n2 {
    margin-bottom: -10px !important;
  }

  .xl\:mb-n3 {
    margin-bottom: -15px !important;
  }

  .xl\:mb-n4 {
    margin-bottom: -20px !important;
  }

  .xl\:mb-n5 {
    margin-bottom: -25px !important;
  }

  .xl\:mb-n6 {
    margin-bottom: -50px !important;
  }

  .xl\:mb-n7 {
    margin-bottom: -75px !important;
  }

  .xl\:mb-n8 {
    margin-bottom: -100px !important;
  }

  .xl\:mb-n9 {
    margin-bottom: -125px !important;
  }

  .xl\:mb-n10 {
    margin-bottom: -150px !important;
  }
}

@media (max-width: 991px) {
  .lg\:mr-n0 {
    margin-right: 0px !important;
  }

  .lg\:mr-n1 {
    margin-right: -5px !important;
  }

  .lg\:mr-n2 {
    margin-right: -10px !important;
  }

  .lg\:mr-n3 {
    margin-right: -15px !important;
  }

  .lg\:mr-n4 {
    margin-right: -20px !important;
  }

  .lg\:mr-n5 {
    margin-right: -25px !important;
  }

  .lg\:mr-n6 {
    margin-right: -50px !important;
  }

  .lg\:mr-n7 {
    margin-right: -75px !important;
  }

  .lg\:mr-n8 {
    margin-right: -100px !important;
  }

  .lg\:mr-n9 {
    margin-right: -125px !important;
  }

  .lg\:mr-n10 {
    margin-right: -150px !important;
  }

  .lg\:ml-n0 {
    margin-left: 0px !important;
  }

  .lg\:ml-n1 {
    margin-left: -5px !important;
  }

  .lg\:ml-n2 {
    margin-left: -10px !important;
  }

  .lg\:ml-n3 {
    margin-left: -15px !important;
  }

  .lg\:ml-n4 {
    margin-left: -20px !important;
  }

  .lg\:ml-n5 {
    margin-left: -25px !important;
  }

  .lg\:ml-n6 {
    margin-left: -50px !important;
  }

  .lg\:ml-n7 {
    margin-left: -75px !important;
  }

  .lg\:ml-n8 {
    margin-left: -100px !important;
  }

  .lg\:ml-n9 {
    margin-left: -125px !important;
  }

  .lg\:ml-n10 {
    margin-left: -150px !important;
  }

  .lg\:mt-n0 {
    margin-top: 0px !important;
  }

  .lg\:mt-n1 {
    margin-top: -5px !important;
  }

  .lg\:mt-n2 {
    margin-top: -10px !important;
  }

  .lg\:mt-n3 {
    margin-top: -15px !important;
  }

  .lg\:mt-n4 {
    margin-top: -20px !important;
  }

  .lg\:mt-n5 {
    margin-top: -25px !important;
  }

  .lg\:mt-n6 {
    margin-top: -50px !important;
  }

  .lg\:mt-n7 {
    margin-top: -75px !important;
  }

  .lg\:mt-n8 {
    margin-top: -100px !important;
  }

  .lg\:mt-n9 {
    margin-top: -125px !important;
  }

  .lg\:mt-n10 {
    margin-top: -150px !important;
  }

  .lg\:mb-n0 {
    margin-bottom: 0px !important;
  }

  .lg\:mb-n1 {
    margin-bottom: -5px !important;
  }

  .lg\:mb-n2 {
    margin-bottom: -10px !important;
  }

  .lg\:mb-n3 {
    margin-bottom: -15px !important;
  }

  .lg\:mb-n4 {
    margin-bottom: -20px !important;
  }

  .lg\:mb-n5 {
    margin-bottom: -25px !important;
  }

  .lg\:mb-n6 {
    margin-bottom: -50px !important;
  }

  .lg\:mb-n7 {
    margin-bottom: -75px !important;
  }

  .lg\:mb-n8 {
    margin-bottom: -100px !important;
  }

  .lg\:mb-n9 {
    margin-bottom: -125px !important;
  }

  .lg\:mb-n10 {
    margin-bottom: -150px !important;
  }
}

@media (max-width: 767px) {
  .md\:mr-n0 {
    margin-right: 0px !important;
  }

  .md\:mr-n1 {
    margin-right: -5px !important;
  }

  .md\:mr-n2 {
    margin-right: -10px !important;
  }

  .md\:mr-n3 {
    margin-right: -15px !important;
  }

  .md\:mr-n4 {
    margin-right: -20px !important;
  }

  .md\:mr-n5 {
    margin-right: -25px !important;
  }

  .md\:mr-n6 {
    margin-right: -50px !important;
  }

  .md\:mr-n7 {
    margin-right: -75px !important;
  }

  .md\:mr-n8 {
    margin-right: -100px !important;
  }

  .md\:mr-n9 {
    margin-right: -125px !important;
  }

  .md\:mr-n10 {
    margin-right: -150px !important;
  }

  .md\:ml-n0 {
    margin-left: 0px !important;
  }

  .md\:ml-n1 {
    margin-left: -5px !important;
  }

  .md\:ml-n2 {
    margin-left: -10px !important;
  }

  .md\:ml-n3 {
    margin-left: -15px !important;
  }

  .md\:ml-n4 {
    margin-left: -20px !important;
  }

  .md\:ml-n5 {
    margin-left: -25px !important;
  }

  .md\:ml-n6 {
    margin-left: -50px !important;
  }

  .md\:ml-n7 {
    margin-left: -75px !important;
  }

  .md\:ml-n8 {
    margin-left: -100px !important;
  }

  .md\:ml-n9 {
    margin-left: -125px !important;
  }

  .md\:ml-n10 {
    margin-left: -150px !important;
  }

  .md\:mt-n0 {
    margin-top: 0px !important;
  }

  .md\:mt-n1 {
    margin-top: -5px !important;
  }

  .md\:mt-n2 {
    margin-top: -10px !important;
  }

  .md\:mt-n3 {
    margin-top: -15px !important;
  }

  .md\:mt-n4 {
    margin-top: -20px !important;
  }

  .md\:mt-n5 {
    margin-top: -25px !important;
  }

  .md\:mt-n6 {
    margin-top: -50px !important;
  }

  .md\:mt-n7 {
    margin-top: -75px !important;
  }

  .md\:mt-n8 {
    margin-top: -100px !important;
  }

  .md\:mt-n9 {
    margin-top: -125px !important;
  }

  .md\:mt-n10 {
    margin-top: -150px !important;
  }

  .md\:mb-n0 {
    margin-bottom: 0px !important;
  }

  .md\:mb-n1 {
    margin-bottom: -5px !important;
  }

  .md\:mb-n2 {
    margin-bottom: -10px !important;
  }

  .md\:mb-n3 {
    margin-bottom: -15px !important;
  }

  .md\:mb-n4 {
    margin-bottom: -20px !important;
  }

  .md\:mb-n5 {
    margin-bottom: -25px !important;
  }

  .md\:mb-n6 {
    margin-bottom: -50px !important;
  }

  .md\:mb-n7 {
    margin-bottom: -75px !important;
  }

  .md\:mb-n8 {
    margin-bottom: -100px !important;
  }

  .md\:mb-n9 {
    margin-bottom: -125px !important;
  }

  .md\:mb-n10 {
    margin-bottom: -150px !important;
  }
}

@media (max-width: 575px) {
  .sm\:mr-n0 {
    margin-right: 0px !important;
  }

  .sm\:mr-n1 {
    margin-right: -5px !important;
  }

  .sm\:mr-n2 {
    margin-right: -10px !important;
  }

  .sm\:mr-n3 {
    margin-right: -15px !important;
  }

  .sm\:mr-n4 {
    margin-right: -20px !important;
  }

  .sm\:mr-n5 {
    margin-right: -25px !important;
  }

  .sm\:mr-n6 {
    margin-right: -50px !important;
  }

  .sm\:mr-n7 {
    margin-right: -75px !important;
  }

  .sm\:mr-n8 {
    margin-right: -100px !important;
  }

  .sm\:mr-n9 {
    margin-right: -125px !important;
  }

  .sm\:mr-n10 {
    margin-right: -150px !important;
  }

  .sm\:ml-n0 {
    margin-left: 0px !important;
  }

  .sm\:ml-n1 {
    margin-left: -5px !important;
  }

  .sm\:ml-n2 {
    margin-left: -10px !important;
  }

  .sm\:ml-n3 {
    margin-left: -15px !important;
  }

  .sm\:ml-n4 {
    margin-left: -20px !important;
  }

  .sm\:ml-n5 {
    margin-left: -25px !important;
  }

  .sm\:ml-n6 {
    margin-left: -50px !important;
  }

  .sm\:ml-n7 {
    margin-left: -75px !important;
  }

  .sm\:ml-n8 {
    margin-left: -100px !important;
  }

  .sm\:ml-n9 {
    margin-left: -125px !important;
  }

  .sm\:ml-n10 {
    margin-left: -150px !important;
  }

  .sm\:mt-n0 {
    margin-top: 0px !important;
  }

  .sm\:mt-n1 {
    margin-top: -5px !important;
  }

  .sm\:mt-n2 {
    margin-top: -10px !important;
  }

  .sm\:mt-n3 {
    margin-top: -15px !important;
  }

  .sm\:mt-n4 {
    margin-top: -20px !important;
  }

  .sm\:mt-n5 {
    margin-top: -25px !important;
  }

  .sm\:mt-n6 {
    margin-top: -50px !important;
  }

  .sm\:mt-n7 {
    margin-top: -75px !important;
  }

  .sm\:mt-n8 {
    margin-top: -100px !important;
  }

  .sm\:mt-n9 {
    margin-top: -125px !important;
  }

  .sm\:mt-n10 {
    margin-top: -150px !important;
  }

  .sm\:mb-n0 {
    margin-bottom: 0px !important;
  }

  .sm\:mb-n1 {
    margin-bottom: -5px !important;
  }

  .sm\:mb-n2 {
    margin-bottom: -10px !important;
  }

  .sm\:mb-n3 {
    margin-bottom: -15px !important;
  }

  .sm\:mb-n4 {
    margin-bottom: -20px !important;
  }

  .sm\:mb-n5 {
    margin-bottom: -25px !important;
  }

  .sm\:mb-n6 {
    margin-bottom: -50px !important;
  }

  .sm\:mb-n7 {
    margin-bottom: -75px !important;
  }

  .sm\:mb-n8 {
    margin-bottom: -100px !important;
  }

  .sm\:mb-n9 {
    margin-bottom: -125px !important;
  }

  .sm\:mb-n10 {
    margin-bottom: -150px !important;
  }
}

/*** Spaces Margin & Padding ***/
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important
}

.pt-0 {
  padding-top: 0 !important
}

.pb-0 {
  padding-bottom: 0 !important
}

.pl-0 {
  padding-left: 0 !important
}

.pr-0 {
  padding-right: 0 !important
}

.mt-0 {
  margin-top: 0 !important
}

.mb-0 {
  margin-bottom: 0 !important
}

.ml-0 {
  margin-left: 0 !important
}

.mr-0 {
  margin-right: 0 !important
}

.py-4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important
}

.px-4 {
  padding-left: 4px !important;
  padding-right: 4px !important
}

.pt-4 {
  padding-top: 4px !important
}

.pb-4 {
  padding-bottom: 4px !important
}

.pl-4 {
  padding-left: 4px !important
}

.pr-4 {
  padding-right: 4px !important
}

.mt-4 {
  margin-top: 4px !important
}

.mb-4 {
  margin-bottom: 4px !important
}

.ml-4 {
  margin-left: 4px !important
}

.mr-4 {
  margin-right: 4px !important
}

.py-5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important
}

.px-5 {
  padding-left: 5px !important;
  padding-right: 5px !important
}

.pt-5 {
  padding-top: 5px !important
}

.pb-5 {
  padding-bottom: 5px !important
}

.pl-5 {
  padding-left: 5px !important
}

.pr-5 {
  padding-right: 5px !important
}

.mt-5 {
  margin-top: 5px !important
}

.mb-5 {
  margin-bottom: 5px !important
}

.ml-5 {
  margin-left: 5px !important
}

.mr-5 {
  margin-right: 5px !important
}

.py-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important
}

.px-10 {
  padding-left: 10px !important;
  padding-right: 10px !important
}

.pt-10 {
  padding-top: 10px !important
}

.pb-10 {
  padding-bottom: 10px !important
}

.pl-10 {
  padding-left: 10px !important
}

.pr-10 {
  padding-right: 10px !important
}

.mt-10 {
  margin-top: 10px !important
}

.mb-10 {
  margin-bottom: 10px !important
}

.ml-10 {
  margin-left: 10px !important
}

.mr-10 {
  margin-right: 10px !important
}

.py-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important
}

.px-15 {
  padding-left: 15px !important;
  padding-right: 15px !important
}

.pt-15 {
  padding-top: 15px !important
}

.pb-15 {
  padding-bottom: 15px !important
}

.pl-15 {
  padding-left: 15px !important
}

.pr-15 {
  padding-right: 15px !important
}

.mt-15 {
  margin-top: 15px !important
}

.mb-15 {
  margin-bottom: 15px !important
}

.ml-15 {
  margin-left: 15px !important
}

.mr-15 {
  margin-right: 15px !important
}

.py-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important
}

.px-20 {
  padding-left: 20px !important;
  padding-right: 20px !important
}

.pt-20 {
  padding-top: 20px !important
}

.pb-20 {
  padding-bottom: 20px !important
}

.pl-20 {
  padding-left: 20px !important
}

.pr-20 {
  padding-right: 20px !important
}

.mt-20 {
  margin-top: 20px !important
}

.mb-20 {
  margin-bottom: 20px !important
}

.ml-20 {
  margin-left: 20px !important
}

.mr-20 {
  margin-right: 20px !important
}

.py-24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important
}

.pt-24 {
  padding-top: 24px !important
}

.pb-24 {
  padding-bottom: 24px !important
}

.pl-24 {
  padding-left: 24px !important
}

.pr-24 {
  padding-right: 24px !important
}

.mt-24 {
  margin-top: 24px !important
}

.mb-24 {
  margin-bottom: 24px !important
}

.ml-24 {
  margin-left: 24px !important
}

.mr-24 {
  margin-right: 24px !important
}

.py-28 {
  padding-top: 28px !important;
  padding-bottom: 28px !important
}

.px-28 {
  padding-left: 28px !important;
  padding-right: 28px !important
}

.pt-28 {
  padding-top: 28px !important
}

.pb-28 {
  padding-bottom: 28px !important
}

.pl-28 {
  padding-left: 28px !important
}

.pr-28 {
  padding-right: 28px !important
}

.mt-28 {
  margin-top: 28px !important
}

.mb-28 {
  margin-bottom: 28px !important
}

.ml-28 {
  margin-left: 28px !important
}

.mr-28 {
  margin-right: 28px !important
}

.py-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important
}

.px-30 {
  padding-left: 30px !important;
  padding-right: 30px !important
}

.pt-30 {
  padding-top: 30px !important
}

.pb-30 {
  padding-bottom: 30px !important
}

.pl-30 {
  padding-left: 30px !important
}

.pr-30 {
  padding-right: 30px !important
}

.mt-30 {
  margin-top: 30px !important
}

.mb-30 {
  margin-bottom: 30px !important
}

.ml-30 {
  margin-left: 30px !important
}

.mr-30 {
  margin-right: 30px !important
}

.py-35 {
  padding-top: 35px !important;
  padding-bottom: 35px !important
}

.px-35 {
  padding-left: 35px !important;
  padding-right: 35px !important
}

.pt-35 {
  padding-top: 35px !important
}

.pb-35 {
  padding-bottom: 35px !important
}

.pl-35 {
  padding-left: 35px !important
}

.pr-35 {
  padding-right: 35px !important
}

.mt-35 {
  margin-top: 35px !important
}

.mb-35 {
  margin-bottom: 35px !important
}

.ml-35 {
  margin-left: 35px !important
}

.mr-35 {
  margin-right: 35px !important
}

.py-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important
}

.px-40 {
  padding-left: 40px !important;
  padding-right: 40px !important
}

.pt-40 {
  padding-top: 40px !important
}

.pb-40 {
  padding-bottom: 40px !important
}

.pl-40 {
  padding-left: 40px !important
}

.pr-40 {
  padding-right: 40px !important
}

.mt-40 {
  margin-top: 40px !important
}

.mb-40 {
  margin-bottom: 40px !important
}

.ml-40 {
  margin-left: 40px !important
}

.mr-40 {
  margin-right: 40px !important
}

.py-45 {
  padding-top: 45px !important;
  padding-bottom: 45px !important
}

.px-45 {
  padding-left: 45px !important;
  padding-right: 45px !important
}

.pt-45 {
  padding-top: 45px !important
}

.pb-45 {
  padding-bottom: 45px !important
}

.pl-45 {
  padding-left: 45px !important
}

.pr-45 {
  padding-right: 45px !important
}

.mt-45 {
  margin-top: 45px !important
}

.mb-45 {
  margin-bottom: 45px !important
}

.ml-45 {
  margin-left: 45px !important
}

.mr-45 {
  margin-right: 45px !important
}

.py-50 {
  padding-top: 50px !important;
  padding-bottom: 50px !important
}

.px-50 {
  padding-left: 50px !important;
  padding-right: 50px !important
}

.pt-50 {
  padding-top: 50px !important
}

.pb-50 {
  padding-bottom: 50px !important
}

.pl-50 {
  padding-left: 50px !important
}

.pr-50 {
  padding-right: 50px !important
}

.mt-50 {
  margin-top: 50px !important
}

.mb-50 {
  margin-bottom: 50px !important
}

.ml-50 {
  margin-left: 50px !important
}

.mr-50 {
  margin-right: 50px !important
}

.py-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important
}

.px-60 {
  padding-left: 60px !important;
  padding-right: 60px !important
}

.pt-60 {
  padding-top: 60px !important
}

.pb-60 {
  padding-bottom: 60px !important
}

.pl-60 {
  padding-left: 60px !important
}

.pr-60 {
  padding-right: 60px !important
}

.mt-60 {
  margin-top: 60px !important
}

.mb-60 {
  margin-bottom: 60px !important
}

.ml-60 {
  margin-left: 60px !important
}

.mr-60 {
  margin-right: 60px !important
}

.py-70 {
  padding-top: 70px !important;
  padding-bottom: 70px !important
}

.px-70 {
  padding-left: 70px !important;
  padding-right: 70px !important
}

.pt-70 {
  padding-top: 70px !important
}

.pb-70 {
  padding-bottom: 70px !important
}

.pl-70 {
  padding-left: 70px !important
}

.pr-70 {
  padding-right: 70px !important
}

.mt-70 {
  margin-top: 70px !important
}

.mb-70 {
  margin-bottom: 70px !important
}

.ml-70 {
  margin-left: 70px !important
}

.mr-70 {
  margin-right: 70px !important
}

.py-80 {
  padding-top: 80px !important;
  padding-bottom: 80px !important
}

.px-80 {
  padding-left: 80px !important;
  padding-right: 80px !important
}

.pt-80 {
  padding-top: 80px !important
}

.pb-80 {
  padding-bottom: 80px !important
}

.pl-80 {
  padding-left: 80px !important
}

.pr-80 {
  padding-right: 80px !important
}

.mt-80 {
  margin-top: 80px !important
}

.mb-80 {
  margin-bottom: 80px !important
}

.ml-80 {
  margin-left: 80px !important
}

.mr-80 {
  margin-right: 80px !important
}

.py-90 {
  padding-top: 90px !important;
  padding-bottom: 90px !important
}

.px-90 {
  padding-left: 90px !important;
  padding-right: 90px !important
}

.pt-90 {
  padding-top: 90px !important
}

.pb-90 {
  padding-bottom: 90px !important
}

.pl-90 {
  padding-left: 90px !important
}

.pr-90 {
  padding-right: 90px !important
}

.mt-90 {
  margin-top: 90px !important
}

.mb-90 {
  margin-bottom: 90px !important
}

.ml-90 {
  margin-left: 90px !important
}

.mr-90 {
  margin-right: 90px !important
}

.py-120 {
  padding-top: 120px !important;
  padding-bottom: 120px !important
}

.px-120 {
  padding-left: 120px !important;
  padding-right: 120px !important
}

.pt-120 {
  padding-top: 120px !important
}

.pb-120 {
  padding-bottom: 120px !important
}

.pb-140 {
  padding-bottom: 140px !important
}

.pl-120 {
  padding-left: 120px !important
}

.pr-120 {
  padding-right: 120px !important
}

.mt-120 {
  margin-top: 120px !important
}

.mb-120 {
  margin-bottom: 120px !important
}

.ml-120 {
  margin-left: 120px !important
}

.mr-120 {
  margin-right: 120px !important
}

@media (max-width: 1199px) {
  .xl\:py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
  }

  .xl\:px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
  }

  .xl\:pt-0 {
    padding-top: 0 !important
  }

  .xl\:pb-0 {
    padding-bottom: 0 !important
  }

  .xl\:pl-0 {
    padding-left: 0 !important
  }

  .xl\:pr-0 {
    padding-right: 0 !important
  }

  .xl\:mt-0 {
    margin-top: 0 !important
  }

  .xl\:mb-0 {
    margin-bottom: 0 !important
  }

  .xl\:ml-0 {
    margin-left: 0 !important
  }

  .xl\:mr-0 {
    margin-right: 0 !important
  }

  .xl\:py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important
  }

  .xl\:px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important
  }

  .xl\:pt-4 {
    padding-top: 4px !important
  }

  .xl\:pb-4 {
    padding-bottom: 4px !important
  }

  .xl\:pl-4 {
    padding-left: 4px !important
  }

  .xl\:pr-4 {
    padding-right: 4px !important
  }

  .xl\:mt-4 {
    margin-top: 4px !important
  }

  .xl\:mb-4 {
    margin-bottom: 4px !important
  }

  .xl\:ml-4 {
    margin-left: 4px !important
  }

  .xl\:mr-4 {
    margin-right: 4px !important
  }

  .xl\:py-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important
  }

  .xl\:px-5 {
    padding-left: 5px !important;
    padding-right: 5px !important
  }

  .xl\:pt-5 {
    padding-top: 5px !important
  }

  .xl\:pb-5 {
    padding-bottom: 5px !important
  }

  .xl\:pl-5 {
    padding-left: 5px !important
  }

  .xl\:pr-5 {
    padding-right: 5px !important
  }

  .xl\:mt-5 {
    margin-top: 5px !important
  }

  .xl\:mb-5 {
    margin-bottom: 5px !important
  }

  .xl\:ml-5 {
    margin-left: 5px !important
  }

  .xl\:mr-5 {
    margin-right: 5px !important
  }

  .xl\:py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important
  }

  .xl\:px-10 {
    padding-left: 10px !important;
    padding-right: 10px !important
  }

  .xl\:pt-10 {
    padding-top: 10px !important
  }

  .xl\:pb-10 {
    padding-bottom: 10px !important
  }

  .xl\:pl-10 {
    padding-left: 10px !important
  }

  .xl\:pr-10 {
    padding-right: 10px !important
  }

  .xl\:mt-10 {
    margin-top: 10px !important
  }

  .xl\:mb-10 {
    margin-bottom: 10px !important
  }

  .xl\:ml-10 {
    margin-left: 10px !important
  }

  .xl\:mr-10 {
    margin-right: 10px !important
  }

  .xl\:py-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important
  }

  .xl\:px-15 {
    padding-left: 15px !important;
    padding-right: 15px !important
  }

  .xl\:pt-15 {
    padding-top: 15px !important
  }

  .xl\:pb-15 {
    padding-bottom: 15px !important
  }

  .xl\:pl-15 {
    padding-left: 15px !important
  }

  .xl\:pr-15 {
    padding-right: 15px !important
  }

  .xl\:mt-15 {
    margin-top: 15px !important
  }

  .xl\:mb-15 {
    margin-bottom: 15px !important
  }

  .xl\:ml-15 {
    margin-left: 15px !important
  }

  .xl\:mr-15 {
    margin-right: 15px !important
  }

  .xl\:py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important
  }

  .xl\:px-20 {
    padding-left: 20px !important;
    padding-right: 20px !important
  }

  .xl\:pt-20 {
    padding-top: 20px !important
  }

  .xl\:pb-20 {
    padding-bottom: 20px !important
  }

  .xl\:pl-20 {
    padding-left: 20px !important
  }

  .xl\:pr-20 {
    padding-right: 20px !important
  }

  .xl\:mt-20 {
    margin-top: 20px !important
  }

  .xl\:mb-20 {
    margin-bottom: 20px !important
  }

  .xl\:ml-20 {
    margin-left: 20px !important
  }

  .xl\:mr-20 {
    margin-right: 20px !important
  }

  .xl\:py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
  }

  .xl\:px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important
  }

  .xl\:pt-24 {
    padding-top: 24px !important
  }

  .xl\:pb-24 {
    padding-bottom: 24px !important
  }

  .xl\:pl-24 {
    padding-left: 24px !important
  }

  .xl\:pr-24 {
    padding-right: 24px !important
  }

  .xl\:mt-24 {
    margin-top: 24px !important
  }

  .xl\:mb-24 {
    margin-bottom: 24px !important
  }

  .xl\:ml-24 {
    margin-left: 24px !important
  }

  .xl\:mr-24 {
    margin-right: 24px !important
  }

  .xl\:py-28 {
    padding-top: 28px !important;
    padding-bottom: 28px !important
  }

  .xl\:px-28 {
    padding-left: 28px !important;
    padding-right: 28px !important
  }

  .xl\:pt-28 {
    padding-top: 28px !important
  }

  .xl\:pb-28 {
    padding-bottom: 28px !important
  }

  .xl\:pl-28 {
    padding-left: 28px !important
  }

  .xl\:pr-28 {
    padding-right: 28px !important
  }

  .xl\:mt-28 {
    margin-top: 28px !important
  }

  .xl\:mb-28 {
    margin-bottom: 28px !important
  }

  .xl\:ml-28 {
    margin-left: 28px !important
  }

  .xl\:mr-28 {
    margin-right: 28px !important
  }

  .xl\:py-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important
  }

  .xl\:px-30 {
    padding-left: 30px !important;
    padding-right: 30px !important
  }

  .xl\:pt-30 {
    padding-top: 30px !important
  }

  .xl\:pb-30 {
    padding-bottom: 30px !important
  }

  .xl\:pl-30 {
    padding-left: 30px !important
  }

  .xl\:pr-30 {
    padding-right: 30px !important
  }

  .xl\:mt-30 {
    margin-top: 30px !important
  }

  .xl\:mb-30 {
    margin-bottom: 30px !important
  }

  .xl\:ml-30 {
    margin-left: 30px !important
  }

  .xl\:mr-30 {
    margin-right: 30px !important
  }

  .xl\:py-35 {
    padding-top: 35px !important;
    padding-bottom: 35px !important
  }

  .xl\:px-35 {
    padding-left: 35px !important;
    padding-right: 35px !important
  }

  .xl\:pt-35 {
    padding-top: 35px !important
  }

  .xl\:pb-35 {
    padding-bottom: 35px !important
  }

  .xl\:pl-35 {
    padding-left: 35px !important
  }

  .xl\:pr-35 {
    padding-right: 35px !important
  }

  .xl\:mt-35 {
    margin-top: 35px !important
  }

  .xl\:mb-35 {
    margin-bottom: 35px !important
  }

  .xl\:ml-35 {
    margin-left: 35px !important
  }

  .xl\:mr-35 {
    margin-right: 35px !important
  }

  .xl\:py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important
  }

  .xl\:px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important
  }

  .xl\:pt-40 {
    padding-top: 40px !important
  }

  .xl\:pb-40 {
    padding-bottom: 40px !important
  }

  .xl\:pl-40 {
    padding-left: 40px !important
  }

  .xl\:pr-40 {
    padding-right: 40px !important
  }

  .xl\:mt-40 {
    margin-top: 40px !important
  }

  .xl\:mb-40 {
    margin-bottom: 40px !important
  }

  .xl\:ml-40 {
    margin-left: 40px !important
  }

  .xl\:mr-40 {
    margin-right: 40px !important
  }

  .xl\:py-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important
  }

  .xl\:px-45 {
    padding-left: 45px !important;
    padding-right: 45px !important
  }

  .xl\:pt-45 {
    padding-top: 45px !important
  }

  .xl\:pb-45 {
    padding-bottom: 45px !important
  }

  .xl\:pl-45 {
    padding-left: 45px !important
  }

  .xl\:pr-45 {
    padding-right: 45px !important
  }

  .xl\:mt-45 {
    margin-top: 45px !important
  }

  .xl\:mb-45 {
    margin-bottom: 45px !important
  }

  .xl\:ml-45 {
    margin-left: 45px !important
  }

  .xl\:mr-45 {
    margin-right: 45px !important
  }

  .xl\:py-50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important
  }

  .xl\:px-50 {
    padding-left: 50px !important;
    padding-right: 50px !important
  }

  .xl\:pt-50 {
    padding-top: 50px !important
  }

  .xl\:pb-50 {
    padding-bottom: 50px !important
  }

  .xl\:pl-50 {
    padding-left: 50px !important
  }

  .xl\:pr-50 {
    padding-right: 50px !important
  }

  .xl\:mt-50 {
    margin-top: 50px !important
  }

  .xl\:mb-50 {
    margin-bottom: 50px !important
  }

  .xl\:ml-50 {
    margin-left: 50px !important
  }

  .xl\:mr-50 {
    margin-right: 50px !important
  }

  .xl\:py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important
  }

  .xl\:px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important
  }

  .xl\:pt-60 {
    padding-top: 60px !important
  }

  .xl\:pb-60 {
    padding-bottom: 60px !important
  }

  .xl\:pl-60 {
    padding-left: 60px !important
  }

  .xl\:pr-60 {
    padding-right: 60px !important
  }

  .xl\:mt-60 {
    margin-top: 60px !important
  }

  .xl\:mb-60 {
    margin-bottom: 60px !important
  }

  .xl\:ml-60 {
    margin-left: 60px !important
  }

  .xl\:mr-60 {
    margin-right: 60px !important
  }

  .xl\:py-70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important
  }

  .xl\:px-70 {
    padding-left: 70px !important;
    padding-right: 70px !important
  }

  .xl\:pt-70 {
    padding-top: 70px !important
  }

  .xl\:pb-70 {
    padding-bottom: 70px !important
  }

  .xl\:pl-70 {
    padding-left: 70px !important
  }

  .xl\:pr-70 {
    padding-right: 70px !important
  }

  .xl\:mt-70 {
    margin-top: 70px !important
  }

  .xl\:mb-70 {
    margin-bottom: 70px !important
  }

  .xl\:ml-70 {
    margin-left: 70px !important
  }

  .xl\:mr-70 {
    margin-right: 70px !important
  }

  .xl\:py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important
  }

  .xl\:px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important
  }

  .xl\:pt-80 {
    padding-top: 80px !important
  }

  .xl\:pb-80 {
    padding-bottom: 80px !important
  }

  .xl\:pl-80 {
    padding-left: 80px !important
  }

  .xl\:pr-80 {
    padding-right: 80px !important
  }

  .xl\:mt-80 {
    margin-top: 80px !important
  }

  .xl\:mb-80 {
    margin-bottom: 80px !important
  }

  .xl\:ml-80 {
    margin-left: 80px !important
  }

  .xl\:mr-80 {
    margin-right: 80px !important
  }

  .xl\:py-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important
  }

  .xl\:px-90 {
    padding-left: 90px !important;
    padding-right: 90px !important
  }

  .xl\:pt-90 {
    padding-top: 90px !important
  }

  .xl\:pb-90 {
    padding-bottom: 90px !important
  }

  .xl\:pl-90 {
    padding-left: 90px !important
  }

  .xl\:pr-90 {
    padding-right: 90px !important
  }

  .xl\:mt-90 {
    margin-top: 90px !important
  }

  .xl\:mb-90 {
    margin-bottom: 90px !important
  }

  .xl\:ml-90 {
    margin-left: 90px !important
  }

  .xl\:mr-90 {
    margin-right: 90px !important
  }

  .xl\:py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important
  }

  .xl\:px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important
  }

  .xl\:pt-120 {
    padding-top: 120px !important
  }

  .xl\:pb-120 {
    padding-bottom: 120px !important
  }

  .xl\:pl-120 {
    padding-left: 120px !important
  }

  .xl\:pr-120 {
    padding-right: 120px !important
  }

  .xl\:mt-120 {
    margin-top: 120px !important
  }

  .xl\:mb-120 {
    margin-bottom: 120px !important
  }

  .xl\:ml-120 {
    margin-left: 120px !important
  }

  .xl\:mr-120 {
    margin-right: 120px !important
  }
}

@media (max-width: 991px) {
  .lg\:py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
  }

  .lg\:px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
  }

  .lg\:pt-0 {
    padding-top: 0 !important
  }

  .lg\:pb-0 {
    padding-bottom: 0 !important
  }

  .lg\:pl-0 {
    padding-left: 0 !important
  }

  .lg\:pr-0 {
    padding-right: 0 !important
  }

  .lg\:mt-0 {
    margin-top: 0 !important
  }

  .lg\:mb-0 {
    margin-bottom: 0 !important
  }

  .lg\:ml-0 {
    margin-left: 0 !important
  }

  .lg\:mr-0 {
    margin-right: 0 !important
  }

  .lg\:py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important
  }

  .lg\:px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important
  }

  .lg\:pt-4 {
    padding-top: 4px !important
  }

  .lg\:pb-4 {
    padding-bottom: 4px !important
  }

  .lg\:pl-4 {
    padding-left: 4px !important
  }

  .lg\:pr-4 {
    padding-right: 4px !important
  }

  .lg\:mt-4 {
    margin-top: 4px !important
  }

  .lg\:mb-4 {
    margin-bottom: 4px !important
  }

  .lg\:ml-4 {
    margin-left: 4px !important
  }

  .lg\:mr-4 {
    margin-right: 4px !important
  }

  .lg\:py-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important
  }

  .lg\:px-5 {
    padding-left: 5px !important;
    padding-right: 5px !important
  }

  .lg\:pt-5 {
    padding-top: 5px !important
  }

  .lg\:pb-5 {
    padding-bottom: 5px !important
  }

  .lg\:pl-5 {
    padding-left: 5px !important
  }

  .lg\:pr-5 {
    padding-right: 5px !important
  }

  .lg\:mt-5 {
    margin-top: 5px !important
  }

  .lg\:mb-5 {
    margin-bottom: 5px !important
  }

  .lg\:ml-5 {
    margin-left: 5px !important
  }

  .lg\:mr-5 {
    margin-right: 5px !important
  }

  .lg\:py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important
  }

  .lg\:px-10 {
    padding-left: 10px !important;
    padding-right: 10px !important
  }

  .lg\:pt-10 {
    padding-top: 10px !important
  }

  .lg\:pb-10 {
    padding-bottom: 10px !important
  }

  .lg\:pl-10 {
    padding-left: 10px !important
  }

  .lg\:pr-10 {
    padding-right: 10px !important
  }

  .lg\:mt-10 {
    margin-top: 10px !important
  }

  .lg\:mb-10 {
    margin-bottom: 10px !important
  }

  .lg\:ml-10 {
    margin-left: 10px !important
  }

  .lg\:mr-10 {
    margin-right: 10px !important
  }

  .lg\:py-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important
  }

  .lg\:px-15 {
    padding-left: 15px !important;
    padding-right: 15px !important
  }

  .lg\:pt-15 {
    padding-top: 15px !important
  }

  .lg\:pb-15 {
    padding-bottom: 15px !important
  }

  .lg\:pl-15 {
    padding-left: 15px !important
  }

  .lg\:pr-15 {
    padding-right: 15px !important
  }

  .lg\:mt-15 {
    margin-top: 15px !important
  }

  .lg\:mb-15 {
    margin-bottom: 15px !important
  }

  .lg\:ml-15 {
    margin-left: 15px !important
  }

  .lg\:mr-15 {
    margin-right: 15px !important
  }

  .lg\:py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important
  }

  .lg\:px-20 {
    padding-left: 20px !important;
    padding-right: 20px !important
  }

  .lg\:pt-20 {
    padding-top: 20px !important
  }

  .lg\:pb-20 {
    padding-bottom: 20px !important
  }

  .lg\:pl-20 {
    padding-left: 20px !important
  }

  .lg\:pr-20 {
    padding-right: 20px !important
  }

  .lg\:mt-20 {
    margin-top: 20px !important
  }

  .lg\:mb-20 {
    margin-bottom: 20px !important
  }

  .lg\:ml-20 {
    margin-left: 20px !important
  }

  .lg\:mr-20 {
    margin-right: 20px !important
  }

  .lg\:py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
  }

  .lg\:px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important
  }

  .lg\:pt-24 {
    padding-top: 24px !important
  }

  .lg\:pb-24 {
    padding-bottom: 24px !important
  }

  .lg\:pl-24 {
    padding-left: 24px !important
  }

  .lg\:pr-24 {
    padding-right: 24px !important
  }

  .lg\:mt-24 {
    margin-top: 24px !important
  }

  .lg\:mb-24 {
    margin-bottom: 24px !important
  }

  .lg\:ml-24 {
    margin-left: 24px !important
  }

  .lg\:mr-24 {
    margin-right: 24px !important
  }

  .lg\:py-28 {
    padding-top: 28px !important;
    padding-bottom: 28px !important
  }

  .lg\:px-28 {
    padding-left: 28px !important;
    padding-right: 28px !important
  }

  .lg\:pt-28 {
    padding-top: 28px !important
  }

  .lg\:pb-28 {
    padding-bottom: 28px !important
  }

  .lg\:pl-28 {
    padding-left: 28px !important
  }

  .lg\:pr-28 {
    padding-right: 28px !important
  }

  .lg\:mt-28 {
    margin-top: 28px !important
  }

  .lg\:mb-28 {
    margin-bottom: 28px !important
  }

  .lg\:ml-28 {
    margin-left: 28px !important
  }

  .lg\:mr-28 {
    margin-right: 28px !important
  }

  .lg\:py-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important
  }

  .lg\:px-30 {
    padding-left: 30px !important;
    padding-right: 30px !important
  }

  .lg\:pt-30 {
    padding-top: 30px !important
  }

  .lg\:pb-30 {
    padding-bottom: 30px !important
  }

  .lg\:pl-30 {
    padding-left: 30px !important
  }

  .lg\:pr-30 {
    padding-right: 30px !important
  }

  .lg\:mt-30 {
    margin-top: 30px !important
  }

  .lg\:mb-30 {
    margin-bottom: 30px !important
  }

  .lg\:ml-30 {
    margin-left: 30px !important
  }

  .lg\:mr-30 {
    margin-right: 30px !important
  }

  .lg\:py-35 {
    padding-top: 35px !important;
    padding-bottom: 35px !important
  }

  .lg\:px-35 {
    padding-left: 35px !important;
    padding-right: 35px !important
  }

  .lg\:pt-35 {
    padding-top: 35px !important
  }

  .lg\:pb-35 {
    padding-bottom: 35px !important
  }

  .lg\:pl-35 {
    padding-left: 35px !important
  }

  .lg\:pr-35 {
    padding-right: 35px !important
  }

  .lg\:mt-35 {
    margin-top: 35px !important
  }

  .lg\:mb-35 {
    margin-bottom: 35px !important
  }

  .lg\:ml-35 {
    margin-left: 35px !important
  }

  .lg\:mr-35 {
    margin-right: 35px !important
  }

  .lg\:py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important
  }

  .lg\:px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important
  }

  .lg\:pt-40 {
    padding-top: 40px !important
  }

  .lg\:pb-40 {
    padding-bottom: 40px !important
  }

  .lg\:pl-40 {
    padding-left: 40px !important
  }

  .lg\:pr-40 {
    padding-right: 40px !important
  }

  .lg\:mt-40 {
    margin-top: 40px !important
  }

  .lg\:mb-40 {
    margin-bottom: 40px !important
  }

  .lg\:ml-40 {
    margin-left: 40px !important
  }

  .lg\:mr-40 {
    margin-right: 40px !important
  }

  .lg\:py-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important
  }

  .lg\:px-45 {
    padding-left: 45px !important;
    padding-right: 45px !important
  }

  .lg\:pt-45 {
    padding-top: 45px !important
  }

  .lg\:pb-45 {
    padding-bottom: 45px !important
  }

  .lg\:pl-45 {
    padding-left: 45px !important
  }

  .lg\:pr-45 {
    padding-right: 45px !important
  }

  .lg\:mt-45 {
    margin-top: 45px !important
  }

  .lg\:mb-45 {
    margin-bottom: 45px !important
  }

  .lg\:ml-45 {
    margin-left: 45px !important
  }

  .lg\:mr-45 {
    margin-right: 45px !important
  }

  .lg\:py-50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important
  }

  .lg\:px-50 {
    padding-left: 50px !important;
    padding-right: 50px !important
  }

  .lg\:pt-50 {
    padding-top: 50px !important
  }

  .lg\:pb-50 {
    padding-bottom: 50px !important
  }

  .lg\:pl-50 {
    padding-left: 50px !important
  }

  .lg\:pr-50 {
    padding-right: 50px !important
  }

  .lg\:mt-50 {
    margin-top: 50px !important
  }

  .lg\:mb-50 {
    margin-bottom: 50px !important
  }

  .lg\:ml-50 {
    margin-left: 50px !important
  }

  .lg\:mr-50 {
    margin-right: 50px !important
  }

  .lg\:py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important
  }

  .lg\:px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important
  }

  .lg\:pt-60 {
    padding-top: 60px !important
  }

  .lg\:pb-60 {
    padding-bottom: 60px !important
  }

  .lg\:pl-60 {
    padding-left: 60px !important
  }

  .lg\:pr-60 {
    padding-right: 60px !important
  }

  .lg\:mt-60 {
    margin-top: 60px !important
  }

  .lg\:mb-60 {
    margin-bottom: 60px !important
  }

  .lg\:ml-60 {
    margin-left: 60px !important
  }

  .lg\:mr-60 {
    margin-right: 60px !important
  }

  .lg\:py-70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important
  }

  .lg\:px-70 {
    padding-left: 70px !important;
    padding-right: 70px !important
  }

  .lg\:pt-70 {
    padding-top: 70px !important
  }

  .lg\:pb-70 {
    padding-bottom: 70px !important
  }

  .lg\:pl-70 {
    padding-left: 70px !important
  }

  .lg\:pr-70 {
    padding-right: 70px !important
  }

  .lg\:mt-70 {
    margin-top: 70px !important
  }

  .lg\:mb-70 {
    margin-bottom: 70px !important
  }

  .lg\:ml-70 {
    margin-left: 70px !important
  }

  .lg\:mr-70 {
    margin-right: 70px !important
  }

  .lg\:py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important
  }

  .lg\:px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important
  }

  .lg\:pt-80 {
    padding-top: 80px !important
  }

  .lg\:pb-80 {
    padding-bottom: 80px !important
  }

  .lg\:pl-80 {
    padding-left: 80px !important
  }

  .lg\:pr-80 {
    padding-right: 80px !important
  }

  .lg\:mt-80 {
    margin-top: 80px !important
  }

  .lg\:mb-80 {
    margin-bottom: 80px !important
  }

  .lg\:ml-80 {
    margin-left: 80px !important
  }

  .lg\:mr-80 {
    margin-right: 80px !important
  }

  .lg\:py-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important
  }

  .lg\:px-90 {
    padding-left: 90px !important;
    padding-right: 90px !important
  }

  .lg\:pt-90 {
    padding-top: 90px !important
  }

  .lg\:pb-90 {
    padding-bottom: 90px !important
  }

  .lg\:pl-90 {
    padding-left: 90px !important
  }

  .lg\:pr-90 {
    padding-right: 90px !important
  }

  .lg\:mt-90 {
    margin-top: 90px !important
  }

  .lg\:mb-90 {
    margin-bottom: 90px !important
  }

  .lg\:ml-90 {
    margin-left: 90px !important
  }

  .lg\:mr-90 {
    margin-right: 90px !important
  }

  .lg\:py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important
  }

  .lg\:px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important
  }

  .lg\:pt-120 {
    padding-top: 120px !important
  }

  .lg\:pb-120 {
    padding-bottom: 120px !important
  }

  .lg\:pl-120 {
    padding-left: 120px !important
  }

  .lg\:pr-120 {
    padding-right: 120px !important
  }

  .lg\:mt-120 {
    margin-top: 120px !important
  }

  .lg\:mb-120 {
    margin-bottom: 120px !important
  }

  .lg\:ml-120 {
    margin-left: 120px !important
  }

  .lg\:mr-120 {
    margin-right: 120px !important
  }
}

@media (max-width: 767px) {
  .md\:py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
  }

  .md\:px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
  }

  .md\:pt-0 {
    padding-top: 0 !important
  }

  .md\:pb-0 {
    padding-bottom: 0 !important
  }

  .md\:pl-0 {
    padding-left: 0 !important
  }

  .md\:pr-0 {
    padding-right: 0 !important
  }

  .md\:mt-0 {
    margin-top: 0 !important
  }

  .md\:mb-0 {
    margin-bottom: 0 !important
  }

  .md\:ml-0 {
    margin-left: 0 !important
  }

  .md\:mr-0 {
    margin-right: 0 !important
  }

  .md\:py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important
  }

  .md\:px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important
  }

  .md\:pt-4 {
    padding-top: 4px !important
  }

  .md\:pb-4 {
    padding-bottom: 4px !important
  }

  .md\:pl-4 {
    padding-left: 4px !important
  }

  .md\:pr-4 {
    padding-right: 4px !important
  }

  .md\:mt-4 {
    margin-top: 4px !important
  }

  .md\:mb-4 {
    margin-bottom: 4px !important
  }

  .md\:ml-4 {
    margin-left: 4px !important
  }

  .md\:mr-4 {
    margin-right: 4px !important
  }

  .md\:py-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important
  }

  .md\:px-5 {
    padding-left: 5px !important;
    padding-right: 5px !important
  }

  .md\:pt-5 {
    padding-top: 5px !important
  }

  .md\:pb-5 {
    padding-bottom: 5px !important
  }

  .md\:pl-5 {
    padding-left: 5px !important
  }

  .md\:pr-5 {
    padding-right: 5px !important
  }

  .md\:mt-5 {
    margin-top: 5px !important
  }

  .md\:mb-5 {
    margin-bottom: 5px !important
  }

  .md\:ml-5 {
    margin-left: 5px !important
  }

  .md\:mr-5 {
    margin-right: 5px !important
  }

  .md\:py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important
  }

  .md\:px-10 {
    padding-left: 10px !important;
    padding-right: 10px !important
  }

  .md\:pt-10 {
    padding-top: 10px !important
  }

  .md\:pb-10 {
    padding-bottom: 10px !important
  }

  .md\:pl-10 {
    padding-left: 10px !important
  }

  .md\:pr-10 {
    padding-right: 10px !important
  }

  .md\:mt-10 {
    margin-top: 10px !important
  }

  .md\:mb-10 {
    margin-bottom: 10px !important
  }

  .md\:ml-10 {
    margin-left: 10px !important
  }

  .md\:mr-10 {
    margin-right: 10px !important
  }

  .md\:py-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important
  }

  .md\:px-15 {
    padding-left: 15px !important;
    padding-right: 15px !important
  }

  .md\:pt-15 {
    padding-top: 15px !important
  }

  .md\:pb-15 {
    padding-bottom: 15px !important
  }

  .md\:pl-15 {
    padding-left: 15px !important
  }

  .md\:pr-15 {
    padding-right: 15px !important
  }

  .md\:mt-15 {
    margin-top: 15px !important
  }

  .md\:mb-15 {
    margin-bottom: 15px !important
  }

  .md\:ml-15 {
    margin-left: 15px !important
  }

  .md\:mr-15 {
    margin-right: 15px !important
  }

  .md\:py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important
  }

  .md\:px-20 {
    padding-left: 20px !important;
    padding-right: 20px !important
  }

  .md\:pt-20 {
    padding-top: 20px !important
  }

  .md\:pb-20 {
    padding-bottom: 20px !important
  }

  .md\:pl-20 {
    padding-left: 20px !important
  }

  .md\:pr-20 {
    padding-right: 20px !important
  }

  .md\:mt-20 {
    margin-top: 20px !important
  }

  .md\:mb-20 {
    margin-bottom: 20px !important
  }

  .md\:ml-20 {
    margin-left: 20px !important
  }

  .md\:mr-20 {
    margin-right: 20px !important
  }

  .md\:py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
  }

  .md\:px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important
  }

  .md\:pt-24 {
    padding-top: 24px !important
  }

  .md\:pb-24 {
    padding-bottom: 24px !important
  }

  .md\:pl-24 {
    padding-left: 24px !important
  }

  .md\:pr-24 {
    padding-right: 24px !important
  }

  .md\:mt-24 {
    margin-top: 24px !important
  }

  .md\:mb-24 {
    margin-bottom: 24px !important
  }

  .md\:ml-24 {
    margin-left: 24px !important
  }

  .md\:mr-24 {
    margin-right: 24px !important
  }

  .md\:py-28 {
    padding-top: 28px !important;
    padding-bottom: 28px !important
  }

  .md\:px-28 {
    padding-left: 28px !important;
    padding-right: 28px !important
  }

  .md\:pt-28 {
    padding-top: 28px !important
  }

  .md\:pb-28 {
    padding-bottom: 28px !important
  }

  .md\:pl-28 {
    padding-left: 28px !important
  }

  .md\:pr-28 {
    padding-right: 28px !important
  }

  .md\:mt-28 {
    margin-top: 28px !important
  }

  .md\:mb-28 {
    margin-bottom: 28px !important
  }

  .md\:ml-28 {
    margin-left: 28px !important
  }

  .md\:mr-28 {
    margin-right: 28px !important
  }

  .md\:py-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important
  }

  .md\:px-30 {
    padding-left: 30px !important;
    padding-right: 30px !important
  }

  .md\:pt-30 {
    padding-top: 30px !important
  }

  .md\:pb-30 {
    padding-bottom: 30px !important
  }

  .md\:pl-30 {
    padding-left: 30px !important
  }

  .md\:pr-30 {
    padding-right: 30px !important
  }

  .md\:mt-30 {
    margin-top: 30px !important
  }

  .md\:mb-30 {
    margin-bottom: 30px !important
  }

  .md\:ml-30 {
    margin-left: 30px !important
  }

  .md\:mr-30 {
    margin-right: 30px !important
  }

  .md\:py-35 {
    padding-top: 35px !important;
    padding-bottom: 35px !important
  }

  .md\:px-35 {
    padding-left: 35px !important;
    padding-right: 35px !important
  }

  .md\:pt-35 {
    padding-top: 35px !important
  }

  .md\:pb-35 {
    padding-bottom: 35px !important
  }

  .md\:pl-35 {
    padding-left: 35px !important
  }

  .md\:pr-35 {
    padding-right: 35px !important
  }

  .md\:mt-35 {
    margin-top: 35px !important
  }

  .md\:mb-35 {
    margin-bottom: 35px !important
  }

  .md\:ml-35 {
    margin-left: 35px !important
  }

  .md\:mr-35 {
    margin-right: 35px !important
  }

  .md\:py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important
  }

  .md\:px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important
  }

  .md\:pt-40 {
    padding-top: 40px !important
  }

  .md\:pb-40 {
    padding-bottom: 40px !important
  }

  .md\:pl-40 {
    padding-left: 40px !important
  }

  .md\:pr-40 {
    padding-right: 40px !important
  }

  .md\:mt-40 {
    margin-top: 40px !important
  }

  .md\:mb-40 {
    margin-bottom: 40px !important
  }

  .md\:ml-40 {
    margin-left: 40px !important
  }

  .md\:mr-40 {
    margin-right: 40px !important
  }

  .md\:py-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important
  }

  .md\:px-45 {
    padding-left: 45px !important;
    padding-right: 45px !important
  }

  .md\:pt-45 {
    padding-top: 45px !important
  }

  .md\:pb-45 {
    padding-bottom: 45px !important
  }

  .md\:pl-45 {
    padding-left: 45px !important
  }

  .md\:pr-45 {
    padding-right: 45px !important
  }

  .md\:mt-45 {
    margin-top: 45px !important
  }

  .md\:mb-45 {
    margin-bottom: 45px !important
  }

  .md\:ml-45 {
    margin-left: 45px !important
  }

  .md\:mr-45 {
    margin-right: 45px !important
  }

  .md\:py-50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important
  }

  .md\:px-50 {
    padding-left: 50px !important;
    padding-right: 50px !important
  }

  .md\:pt-50 {
    padding-top: 50px !important
  }

  .md\:pb-50 {
    padding-bottom: 50px !important
  }

  .md\:pl-50 {
    padding-left: 50px !important
  }

  .md\:pr-50 {
    padding-right: 50px !important
  }

  .md\:mt-50 {
    margin-top: 50px !important
  }

  .md\:mb-50 {
    margin-bottom: 50px !important
  }

  .md\:ml-50 {
    margin-left: 50px !important
  }

  .md\:mr-50 {
    margin-right: 50px !important
  }

  .md\:py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important
  }

  .md\:px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important
  }

  .md\:pt-60 {
    padding-top: 60px !important
  }

  .md\:pb-60 {
    padding-bottom: 60px !important
  }

  .md\:pl-60 {
    padding-left: 60px !important
  }

  .md\:pr-60 {
    padding-right: 60px !important
  }

  .md\:mt-60 {
    margin-top: 60px !important
  }

  .md\:mb-60 {
    margin-bottom: 60px !important
  }

  .md\:ml-60 {
    margin-left: 60px !important
  }

  .md\:mr-60 {
    margin-right: 60px !important
  }

  .md\:py-70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important
  }

  .md\:px-70 {
    padding-left: 70px !important;
    padding-right: 70px !important
  }

  .md\:pt-70 {
    padding-top: 70px !important
  }

  .md\:pb-70 {
    padding-bottom: 70px !important
  }

  .md\:pl-70 {
    padding-left: 70px !important
  }

  .md\:pr-70 {
    padding-right: 70px !important
  }

  .md\:mt-70 {
    margin-top: 70px !important
  }

  .md\:mb-70 {
    margin-bottom: 70px !important
  }

  .md\:ml-70 {
    margin-left: 70px !important
  }

  .md\:mr-70 {
    margin-right: 70px !important
  }

  .md\:py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important
  }

  .md\:px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important
  }

  .md\:pt-80 {
    padding-top: 80px !important
  }

  .md\:pb-80 {
    padding-bottom: 80px !important
  }

  .md\:pl-80 {
    padding-left: 80px !important
  }

  .md\:pr-80 {
    padding-right: 80px !important
  }

  .md\:mt-80 {
    margin-top: 80px !important
  }

  .md\:mb-80 {
    margin-bottom: 80px !important
  }

  .md\:ml-80 {
    margin-left: 80px !important
  }

  .md\:mr-80 {
    margin-right: 80px !important
  }

  .md\:py-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important
  }

  .md\:px-90 {
    padding-left: 90px !important;
    padding-right: 90px !important
  }

  .md\:pt-90 {
    padding-top: 90px !important
  }

  .md\:pb-90 {
    padding-bottom: 90px !important
  }

  .md\:pl-90 {
    padding-left: 90px !important
  }

  .md\:pr-90 {
    padding-right: 90px !important
  }

  .md\:mt-90 {
    margin-top: 90px !important
  }

  .md\:mb-90 {
    margin-bottom: 90px !important
  }

  .md\:ml-90 {
    margin-left: 90px !important
  }

  .md\:mr-90 {
    margin-right: 90px !important
  }

  .md\:py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important
  }

  .md\:px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important
  }

  .md\:pt-120 {
    padding-top: 120px !important
  }

  .md\:pb-120 {
    padding-bottom: 120px !important
  }

  .md\:pl-120 {
    padding-left: 120px !important
  }

  .md\:pr-120 {
    padding-right: 120px !important
  }

  .md\:mt-120 {
    margin-top: 120px !important
  }

  .md\:mb-120 {
    margin-bottom: 120px !important
  }

  .md\:ml-120 {
    margin-left: 120px !important
  }

  .md\:mr-120 {
    margin-right: 120px !important
  }
}

@media (max-width: 575px) {
  .sm\:py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
  }

  .sm\:px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
  }

  .sm\:pt-0 {
    padding-top: 0 !important
  }

  .sm\:pb-0 {
    padding-bottom: 0 !important
  }

  .sm\:pl-0 {
    padding-left: 0 !important
  }

  .sm\:pr-0 {
    padding-right: 0 !important
  }

  .sm\:mt-0 {
    margin-top: 0 !important
  }

  .sm\:mb-0 {
    margin-bottom: 0 !important
  }

  .sm\:ml-0 {
    margin-left: 0 !important
  }

  .sm\:mr-0 {
    margin-right: 0 !important
  }

  .sm\:py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important
  }

  .sm\:px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important
  }

  .sm\:pt-4 {
    padding-top: 4px !important
  }

  .sm\:pb-4 {
    padding-bottom: 4px !important
  }

  .sm\:pl-4 {
    padding-left: 4px !important
  }

  .sm\:pr-4 {
    padding-right: 4px !important
  }

  .sm\:mt-4 {
    margin-top: 4px !important
  }

  .sm\:mb-4 {
    margin-bottom: 4px !important
  }

  .sm\:ml-4 {
    margin-left: 4px !important
  }

  .sm\:mr-4 {
    margin-right: 4px !important
  }

  .sm\:py-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important
  }

  .sm\:px-5 {
    padding-left: 5px !important;
    padding-right: 5px !important
  }

  .sm\:pt-5 {
    padding-top: 5px !important
  }

  .sm\:pb-5 {
    padding-bottom: 5px !important
  }

  .sm\:pl-5 {
    padding-left: 5px !important
  }

  .sm\:pr-5 {
    padding-right: 5px !important
  }

  .sm\:mt-5 {
    margin-top: 5px !important
  }

  .sm\:mb-5 {
    margin-bottom: 5px !important
  }

  .sm\:ml-5 {
    margin-left: 5px !important
  }

  .sm\:mr-5 {
    margin-right: 5px !important
  }

  .sm\:py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important
  }

  .sm\:px-10 {
    padding-left: 10px !important;
    padding-right: 10px !important
  }

  .sm\:pt-10 {
    padding-top: 10px !important
  }

  .sm\:pb-10 {
    padding-bottom: 10px !important
  }

  .sm\:pl-10 {
    padding-left: 10px !important
  }

  .sm\:pr-10 {
    padding-right: 10px !important
  }

  .sm\:mt-10 {
    margin-top: 10px !important
  }

  .sm\:mb-10 {
    margin-bottom: 10px !important
  }

  .sm\:ml-10 {
    margin-left: 10px !important
  }

  .sm\:mr-10 {
    margin-right: 10px !important
  }

  .sm\:py-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important
  }

  .sm\:px-15 {
    padding-left: 15px !important;
    padding-right: 15px !important
  }

  .sm\:pt-15 {
    padding-top: 15px !important
  }

  .sm\:pb-15 {
    padding-bottom: 15px !important
  }

  .sm\:pl-15 {
    padding-left: 15px !important
  }

  .sm\:pr-15 {
    padding-right: 15px !important
  }

  .sm\:mt-15 {
    margin-top: 15px !important
  }

  .sm\:mb-15 {
    margin-bottom: 15px !important
  }

  .sm\:ml-15 {
    margin-left: 15px !important
  }

  .sm\:mr-15 {
    margin-right: 15px !important
  }

  .sm\:py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important
  }

  .sm\:px-20 {
    padding-left: 20px !important;
    padding-right: 20px !important
  }

  .sm\:pt-20 {
    padding-top: 20px !important
  }

  .sm\:pb-20 {
    padding-bottom: 20px !important
  }

  .sm\:pl-20 {
    padding-left: 20px !important
  }

  .sm\:pr-20 {
    padding-right: 20px !important
  }

  .sm\:mt-20 {
    margin-top: 20px !important
  }

  .sm\:mb-20 {
    margin-bottom: 20px !important
  }

  .sm\:ml-20 {
    margin-left: 20px !important
  }

  .sm\:mr-20 {
    margin-right: 20px !important
  }

  .sm\:py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
  }

  .sm\:px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important
  }

  .sm\:pt-24 {
    padding-top: 24px !important
  }

  .sm\:pb-24 {
    padding-bottom: 24px !important
  }

  .sm\:pl-24 {
    padding-left: 24px !important
  }

  .sm\:pr-24 {
    padding-right: 24px !important
  }

  .sm\:mt-24 {
    margin-top: 24px !important
  }

  .sm\:mb-24 {
    margin-bottom: 24px !important
  }

  .sm\:ml-24 {
    margin-left: 24px !important
  }

  .sm\:mr-24 {
    margin-right: 24px !important
  }

  .sm\:py-28 {
    padding-top: 28px !important;
    padding-bottom: 28px !important
  }

  .sm\:px-28 {
    padding-left: 28px !important;
    padding-right: 28px !important
  }

  .sm\:pt-28 {
    padding-top: 28px !important
  }

  .sm\:pb-28 {
    padding-bottom: 28px !important
  }

  .sm\:pl-28 {
    padding-left: 28px !important
  }

  .sm\:pr-28 {
    padding-right: 28px !important
  }

  .sm\:mt-28 {
    margin-top: 28px !important
  }

  .sm\:mb-28 {
    margin-bottom: 28px !important
  }

  .sm\:ml-28 {
    margin-left: 28px !important
  }

  .sm\:mr-28 {
    margin-right: 28px !important
  }

  .sm\:py-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important
  }

  .sm\:px-30 {
    padding-left: 30px !important;
    padding-right: 30px !important
  }

  .sm\:pt-30 {
    padding-top: 30px !important
  }

  .sm\:pb-30 {
    padding-bottom: 30px !important
  }

  .sm\:pl-30 {
    padding-left: 30px !important
  }

  .sm\:pr-30 {
    padding-right: 30px !important
  }

  .sm\:mt-30 {
    margin-top: 30px !important
  }

  .sm\:mb-30 {
    margin-bottom: 30px !important
  }

  .sm\:ml-30 {
    margin-left: 30px !important
  }

  .sm\:mr-30 {
    margin-right: 30px !important
  }

  .sm\:py-35 {
    padding-top: 35px !important;
    padding-bottom: 35px !important
  }

  .sm\:px-35 {
    padding-left: 35px !important;
    padding-right: 35px !important
  }

  .sm\:pt-35 {
    padding-top: 35px !important
  }

  .sm\:pb-35 {
    padding-bottom: 35px !important
  }

  .sm\:pl-35 {
    padding-left: 35px !important
  }

  .sm\:pr-35 {
    padding-right: 35px !important
  }

  .sm\:mt-35 {
    margin-top: 35px !important
  }

  .sm\:mb-35 {
    margin-bottom: 35px !important
  }

  .sm\:ml-35 {
    margin-left: 35px !important
  }

  .sm\:mr-35 {
    margin-right: 35px !important
  }

  .sm\:py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important
  }

  .sm\:px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important
  }

  .sm\:pt-40 {
    padding-top: 40px !important
  }

  .sm\:pb-40 {
    padding-bottom: 40px !important
  }

  .sm\:pl-40 {
    padding-left: 40px !important
  }

  .sm\:pr-40 {
    padding-right: 40px !important
  }

  .sm\:mt-40 {
    margin-top: 40px !important
  }

  .sm\:mb-40 {
    margin-bottom: 40px !important
  }

  .sm\:ml-40 {
    margin-left: 40px !important
  }

  .sm\:mr-40 {
    margin-right: 40px !important
  }

  .sm\:py-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important
  }

  .sm\:px-45 {
    padding-left: 45px !important;
    padding-right: 45px !important
  }

  .sm\:pt-45 {
    padding-top: 45px !important
  }

  .sm\:pb-45 {
    padding-bottom: 45px !important
  }

  .sm\:pl-45 {
    padding-left: 45px !important
  }

  .sm\:pr-45 {
    padding-right: 45px !important
  }

  .sm\:mt-45 {
    margin-top: 45px !important
  }

  .sm\:mb-45 {
    margin-bottom: 45px !important
  }

  .sm\:ml-45 {
    margin-left: 45px !important
  }

  .sm\:mr-45 {
    margin-right: 45px !important
  }

  .sm\:py-50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important
  }

  .sm\:px-50 {
    padding-left: 50px !important;
    padding-right: 50px !important
  }

  .sm\:pt-50 {
    padding-top: 50px !important
  }

  .sm\:pb-50 {
    padding-bottom: 50px !important
  }

  .sm\:pl-50 {
    padding-left: 50px !important
  }

  .sm\:pr-50 {
    padding-right: 50px !important
  }

  .sm\:mt-50 {
    margin-top: 50px !important
  }

  .sm\:mb-50 {
    margin-bottom: 50px !important
  }

  .sm\:ml-50 {
    margin-left: 50px !important
  }

  .sm\:mr-50 {
    margin-right: 50px !important
  }

  .sm\:py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important
  }

  .sm\:px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important
  }

  .sm\:pt-60 {
    padding-top: 60px !important
  }

  .sm\:pb-60 {
    padding-bottom: 60px !important
  }

  .sm\:pl-60 {
    padding-left: 60px !important
  }

  .sm\:pr-60 {
    padding-right: 60px !important
  }

  .sm\:mt-60 {
    margin-top: 60px !important
  }

  .sm\:mb-60 {
    margin-bottom: 60px !important
  }

  .sm\:ml-60 {
    margin-left: 60px !important
  }

  .sm\:mr-60 {
    margin-right: 60px !important
  }

  .sm\:py-70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important
  }

  .sm\:px-70 {
    padding-left: 70px !important;
    padding-right: 70px !important
  }

  .sm\:pt-70 {
    padding-top: 70px !important
  }

  .sm\:pb-70 {
    padding-bottom: 70px !important
  }

  .sm\:pl-70 {
    padding-left: 70px !important
  }

  .sm\:pr-70 {
    padding-right: 70px !important
  }

  .sm\:mt-70 {
    margin-top: 70px !important
  }

  .sm\:mb-70 {
    margin-bottom: 70px !important
  }

  .sm\:ml-70 {
    margin-left: 70px !important
  }

  .sm\:mr-70 {
    margin-right: 70px !important
  }

  .sm\:py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important
  }

  .sm\:px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important
  }

  .sm\:pt-80 {
    padding-top: 80px !important
  }

  .sm\:pb-80 {
    padding-bottom: 80px !important
  }

  .sm\:pl-80 {
    padding-left: 80px !important
  }

  .sm\:pr-80 {
    padding-right: 80px !important
  }

  .sm\:mt-80 {
    margin-top: 80px !important
  }

  .sm\:mb-80 {
    margin-bottom: 80px !important
  }

  .sm\:ml-80 {
    margin-left: 80px !important
  }

  .sm\:mr-80 {
    margin-right: 80px !important
  }

  .sm\:py-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important
  }

  .sm\:px-90 {
    padding-left: 90px !important;
    padding-right: 90px !important
  }

  .sm\:pt-90 {
    padding-top: 90px !important
  }

  .sm\:pb-90 {
    padding-bottom: 90px !important
  }

  .sm\:pl-90 {
    padding-left: 90px !important
  }

  .sm\:pr-90 {
    padding-right: 90px !important
  }

  .sm\:mt-90 {
    margin-top: 90px !important
  }

  .sm\:mb-90 {
    margin-bottom: 90px !important
  }

  .sm\:ml-90 {
    margin-left: 90px !important
  }

  .sm\:mr-90 {
    margin-right: 90px !important
  }

  .sm\:py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important
  }

  .sm\:px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important
  }

  .sm\:pt-120 {
    padding-top: 120px !important
  }

  .sm\:pb-120 {
    padding-bottom: 120px !important
  }

  .sm\:pl-120 {
    padding-left: 120px !important
  }

  .sm\:pr-120 {
    padding-right: 120px !important
  }

  .sm\:mt-120 {
    margin-top: 120px !important
  }

  .sm\:mb-120 {
    margin-bottom: 120px !important
  }

  .sm\:ml-120 {
    margin-left: 120px !important
  }

  .sm\:mr-120 {
    margin-right: 120px !important
  }
}

.mx-auto {
  margin-left: auto;
  margin-right: auto
}

.xl\:mx-auto {
  margin-left: auto;
  margin-right: auto
}

.lg\:mx-auto {
  margin-left: auto;
  margin-right: auto
}

.md\:mx-auto {
  margin-left: auto;
  margin-right: auto
}

.sm\:mx-auto {
  margin-left: auto;
  margin-right: auto
}

/*** Gap x y ***/
.x-gap-0 {
  margin-left: -0;
  margin-right: -0
}

.x-gap-0>* {
  padding-left: 0;
  padding-right: 0
}

.y-gap-0 {
  margin-top: -0;
  margin-bottom: -0
}

.y-gap-0>* {
  padding-top: 0;
  padding-bottom: 0
}

.x-gap-5 {
  margin-left: -2.5px;
  margin-right: -2.5px
}

.x-gap-5>* {
  padding-left: 2.5px;
  padding-right: 2.5px
}

.y-gap-5 {
  margin-top: -2.5px;
  margin-bottom: -2.5px
}

.y-gap-5>* {
  padding-top: 2.5px;
  padding-bottom: 2.5px
}

.x-gap-10 {
  margin-left: -5px;
  margin-right: -5px
}

.x-gap-10>* {
  padding-left: 5px;
  padding-right: 5px
}

.y-gap-10 {
  margin-top: -5px;
  margin-bottom: -5px
}

.y-gap-10>* {
  padding-top: 5px;
  padding-bottom: 5px
}

.x-gap-15 {
  margin-left: -7.5px;
  margin-right: -7.5px
}

.x-gap-15>* {
  padding-left: 7.5px;
  padding-right: 7.5px
}

.y-gap-15 {
  margin-top: -7.5px;
  margin-bottom: -7.5px
}

.y-gap-15>* {
  padding-top: 7.5px;
  padding-bottom: 7.5px
}

.x-gap-20 {
  margin-left: -10px;
  margin-right: -10px
}

.x-gap-20>* {
  padding-left: 10px;
  padding-right: 10px
}

.y-gap-20 {
  margin-top: -10px;
  margin-bottom: -10px
}

.y-gap-20>* {
  padding-top: 10px;
  padding-bottom: 10px
}

.x-gap-30 {
  margin-left: -15px;
  margin-right: -15px
}

.x-gap-30>* {
  padding-left: 15px;
  padding-right: 15px
}

.y-gap-30 {
  margin-top: -15px;
  margin-bottom: -15px
}

.y-gap-30>* {
  padding-top: 15px;
  padding-bottom: 15px
}

.x-gap-40 {
  margin-left: -20px;
  margin-right: -20px
}

.x-gap-40>* {
  padding-left: 20px;
  padding-right: 20px
}

.y-gap-40 {
  margin-top: -20px;
  margin-bottom: -20px
}

.y-gap-40>* {
  padding-top: 20px;
  padding-bottom: 20px
}

.x-gap-50 {
  margin-left: -25px;
  margin-right: -25px
}

.x-gap-50>* {
  padding-left: 25px;
  padding-right: 25px
}

.y-gap-50 {
  margin-top: -25px;
  margin-bottom: -25px
}

.y-gap-50>* {
  padding-top: 25px;
  padding-bottom: 25px
}

.x-gap-60 {
  margin-left: -30px;
  margin-right: -30px
}

.x-gap-60>* {
  padding-left: 30px;
  padding-right: 30px
}

.y-gap-60 {
  margin-top: -30px;
  margin-bottom: -30px
}

.y-gap-60>* {
  padding-top: 30px;
  padding-bottom: 30px
}

.x-gap-80 {
  margin-left: -40px;
  margin-right: -40px
}

.x-gap-80>* {
  padding-left: 40px;
  padding-right: 40px
}

.y-gap-80 {
  margin-top: -40px;
  margin-bottom: -40px
}

.y-gap-80>* {
  padding-top: 40px;
  padding-bottom: 40px
}

@media (max-width: 767px) {
  .md\:x-gap-0 {
    margin-left: -0;
    margin-right: -0
  }

  .md\:x-gap-0>* {
    padding-left: 0;
    padding-right: 0
  }

  .md\:y-gap-0 {
    margin-top: -0;
    margin-bottom: -0
  }

  .md\:y-gap-0>* {
    padding-top: 0;
    padding-bottom: 0
  }

  .md\:x-gap-5 {
    margin-left: -2.5px;
    margin-right: -2.5px
  }

  .md\:x-gap-5>* {
    padding-left: 2.5px;
    padding-right: 2.5px
  }

  .md\:y-gap-5 {
    margin-top: -2.5px;
    margin-bottom: -2.5px
  }

  .md\:y-gap-5>* {
    padding-top: 2.5px;
    padding-bottom: 2.5px
  }

  .md\:x-gap-10 {
    margin-left: -5px;
    margin-right: -5px
  }

  .md\:x-gap-10>* {
    padding-left: 5px;
    padding-right: 5px
  }

  .md\:y-gap-10 {
    margin-top: -5px;
    margin-bottom: -5px
  }

  .md\:y-gap-10>* {
    padding-top: 5px;
    padding-bottom: 5px
  }

  .md\:x-gap-15 {
    margin-left: -7.5px;
    margin-right: -7.5px
  }

  .md\:x-gap-15>* {
    padding-left: 7.5px;
    padding-right: 7.5px
  }

  .md\:y-gap-15 {
    margin-top: -7.5px;
    margin-bottom: -7.5px
  }

  .md\:y-gap-15>* {
    padding-top: 7.5px;
    padding-bottom: 7.5px
  }

  .md\:x-gap-20 {
    margin-left: -10px;
    margin-right: -10px
  }

  .md\:x-gap-20>* {
    padding-left: 10px;
    padding-right: 10px
  }

  .md\:y-gap-20 {
    margin-top: -10px;
    margin-bottom: -10px
  }

  .md\:y-gap-20>* {
    padding-top: 10px;
    padding-bottom: 10px
  }

  .md\:x-gap-30 {
    margin-left: -15px;
    margin-right: -15px
  }

  .md\:x-gap-30>* {
    padding-left: 15px;
    padding-right: 15px
  }

  .md\:y-gap-30 {
    margin-top: -15px;
    margin-bottom: -15px
  }

  .md\:y-gap-30>* {
    padding-top: 15px;
    padding-bottom: 15px
  }

  .md\:x-gap-40 {
    margin-left: -20px;
    margin-right: -20px
  }

  .md\:x-gap-40>* {
    padding-left: 20px;
    padding-right: 20px
  }

  .md\:y-gap-40 {
    margin-top: -20px;
    margin-bottom: -20px
  }

  .md\:y-gap-40>* {
    padding-top: 20px;
    padding-bottom: 20px
  }

  .md\:x-gap-50 {
    margin-left: -25px;
    margin-right: -25px
  }

  .md\:x-gap-50>* {
    padding-left: 25px;
    padding-right: 25px
  }

  .md\:y-gap-50 {
    margin-top: -25px;
    margin-bottom: -25px
  }

  .md\:y-gap-50>* {
    padding-top: 25px;
    padding-bottom: 25px
  }

  .md\:x-gap-60 {
    margin-left: -30px;
    margin-right: -30px
  }

  .md\:x-gap-60>* {
    padding-left: 30px;
    padding-right: 30px
  }

  .md\:y-gap-60 {
    margin-top: -30px;
    margin-bottom: -30px
  }

  .md\:y-gap-60>* {
    padding-top: 30px;
    padding-bottom: 30px
  }

  .md\:x-gap-80 {
    margin-left: -40px;
    margin-right: -40px
  }

  .md\:x-gap-80>* {
    padding-left: 40px;
    padding-right: 40px
  }

  .md\:y-gap-80 {
    margin-top: -40px;
    margin-bottom: -40px
  }

  .md\:y-gap-80>* {
    padding-top: 40px;
    padding-bottom: 40px
  }
}

@media (max-width: 575px) {
  .sm\:x-gap-0 {
    margin-left: -0;
    margin-right: -0
  }

  .sm\:x-gap-0>* {
    padding-left: 0;
    padding-right: 0
  }

  .sm\:y-gap-0 {
    margin-top: -0;
    margin-bottom: -0
  }

  .sm\:y-gap-0>* {
    padding-top: 0;
    padding-bottom: 0
  }

  .sm\:x-gap-5 {
    margin-left: -2.5px;
    margin-right: -2.5px
  }

  .sm\:x-gap-5>* {
    padding-left: 2.5px;
    padding-right: 2.5px
  }

  .sm\:y-gap-5 {
    margin-top: -2.5px;
    margin-bottom: -2.5px
  }

  .sm\:y-gap-5>* {
    padding-top: 2.5px;
    padding-bottom: 2.5px
  }

  .sm\:x-gap-10 {
    margin-left: -5px;
    margin-right: -5px
  }

  .sm\:x-gap-10>* {
    padding-left: 5px;
    padding-right: 5px
  }

  .sm\:y-gap-10 {
    margin-top: -5px;
    margin-bottom: -5px
  }

  .sm\:y-gap-10>* {
    padding-top: 5px;
    padding-bottom: 5px
  }

  .sm\:x-gap-15 {
    margin-left: -7.5px;
    margin-right: -7.5px
  }

  .sm\:x-gap-15>* {
    padding-left: 7.5px;
    padding-right: 7.5px
  }

  .sm\:y-gap-15 {
    margin-top: -7.5px;
    margin-bottom: -7.5px
  }

  .sm\:y-gap-15>* {
    padding-top: 7.5px;
    padding-bottom: 7.5px
  }

  .sm\:x-gap-20 {
    margin-left: -10px;
    margin-right: -10px
  }

  .sm\:x-gap-20>* {
    padding-left: 10px;
    padding-right: 10px
  }

  .sm\:y-gap-20 {
    margin-top: -10px;
    margin-bottom: -10px
  }

  .sm\:y-gap-20>* {
    padding-top: 10px;
    padding-bottom: 10px
  }

  .sm\:x-gap-30 {
    margin-left: -15px;
    margin-right: -15px
  }

  .sm\:x-gap-30>* {
    padding-left: 15px;
    padding-right: 15px
  }

  .sm\:y-gap-30 {
    margin-top: -15px;
    margin-bottom: -15px
  }

  .sm\:y-gap-30>* {
    padding-top: 15px;
    padding-bottom: 15px
  }

  .sm\:x-gap-40 {
    margin-left: -20px;
    margin-right: -20px
  }

  .sm\:x-gap-40>* {
    padding-left: 20px;
    padding-right: 20px
  }

  .sm\:y-gap-40 {
    margin-top: -20px;
    margin-bottom: -20px
  }

  .sm\:y-gap-40>* {
    padding-top: 20px;
    padding-bottom: 20px
  }

  .sm\:x-gap-50 {
    margin-left: -25px;
    margin-right: -25px
  }

  .sm\:x-gap-50>* {
    padding-left: 25px;
    padding-right: 25px
  }

  .sm\:y-gap-50 {
    margin-top: -25px;
    margin-bottom: -25px
  }

  .sm\:y-gap-50>* {
    padding-top: 25px;
    padding-bottom: 25px
  }

  .sm\:x-gap-60 {
    margin-left: -30px;
    margin-right: -30px
  }

  .sm\:x-gap-60>* {
    padding-left: 30px;
    padding-right: 30px
  }

  .sm\:y-gap-60 {
    margin-top: -30px;
    margin-bottom: -30px
  }

  .sm\:y-gap-60>* {
    padding-top: 30px;
    padding-bottom: 30px
  }

  .sm\:x-gap-80 {
    margin-left: -40px;
    margin-right: -40px
  }

  .sm\:x-gap-80>* {
    padding-left: 40px;
    padding-right: 40px
  }

  .sm\:y-gap-80 {
    margin-top: -40px;
    margin-bottom: -40px
  }

  .sm\:y-gap-80>* {
    padding-top: 40px;
    padding-bottom: 40px
  }
}

/*** Gap ***/
.gap-0 {
  gap: 0px
}

.gap-5 {
  gap: 5px
}

.gap-10 {
  gap: 10px
}

.gap-15 {
  gap: 15px
}

.gap-20 {
  gap: 20px
}

.gap-25 {
  gap: 25px
}

.gap-30 {
  gap: 30px
}

.gap-40 {
  gap: 40px
}

.gap-50 {
  gap: 50px
}

.gap-60 {
  gap: 60px
}

.gap-70 {
  gap: 70px
}

.gap-80 {
  gap: 80px
}

@media (max-width: 767px) {
  .md\:gap-0 {
    gap: 0px
  }

  .md\:gap-5 {
    gap: 5px
  }

  .md\:gap-10 {
    gap: 10px
  }

  .md\:gap-15 {
    gap: 15px
  }

  .md\:gap-20 {
    gap: 20px
  }

  .md\:gap-25 {
    gap: 25px
  }

  .md\:gap-30 {
    gap: 30px
  }

  .md\:gap-40 {
    gap: 40px
  }

  .md\:gap-50 {
    gap: 50px
  }

  .md\:gap-60 {
    gap: 60px
  }

  .md\:gap-70 {
    gap: 70px
  }

  .md\:gap-80 {
    gap: 80px
  }
}

@media (max-width: 575px) {
  .sm\:gap-0 {
    gap: 0px
  }

  .sm\:gap-5 {
    gap: 5px
  }

  .sm\:gap-10 {
    gap: 10px
  }

  .sm\:gap-15 {
    gap: 15px
  }

  .sm\:gap-20 {
    gap: 20px
  }

  .sm\:gap-25 {
    gap: 25px
  }

  .sm\:gap-30 {
    gap: 30px
  }

  .sm\:gap-40 {
    gap: 40px
  }

  .sm\:gap-50 {
    gap: 50px
  }

  .sm\:gap-60 {
    gap: 60px
  }

  .sm\:gap-70 {
    gap: 70px
  }

  .sm\:gap-80 {
    gap: 80px
  }
}


/*** Layout ***/
.layout-pt-sm {
  padding-top: 30px
}

.layout-pb-sm {
  padding-bottom: 30px
}

.layout-pt-md {
  padding-top: 60px
}

.layout-pb-md {
  padding-bottom: 60px
}

.layout-pt-lg {
  padding-top: 120px
}

.layout-pb-lg {
  padding-bottom: 120px
}

.layout-pt-xl {
  padding-top: 140px
}

.layout-pb-xl {
  padding-bottom: 140px
}

@media (max-width: 767px) {
  .layout-pt-sm {
    padding-top: 30px
  }

  .layout-pb-sm {
    padding-bottom: 30px
  }

  .layout-pt-md {
    padding-top: 60px
  }

  .layout-pb-md {
    padding-bottom: 60px
  }

  .layout-pt-lg {
    padding-top: 100px
  }

  .layout-pb-lg {
    padding-bottom: 100px
  }

  .layout-pt-xl {
    padding-top: 120px
  }

  .layout-pb-xl {
    padding-bottom: 120px
  }
}

@media (max-width: 575px) {
  .layout-pt-sm {
    padding-top: 30px
  }

  .layout-pb-sm {
    padding-bottom: 30px
  }

  .layout-pt-md {
    padding-top: 30px
  }

  .layout-pb-md {
    padding-bottom: 30px
  }

  .layout-pt-lg {
    padding-top: 60px
  }

  .layout-pb-lg {
    padding-bottom: 60px
  }

  .layout-pt-xl {
    padding-top: 60px
  }

  .layout-pb-xl {
    padding-bottom: 60px
  }
}

/*** Width % ***/
.w-1\/7 {
  width: 14.285714% !important
}

.w-1\/5 {
  width: 20% !important
}

.w-1\/4 {
  width: 25% !important
}

.w-1\/3 {
  width: 33.333333% !important
}

.w-1\/2 {
  width: 50% !important
}

.w-1\/1 {
  width: 100% !important
}

@media (max-width: 1199px) {
  .xl\:w-1\/5 {
    width: 20% !important
  }

  .xl\:w-1\/4 {
    width: 25% !important
  }

  .xl\:w-1\/3 {
    width: 33.333333% !important
  }

  .xl\:w-1\/2 {
    width: 50% !important
  }

  .xl\:w-1\/1 {
    width: 100% !important
  }
}

@media (max-width: 991px) {
  .lg\:w-1\/5 {
    width: 20% !important
  }

  .lg\:w-1\/4 {
    width: 25% !important
  }

  .lg\:w-1\/3 {
    width: 33.333333% !important
  }

  .lg\:w-1\/2 {
    width: 50% !important
  }

  .lg\:w-1\/1 {
    width: 100% !important
  }
}

@media (max-width: 767px) {
  .md\:w-1\/5 {
    width: 20% !important
  }

  .md\:w-1\/4 {
    width: 25% !important
  }

  .md\:w-1\/3 {
    width: 33.333333% !important
  }

  .md\:w-1\/2 {
    width: 50% !important
  }

  .md\:w-1\/1 {
    width: 100% !important
  }
}

@media (max-width: 575px) {
  .sm\:w-1\/5 {
    width: 20% !important
  }

  .sm\:w-1\/4 {
    width: 25% !important
  }

  .sm\:w-1\/3 {
    width: 33.333333% !important
  }

  .sm\:w-1\/2 {
    width: 50% !important
  }

  .sm\:w-1\/1 {
    width: 100% !important
  }
}

/*** Height % ***/
.h-1\/0 {
  height: 0% !important
}

.h-1\/7 {
  height: 14.285714% !important
}

.h-1\/5 {
  height: 20% !important
}

.h-1\/4 {
  height: 25% !important
}

.h-1\/3 {
  height: 33.333333% !important
}

.h-1\/2 {
  height: 50% !important
}

.h-1\/1 {
  height: 100% !important
}

@media (max-width: 1199px) {
  .xl\:h-1\/0 {
    height: 0% !important
  }

  .xl\:h-1\/5 {
    height: 20% !important
  }

  .xl\:h-1\/4 {
    height: 25% !important
  }

  .xl\:h-1\/3 {
    height: 33.333333% !important
  }

  .xl\:h-1\/2 {
    height: 50% !important
  }

  .xl\:h-1\/1 {
    height: 100% !important
  }
}

@media (max-width: 991px) {
  .lg\:h-1\/0 {
    height: 0% !important
  }

  .lg\:h-1\/5 {
    height: 20% !important
  }

  .lg\:h-1\/4 {
    height: 25% !important
  }

  .lg\:h-1\/3 {
    height: 33.333333% !important
  }

  .lg\:h-1\/2 {
    height: 50% !important
  }

  .lg\:h-1\/1 {
    height: 100% !important
  }
}

@media (max-width: 767px) {
  .md\:h-1\/0 {
    height: 0% !important
  }

  .md\:h-1\/5 {
    height: 20% !important
  }

  .md\:h-1\/4 {
    height: 25% !important
  }

  .md\:h-1\/3 {
    height: 33.333333% !important
  }

  .md\:h-1\/2 {
    height: 50% !important
  }

  .md\:h-1\/1 {
    height: 100% !important
  }
}

@media (max-width: 575px) {
  .sm\:h-1\/0 {
    height: 0% !important
  }

  .sm\:h-1\/5 {
    height: 20% !important
  }

  .sm\:h-1\/4 {
    height: 25% !important
  }

  .sm\:h-1\/3 {
    height: 33.333333% !important
  }

  .sm\:h-1\/2 {
    height: 50% !important
  }

  .sm\:h-1\/1 {
    height: 100% !important
  }
}


/*** Active ***/
.is-active-yes {
  max-height: 100% !important
}

.is-active-no {
  max-height: none !important
}

@media (min-width: 1199px) {
  .xl\:is-active-yes {
    max-height: 100% !important
  }

  .xl\:is-active-no {
    max-height: none !important
  }
}

@media (min-width: 991px) {
  .lg\:is-active-yes {
    max-height: 100% !important
  }

  .lg\:is-active-no {
    max-height: none !important
  }
}

@media (min-width: 767px) {
  .md\:is-active-yes {
    max-height: 100% !important
  }

  .md\:is-active-no {
    max-height: none !important
  }
}

@media (min-width: 575px) {
  .sm\:is-active-yes {
    max-height: 100% !important
  }

  .sm\:is-active-no {
    max-height: none !important
  }
}

/*** Flex ***/
.flex-column {
  flex-direction: column
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-row-reverse {
  flex-wrap: row-reverse !important;
}

.flex-row {
  flex-direction: row !important;
}

@media (max-width: 1199px) {
  .xl\:flex-column {
    flex-direction: column !important
  }

  .xl\:flex-wrap {
    flex-wrap: wrap !important;
  }

  .xl\:flex-nowrap {
    flex-wrap: nowrap !important;
  }

  .xl\:flex-row-reverse {
    flex-wrap: row-reverse !important;
  }

  .xl\:flex-row {
    flex-direction: row !important;
  }
}

@media (max-width: 991px) {
  .lg\:flex-column {
    flex-direction: column !important
  }

  .lg\:flex-wrap {
    flex-wrap: wrap !important;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap !important;
  }

  .lg\:flex-row-reverse {
    flex-wrap: row-reverse !important;
  }

  .lg\:flex-row {
    flex-direction: row !important;
  }
}

@media (max-width: 767px) {
  .md\:flex-column {
    flex-direction: column !important
  }

  .md\:flex-wrap {
    flex-wrap: wrap !important;
  }

  .md\:flex-nowrap {
    flex-wrap: nowrap !important;
  }

  .md\:flex-row-reverse {
    flex-wrap: row-reverse !important;
  }

  .md\:flex-row {
    flex-direction: row !important;
  }
}

@media (max-width: 575px) {
  .sm\:flex-column {
    flex-direction: column !important
  }

  .sm\:flex-wrap {
    flex-wrap: wrap !important;
  }

  .sm\:flex-nowrap {
    flex-wrap: nowrap !important;
  }

  .sm\:flex-row-reverse {
    flex-wrap: row-reverse !important;
  }

  .sm\:flex-row {
    flex-direction: row !important;
  }
}

.justify-start {
  justify-content: flex-start !important
}

.justify-end {
  justify-content: flex-end !important
}

.justify-center {
  justify-content: center !important
}

.justify-between {
  justify-content: space-between !important
}

.items-start {
  align-items: flex-start !important
}

.items-end {
  align-items: flex-end !important
}

.items-center {
  align-items: center !important
}

@media (max-width: 1199px) {
  .xl\:justify-start {
    justify-content: flex-start !important
  }

  .xl\:justify-end {
    justify-content: flex-end !important
  }

  .xl\:justify-center {
    justify-content: center !important
  }

  .xl\:justify-between {
    justify-content: space-between !important
  }

  .xl\:items-start {
    align-items: flex-start !important
  }

  .xl\:items-end {
    align-items: flex-end !important
  }

  .xl\:items-center {
    align-items: center !important
  }
}

@media (max-width: 991px) {
  .lg\:justify-start {
    justify-content: flex-start !important
  }

  .lg\:justify-end {
    justify-content: flex-end !important
  }

  .lg\:justify-center {
    justify-content: center !important
  }

  .lg\:justify-between {
    justify-content: space-between !important
  }

  .lg\:items-start {
    align-items: flex-start !important
  }

  .lg\:items-end {
    align-items: flex-end !important
  }

  .lg\:items-center {
    align-items: center !important
  }
}

@media (max-width: 767px) {
  .md\:justify-start {
    justify-content: flex-start !important
  }

  .md\:justify-end {
    justify-content: flex-end !important
  }

  .md\:justify-center {
    justify-content: center !important
  }

  .md\:justify-between {
    justify-content: space-between !important
  }

  .md\:items-start {
    align-items: flex-start !important
  }

  .md\:items-end {
    align-items: flex-end !important
  }

  .md\:items-center {
    align-items: center !important
  }
}

@media (max-width: 575px) {
  .sm\:justify-start {
    justify-content: flex-start !important
  }

  .sm\:justify-end {
    justify-content: flex-end !important
  }

  .sm\:justify-center {
    justify-content: center !important
  }

  .sm\:justify-between {
    justify-content: space-between !important
  }

  .sm\:items-start {
    align-items: flex-start !important
  }

  .sm\:items-end {
    align-items: flex-end !important
  }

  .sm\:items-center {
    align-items: center !important
  }
}

/*** Order ***/
.order-1 {
  order: 1 !important
}

.order-2 {
  order: 2 !important
}

.order-3 {
  order: 3 !important
}

@media (max-width: 1199px) {
  .xl\:order-1 {
    order: 1 !important
  }

  .xl\:order-2 {
    order: 2 !important
  }

  .xl\:order-3 {
    order: 3 !important
  }
}

@media (max-width: 991px) {
  .lg\:order-1 {
    order: 1 !important
  }

  .lg\:order-2 {
    order: 2 !important
  }

  .lg\:order-3 {
    order: 3 !important
  }
}

@media (max-width: 767px) {
  .md\:order-1 {
    order: 1 !important
  }

  .md\:order-2 {
    order: 2 !important
  }

  .md\:order-3 {
    order: 3 !important
  }
}

@media (max-width: 575px) {
  .sm\:order-1 {
    order: 1 !important
  }

  .sm\:order-2 {
    order: 2 !important
  }

  .sm\:order-3 {
    order: 3 !important
  }
}

/*** Dispalay ***/
.d-none {
  display: none !important
}

.d-flex {
  display: flex !important
}

.d-block {
  display: block !important
}

.d-inline-block {
  display: inline-block !important
}

@media (max-width: 1300px) {
  .xxl\:d-none {
    display: none !important
  }
}

@media (max-width: 1199px) {
  .xl\:d-none {
    display: none !important
  }

  .xl\:d-inline-block {
    display: inline-block !important
  }

  .xl\:d-block {
    display: block !important
  }

  .xl\:d-flex {
    display: flex !important
  }
}

@media (max-width: 991px) {
  .lg\:d-none {
    display: none !important
  }

  .lg\:d-inline-block {
    display: inline-block !important
  }

  .lg\:d-block {
    display: block !important
  }

  .lg\:d-flex {
    display: flex !important
  }
}

@media (max-width: 767px) {
  .md\:d-none {
    display: none !important
  }

  .md\:d-inline-block {
    display: inline-block !important
  }

  .md\:d-block {
    display: block !important
  }

  .md\:d-flex {
    display: flex !important
  }
}

@media (max-width: 575px) {
  .sm\:d-none {
    display: none !important
  }

  .sm\:d-inline-block {
    display: inline-block !important
  }

  .sm\:d-block {
    display: block !important
  }

  .sm\:d-flex {
    display: flex !important
  }
}


/*** Scrool Snap ***/
.scroll-x-snap {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #aaa rgba(0, 0, 0, 0);
  scrollbar-width: thin;
  margin: 0;
}

.scroll-x-snap-item {
  display: grid;
  cursor: pointer;
  scroll-snap-stop: always;
  user-select: none;
}

.scroll-x-snap-item-1 {
  width: 100% !important;
  flex: 1 0 100%;
}

.scroll-x-snap-item-1-2 {
  width: 80% !important;
  flex: 1 0 80%;
}

.scroll-x-snap-item-2 {
  width: 50% !important;
  flex: 1 0 50%;
}

.scroll-x-snap-item-3 {
  width: 33% !important;
  flex: 1 0 33%;
}

.scroll-x-snap-item-4 {
  width: 25% !important;
  flex: 1 0 25%;
}

.scroll-x-snap-item-5 {
  width: 20% !important;
  flex: 1 0 20%;
}

.scroll-x-snap-item-6 {
  width: 16% !important;
  flex: 1 0 16%;
}

.scroll-x-snap-item-7 {
  width: 14% !important;
  flex: 1 0 14%;
}

.scroll-x-snap-item-8 {
  width: 12% !important;
  flex: 1 0 12%;
}

.scroll-x-snap-item-9 {
  width: 11% !important;
  flex: 1 0 11%;
}

.scroll-x-snap-item-10 {
  width: 10% !important;
  flex: 1 0 10%;
}

.scroll-x-snap-item-11 {
  width: 9% !important;
  flex: 1 0 9%;
}

.scroll-x-snap-item-12 {
  width: 8% !important;
  flex: 1 0 8%;
}

.scroll-x-snap-item-auto {
  width: auto !important;
  flex: 1 0 0%;
}

@media (max-width: 1199px) {
  .xl\:scroll-x-snap-item-1 {
    width: 100% !important;
    flex: 1 0 100%;
  }

  .xl\:scroll-x-snap-item-1-2 {
    width: 80% !important;
    flex: 1 0 80%;
  }

  .xl\:scroll-x-snap-item-2 {
    width: 50% !important;
    flex: 1 0 50%;
  }

  .xl\:scroll-x-snap-item-3 {
    width: 33% !important;
    flex: 1 0 33%;
  }

  .xl\:scroll-x-snap-item-4 {
    width: 25% !important;
    flex: 1 0 25%;
  }

  .xl\:scroll-x-snap-item-5 {
    width: 20% !important;
    flex: 1 0 20%;
  }

  .xl\:scroll-x-snap-item-6 {
    width: 16% !important;
    flex: 1 0 16%;
  }

  .xl\:scroll-x-snap-item-7 {
    width: 14% !important;
    flex: 1 0 14%;
  }

  .xl\:scroll-x-snap-item-8 {
    width: 12% !important;
    flex: 1 0 12%;
  }

  .xl\:scroll-x-snap-item-9 {
    width: 11% !important;
    flex: 1 0 11%;
  }

  .xl\:scroll-x-snap-item-10 {
    width: 10% !important;
    flex: 1 0 10%;
  }

  .xl\:scroll-x-snap-item-11 {
    width: 9% !important;
    flex: 1 0 9%;
  }

  .xl\:scroll-x-snap-item-12 {
    width: 8% !important;
    flex: 1 0 8%;
  }

  .xl\:scroll-x-snap-item-auto {
    width: auto !important;
    flex: 1 0 0%;
  }
}

@media (max-width: 991px) {
  .lg\:scroll-x-snap-item-1 {
    width: 100% !important;
    flex: 1 0 100%;
  }

  .lg\:scroll-x-snap-item-1-2 {
    width: 80% !important;
    flex: 1 0 80%;
  }

  .lg\:scroll-x-snap-item-2 {
    width: 50% !important;
    flex: 1 0 50%;
  }

  .lg\:scroll-x-snap-item-3 {
    width: 33% !important;
    flex: 1 0 33%;
  }

  .lg\:scroll-x-snap-item-4 {
    width: 25% !important;
    flex: 1 0 25%;
  }

  .lg\:scroll-x-snap-item-5 {
    width: 20% !important;
    flex: 1 0 20%;
  }

  .lg\:scroll-x-snap-item-6 {
    width: 16% !important;
    flex: 1 0 16%;
  }

  .lg\:scroll-x-snap-item-7 {
    width: 14% !important;
    flex: 1 0 14%;
  }

  .lg\:scroll-x-snap-item-8 {
    width: 12% !important;
    flex: 1 0 12%;
  }

  .lg\:scroll-x-snap-item-9 {
    width: 11% !important;
    flex: 1 0 11%;
  }

  .lg\:scroll-x-snap-item-10 {
    width: 10% !important;
    flex: 1 0 10%;
  }

  .lg\:scroll-x-snap-item-11 {
    width: 9% !important;
    flex: 1 0 9%;
  }

  .lg\:scroll-x-snap-item-12 {
    width: 8% !important;
    flex: 1 0 8%;
  }

  .lg\:scroll-x-snap-item-auto {
    width: auto !important;
    flex: 1 0 0%;
  }
}

@media (max-width: 767px) {
  .md\:scroll-x-snap-item-1 {
    width: 100% !important;
    flex: 1 0 100%;
  }

  .md\:scroll-x-snap-item-1-2 {
    width: 80% !important;
    flex: 1 0 80%;
  }

  .md\:scroll-x-snap-item-2 {
    width: 50% !important;
    flex: 1 0 50%;
  }

  .md\:scroll-x-snap-item-3 {
    width: 33% !important;
    flex: 1 0 33%;
  }

  .md\:scroll-x-snap-item-4 {
    width: 25% !important;
    flex: 1 0 25%;
  }

  .md\:scroll-x-snap-item-5 {
    width: 20% !important;
    flex: 1 0 20%;
  }

  .md\:scroll-x-snap-item-6 {
    width: 16% !important;
    flex: 1 0 16%;
  }

  .md\:scroll-x-snap-item-7 {
    width: 14% !important;
    flex: 1 0 14%;
  }

  .md\:scroll-x-snap-item-8 {
    width: 12% !important;
    flex: 1 0 12%;
  }

  .md\:scroll-x-snap-item-9 {
    width: 11% !important;
    flex: 1 0 11%;
  }

  .md\:scroll-x-snap-item-10 {
    width: 10% !important;
    flex: 1 0 10%;
  }

  .md\:scroll-x-snap-item-11 {
    width: 9% !important;
    flex: 1 0 9%;
  }

  .md\:scroll-x-snap-item-12 {
    width: 8% !important;
    flex: 1 0 8%;
  }

  .md\:scroll-x-snap-item-auto {
    width: auto !important;
    flex: 1 0 0%;
  }
}

@media (max-width: 575px) {
  .sm\:scroll-x-snap-item-1 {
    width: 100% !important;
    flex: 1 0 100%;
  }

  .sm\:scroll-x-snap-item-1-2 {
    width: 80% !important;
    flex: 1 0 80%;
  }

  .sm\:scroll-x-snap-item-2 {
    width: 50% !important;
    flex: 1 0 50%;
  }

  .sm\:scroll-x-snap-item-3 {
    width: 33% !important;
    flex: 1 0 33%;
  }

  .sm\:scroll-x-snap-item-4 {
    width: 25% !important;
    flex: 1 0 25%;
  }

  .sm\:scroll-x-snap-item-5 {
    width: 20% !important;
    flex: 1 0 20%;
  }

  .sm\:scroll-x-snap-item-6 {
    width: 16% !important;
    flex: 1 0 16%;
  }

  .sm\:scroll-x-snap-item-7 {
    width: 14% !important;
    flex: 1 0 14%;
  }

  .sm\:scroll-x-snap-item-8 {
    width: 12% !important;
    flex: 1 0 12%;
  }

  .sm\:scroll-x-snap-item-9 {
    width: 11% !important;
    flex: 1 0 11%;
  }

  .sm\:scroll-x-snap-item-10 {
    width: 10% !important;
    flex: 1 0 10%;
  }

  .sm\:scroll-x-snap-item-11 {
    width: 9% !important;
    flex: 1 0 9%;
  }

  .sm\:scroll-x-snap-item-12 {
    width: 8% !important;
    flex: 1 0 8%;
  }

  .sm\:scroll-x-snap-item-auto {
    width: auto !important;
    flex: 1 0 0%;
  }
}

/*** Grid ***/
.g-1fr-1 {
  grid-template-columns: 1fr !important
}

.g-1fr-2 {
  grid-template-columns: 1fr 1fr !important
}

.g-1fr-3 {
  grid-template-columns: 1fr 1fr 1fr !important
}

.g-1fr-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr !important
}

.g-1fr-5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important
}

.g-1fr-6 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important
}

.g-1fr-7 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
}

.g-1fr-8 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
}

.g-1fr-9 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
}

.g-1fr-10 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
}

.g-1fr-11 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
}

.g-1fr-12 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
}

@media (max-width: 1300px) {
  .xxl\:g-1fr-1 {
    grid-template-columns: 1fr !important
  }

  .xxl\:g-1fr-2 {
    grid-template-columns: 1fr 1fr !important
  }

  .xxl\:g-1fr-3 {
    grid-template-columns: 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xxl\:g-1fr-12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  d-none {
    display: none !important
  }
}

@media (max-width: 1199px) {
  .xl\:g-1fr-1 {
    grid-template-columns: 1fr !important
  }

  .xl\:g-1fr-2 {
    grid-template-columns: 1fr 1fr !important
  }

  .xl\:g-1fr-3 {
    grid-template-columns: 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .xl\:g-1fr-12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  d-none {
    display: none !important
  }
}

@media (max-width: 991px) {
  .lg\:g-1fr-1 {
    grid-template-columns: 1fr !important
  }

  .lg\:g-1fr-2 {
    grid-template-columns: 1fr 1fr !important
  }

  .lg\:g-1fr-3 {
    grid-template-columns: 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .lg\:g-1fr-12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  d-none {
    display: none !important
  }
}

@media (max-width: 767px) {
  .md\:g-1fr-1 {
    grid-template-columns: 1fr !important
  }

  .md\:g-1fr-2 {
    grid-template-columns: 1fr 1fr !important
  }

  .md\:g-1fr-3 {
    grid-template-columns: 1fr 1fr 1fr !important
  }

  .md\:g-1fr-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr !important
  }

  .md\:g-1fr-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important
  }

  .md\:g-1fr-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .md\:g-1fr-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .md\:g-1fr-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .md\:g-1fr-9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .md\:g-1fr-10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .md\:g-1fr-11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .md\:g-1fr-12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  d-none {
    display: none !important
  }
}

@media (max-width: 575px) {
  .sm\:g-1fr-1 {
    grid-template-columns: 1fr !important
  }

  .sm\:g-1fr-2 {
    grid-template-columns: 1fr 1fr !important
  }

  .sm\:g-1fr-3 {
    grid-template-columns: 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  .sm\:g-1fr-12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important
  }

  d-none {
    display: none !important
  }
}

/*** General ***/
.html-overflow-hidden {
  overflow: hidden !important
}

.html-overflow-hidden body {
  overflow-y: scroll
}

.origin-top {
  transform-origin: top !important
}

.origin-left {
  transform-origin: left !important
}

.pointer-events-auto {
  pointer-events: auto !important
}

.pointer-events-none {
  pointer-events: none !important
}

.bg-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%
}

.img-ratio {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.img-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.img-contain {
  width: 100%;
  height: 100%;
  -o-object-fit: contain !important;
  object-fit: contain !important
}

.line-through {
  text-decoration: line-through
}

.underline {
  text-decoration: underline
}

.italic {
  font-style: italic
}

.uppercase {
  text-transform: uppercase
}

.capitalize {
  text-transform: capitalize
}

.normal {
  text-transform: none
}

.after-none:after {
  display: none !important;
}

.before-none:before {
  display: none !important;
}

.mt-n1px {
  margin-top: -1px;
}

.cursor-pointer {
  cursor: pointer;
}


.overflow-scroll {
  overflow: scroll !important
}

.overflow-y-scroll {
  overflow-y: scroll !important
}

.overflow-x-scroll {
  overflow-x: scroll !important
}

.overflow-hidden {
  overflow: hidden !important
}

.overflow-normal {
  overflow: initial !important
}

.overflow-visible {
  overflow: visible !important
}

@media (max-width: 1300px) {
  .xxl\:overflow-scroll {
    overflow: scroll !important
  }

  .xxl\:overflow-y-scroll {
    overflow-y: scroll !important
  }

  .xxl\:overflow-x-scroll {
    overflow-x: scroll !important
  }

  .xxl\:overflow-hidden {
    overflow: hidden !important
  }

  .xxl\:overflow-normal {
    overflow: initial !important
  }

  .xxl\:overflow-visible {
    overflow: visible !important
  }
}

@media (max-width: 1199px) {
  .xl\:overflow-scroll {
    overflow: scroll !important
  }

  .xl\:overflow-y-scroll {
    overflow-y: scroll !important
  }

  .xl\:overflow-x-scroll {
    overflow-x: scroll !important
  }

  .xl\:overflow-hidden {
    overflow: hidden !important
  }

  .xl\:overflow-normal {
    overflow: initial !important
  }

  .xl\:overflow-visible {
    overflow: visible !important
  }
}

@media (max-width: 991px) {
  .lg\:overflow-scroll {
    overflow: scroll !important
  }

  .lg\:overflow-y-scroll {
    overflow-y: scroll !important
  }

  .lg\:overflow-x-scroll {
    overflow-x: scroll !important
  }

  .lg\:overflow-hidden {
    overflow: hidden !important
  }

  .lg\:overflow-normal {
    overflow: initial !important
  }

  .lg\:overflow-visible {
    overflow: visible !important
  }
}

@media (max-width: 767px) {
  .md\:overflow-scroll {
    overflow: scroll !important
  }

  .md\:overflow-y-scroll {
    overflow-y: scroll !important
  }

  .md\:overflow-x-scroll {
    overflow-x: scroll !important
  }

  .md\:overflow-hidden {
    overflow: hidden !important
  }

  .md\:overflow-normal {
    overflow: initial !important
  }

  .md\:overflow-visible {
    overflow: visible !important
  }
}

@media (max-width: 575px) {
  .sm\:overflow-scroll {
    overflow: scroll !important
  }

  .sm\:overflow-y-scroll {
    overflow-y: scroll !important
  }

  .sm\:overflow-x-scroll {
    overflow-x: scroll !important
  }

  .sm\:overflow-hidden {
    overflow: hidden !important
  }

  .sm\:overflow-normal {
    overflow: initial !important
  }

  .sm\:overflow-visible {
    overflow: visible !important
  }
}


/*** rounded ***/
.rounded-0 {
  border-radius: 0 !important
}

.rounded-4 {
  border-radius: 4px !important
}

.rounded-8 {
  border-radius: 8px !important
}

.rounded-10 {
  border-radius: 10px !important
}

.rounded-12 {
  border-radius: 12px !important
}

.rounded-16 {
  border-radius: 16px !important
}

.rounded-18 {
  border-radius: 18px !important
}

.rounded-20 {
  border-radius: 20px !important
}

.rounded-22 {
  border-radius: 22px !important
}

.rounded-30 {
  border-radius: 30px !important
}

.rounded-40 {
  border-radius: 40px !important
}

.rounded-50 {
  border-radius: 50px !important
}

.rounded-60 {
  border-radius: 60px !important
}

.rounded-70 {
  border-radius: 70px !important
}

.rounded-100 {
  border-radius: 100px !important
}

.rounded-full {
  border-radius: 100% !important
}

@media (max-width: 1199px) {
  .xl\:rounded-0 {
    border-radius: 0 !important
  }

  .xl\:rounded-4 {
    border-radius: 4px !important
  }

  .xl\:rounded-8 {
    border-radius: 8px !important
  }

  .xl\:rounded-10 {
    border-radius: 10px !important
  }

  .xl\:rounded-12 {
    border-radius: 12px !important
  }

  .xl\:rounded-16 {
    border-radius: 16px !important
  }

  .xl\:rounded-18 {
    border-radius: 18px !important
  }

  .xl\:rounded-20 {
    border-radius: 20px !important
  }

  .xl\:rounded-22 {
    border-radius: 22px !important
  }

  .xl\:rounded-30 {
    border-radius: 30px !important
  }

  .xl\:rounded-40 {
    border-radius: 40px !important
  }

  .xl\:rounded-50 {
    border-radius: 50px !important
  }

  .xl\:rounded-60 {
    border-radius: 60px !important
  }

  .xl\:rounded-70 {
    border-radius: 70px !important
  }

  .xl\:rounded-100 {
    border-radius: 100px !important
  }

  .xl\:rounded-full {
    border-radius: 100% !important
  }
}

@media (max-width: 991px) {
  .lg\:rounded-0 {
    border-radius: 0 !important
  }

  .lg\:rounded-4 {
    border-radius: 4px !important
  }

  .lg\:rounded-8 {
    border-radius: 8px !important
  }

  .lg\:rounded-10 {
    border-radius: 10px !important
  }

  .lg\:rounded-12 {
    border-radius: 12px !important
  }

  .lg\:rounded-16 {
    border-radius: 16px !important
  }

  .lg\:rounded-18 {
    border-radius: 18px !important
  }

  .lg\:rounded-20 {
    border-radius: 20px !important
  }

  .lg\:rounded-22 {
    border-radius: 22px !important
  }

  .lg\:rounded-30 {
    border-radius: 30px !important
  }

  .lg\:rounded-40 {
    border-radius: 40px !important
  }

  .lg\:rounded-50 {
    border-radius: 50px !important
  }

  .lg\:rounded-60 {
    border-radius: 60px !important
  }

  .lg\:rounded-70 {
    border-radius: 70px !important
  }

  .lg\:rounded-100 {
    border-radius: 100px !important
  }

  .lg\:rounded-full {
    border-radius: 100% !important
  }
}

@media (max-width: 767px) {
  .md\:rounded-0 {
    border-radius: 0 !important
  }

  .md\:rounded-4 {
    border-radius: 4px !important
  }

  .md\:rounded-8 {
    border-radius: 8px !important
  }

  .md\:rounded-10 {
    border-radius: 10px !important
  }

  .md\:rounded-12 {
    border-radius: 12px !important
  }

  .md\:rounded-16 {
    border-radius: 16px !important
  }

  .md\:rounded-18 {
    border-radius: 18px !important
  }

  .md\:rounded-20 {
    border-radius: 20px !important
  }

  .md\:rounded-22 {
    border-radius: 22px !important
  }

  .md\:rounded-30 {
    border-radius: 30px !important
  }

  .md\:rounded-40 {
    border-radius: 40px !important
  }

  .md\:rounded-50 {
    border-radius: 50px !important
  }

  .md\:rounded-60 {
    border-radius: 60px !important
  }

  .md\:rounded-70 {
    border-radius: 70px !important
  }

  .md\:rounded-100 {
    border-radius: 100px !important
  }

  .md\:rounded-full {
    border-radius: 100% !important
  }
}

@media (max-width: 575px) {
  .sm\:rounded-0 {
    border-radius: 0 !important
  }

  .sm\:rounded-4 {
    border-radius: 4px !important
  }

  .sm\:rounded-8 {
    border-radius: 8px !important
  }

  .sm\:rounded-10 {
    border-radius: 10px !important
  }

  .sm\:rounded-12 {
    border-radius: 12px !important
  }

  .sm\:rounded-16 {
    border-radius: 16px !important
  }

  .sm\:rounded-18 {
    border-radius: 18px !important
  }

  .sm\:rounded-20 {
    border-radius: 20px !important
  }

  .sm\:rounded-22 {
    border-radius: 22px !important
  }

  .sm\:rounded-30 {
    border-radius: 30px !important
  }

  .sm\:rounded-40 {
    border-radius: 40px !important
  }

  .sm\:rounded-50 {
    border-radius: 50px !important
  }

  .sm\:rounded-60 {
    border-radius: 60px !important
  }

  .sm\:rounded-70 {
    border-radius: 70px !important
  }

  .sm\:rounded-100 {
    border-radius: 100px !important
  }

  .sm\:rounded-full {
    border-radius: 100% !important
  }
}

.rounded-right-6 {
  border-radius: 0 6px 6px 0 !important
}

.rounded-right-16 {
  border-radius: 0 16px 16px 0 !important
}

.rounded-left-6 {
  border-radius: 6px 0 0 6px !important
}

.rounded-left-bottom-6 {
  border-radius: 0 0 0 6px !important
}

.rounded-b-r-4 {
  border-bottom-right-radius: 4px;
}

.rounded-b-r-6 {
  border-bottom-right-radius: 6px;
}

.rounded-b-r-8 {
  border-bottom-right-radius: 8px;
}

.rounded-b-r-10 {
  border-bottom-right-radius: 10px;
}

.rounded-b-r-12 {
  border-bottom-right-radius: 12px;
}

.rounded-b-r-16 {
  border-bottom-right-radius: 16px;
}

.rounded-b-r-18 {
  border-bottom-right-radius: 18px;
}

.rounded-b-r-20 {
  border-bottom-right-radius: 20px;
}

.rounded-b-r-24 {
  border-bottom-right-radius: 24px;
}

.rounded-b-r-30 {
  border-bottom-right-radius: 30px;
}

/*** Border ***/
@media (max-width: 991px) {
  .lg\:border-none {
    border: none !important
  }
}

.border-type-1 {
  border: 1px dashed var(--color-blue-1)
}

.border-top-light {
  border-top: 1px solid var(--color-border)
}

.border-left-light {
  border-left: 1px solid var(--color-border)
}

.border-bottom-light {
  border-bottom: 1px solid var(--color-border)
}

.border-white {
  border: 1px solid #fff
}

.border-dark-1 {
  border: 1px solid var(--color-dark-1)
}

.border-dark-2 {
  border: 1px solid var(--color-dark-2)
}

.border-dark-3 {
  border: 1px solid var(--color-dark-3)
}

.border-dark-4 {
  border: 1px solid var(--color-dark-4)
}

.border-blue-1 {
  border: 1px solid var(--color-blue-1)
}

.border-color-yellow-1 {
  border-color: var(--color-yellow-1) !important;
}

.border-color-yellow-2 {
  border-color: var(--color-yellow-2) !important;
}

.border-color-blue-1 {
  border-color: var(--color-blue-1) !important;
}

.border-color-blue-2 {
  border-color: var(--color-blue-2) !important;
}

.border-white-15 {
  border: 1px solid rgba(255, 255, 255, 0.15)
}

.border-top-white-15 {
  border-top: 1px solid rgba(255, 255, 255, 0.15)
}

.border-light {
  border: 1px solid var(--color-border) !important
}

.border-red-2 {
  border: 2px solid var(--color-red-1) !important;
}

.border-gray-2 {
  border: 2px solid var(--color-gray-1) !important;
}

.border-yellow-2 {
  border: 2px solid var(--color-yellow-1) !important;
}

.border-green-2 {
  border: 2px solid var(--color-green-1) !important;
}

.border-blue-2 {
  border: 2px solid var(--color-blue-1) !important;
}

.border-red1 {
  border: 1px solid var(--color-red-1) !important;
}

.border-red2 {
  border: 1px solid var(--color-red-2) !important;
}

.border-red3 {
  border: 1px solid var(--color-red-3) !important;
}

.border-gray1 {
  border: 1px solid var(--color-gray-1) !important;
}

.border-gray2 {
  border: 1px solid var(--color-gray-2) !important;
}

.border-gray3 {
  border: 1px solid var(--color-gray-3) !important;
}

.border-light-1 {
  border: 1px solid var(--color-light-1) !important;
}

.border-light-2 {
  border: 1px solid var(--color-light-2) !important;
}

.border-light-3 {
  border: 1px solid var(--color-light-3) !important;
}

.border-light-4 {
  border: 1px solid var(--color-light-4) !important;
}

.border-light-5 {
  border: 1px solid var(--color-light-5) !important;
}

.border-green1 {
  border: 1px solid var(--color-green-1);
}

.border-green2 {
  border: 1px solid var(--color-green-2);
}

.border-green3 {
  border: 1px solid var(--color-green-3);
}

.border-green4 {
  border: 1px solid var(--color-green-4);
}

.border-green5 {
  border: 1px solid var(--color-green-5);
}

.border-w2 {
  border-width: 2px !important
}

.border-w3 {
  border-width: 3px !important
}

.border-w4 {
  border-width: 4px !important
}

.border-w5 {
  border-width: 5px !important
}

.border-w6 {
  border-width: 6px !important
}

.border-w7 {
  border-width: 7px !important
}

.border-w8 {
  border-width: 8px !important
}

.border-w9 {
  border-width: 9px !important
}

.border-w10 {
  border-width: 10px !important
}

.border-w11 {
  border-width: 11px !important
}

.border-w12 {
  border-width: 12px !important
}

.border-w13 {
  border-width: 13px !important
}

.border-w14 {
  border-width: 14px !important
}

.border-w15 {
  border-width: 15px !important
}

.border-w16 {
  border-width: 16px !important
}

.border-w17 {
  border-width: 17px !important
}

.border-w18 {
  border-width: 18px !important
}

.border-w19 {
  border-width: 19px !important
}

.border-w20 {
  border-width: 20px !important
}

.border-t-0 {
  border-top-width: 0px !important
}

.border-b-0 {
  border-bottom-width: 0px !important
}

.border-r-0 {
  border-right-width: 0px !important
}

.border-l-0 {
  border-left-width: 0px !important
}

.border-t-1 {
  border-width: 1px 0 0 0 !important
}

.border-b-1 {
  border-width: 0 0 1px 0 !important
}

.border-r-1 {
  border-width: 0 1px 0 0 !important
}

.border-l-1 {
  border-width: 0 0 0 1px !important
}


.border-s1 {
  border-width: 1px !important
}

.border-s2 {
  border-width: 2px !important
}

.border-s3 {
  border-width: 3px !important
}

.border-s4 {
  border-width: 4px !important
}

.border-s5 {
  border-width: 5px !important
}

/*** Opacity ***/
.opacity-1 {
  opacity: .1;
}

.opacity-2 {
  opacity: .2;
}

.opacity-3 {
  opacity: .3;
}

.opacity-4 {
  opacity: .4;
}

.opacity-5 {
  opacity: .5;
}

.opacity-6 {
  opacity: .6;
}

.opacity-7 {
  opacity: .7;
}

.opacity-8 {
  opacity: .8;
}

.opacity-9 {
  opacity: .9;
}


/*** Size W H ***/
.size-3 {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-4 {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-5 {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-8 {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-10 {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-12 {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-15 {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-18 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-20 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-25 {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-30 {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-35 {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-40 {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-45 {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-50 {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-55 {
  flex-shrink: 0;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-60 {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-65 {
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-70 {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-80 {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-90 {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-100 {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-110 {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-120 {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-130 {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-140 {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-150 {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-160 {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-170 {
  flex-shrink: 0;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-180 {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-190 {
  flex-shrink: 0;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-200 {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-250 {
  flex-shrink: 0;
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-300 {
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-350 {
  flex-shrink: 0;
  width: 350px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-400 {
  flex-shrink: 0;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-450 {
  flex-shrink: 0;
  width: 450px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-500 {
  flex-shrink: 0;
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1199px) {
  .xl\:size-3 {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-4 {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-5 {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-8 {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-10 {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-12 {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-15 {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-18 {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-20 {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-25 {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-30 {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-35 {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-40 {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-45 {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-50 {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-55 {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-60 {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-65 {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-70 {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-80 {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-90 {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-100 {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-110 {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-120 {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-130 {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-140 {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-150 {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-160 {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-170 {
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-180 {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-190 {
    flex-shrink: 0;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-200 {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-250 {
    flex-shrink: 0;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-300 {
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-350 {
    flex-shrink: 0;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-400 {
    flex-shrink: 0;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-450 {
    flex-shrink: 0;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xl\:size-500 {
    flex-shrink: 0;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 991px) {
  .lg\:size-3 {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-4 {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-5 {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-8 {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-10 {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-12 {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-15 {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-18 {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-20 {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-25 {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-30 {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-35 {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-40 {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-45 {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-50 {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-55 {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-60 {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-65 {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-70 {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-80 {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-90 {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-100 {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-110 {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-120 {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-130 {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-140 {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-150 {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-160 {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-170 {
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-180 {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-190 {
    flex-shrink: 0;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-200 {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-250 {
    flex-shrink: 0;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-300 {
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-350 {
    flex-shrink: 0;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-400 {
    flex-shrink: 0;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-450 {
    flex-shrink: 0;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lg\:size-500 {
    flex-shrink: 0;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .md\:size-3 {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-4 {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-5 {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-8 {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-10 {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-12 {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-15 {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-18 {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-20 {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-25 {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-30 {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-35 {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-40 {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-45 {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-50 {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-55 {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-60 {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-65 {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-70 {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-80 {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-90 {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-100 {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-110 {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-120 {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-130 {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-140 {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-150 {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-160 {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-170 {
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-180 {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-190 {
    flex-shrink: 0;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-200 {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-250 {
    flex-shrink: 0;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-300 {
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-350 {
    flex-shrink: 0;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-400 {
    flex-shrink: 0;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-450 {
    flex-shrink: 0;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .md\:size-500 {
    flex-shrink: 0;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .sm\:size-3 {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-4 {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-5 {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-8 {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-10 {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-12 {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-15 {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-18 {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-20 {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-25 {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-30 {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-35 {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-40 {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-45 {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-50 {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-55 {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-60 {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-65 {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-70 {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-80 {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-90 {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-100 {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-110 {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-120 {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-130 {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-140 {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-150 {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-160 {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-170 {
    flex-shrink: 0;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-180 {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-190 {
    flex-shrink: 0;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-200 {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-250 {
    flex-shrink: 0;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-300 {
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-350 {
    flex-shrink: 0;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-400 {
    flex-shrink: 0;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-450 {
    flex-shrink: 0;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sm\:size-500 {
    flex-shrink: 0;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/*** Box Shadow ***/
.shadow-0 {
  box-shadow: 0 0 0 0 transparent !important;
}

.shadow-1 {
  box-shadow: 0 20px 40px 0 #05103612
}

.shadow-2 {
  box-shadow: 0 10px 35px 0 #0510361A
}

.shadow-3 {
  box-shadow: 0 10px 30px 0 #05103608
}

.shadow-4 {
  box-shadow: 0 10px 60px 0 #0510360D
}

.shadow-5 {
  box-shadow: 0 0px 40px 0 #05103657;
}

/*** H W ***/
.h-fit {
  height: fit-content !important
}

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

.h-34 {
  height: 34px !important
}

.h-60 {
  height: 60px !important
}

.h-1 {
  height: 1px !important
}

.h-68 {
  height: 68px !important
}

.h-50 {
  height: 50px !important
}

.h-55 {
  height: 55px !important
}

.h-10 {
  height: 10px !important
}

.h-20 {
  height: 20px !important
}

.h-40 {
  height: 40px !important
}

.h-45 {
  height: 45px !important
}

.h-80 {
  height: 78px !important
}

.w-48 {
  width: 48px
}

.w-28 {
  width: 28px
}

.w-max-300 {
  max-width: 300px
}

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

/*** Min Widht ***/
.mnw-25 {
  min-width: 25px;
}

.mnw-35 {
  min-width: 35px;
}

.mnw-40 {
  min-width: 40px;
}

.mnw-50 {
  min-width: 50px;
}

.mnw-75 {
  min-width: 75px;
}

.mnw-100 {
  min-width: 100px;
}

.mnw-150 {
  min-width: 150px;
}

.mnw-200 {
  min-width: 200px;
}

.mnw-250 {
  min-width: 250px;
}

.mnw-300 {
  min-width: 300px;
}

.mnw-350 {
  min-width: 350px;
}

.mnw-400 {
  min-width: 400px;
}

.mnw-450 {
  min-width: 450px;
}

.mnw-500 {
  min-width: 500px;
}

.mnw-600 {
  min-width: 600px;
}

.mnw-700 {
  min-width: 700px;
}

.mnw-800 {
  min-width: 800px;
}

.mnw-900 {
  min-width: 900px;
}

.mnw-1000 {
  min-width: 1000px;
}


/*** Min Height ***/
.mnh-25 {
  min-height: 25px;
}

.mnh-35 {
  min-height: 35px;
}

.mnh-50 {
  min-height: 50px;
}

.mnh-75 {
  min-height: 75px;
}

.mnh-100 {
  min-height: 100px;
}

.mnh-150 {
  min-height: 150px;
}

.mnh-200 {
  min-height: 200px;
}

.mnh-250 {
  min-height: 250px;
}

.mnh-300 {
  min-height: 300px;
}

.mnh-350 {
  min-height: 350px;
}

.mnh-400 {
  min-height: 400px;
}

.mnh-450 {
  min-height: 450px;
}

.mnh-500 {
  min-height: 500px;
}

.mnh-600 {
  min-height: 600px;
}

.mnh-700 {
  min-height: 700px;
}

.mnh-800 {
  min-height: 800px;
}

.mnh-900 {
  min-height: 900px;
}

.mnh-1000 {
  min-height: 1000px;
}

@media (max-width: 1199px) {
  .xl\:mnh-25 {
    min-height: 25px;
  }

  .xl\:mnh-35 {
    min-height: 35px;
  }

  .xl\:mnh-50 {
    min-height: 50px;
  }

  .xl\:mnh-75 {
    min-height: 75px;
  }

  .xl\:mnh-100 {
    min-height: 100px;
  }

  .xl\:mnh-150 {
    min-height: 150px;
  }

  .xl\:mnh-200 {
    min-height: 200px;
  }

  .xl\:mnh-250 {
    min-height: 250px;
  }

  .xl\:mnh-300 {
    min-height: 300px;
  }

  .xl\:mnh-350 {
    min-height: 350px;
  }

  .xl\:mnh-400 {
    min-height: 400px;
  }

  .xl\:mnh-450 {
    min-height: 450px;
  }

  .xl\:mnh-500 {
    min-height: 500px;
  }

  .xl\:mnh-600 {
    min-height: 600px;
  }

  .xl\:mnh-700 {
    min-height: 700px;
  }

  .xl\:mnh-800 {
    min-height: 800px;
  }

  .xl\:mnh-900 {
    min-height: 900px;
  }

  .xl\:mnh-1000 {
    min-height: 1000px;
  }
}

@media (max-width: 991px) {
  .lg\:mnh-25 {
    min-height: 25px;
  }

  .lg\:mnh-35 {
    min-height: 35px;
  }

  .lg\:mnh-50 {
    min-height: 50px;
  }

  .lg\:mnh-75 {
    min-height: 75px;
  }

  .lg\:mnh-100 {
    min-height: 100px;
  }

  .lg\:mnh-150 {
    min-height: 150px;
  }

  .lg\:mnh-200 {
    min-height: 200px;
  }

  .lg\:mnh-250 {
    min-height: 250px;
  }

  .lg\:mnh-300 {
    min-height: 300px;
  }

  .lg\:mnh-350 {
    min-height: 350px;
  }

  .lg\:mnh-400 {
    min-height: 400px;
  }

  .lg\:mnh-450 {
    min-height: 450px;
  }

  .lg\:mnh-500 {
    min-height: 500px;
  }

  .lg\:mnh-600 {
    min-height: 600px;
  }

  .lg\:mnh-700 {
    min-height: 700px;
  }

  .lg\:mnh-800 {
    min-height: 800px;
  }

  .lg\:mnh-900 {
    min-height: 900px;
  }

  .lg\:mnh-1000 {
    min-height: 1000px;
  }
}

@media (max-width: 767px) {
  .md\:mnh-25 {
    min-height: 25px;
  }

  .md\:mnh-35 {
    min-height: 35px;
  }

  .md\:mnh-50 {
    min-height: 50px;
  }

  .md\:mnh-75 {
    min-height: 75px;
  }

  .md\:mnh-100 {
    min-height: 100px;
  }

  .md\:mnh-150 {
    min-height: 150px;
  }

  .md\:mnh-200 {
    min-height: 200px;
  }

  .md\:mnh-250 {
    min-height: 250px;
  }

  .md\:mnh-300 {
    min-height: 300px;
  }

  .md\:mnh-350 {
    min-height: 350px;
  }

  .md\:mnh-400 {
    min-height: 400px;
  }

  .md\:mnh-450 {
    min-height: 450px;
  }

  .md\:mnh-500 {
    min-height: 500px;
  }

  .md\:mnh-600 {
    min-height: 600px;
  }

  .md\:mnh-700 {
    min-height: 700px;
  }

  .md\:mnh-800 {
    min-height: 800px;
  }

  .md\:mnh-900 {
    min-height: 900px;
  }

  .md\:mnh-1000 {
    min-height: 1000px;
  }
}

@media (max-width: 575px) {
  .sm\:mnh-25 {
    min-height: 25px;
  }

  .sm\:mnh-35 {
    min-height: 35px;
  }

  .sm\:mnh-50 {
    min-height: 50px;
  }

  .sm\:mnh-75 {
    min-height: 75px;
  }

  .sm\:mnh-100 {
    min-height: 100px;
  }

  .sm\:mnh-150 {
    min-height: 150px;
  }

  .sm\:mnh-200 {
    min-height: 200px;
  }

  .sm\:mnh-250 {
    min-height: 250px;
  }

  .sm\:mnh-300 {
    min-height: 300px;
  }

  .sm\:mnh-350 {
    min-height: 350px;
  }

  .sm\:mnh-400 {
    min-height: 400px;
  }

  .sm\:mnh-450 {
    min-height: 450px;
  }

  .sm\:mnh-500 {
    min-height: 500px;
  }

  .sm\:mnh-600 {
    min-height: 600px;
  }

  .sm\:mnh-700 {
    min-height: 700px;
  }

  .sm\:mnh-800 {
    min-height: 800px;
  }

  .sm\:mnh-900 {
    min-height: 900px;
  }

  .sm\:mnh-1000 {
    min-height: 1000px;
  }
}

/*** Max Widht ***/
.mxw-25 {
  max-width: 25px;
}

.mxw-35 {
  max-width: 35px;
}

.mxw-50 {
  max-width: 50px;
}

.mxw-75 {
  max-width: 75px;
}

.mxw-100 {
  max-width: 100px;
}

.mxw-150 {
  max-width: 150px;
}

.mxw-160 {
  max-width: 160px;
}

.mxw-200 {
  max-width: 200px;
}

.mxw-250 {
  max-width: 250px;
}

.mxw-300 {
  max-width: 300px;
}

.mxw-350 {
  max-width: 350px;
}

.mxw-400 {
  max-width: 400px;
}

.mxw-450 {
  max-width: 450px;
}

.mxw-500 {
  max-width: 500px;
}

.mxw-600 {
  max-width: 600px;
}

.mxw-700 {
  max-width: 700px;
}

.mxw-800 {
  max-width: 800px;
}

.mxw-900 {
  max-width: 900px;
}

.mxw-1000 {
  max-width: 1000px;
}

@media (max-width: 1199px) {
  .xl\:mxw-25 {
    max-width: 25px;
  }

  .xl\:mxw-35 {
    max-width: 35px;
  }

  .xl\:mxw-50 {
    max-width: 50px;
  }

  .xl\:mxw-75 {
    max-width: 75px;
  }

  .xl\:mxw-100 {
    max-width: 100px;
  }

  .xl\:mxw-150 {
    max-width: 150px;
  }

  .xl\:mxw-160 {
    max-width: 160px;
  }

  .xl\:mxw-200 {
    max-width: 200px;
  }

  .xl\:mxw-250 {
    max-width: 250px;
  }

  .xl\:mxw-300 {
    max-width: 300px;
  }

  .xl\:mxw-350 {
    max-width: 350px;
  }

  .xl\:mxw-400 {
    max-width: 400px;
  }

  .xl\:mxw-450 {
    max-width: 450px;
  }

  .xl\:mxw-500 {
    max-width: 500px;
  }

  .xl\:mxw-600 {
    max-width: 600px;
  }

  .xl\:mxw-700 {
    max-width: 700px;
  }

  .xl\:mxw-800 {
    max-width: 800px;
  }

  .xl\:mxw-900 {
    max-width: 900px;
  }

  .xl\:mxw-1000 {
    max-width: 1000px;
  }
}

@media (max-width: 991px) {
  .lg\:mxw-25 {
    max-width: 25px;
  }

  .lg\:mxw-35 {
    max-width: 35px;
  }

  .lg\:mxw-50 {
    max-width: 50px;
  }

  .lg\:mxw-75 {
    max-width: 75px;
  }

  .lg\:mxw-100 {
    max-width: 100px;
  }

  .lg\:mxw-150 {
    max-width: 150px;
  }

  .lg\:mxw-160 {
    max-width: 160px;
  }

  .lg\:mxw-200 {
    max-width: 200px;
  }

  .lg\:mxw-250 {
    max-width: 250px;
  }

  .lg\:mxw-300 {
    max-width: 300px;
  }

  .lg\:mxw-350 {
    max-width: 350px;
  }

  .lg\:mxw-400 {
    max-width: 400px;
  }

  .lg\:mxw-450 {
    max-width: 450px;
  }

  .lg\:mxw-500 {
    max-width: 500px;
  }

  .lg\:mxw-600 {
    max-width: 600px;
  }

  .lg\:mxw-700 {
    max-width: 700px;
  }

  .lg\:mxw-800 {
    max-width: 800px;
  }

  .lg\:mxw-900 {
    max-width: 900px;
  }

  .lg\:mxw-1000 {
    max-width: 1000px;
  }
}

@media (max-width: 767px) {
  .md\:mxw-25 {
    max-width: 25px;
  }

  .md\:mxw-35 {
    max-width: 35px;
  }

  .md\:mxw-50 {
    max-width: 50px;
  }

  .md\:mxw-75 {
    max-width: 75px;
  }

  .md\:mxw-100 {
    max-width: 100px;
  }

  .md\:mxw-150 {
    max-width: 150px;
  }

  .md\:mxw-160 {
    max-width: 160px;
  }

  .md\:mxw-200 {
    max-width: 200px;
  }

  .md\:mxw-250 {
    max-width: 250px;
  }

  .md\:mxw-300 {
    max-width: 300px;
  }

  .md\:mxw-350 {
    max-width: 350px;
  }

  .md\:mxw-400 {
    max-width: 400px;
  }

  .md\:mxw-450 {
    max-width: 450px;
  }

  .md\:mxw-500 {
    max-width: 500px;
  }

  .md\:mxw-600 {
    max-width: 600px;
  }

  .md\:mxw-700 {
    max-width: 700px;
  }

  .md\:mxw-800 {
    max-width: 800px;
  }

  .md\:mxw-900 {
    max-width: 900px;
  }

  .md\:mxw-1000 {
    max-width: 1000px;
  }
}

@media (max-width: 575px) {
  .sm\:mxw-25 {
    max-width: 25px;
  }

  .sm\:mxw-35 {
    max-width: 35px;
  }

  .sm\:mxw-50 {
    max-width: 50px;
  }

  .sm\:mxw-75 {
    max-width: 75px;
  }

  .sm\:mxw-100 {
    max-width: 100px;
  }

  .sm\:mxw-150 {
    max-width: 150px;
  }

  .sm\:mxw-160 {
    max-width: 160px;
  }

  .sm\:mxw-200 {
    max-width: 200px;
  }

  .sm\:mxw-250 {
    max-width: 250px;
  }

  .sm\:mxw-300 {
    max-width: 300px;
  }

  .sm\:mxw-350 {
    max-width: 350px;
  }

  .sm\:mxw-400 {
    max-width: 400px;
  }

  .sm\:mxw-450 {
    max-width: 450px;
  }

  .sm\:mxw-500 {
    max-width: 500px;
  }

  .sm\:mxw-600 {
    max-width: 600px;
  }

  .sm\:mxw-700 {
    max-width: 700px;
  }

  .sm\:mxw-800 {
    max-width: 800px;
  }

  .sm\:mxw-900 {
    max-width: 900px;
  }

  .sm\:mxw-1000 {
    max-width: 1000px;
  }
}

/*** Max Height ***/
.mxh-25 {
  max-height: 25px;
}

.mxh-35 {
  max-height: 35px;
}

.mxh-50 {
  max-height: 50px;
}

.mxh-75 {
  max-height: 75px;
}

.mxh-100 {
  max-height: 100px;
}

.mxh-130 {
  max-height: 130px;
}

.mxh-150 {
  max-height: 150px;
}

.mxh-200 {
  max-height: 200px;
}

.mxh-250 {
  max-height: 250px;
}

.mxh-300 {
  max-height: 300px;
}

.mxh-350 {
  max-height: 350px;
}

.mxh-400 {
  max-height: 400px;
}

.mxh-450 {
  max-height: 450px;
}

.mxh-500 {
  max-height: 500px;
}

.mxh-550 {
  max-height: 550px;
}

.mxh-600 {
  max-height: 600px;
}

.mxh-700 {
  max-height: 700px;
}

.mxh-800 {
  max-height: 800px;
}

.mxh-900 {
  max-height: 900px;
}

.mxh-1000 {
  max-height: 1000px;
}

@media (max-width: 1199px) {
  .xl\:mxh-25 {
    max-height: 25px;
  }

  .xl\:mxh-35 {
    max-height: 35px;
  }

  .xl\:mxh-50 {
    max-height: 50px;
  }

  .xl\:mxh-75 {
    max-height: 75px;
  }

  .xl\:mxh-100 {
    max-height: 100px;
  }

  .xl\:mxh-150 {
    max-height: 150px;
  }

  .xl\:mxh-200 {
    max-height: 200px;
  }

  .xl\:mxh-250 {
    max-height: 250px;
  }

  .xl\:mxh-300 {
    max-height: 300px;
  }

  .xl\:mxh-350 {
    max-height: 350px;
  }

  .xl\:mxh-400 {
    max-height: 400px;
  }

  .xl\:mxh-450 {
    max-height: 450px;
  }

  .xl\:mxh-500 {
    max-height: 500px;
  }

  .xl\:mxh-600 {
    max-height: 600px;
  }

  .xl\:mxh-700 {
    max-height: 700px;
  }

  .xl\:mxh-800 {
    max-height: 800px;
  }

  .xl\:mxh-900 {
    max-height: 900px;
  }

  .xl\:mxh-1000 {
    max-height: 1000px;
  }
}

@media (max-width: 991px) {
  .lg\:mxh-25 {
    max-height: 25px;
  }

  .lg\:mxh-35 {
    max-height: 35px;
  }

  .lg\:mxh-50 {
    max-height: 50px;
  }

  .lg\:mxh-75 {
    max-height: 75px;
  }

  .lg\:mxh-100 {
    max-height: 100px;
  }

  .lg\:mxh-150 {
    max-height: 150px;
  }

  .lg\:mxh-200 {
    max-height: 200px;
  }

  .lg\:mxh-250 {
    max-height: 250px;
  }

  .lg\:mxh-300 {
    max-height: 300px;
  }

  .lg\:mxh-350 {
    max-height: 350px;
  }

  .lg\:mxh-400 {
    max-height: 400px;
  }

  .lg\:mxh-450 {
    max-height: 450px;
  }

  .lg\:mxh-500 {
    max-height: 500px;
  }

  .lg\:mxh-600 {
    max-height: 600px;
  }

  .lg\:mxh-700 {
    max-height: 700px;
  }

  .lg\:mxh-800 {
    max-height: 800px;
  }

  .lg\:mxh-900 {
    max-height: 900px;
  }

  .lg\:mxh-1000 {
    max-height: 1000px;
  }
}

@media (max-width: 767px) {
  .md\:mxh-25 {
    max-height: 25px;
  }

  .md\:mxh-35 {
    max-height: 35px;
  }

  .md\:mxh-50 {
    max-height: 50px;
  }

  .md\:mxh-75 {
    max-height: 75px;
  }

  .md\:mxh-100 {
    max-height: 100px;
  }

  .md\:mxh-150 {
    max-height: 150px;
  }

  .md\:mxh-200 {
    max-height: 200px;
  }

  .md\:mxh-250 {
    max-height: 250px;
  }

  .md\:mxh-300 {
    max-height: 300px;
  }

  .md\:mxh-350 {
    max-height: 350px;
  }

  .md\:mxh-400 {
    max-height: 400px;
  }

  .md\:mxh-450 {
    max-height: 450px;
  }

  .md\:mxh-500 {
    max-height: 500px;
  }

  .md\:mxh-600 {
    max-height: 600px;
  }

  .md\:mxh-700 {
    max-height: 700px;
  }

  .md\:mxh-800 {
    max-height: 800px;
  }

  .md\:mxh-900 {
    max-height: 900px;
  }

  .md\:mxh-1000 {
    max-height: 1000px;
  }
}

@media (max-width: 575px) {
  .sm\:mxh-25 {
    max-height: 25px;
  }

  .sm\:mxh-35 {
    max-height: 35px;
  }

  .sm\:mxh-50 {
    max-height: 50px;
  }

  .sm\:mxh-75 {
    max-height: 75px;
  }

  .sm\:mxh-100 {
    max-height: 100px;
  }

  .sm\:mxh-150 {
    max-height: 150px;
  }

  .sm\:mxh-200 {
    max-height: 200px;
  }

  .sm\:mxh-250 {
    max-height: 250px;
  }

  .sm\:mxh-300 {
    max-height: 300px;
  }

  .sm\:mxh-350 {
    max-height: 350px;
  }

  .sm\:mxh-400 {
    max-height: 400px;
  }

  .sm\:mxh-450 {
    max-height: 450px;
  }

  .sm\:mxh-500 {
    max-height: 500px;
  }

  .sm\:mxh-600 {
    max-height: 600px;
  }

  .sm\:mxh-700 {
    max-height: 700px;
  }

  .sm\:mxh-800 {
    max-height: 800px;
  }

  .sm\:mxh-900 {
    max-height: 900px;
  }

  .sm\:mxh-1000 {
    max-height: 1000px;
  }
}


.w-25vh {
  width: 25vh;
}

.w-50vh {
  width: 50vh;
}

.w-75vh {
  width: 75vh;
}

.w-100vh {
  width: 100vh;
}

.w-125vh {
  width: 125vh;
}

.w-150vh {
  width: 150vh;
}

.mnw-25vh {
  min-width: 25vh;
}

.mnw-50vh {
  min-width: 50vh;
}

.mnw-75vh {
  min-width: 75vh;
}

.mnw-100vh {
  min-width: 100vh;
}

.mnw-125vh {
  min-width: 125vh;
}

.mnw-150vh {
  min-width: 150vh;
}

.mxw-25vh {
  max-width: 25vh;
}

.mxw-50vh {
  max-width: 50vh;
}

.mxw-75vh {
  max-width: 75vh;
}

.mxw-100vh {
  max-width: 100vh;
}

.mxw-125vh {
  max-width: 125vh;
}

.mxw-150vh {
  max-width: 150vh;
}


.h-25vh {
  height: 25vh;
}

.h-50vh {
  height: 50vh;
}

.h-75vh {
  height: 75vh;
}

.h-100vh {
  height: 100vh;
}

.h-125vh {
  height: 125vh;
}

.h-150vh {
  height: 150vh;
}

.mnh-25vh {
  min-height: 25vh;
}

.mnh-50vh {
  min-height: 50vh;
}

.mnh-75vh {
  min-height: 75vh;
}

.mnh-100vh {
  min-height: 100vh;
}

.mnh-125vh {
  min-height: 125vh;
}

.mnh-150vh {
  min-height: 150vh;
}

.mxh-25vh {
  max-height: 25vh;
}

.mxh-50vh {
  max-height: 50vh;
}

.mxh-75vh {
  max-height: 75vh;
}

.mxh-100vh {
  max-height: 100vh;
}

.mxh-125vh {
  max-height: 125vh;
}

.mxh-150vh {
  max-height: 150vh;
}


/** scroll bar **/
.scroll-y-v1 {
  overflow-y: scroll;
  height: 100%;
}

.scroll-x-v1 {
  overflow-x: scroll;
  width: 100%;
}

.scroll-v1::-webkit-scrollbar {
  width: 5px;
  height: 100%
}

.scroll-v1::-webkit-scrollbar-button {
  width: 5px;
  height: 100%
}

.scroll-v1::-webkit-scrollbar-thumb {
  background: #eeeeee;
  border-radius: 0
}

.scroll-v1::-webkit-scrollbar-thumb:hover {
  background: #eeeeee;
}

.scroll-v1::-webkit-scrollbar-thumb:active {
  background: #eeeeee;
}

.scroll-v1::-webkit-scrollbar-track {
  background: #dddddd;
  border-radius: 0
}

.scroll-v1::-webkit-scrollbar-track:hover {
  background: #dddddd;
}

.scroll-v1::-webkit-scrollbar-track:active {
  background: rgba(0, 0, 0, 0)
}

.scroll-v1::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0)
}