@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
@import "../node_modules/bootstrap-icons/font/bootstrap-icons.min.css";
@import "../node_modules/owl.carousel/dist/assets/owl.carousel.min.css";
@import "component-styles.css";

:root {
  --primary-color-deep-blue: rgb(005, 029, 046);
  --primary-color-deep-blue-20p: rgba(005, 029, 046, 0.2);

  --primary-color-blue: rgb(080,080, 240);
  --primary-color-blue-20p: rgba(080,080, 240, 0.2);

  --primary-color-air: rgb(221, 229, 253);
  --primary-color-air-20p: rgba(221, 229, 253, 0.2);

  --secondary-color-accent: rgb(190, 255, 055);
  --secondary-color-accent-20p: rgba(190, 255, 055, 0.2);

  /* --h1-size: clamp(2.25rem, 6vw, 6.5rem);   
  --h2-size: clamp(2rem, 4.5vw, 4.5rem);  
  --h3-size: clamp(1.75rem, 3.5vw, 3.25rem);  
  --h4-size: clamp(1.25rem, 2.5vw, 2.25rem);  
  --h5-size: clamp(1rem, 2vw, 1.75rem);
  --h6-size: clamp(.8rem, 1.5vw, 1.25rem);  */

  --h1-size: 3.815rem;   
  --h2-size: 3.052rem;  
  --h3-size: 2.441rem;  
  --h4-size: 1.953rem;  
  --h5-size: 1.563rem;
  --h6-size: 1.25rem; 

  --p-size: 1rem;
  --small-size: 0.8rem;
  --x-small-size: 0.64rem;

  /* --h1-lh: 1;
  --h2-lh: 1.05;
  --h3-lh: 1.15;
  --h4-lh: 1.2;
  --h5-lh: 1.3;
  --h6-lh: 1.35; */

  --h1-lh: 1;
  --h2-lh: 1;
  --h3-lh: 1;
  --h4-lh: 1;
  --h5-lh: 1;
  --h6-lh: 1;
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 900;
    src: local('Alexandria Black'), local('Alexandria-Black'), url(../Fonts/Alexandria-Black.woff2) format('woff2'), url(../fonts/Alexandria-Black.woff2) format('woff2');
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 800;
    src: local('Alexandria ExtraBold'), local('Alexandria-ExtraBold'), url(../Fonts/Alexandria-ExtraBold.woff2) format('woff2');
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 700;
    src: local('Alexandria Bold'), local('Alexandria-Bold'), url(../Fonts/Alexandria-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 600;
    src: local('Rubik SemiBold'), local('Rubik-SemiBold'), url(../Fonts/Alexandria-SemiBold.woff2) format('woff2');
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 500;
    src: local('Alexandria Medium'), local('Alexandria-Medium'), url(../Fonts/Alexandria-Medium.woff2) format('woff2');
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 400;
    src: local('Alexandria Regular'), local('Alexandria-Regular'), url(../Fonts/Alexandria-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 300;
    src: local('Alexandria Light'), local('Alexandria-Light'), url(../Fonts/Alexandria-Light.woff2) format('woff2');
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 200;
    src: local('Alexandria ExtraLight'), local('Alexandria-ExtraLight'), url(../Fonts/Alexandria-ExtraLight.woff2) format('woff2');
}

@font-face {
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 100;
    src: local('Alexandria Thin'), local('Alexandria-Thin'), url(../Fonts/Alexandria-Thin.woff2) format('woff2');
}

.alexandria-light {
  font-family: "Alexandria", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.alexandria-regular {
  font-family: "Alexandria", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.alexandria-bold {
  font-family: "Alexandria", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.alexandria-extrabold {
  font-family: "Alexandria", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

html, body {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html[lang="ar-SA"] {
  direction: rtl;
}

body {
  font-family: "Alexandria", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

section {
  padding: 64px 128px;
  margin: 0 auto;
  overflow: hidden;
}

h1 {
  font-weight: 800;
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
}

h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
}

h5 {
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
}

h6 {
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
}

.subtitle {
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
}

hr.air {
  margin: 1rem auto;
  border: 0;
  border-top: 1px solid rgba(221, 229, 253, 0.1);
  width: 75%;
}

p {
  font-size: var(--p-size);
  line-height: calc(var(--p-size) * 1.2);
}

small {
  font-size: var(--small-size);
}

.x-small {
  font-size: var(--x-small-size);
}

a.text-air, a.text-air:visited {
  color: var(--primary-color-air);
  text-decoration: none;
}

a.text-air:hover {
  color: var(--secondary-color-accent);
}

a.text-deep-blue, a.text-deep-blue:visited {
  color: var(--primary-color-deep-blue);
  text-decoration: none;
}

a.text-deep-blue:hover {
  color: var(--primary-color-blue);
}

a.text-accent, a.text-accent:visited {
  color: var(--secondary-color-accent);
  text-decoration: none;
}

a.text-accent:hover {
  color: var(--primary-color-blue);
}

html[lang="ar-SA"] .editbar, html[lang="ar-SA"] #edit-bar {
  right: -130px; 
}

html[lang="ar-SA"] #siteWrapper .header-content .header-search {
  padding-left: 0;
  padding-right: 20px;
  margin-left: 0;
  margin-right: 20px;
  border-left: 0;
  border-right: 1px solid rgba(2, 6, 32, 0.1);
}

.dnnModuleDialog .dnnPageContainer {
  width: unset;
  height: unset;
}

.aspect-ratio-auto {
  aspect-ratio: auto;
}

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

.w-50p {
  width: 50%;
}

.w-75p {
  width: 75%;
}

.w-100p {
  width: 100%;
}

.w-8px {
  width: 8px;
}

.w-16px {
  width: 16px;
}

.w-24px {
  width: 24px;
}

.w-32px {
  width: 32px;
}

.w-48px {
  width: 32px;
}

.w-64px {
  width: 64px;
}

.w-128px {
  width: 128px;
}

.w-150px {
  width: 150px;
}

.w-200px {
  width: 200px;
}

.w-250px {
  width: 250px;
}

.max-w-2560 {
  max-width: 2560px;
}

.h-100p {
  height: 100%;
}

.h-8px {
  height: 8px;
}

.h-16px {
  height: 16px;
}

.h-24px {
  height: 24px;
}

.h-32px {
  height: 32px;
}

.h-64px {
  height: 64px;
}

.h-128px {
  height: 128px;
}

.h-150px {
  height: 150px;
}

.h-200px {
  height: 200px;
}

.h-250px {
  height: 250px;
}

.min-h-full {
  min-height: calc(100vh - 150px);
}

.min-vh-100 {
  min-height: 100vh;
}

.top-0 {
  top:0;
}

.top-50p {
  top:50%;
}

.top-neg-50p {
  top:-50%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-50p {
  bottom:50%;
}

.bottom-neg-50p {
  bottom:-50%;
}

.left-0 {
  left:0;
}

.left-50p {
  left:50%;
}

.left-neg-50p {
  left:-50%;
}

.right-0 {
  right: 0;
}

.right-50p {
  right:50%;
}

.right-neg-50p {
  right:-50%;
}

.fs-p-5rem {
  font-size: .5rem;
  line-height: .5rem;
}

.fs-1rem {
  font-size: 1rem;
  line-height: 1rem;
}

.fs-1-p-5rem {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.fs-2rem {
  font-size: 2rem;
  line-height: 2rem;
}

.fs-8px {
  font-size: 8px;
  line-height: 10px;
}

.fs-10px {
  font-size: 10px;
  line-height: 12px;
}

.fs-12px {
  font-size: 12px;
  line-height: 14px;
}

.fs-14px {
  font-size: 14px;
  line-height: 16px;
}

.fs-16px {
  font-size: 16px;
  line-height: 18px;
}

.fs-18px {
  font-size: 18px;
  line-height: 20px;
}

.fs-20px {
  font-size: 20px;
  line-height: 22px;
}

.fs-24px {
  font-size: 24px;
  line-height: 26px;
}

.fs-28px {
  font-size: 28px;
  line-height: 30px;
}

.fs-32px {
  font-size: 32px;
  line-height: 34px;
}

.fs-36px {
  font-size: 36px;
  line-height: 38px;
}

.fs-40px {
  font-size: 40px;
  line-height: 42px;
}

.fs-46px {
  font-size: 46px;
  line-height: 48px;
}

.fs-48px {
  font-size: 48px;
  line-height: 50px;
}

.fs-50px {
  font-size: 50px;
  line-height: 52px;
}

.fs-52px {
  font-size: 52px;
  line-height: 54px;
}

.fs-56px {
  font-size: 56px;
  line-height: 58px;
}

.fs-64px {
  font-size: 64px;
  line-height: 66px;
}

.fs-0p5rem {
  font-size: 0.5rem;
  line-height: 0.8rem;
}

.fs-0p8rem {
  font-size: 0.8rem;
  line-height: 1rem;
}

.fs-1rem {
  font-size: 1rem;
  line-height: 1.2rem;
}

.fs-5rem {
  font-size: 5rem;
  line-height: 5.2rem;
}

.ls-neg-3px {
  letter-spacing: -3px;
}

.gap-8px {
  gap:8px;
}

.gap-16px {
  gap:16px;
}

.gap-24px {
  gap:24px;
}

.gap-32px {
  gap:32px;
}

.gap-64px {
  gap:64px;
}

.gap-128px {
  gap:128px;
}

.z-n1 {
  z-index: -1;
}

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

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

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

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

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

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

.flex-fill-25p {
  flex: 0 0 50%;
}

.object-cover {
  object-fit: cover;
}

.object-pos-right {
  object-position: 75% center;
}

.transform-x-0 {
  transform: translateX(0);
}

.transform-x-neg-50p {
  transform: translateX(-50%);
}

.transform-y-0 {
  transform: translateY(0);
}

.transform-y-24px {
  transform: translateY(24px);
}

.transform-y-neg-24px {
  transform: translateY(-24px);
}

.transform-y-32px {
  transform: translateY(32px);
}

.transform-y-neg-32px {
  transform: translateY(-32px);
}

.transform-y-64px {
  transform: translateY(64px);
}

.transform-y-neg-64px {
  transform: translateY(-64px);
}

.transform-y-100p {
  transform: translateY(100%);
}

.transform-y-neg-50p {
  transform: translateY(-50%);
}

nav.navbar {
    padding: 0 ;
    transition: top 500ms ease, background-color 300ms linear;
}

nav.navbar .navbar-collapse {
  z-index: 10;
}

nav.bg-blue .navbar-collapse.show {
  background-color: rgba(080,080, 240, 0.2);
  backdrop-filter: blur(10px);
}

nav.bg-blue, nav.bg-air {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

nav #ajb-logo, #ajb-nav-menu {
  color: var(--secondary-color-accent);
}

nav[name="navbar-air"] #ajb-logo, #ajb-nav-menu {
  color: var(--primary-color-deep-blue);
}

nav.bg-blue #ajb-logo, nav.bg-blue #ajb-nav-menu, .bg-blue #ajb-nav-close {
  color: var(--primary-color-air);
}

nav.bg-air #ajb-logo, nav.bg-air #ajb-nav-menu, .bg-air #ajb-nav-close {
  color: var(--primary-color-blue);
}

.navbar-collapse.show {
  height: calc(100vh - 64px);
}

.navbar-toggler i {
  opacity: 0;
  transition: 0.4s;
}

.navbar-toggler i.bi-x-lg {
  opacity: 100;
}

.navbar-toggler i.bi-list{
  opacity: 100;
}

.navbar-toggler.collapsed i.bi-list {
  opacity: 100;
  transition: all 300ms ease-out;
}

.nav-item a.nav-link, .nav-item a.nav-link:active  {
  color: var(--primary-color-air);
  font-size: 14px;
}

nav[name="navbar-air"] .nav-item a.nav-link, nav[name="navbar-air"]  .nav-item a.nav-link:active  {
  color: var(--primary-color-deep-blue);
}

.nav-item.active a.nav-link {
  color: var(--secondary-color-accent);
}

nav[name="navbar-air"] .nav-item.active a.nav-link {
  color: var(--primary-color-blue);
}

.bg-blue .nav-item a.nav-link,
.bg-blue .nav-item a.nav-link:active {
  color: var(--primary-color-air);
}

.bg-blue .nav-item a.nav-link:hover {
  color: var(--secondary-color-accent);
}

.bg-air .nav-item a.nav-link,
.bg-air .nav-item a.nav-link:active {
  color: var(--primary-color-deep-blue);
}
.nav-item .nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.bg-blue .nav-item .nav-dot {
  background-color: var(--primary-color-blue);
  border: 2px solid var(--primary-color-air);
}

.bg-blue .nav-item.active .nav-dot {
  border: 2px solid var(--primary-color-deep-blue);
  background-color: var(--secondary-color-accent);
}

.bg-blue .nav-item.active .nav-link span{
  color: var(--secondary-color-accent);
}

.bg-air .nav-item .nav-dot {
  background-color: var(--primary-color-air);
  border: 2px solid var(--primary-color-deep-blue);
}

.bg-air .nav-item.active .nav-dot {
  background-color: var(--primary-color-blue);
}

.bg-air .nav-item.active .nav-link span{
  color: var(--primary-color-blue);
}

.bg-air .nav-item a.nav-link:hover {
  color: var(--primary-color-blue);
}

.bg-deep-blue {
  background-color: var(--primary-color-deep-blue);
}

.bg-blue {
  background-color: var(--primary-color-blue);
}

.bg-air {
  background-color: var(--primary-color-air);
}

.bg-accent {
  background-color: var(--secondary-color-accent);
}

.bg-glass {
  background-color: rgba(221, 229, 253, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 25px;
}

.bg-transparent {
  background: transparent;
}

.ajb-btn {
  cursor:pointer;
  padding: 0.7rem 1.5rem;
  border-radius: 25px;
  border: 0;
  min-width: 125px;
  font-size: 12px;
  text-align: center;
}

.ajb-btn i
{
  padding-right: 0.5rem;
  padding-left: 0;
}

html[lang="ar-SA"] .ajb-btn i {
  padding-left: 0.5rem;
  padding-right: 0;
}

.ajb-btn.accent {
  background-color: var(--secondary-color-accent);
  color:var(--primary-color-deep-blue);
}

.ajb-btn.accent:hover {
  background-color: var(--primary-color-air);
}

.bg-air .ajb-btn.accent:hover {
  background-color: var(--primary-color-deep-blue);
  color:var(--secondary-color-accent);
}

.ajb-btn.blue {
  background-color: var(--primary-color-blue);
  color:var(--primary-color-deep-blue);
}

.ajb-btn.air {
  background-color: var(--primary-color-air);
  color:var(--primary-color-deep-blue);
}

.ajb-btn.blue:hover, .ajb-btn.air:hover {
  background-color: var(--secondary-color-accent);
}

.ajb-btn.glass {
  background-color: rgba(255,255,255, 0.15);
  color: var(--primary-color-air);
}

.ajb-btn.glass:hover {
  background-color: var(--primary-color-deep-blue);
  color: var(--secondary-color-accent);
  text-decoration: none;
}

.bg-air .ajb-btn.glass.text-deep-blue:hover {
  background-color: var(--primary-color-deep-blue);
  color: var(--secondary-color-accent);
  text-decoration: none;
}

.text-accent {
  color: var(--secondary-color-accent);
}

.text-accent-20p {
  color: var(--secondary-color-accent-20p);
}

.text-air {
  color: var(--primary-color-air);
}

.text-air-20p {
  color: var(--primary-color-air-20p);
}

.text-blue {
  color: var(--primary-color-blue);
}

.text-blue-20p {
  color: var(--primary-color-blue-20p);
}

.text-deep-blue {
  color: var(--primary-color-deep-blue);
}

.text-deep-blue-20p {
  color: var(--primary-color-deep-blue-20p);
}

.fill-none {
  fill: none;
}

.fill-accent {
  fill: var(--secondary-color-accent);
}

.fill-air {
  fill: var(--primary-color-air);
}

.fill-blue {
  fill: var(--primary-color-blue);
}

.fill-deep-blue {
  fill: var(--primary-color-deep-blue);
}

.ajb-with-separator a {
  padding-left: 8px;
  padding-right: 8px;
}

.ajb-with-separator a:not(:first-child) {
  border-left: 2px solid var(--primary-color-air);
  border-right: 0;
}

html[lang="ar-SA"] .ajb-with-separator a:not(:first-child) {
  border-right: 2px solid var(--primary-color-air);
  border-left: 0;
}

.fade-in {
  animation: fadeIn 1200ms ease-in-out;
}

.slide-in-left {
  animation: slideInLeft 1500ms ease-in-out;
}

.slide-in-right {
  animation: slideInRight 1500ms ease-in-out;
}

.move-left-fade-in {
  animation: fadeIn 1200ms ease-in-out, slideInLeft 1500ms ease-in-out;
}

.move-right-fade-in {
  animation: fadeIn 1200ms ease-in-out, slideInRight 1500ms ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-25%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(25%);
  }
  to {
    transform: translateX(0);
  }
}

@media (max-width: 577px) {
  section {
    padding: 24px;
  }

  .glass-card-amount {
    flex: 0 0 calc((100%/2) - 16px);
  }
}

/* Responsive tweaks */
@media (max-width: 991px) {
  section {
    padding: 64px 24px;
  }

  .card-title {
    font-size: 26px;
  }

  nav.navbar {
    height: inherit;
  }

  #navbar .nav-item a.nav-link {
    font-size: 10px;
  }

  .ajb-with-separator a {
    padding: 8px 0;
  }

  .ajb-with-separator a:not(:first-child) {
    border-left: 0;
    border-top: 1px solid var(--primary-color-air);
  }

  html[lang="ar-SA"] .ajb-with-separator a:not(:first-child) {
    border-right: 0;
  }

  .min-h-full {
    min-height: calc(100vh - 80px);
  }

  .ajb-btn {
    font-size: 10px;
    min-width: 64px;
  }
}

@media (min-width: 480px) {
  .w-xs-100p {
    width: 100%;
  }

  .w-xs-75p {
    width: 75%;
  }

  .w-xs-50p {
    width: 50%;
  }

  .w-xs-25p {
    width: 25%;
  }

  .w-xs-8px {
    width: 8px;
  }

  .w-xs-16px {
    width: 16px;
  }

  .w-xs-24px {
    width: 24px;
  }

  .w-xs-32px {
    width: 32px;
  }

  .w-xs-64px {
    width: 64px;
  }

  .w-xs-128px {
    width: 128px;
  }

  .w-xs-150px {
    width: 150px;
  }

  .w-xs-200px {
    width: 200px;
  }

  .w-xs-250px {
    width: 250px;
  }

  .h-xs-100p {
    height: 100%;
  }

  .h-xs-8px {
    height: 8px;
  }

  .h-xs-16px {
    height: 16px;
  }

  .h-xs-24px {
    height: 24px;
  }

  .h-xs-32px {
    height: 32px;
  }

  .h-xs-64px {
    height: 64px;
  }

  .h-xs-128px {
    height: 128px;
  }

  .h-xs-150px {
    height: 150px;
  }

  .h-xs-200px {
    height: 200px;
  }

  .h-xs-250px {
    height: 250px;
  }

  .fs-xs-8px {
    font-size: 8px;
    line-height: 10px;
  }

  .fs-xs-10px {
    font-size: 10px;
    line-height: 12px;
  }

  .fs-xs-12px {
    font-size: 12px;
    line-height: 14px;
  }

  .fs-xs-14px {
    font-size: 14px;
    line-height: 16px;
  }

  .fs-xs-16px {
    font-size: 16px;
    line-height: 18px;
  }

  .fs-xs-18px {
    font-size: 18px;
    line-height: 20px;
  }

  .fs-xs-20px {
    font-size: 20px;
    line-height: 22px;
  }

  .fs-xs-24px {
    font-size: 24px;
    line-height: 26px;
  }

  .fs-xs-28px {
    font-size: 28px;
    line-height: 30px;
  }

  .fs-xs-32px {
    font-size: 32px;
    line-height: 34px;
  }

  .fs-xs-36px {
    font-size: 36px;
    line-height: 38px;
  }

  .fs-xs-40px {
    font-size: 40px;
    line-height: 42px;
  }

  .fs-xs-46px {
    font-size: 46px;
    line-height: 48px;
  }

  .fs-xs-64px {
    font-size: 64px;
    line-height: 66px;
  }

  .fs-xs-0p5rem {
    font-size: 0.5rem;
    line-height: 0.8rem;
  }

  .fs-xs-1rem {
    font-size: 1rem;
    line-height: 1.2rem;
  }

  .fs-xs-5rem {
    font-size: 5rem;
    line-height: 5.2rem;
  }

  .gap-xs-8px {
    gap:8px;
  }

  .gap-xs-16px {
    gap:16px;
  }

  .gap-xs-24px {
    gap:24px;
  }

  .gap-xs-32px {
    gap:32px;
  }

  .gap-xs-64px {
    gap:64px;
  }

  .gap-xs-128px {
    gap:128px;
  }
}

/*Mobile View*/
@media (min-width: 577px) {
  .w-sm-100p {
    width: 100%;
  }

  .w-sm-75p {
    width: 75%;
  }

  .w-sm-50p {
    width: 50%;
  }

  .w-sm-25p {
    width: 25%;
  }

  .w-sm-8px {
    width: 8px;
  }

  .w-sm-16px {
    width: 16px;
  }

  .w-sm-24px {
    width: 24px;
  }

  .w-sm-32px {
    width: 32px;
  }

  .w-sm-64px {
    width: 64px;
  }

  .w-sm-128px {
    width: 128px;
  }

  .w-sm-150px {
    width: 150px;
  }

  .w-sm-200px {
    width: 200px;
  }

  .w-sm-250px {
    width: 250px;
  }

  .h-sm-100p {
    height: 100%;
  }

  .h-sm-8px {
    height: 8px;
  }

  .h-sm-16px {
    height: 16px;
  }

  .h-sm-24px {
    height: 24px;
  }

  .h-sm-32px {
    height: 32px;
  }

  .h-sm-64px {
    height: 64px;
  }

  .h-sm-128px {
    height: 128px;
  }

  .h-sm-150px {
    height: 150px;
  }

  .h-sm-200px {
    height: 200px;
  }

  .h-sm-250px {
    height: 250px;
  }

  .fs-sm-8px {
    font-size: 8px;
    line-height: 10px;
  }

  .fs-sm-10px {
    font-size: 10px;
    line-height: 12px;
  }

  .fs-sm-12px {
    font-size: 12px;
    line-height: 14px;
  }

  .fs-sm-14px {
    font-size: 14px;
    line-height: 16px;
  }

  .fs-sm-16px {
    font-size: 16px;
    line-height: 18px;
  }

  .fs-sm-18px {
    font-size: 18px;
    line-height: 20px;
  }

  .fs-sm-20px {
    font-size: 20px;
    line-height: 22px;
  }

  .fs-sm-24px {
    font-size: 24px;
    line-height: 26px;
  }

  .fs-sm-28px {
    font-size: 28px;
    line-height: 30px;
  }

  .fs-sm-32px {
    font-size: 32px;
    line-height: 34px;
  }

  .fs-sm-36px {
    font-size: 36px;
    line-height: 38px;
  }

  .fs-sm-40px {
    font-size: 40px;
    line-height: 42px;
  }

  .fs-sm-46px {
    font-size: 46px;
    line-height: 48px;
  }

  .fs-sm-64px {
    font-size: 64px;
    line-height: 66px;
  }

  .fs-sm-0p5rem {
    font-size: 0.5rem;
    line-height: 0.8rem;
  }

  .fs-sm-1rem {
    font-size: 1rem;
    line-height: 1.2rem;
  }

  .fs-sm-5rem {
    font-size: 5rem;
    line-height: 5.2rem;
  }

  .gap-sm-8px {
    gap:8px;
  }

  .gap-sm-16px {
    gap:16px;
  }

  .gap-sm-24px {
    gap:24px;
  }

  .gap-sm-32px {
    gap:32px;
  }

  .gap-sm-64px {
    gap:64px;
  }

  .gap-sm-128px {
    gap:128px;
  }
}

/*Tablet View*/
@media (min-width: 768px) {
  .w-md-100p {
    width: 100%;
  }

  .w-md-75p {
    width: 75%;
  }

  .w-md-50p {
    width: 50%;
  }

  .w-md-25p {
    width: 25%;
  }

  .w-md-8px {
    width: 8px;
  }

  .w-md-16px {
    width: 16px;
  }

  .w-md-24px {
    width: 24px;
  }

  .w-md-32px {
    width: 32px;
  }

  .w-md-64px {
    width: 64px;
  }

  .w-md-128px {
    width: 128px;
  }

  .w-md-150px {
    width: 150px;
  }

  .w-md-200px {
    width: 200px;
  }

  .w-md-250px {
    width: 250px;
  }

  .h-md-100p {
    height: 100%;
  }

  .h-md-8px {
    height: 8px;
  }

  .h-md-16px {
    height: 16px;
  }

  .h-md-24px {
    height: 24px;
  }

  .h-md-32px {
    height: 32px;
  }

  .h-md-64px {
    height: 64px;
  }

  .h-md-128px {
    height: 128px;
  }

  .h-md-150px {
    height: 150px;
  }

  .h-md-200px {
    height: 200px;
  }

  .h-md-250px {
    height: 250px;
  }

  .fs-md-8px {
    font-size: 8px;
    line-height: 10px;
  }

  .fs-md-10px {
    font-size: 10px;
    line-height: 12px;
  }

  .fs-md-12px {
    font-size: 12px;
    line-height: 14px;
  }

  .fs-md-14px {
    font-size: 14px;
    line-height: 16px;
  }

  .fs-md-16px {
    font-size: 16px;
    line-height: 18px;
  }

  .fs-md-18px {
    font-size: 18px;
    line-height: 20px;
  }

  .fs-md-20px {
    font-size: 20px;
    line-height: 22px;
  }

  .fs-md-24px {
    font-size: 24px;
    line-height: 26px;
  }

  .fs-md-28px {
    font-size: 28px;
    line-height: 30px;
  }

  .fs-md-32px {
    font-size: 32px;
    line-height: 34px;
  }

  .fs-md-36px {
    font-size: 36px;
    line-height: 38px;
  }

  .fs-md-40px {
    font-size: 40px;
    line-height: 42px;
  }

  .fs-md-46px {
    font-size: 46px;
    line-height: 48px;
  }

  .fs-md-64px {
    font-size: 64px;
    line-height: 66px;
  }

  .fs-md-0p5rem {
    font-size: 0.5rem;
    line-height: 0.8rem;
  }

  .fs-md-1rem {
    font-size: 1rem;
    line-height: 1.2rem;
  }

  .fs-md-5rem {
    font-size: 5rem;
    line-height: 5.2rem;
  }

  .gap-md-8px {
    gap:8px;
  }

  .gap-md-16px {
    gap:16px;
  }

  .gap-md-24px {
    gap:24px;
  }

  .gap-md-32px {
    gap:32px;
  }

  .gap-md-64px {
    gap:64px;
  }

  .gap-md-128px {
    gap:128px;
  }

  .aspect-ratio-md-auto {
    aspect-ratio: auto;
  }

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

  .top-md-0 {
    top:0;
  }

  .top-md-50p {
    top:50%;
  }

  .top-md-neg-50p {
    top:-50%;
  }

  .bottom-md-0 {
    bottom: 0;
  }

  .bottom-md-50p {
    bottom:50%;
  }

  .bottom-md-neg-50p {
    bottom:-50%;
  }

  .left-md-0 {
    left:0;
  }

  .left-md-50p {
    left:50%;
  }

  .left-md-neg-50p {
    left:-50%;
  }

  .right-md-0 {
    right: 0;
  }

  .right-md-50p {
    right:50%;
  }

  .right-md-neg-50p {
    right:-50%;
  }

  .transform-x-md-50p {
    transform: translateX(50%);
  }

  .transform-x-md-neg-50p {
    transform: translateX(-50%);
  }

  .transform-x-md-0 {
    transform: translateX(0);
  }

  .transform-y-md-0 {
    transform: translateY(0);
  }

  .transform-y-md-50p {
    transform: translateY(50%);
  }

  .transform-y-md-neg-50p {
    transform: translateY(-50%);
  }

  .transform-y-md-24px {
    transform: translateY(24px);
  }

  .transform-y-md-neg-24px {
    transform: translateY(-24px);
  }

  .transform-y-md-32px {
    transform: translateY(32px);
  }

  .transform-y-md-neg-32px {
    transform: translateY(-32px);
  }

  .transform-y-md-64px {
    transform: translateY(64px);
  }

  .transform-y-md-neg-64px {
    transform: translateY(-64px);
  }
}

/* Desktop only */
@media (min-width: 992px) {

  .w-lg-25p {
    width: 25%;
  }

  .w-lg-50p {
    width: 50%;
  }

  .w-lg-75p {
    width: 75%;
  }

  .w-lg-100p {
    width: 100%;
  }

  .w-lg-8px {
    width: 8px;
  }

  .w-lg-16px {
    width: 16px;
  }

  .w-lg-24px {
    width: 24px;
  }

  .w-lg-32px {
    width: 32px;
  }

  .w-lg-48px {
    width: 32px;
  }

  .w-lg-64px {
    width: 64px;
  }

  .w-lg-128px {
    width: 128px;
  }

  .w-lg-150px {
    width: 150px;
  }

  .w-lg-200px {
    width: 200px;
  }

  .w-lg-250px {
    width: 250px;
  }

  .w-lg-400px {
    width: 400px;
  }

  .h-lg-100p {
    height: 100%;
  }

  .h-lg-8px {
    height: 8px;
  }

  .h-lg-16px {
    height: 16px;
  }

  .h-lg-24px {
    height: 24px;
  }

  .h-lg-32px {
    height: 32px;
  }

  .h-lg-64px {
    height: 64px;
  }

  .h-lg-128px {
    height: 128px;
  }

  .h-lg-150px {
    height: 150px;
  }

  .h-lg-200px {
    height: 200px;
  }

  .h-lg-250px {
    height: 250px;
  }

  .min-h-lg-full {
    min-height: calc(100vh - 80px);
  }

  .fs-lg-8px {
    font-size: 8px;
    line-height: 10px;
  }

  .fs-lg-10px {
    font-size: 10px;
    line-height: 12px;
  }

  .fs-lg-12px {
    font-size: 12px;
    line-height: 14px;
  }

  .fs-lg-14px {
    font-size: 14px;
    line-height: 16px;
  }

  .fs-lg-16px {
    font-size: 16px;
    line-height: 18px;
  }

  .fs-lg-18px {
    font-size: 18px;
    line-height: 20px;
  }

  .fs-lg-20px {
    font-size: 20px;
    line-height: 22px;
  }

  .fs-lg-24px {
    font-size: 24px;
    line-height: 26px;
  }

  .fs-lg-28px {
    font-size: 28px;
    line-height: 30px;
  }

  .fs-lg-32px {
    font-size: 32px;
    line-height: 34px;
  }

  .fs-lg-36px {
    font-size: 36px;
    line-height: 38px;
  }

  .fs-lg-40px {
    font-size: 40px;
    line-height: 42px;
  }

  .fs-lg-46px {
    font-size: 46px;
    line-height: 48px;
  }

  .fs-lg-64px {
    font-size: 64px;
    line-height: 66px;
  }

  .fs-lg-0p5rem {
    font-size: 0.5rem;
    line-height: 0.8rem;
  }

  .fs-lg-1rem {
    font-size: 1rem;
    line-height: 1.2rem;
  }

  .fs-lg-5rem {
    font-size: 5rem;
    line-height: 5.2rem;
  }

  .gap-lg-8px {
    gap:8px;
  }

  .gap-lg-16px {
    gap:16px;
  }

  .gap-lg-24px {
    gap:24px;
  }

  .gap-lg-32px {
    gap:32px;
  }

  .gap-lg-64px {
    gap:64px;
  }

  .gap-lg-128px {
    gap:128px;
  }

  .aspect-ratio-lg-auto {
    aspect-ratio: auto;
  }

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

  .top-lg-0 {
    top:0;
  }

  .top-lg-50p {
    top:50%;
  }

  .top-lg-neg-50p {
    top:-50%;
  }

  .bottom-lg-0 {
    bottom: 0;
  }

  .bottom-lg-50p {
    bottom:50%;
  }

  .bottom-lg-neg-50p {
    bottom:-50%;
  }

  .left-lg-0 {
    left:0;
  }

  .left-lg-50p {
    left:50%;
  }

  .left-lg-neg-50p {
    left:-50%;
  }

  .right-lg-0 {
    right: 0;
  }

  .right-lg-50p {
    right:50%;
  }

  .right-lg-neg-50p {
    right:-50%;
  }

  .transform-x-lg-0 {
    transform: translateX(0);
  }

  .transform-x-lg-50p {
    transform: translateX(50%);
  }

  .transform-x-lg-neg-50p {
    transform: translateX(-50%);
  }

  .transform-y-lg-0 {
    transform: translateY(0);
  }

  .transform-y-lg-50p {
    transform: translateY(50%);
  }

  .transform-y-lg-neg-50p {
    transform: translateY(-50%);
  }

  .transform-y-lg-32px {
    transform: translateY(32px);
  }

  .transform-y-lg-neg-32px {
    transform: translateY(-32px);
  }

  .transform-y-lg-64px {
    transform: translateY(64px);
  }

  .transform-y-lg-neg-64px {
    transform: translateY(-64px);
  }
}