/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/**
 * Minified by jsDelivr using clean-css v4.2.0.
 * Original file: /npm/slick-carousel@1.8.1/slick/slick-theme.css
 * 
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
@charset 'UTF-8';
/* Slick Theme CSS - Fixed version without external font dependencies */

.slick-loading .slick-list{
    background:#fff center center no-repeat;
    /* Removed ajax-loader.gif reference */
}

/* Removed @font-face declaration to eliminate font 404 errors */

.slick-next,.slick-prev{
    font-size:0;line-height:0;position:absolute;top:50%;display:block;width:20px;height:20px;padding:0;
    -webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);
    cursor:pointer;color:transparent;border:none;outline:0;background:0 0
}
.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{
    color:transparent;outline:0;background:0 0
}
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{
    opacity:1
}
.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{
    opacity:.25
}
.slick-next:before,.slick-prev:before{
    font-family:Arial, sans-serif; /* Changed from 'slick' font to Arial */
    font-size:20px;line-height:1;opacity:.75;color:#fff;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
.slick-prev{left:-25px}
[dir=rtl] .slick-prev{right:-25px;left:auto}
.slick-prev:before{content:'‹'} /* Changed from special font to HTML entity */
[dir=rtl] .slick-prev:before{content:'›'}
.slick-next{right:-25px}
[dir=rtl] .slick-next{right:auto;left:-25px}
.slick-next:before{content:'›'} /* Changed from special font to HTML entity */
[dir=rtl] .slick-next:before{content:'‹'}
.slick-dotted.slick-slider{margin-bottom:30px}
.slick-dots{
    position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;
    list-style:none;text-align:center
}
.slick-dots li{
    position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer
}
.slick-dots li button{
    font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;
    cursor:pointer;color:transparent;border:0;outline:0;background:0 0
}
.slick-dots li button:focus,.slick-dots li button:hover{outline:0}
.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}
.slick-dots li button:before{
    font-family:Arial, sans-serif; /* Changed from 'slick' font to Arial */
    font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;
    content:'•';text-align:center;opacity:.25;color:#000;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
.slick-dots li.slick-active button:before{opacity:.75;color:#000}
/*# sourceMappingURL=/sm/4f6eaa7dd1119d31ae1e63765b05594f0f2412451130c0a4def1018d0e4be09b.map */
/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background-color: #ffffff;
  max-width: 1440px;
  margin: 0 auto;
}
.cmp-header--dark {
  background-color: #26202e;
}
.cmp-header--dark .cmp-header__nav-link-container {
  color: #ffffff;
}
.cmp-header--dark .cmp-header__nav-link {
  color: #ffffff;
  line-height: 24px;
}
.cmp-header--dark .cmp-header__logo--dark {
  display: none;
}
.cmp-header--dark .cmp-header__logo--light {
  display: block;
}
.cmp-header--dark .cmp-header__profile-icon {
  color: #ffffff;
}
.cmp-header--dark .cmp-header__grid-bg {
  display: none;
}
.cmp-header__wrapper {
  position: relative;
  width: 100%;
}
.cmp-header__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  position: relative;
  transition: all 500ms ease-out;
}
.cmp-header__logo {
  max-width: 103px;
  max-height: 49px;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 991px) {
  .cmp-header__logo {
    max-width: 80px;
    max-height: 38px;
  }
}
.cmp-header__logo-link {
  display: flex;
}
.cmp-header__logo {
  width: 100%;
}
.cmp-header__logo--light {
  display: none;
}
.cmp-header__nav-wrapper {
  align-self: stretch;
  display: flex;
  gap: 3.5em;
}
@media screen and (max-width: 991px) {
  .cmp-header__nav-wrapper {
    gap: 1.5em;
  }
}
.cmp-header__nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
@media screen and (max-width: 991px) {
  .cmp-header__nav {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    background-color: #26202e;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
  }
}
.cmp-header__nav-link-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.cmp-header__nav-link-container:not(:last-child) {
  padding-right: 30px;
}
@media screen and (max-width: 991px) {
  .cmp-header__nav-link-container:not(:last-child) {
    margin-right: 0;
    margin-bottom: 44px;
  }
}
.cmp-header__nav-link-container:hover .cmp-header__nav-link::after {
  width: 50%;
  background-color: #ffffff;
}
.cmp-header__nav-link {
  color: #26202e;
  line-height: 19px;
  font-size: 14px;
  text-decoration: none;
  position: relative;
}
.cmp-header__nav-link::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: calc(105%);
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 0;
  border-radius: 100px;
  background-color: #7a7482;
  transition: all 500ms ease-out;
}
@media screen and (max-width: 991px) {
  .cmp-header__nav-link {
    color: #ffffff;
    font-size: 32px;
    line-height: 44px;
    font-weight: 300;
  }
}
.cmp-header__profile-btn {
  display: flex;
  align-self: center;
  background-color: transparent;
  cursor: pointer;
}
.cmp-header__profile-icon {
  height: 26px;
  width: 26px;
  color: #26202e;
}
@media screen and (max-width: 991px) {
  .cmp-header__profile-icon {
    margin-left: 140px;
  }
}
.cmp-header__mega-menu.products-class {
  position: absolute;
  top: calc(99%);
  left: 0;
  width: 100%;
  background-color: #26202e;
  padding-block: 48px;
  visibility: hidden;
  opacity: 0;
  cursor: initial;
  padding: 46px;
  overflow-y: hidden;
}
@media screen and (max-width: 991px) {
  .cmp-header__mega-menu.products-class {
    top: 100px;
    padding-block: 0;
    left: 0;
    min-height: 100vh;
    width: 100vw;
    z-index: 40;
    padding: 20px;
  }
}
.cmp-header__menu-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  background-color: #26202e;
  border: 1px solid #3d344a;
  border-block: none;
  max-width: 1280px;
  width: 100%;
}
@media screen and (max-width: 991px) {
  .cmp-header__menu-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cmp-header__menu-item {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transition: all 200ms ease-out;
  text-decoration: none;
}
@media screen and (max-width: 991px) {
  .cmp-header__menu-item {
    padding: 28px 0;
  }
}
.cmp-header__menu-item--dummy {
  pointer-events: none;
}
.cmp-header__menu-item:not(:nth-child(6)) {
  border-right: 1px solid #3d344a;
}
.cmp-header__menu-item:hover {
  background-color: #5b5661;
}
.cmp-header__menu-item-icon {
  height: 50px;
  width: 50px;
  color: #ffffff;
}
.cmp-header__menu-item-name {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 16px;
}
@keyframes cpm-header-fade-in {
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes cpm-header-slide-up {
  0% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
  }
}
.cmp-header__animation-fade-in {
  animation: cpm-header-fade-in 500ms ease-out forwards 100ms 1;
  overflow-y: scroll;
}
.cmp-header__animation-slide-up {
  animation: cpm-header-slide-up 500ms ease-out forwards 0ms 1;
}
.cmp-header__hamburger-btn {
  display: none;
  align-self: center;
  background-color: transparent;
}
@media screen and (max-width: 991px) {
  .cmp-header__hamburger-btn {
    display: inline-block;
  }
}
.cmp-header__hamburger-icon {
  height: 32px;
  width: 32px;
}
.cmp-header__nav-close-btn {
  display: none;
  background-color: transparent;
  position: absolute;
  top: 38px;
  right: 20px;
}
@media screen and (max-width: 991px) {
  .cmp-header__nav-close-btn {
    display: block;
  }
}
.cmp-header__nav-back-btn {
  opacity: 0;
  visibility: hidden;
  transition: all 200ms ease-out;
  background-color: transparent;
  position: absolute;
  top: 38px;
  left: 20px;
}
.cmp-header__nav-close-icon,
.cmp-header__nav-back-icon {
  color: #c7c7c7;
  height: 30px;
  width: 30px;
}
.cmp-header__visible {
  opacity: 1;
  visibility: visible;
}
.cmp-header__invisible {
  opacity: 0;
  visibility: hidden;
}
.cmp-header__nav-vertical-line {
  display: none;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
  height: 100%;
  width: 1px;
  background-color: #3d344a;
}
@media screen and (max-width: 991px) {
  .cmp-header__nav-vertical-line {
    display: block;
  }
}
.cmp-header__nav-vertical-line:nth-child(1) {
  left: 20px;
  transform: initial;
}
.cmp-header__nav-vertical-line:nth-child(3) {
  left: auto;
  right: 20px;
  transform: initial;
}
.cmp-header__grid-bg.ap-grid-bg {
  height: 80px;
}
.cmp-header__grid-bg__wrapper {
  position: relative;
}
.cmp-header__grid-bg .ap-grid-bg__item:nth-child(n + 1) {
  padding-top: 0;
  gap: unset;
}
.cmp-header__profile-container {
  position: relative;
}
.cmp-header__profile-btn {
  display: flex;
  margin-left: 62px;
  align-self: center;
  background-color: transparent;
  cursor: pointer;
}
.cmp-header__profile-icon {
  height: 26px;
  width: 26px;
  color: #26202e;
}
.cmp-header__profile-popup {
  position: absolute;
  top: calc(110%);
  right: 0;
  width: 280px;
  background-color: #26202e;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: all 200ms ease-out;
  z-index: 40;
}
.cmp-header__profile-popup-close {
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
}
.cmp-header__profile-popup-close-icon {
  height: 26px;
  width: 26px;
  color: #ffffff;
}
.cmp-header__profile-popup-content {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cmp-header__profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.cmp-header__profile-avatar-img {
  height: 60px;
  width: 60px;
  color: #ffffff;
}
.cmp-header__profile-name {
  font-size: 17px;
  line-height: 30px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
  text-align: center;
}
.cmp-header__profile-message-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
  text-align: center;
}
.cmp-header__profile-message {
  font-size: 14px;
  line-height: 18px;
  color: #c7c7c7;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  max-width: 248px;
  gap: 6px;
}
.cmp-header__profile-message-icon-wrapper {
  flex-shrink: 0;
}
.cmp-header__profile-message-icon {
  height: 16px;
  width: 16px;
  color: inherit;
  margin-top: -15px;
}
.cmp-header__ghtr {
  display: inline;
  max-width: 200px;
  word-break: break-word;
}
.cmp-header__profile-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 15px;
}
.cmp-header__profile-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 200ms ease-out;
}
.cmp-header__profile-menu-item {
  font-weight: 400;
  font-size: 17px;
  line-height: 22px;
  color: #ffffff;
  text-decoration: none;
  padding: 15px 0;
  text-align: center;
}
.cmp-header__profile-menu-item:last-child {
  border-bottom: none;
  margin-top: 50px;
}
.cmp-header__profile-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.cmp-header__profile-popup-visible {
  visibility: visible;
  opacity: 1;
  width: 320px;
  height: 541px;
  margin-right: 40px;
}
.cmp-header__login-flow-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
  align-items: center;
  justify-content: center;
}
.cmp-header__login-flow-modal--visible {
  display: flex;
}
.cmp-header .cmp-header__nav-link-container .cmp-header__nav-link.active {
  font-weight: 700;
}
.cmp-header .cmp-header__nav-link-container .cmp-header__nav-link.active::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 2px;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #26202e;
  display: inline-block;
}
@media screen and (max-width: 991px) {
  .cmp-header .cmp-header__nav-link-container .cmp-header__nav-link.active::before {
    content: unset;
  }
}
.skeleton-loader-container {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 80px;
  z-index: 30;
}
.skeleton-loader-container--visible {
  display: block;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-img-collection-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.cmp-img-collection-carousel__heading-wrapper {
  padding-left: calc(134.5%);
  padding-right: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .cmp-img-collection-carousel__heading-wrapper {
    padding-left: 24%;
  }
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__heading-wrapper {
    padding-left: 0;
    padding-right: 0;
    margin-left: 10px;
  }
}
.cmp-img-collection-carousel__heading {
  font-family: 'Noto Serif', serif;
  font-weight: 300;
  font-size: 42px;
  line-height: 57.2px;
  color: #26202e;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__heading {
    line-height: 40.86px;
    font-size: 30px;
  }
}
.cmp-img-collection-carousel__heading-arrows {
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__heading-arrows {
    display: none;
  }
}
.cmp-img-collection-carousel__heading-bracket {
  font-weight: 300;
  font-size: 32px;
  line-height: 43.71px;
  color: #a29baa;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__heading-bracket {
    line-height: 32.78px;
    font-size: 22px;
  }
}
.cmp-img-collection-carousel__wrapper {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__wrapper {
    margin-left: 10px;
  }
}
.cmp-img-collection-carousel__prev-arrow,
.cmp-img-collection-carousel__next-arrow {
  width: 50px;
  height: 50px;
}
.cmp-img-collection-carousel__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 537px;
  padding-left: 120px;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__container {
    padding-left: 0px;
    padding-right: 10px;
  }
}
.cmp-img-collection-carousel__container.slick-active {
  /* Styles for the center item */
  opacity: 1;
  transition: opacity 0.5s;
  /* Add a smooth transition effect */
}
.cmp-img-collection-carousel__container:not(.slick-active) {
  /* Styles for non-center items */
  opacity: 0.4;
  /* Adjust the opacity as needed */
  transition: opacity 0.5s;
  /* Add a smooth transition effect */
}
.cmp-img-collection-carousel__product-detail {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 17px;
  width: 42%;
  line-height: 28px;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__product-detail {
    width: 95%;
    margin-bottom: 20px;
    line-height: 19.2px;
    font-size: 14px;
  }
}
.cmp-img-collection-carousel__product-count {
  margin-right: 10px;
}
.cmp-img-collection-carousel__pipe {
  border-right: 1px solid #000000;
  margin-right: 10px;
  height: 17px;
}
.cmp-img-collection-carousel__img-name {
  font-weight: 600;
  font-size: 22px;
  line-height: 30.05px;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__img-name {
    font-size: 20px;
    line-height: 28px;
  }
}
.cmp-img-collection-carousel__icon {
  width: 100%;
  max-width: 759px;
  height: 464px;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__icon {
    width: 95%;
    min-width: 330.59px;
    height: 201.7px;
  }
}
.cmp-img-collection-carousel__explore-box {
  z-index: 60;
  align-self: flex-end;
  position: relative;
  right: 0%;
  bottom: 29.8%;
  left: 79.5%;
}
@media screen and (max-width: 768px) {
  .cmp-img-collection-carousel__explore-box {
    bottom: 19.5%;
    left: 69.5%;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-vertical-icon-list {
  display: flex;
  gap: 20px;
}
.cmp-vertical-icon-list__heading {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cmp-vertical-icon-list__section-heading {
  font-family: 'Noto Serif', serif;
  font-size: 42px;
  font-weight: 300;
  line-height: 57.2px;
  color: #26202e;
  margin-top: 54px;
  grid-column: 2;
}
.cmp-vertical-icon-list__content {
  width: 100%;
  max-height: 738px;
  background: #f5f5f5;
}
.cmp-vertical-icon-list__sub-content {
  display: flex;
  align-items: baseline;
  gap: 0 10px;
  align-content: flex-end;
  flex-wrap: wrap;
  min-height: 189px;
  padding-inline: 48px;
  padding-bottom: 32px;
  background: #feb940;
}
.cmp-vertical-icon-list__content-title,
.cmp-vertical-icon-list__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  color: #26202e;
  font-style: normal;
}
.cmp-vertical-icon-list__link {
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
}
.cmp-vertical-icon-list__link-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 35.52px;
  color: #26202e;
}
.cmp-vertical-icon-list__icons {
  display: flex;
  flex-direction: column;
  gap: 58px;
  padding: 44px 110px 143px 48px;
  max-height: 549px;
}
.cmp-vertical-icon-list__item {
  display: flex;
  flex-direction: row;
  gap: 30px;
}
.cmp-vertical-icon-list__icon {
  width: 91px;
  height: 91px;
  flex: 0 0 auto;
}
.cmp-vertical-icon-list__item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-vertical-icon-list__subtitle {
  font-size: 17px;
  font-weight: 400;
  color: #26202e;
  line-height: 28px;
}
.cmp-vertical-icon-list__icon-wrapper {
  position: relative;
  height: 14px;
  width: 14px;
  transition: all 300ms ease-in-out;
  overflow: hidden;
}
.cmp-vertical-icon-list__icon-wrapper:hover {
  height: 34px;
  width: 34px;
}
.cmp-vertical-icon-list__arrow-icon {
  position: absolute;
  height: 34px;
  width: 34px;
  top: 0;
  right: 0;
}
@media screen and (max-width: 991px) {
  .cmp-vertical-icon-list__heading {
    grid-template-columns: auto;
    width: 50%;
  }
  .cmp-vertical-icon-list__icons {
    padding: 44px 48px;
  }
  .cmp-vertical-icon-list__item {
    gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-vertical-icon-list {
    flex-direction: column;
    gap: 46px;
  }
  .cmp-vertical-icon-list__heading {
    justify-content: flex-start;
    width: 100%;
  }
  .cmp-vertical-icon-list__section-heading {
    margin-top: unset;
  }
  .cmp-vertical-icon-list__content-title {
    font-weight: 300;
    font-size: 24px;
    line-height: 32.78px;
  }
  .cmp-vertical-icon-list__link-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 32.78px;
  }
  .cmp-vertical-icon-list__icon-wrapper:hover {
    height: 14px;
    width: 14px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-vertical-icon-list__section-heading {
    font-size: 30px;
    line-height: 40.8px;
  }
  .cmp-vertical-icon-list__sub-content {
    min-height: 140px;
    padding: 46px 20px 26px;
  }
  .cmp-vertical-icon-list__icons {
    padding: 30px 20px;
    gap: 34px;
  }
  .cmp-vertical-icon-list__icon {
    width: 62px;
    height: 62px;
  }
  .cmp-vertical-icon-list__item-content {
    gap: 4px;
  }
  .cmp-vertical-icon-list__title {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-multicard {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-multicard {
    max-width: 100%;
    width: 100%;
    padding: 0 40px;
  }
}
.cmp-multicard.comp-padding-block {
  margin-top: 75px;
  margin-bottom: 75px;
}
@media screen and (max-width: 768px) {
  .cmp-multicard.comp-padding-block {
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-multicard.comp-padding-block {
    margin-top: 35px  ;
    margin-bottom: 35px ;
  }
}
.cmp-multicard__left-card {
  width: 100%;
  max-height: 428px;
  height: 100%;
  gap: 77px;
  background: #26202e;
  padding: 30px 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cmp-multicard__left-card-title {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 40px;
  width: 483px;
  font-weight: 700;
  line-height: 55px;
  color: #ffffff;
  min-height: 114px;
}
.cmp-multicard__card-group {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}
.cmp-multicard__card {
  min-width: 305px;
  height: 351px;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  align-items: center;
  padding-inline: 24px;
  justify-content: center;
}
.cmp-multicard__card:nth-child(1) {
  grid-column: 2;
  grid-row: span 2;
}
.cmp-multicard__card:nth-child(2) {
  grid-row: span 2;
}
.cmp-multicard__card:nth-child(3) {
  grid-row: span 2;
  margin-top: 20px;
}
.cmp-multicard__card:nth-child(4) {
  margin-top: 20px;
}
.cmp-multicard__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  font-style: normal;
  margin: 17px 0 11px;
}
.cmp-multicard__subtitle {
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}
.cmp-multicard__icon {
  width: 91px;
  height: 91px;
}
@media screen and (max-width: 1200px) {
  .cmp-multicard {
    flex-direction: column;
  }
  .cmp-multicard__card {
    min-width: 255px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-multicard {
    gap: 0;
  }
  .cmp-multicard__left-card {
    max-height: 316px;
    padding: 32px 20px 51px;
    gap: 46px;
    pointer-events: auto;
  }
  .cmp-multicard__left-card-title {
    font-size: 30px;
    width: 360px;
    line-height: 40.86px;
    min-height: 82px;
  }
  .cmp-multicard__card-group {
    width: 100%;
    grid-template-columns: auto;
    gap: 20px;
    margin-top: -158px;
    pointer-events: none;
  }
  .cmp-multicard__card {
    width: 260px;
  }
  .cmp-multicard__card:nth-child(1) {
    grid-column: 1;
    grid-row: span 2;
    justify-self: flex-end;
  }
  .cmp-multicard__card:nth-child(3) {
    margin-top: 0;
    justify-self: flex-end;
  }
  .cmp-multicard__card:nth-child(4) {
    margin-top: 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-multicard__card-group {
    gap: 10px;
    padding: 0 20px;
  }
  .cmp-multicard__card {
    width: 230px;
    height: 310px;
    padding-inline: 16px;
    min-width: unset;
    max-width: 66%;
  }
  .cmp-multicard__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    margin: 8px 0 5px;
  }
  .cmp-multicard__subtitle {
    font-size: 17px;
    line-height: 24px;
    text-align: center;
  }
  .cmp-multicard__icon {
    width: 56px;
    height: 56px;
  }
}
@keyframes card {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.cmp-multicard__animate-card {
  animation: card 500ms ease-out forwards 100ms 1;
}
@media screen and (max-width: 768px) {
  .cmp-multicard__animate-card {
    animation: none;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-hero-banner {
  max-width: 1440px;
  margin: 0 auto;
}
.cmp-hero-banner__container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150px !important ;
  margin-bottom: 75px !important;
}
@media screen and (max-width: 480px) {
  .cmp-hero-banner__container {
    padding: 0 20px;
    margin-top: 140px !important ;
    margin-bottom: 0 !important;
  }
}
.cmp-hero-banner__wrapper {
  min-width: 655px;
}
@media screen and (max-width: 480px) {
  .cmp-hero-banner__wrapper {
    min-width: unset;
  }
}
.cmp-hero-banner__title-section {
  padding-bottom: 30px;
}
.cmp-hero-banner__title {
  color: #26202e;
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
}
.cmp-hero-banner__title--bold {
  font-weight: 700;
}
.cmp-hero-banner__title--lighter {
  font-weight: 400;
}
.cmp-hero-banner__search-wrapper {
  width: 100%;
  display: flex;
  padding-bottom: 30px;
  position: relative;
}
.cmp-hero-banner__search-input {
  flex: 1;
  border: 1px solid #000000;
  background: #ffffff;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  padding: 18px 24px;
}
.cmp-hero-banner__search-input:focus {
  outline: none;
}
.cmp-hero-banner__search-placeholder {
  position: absolute;
  top: 21%;
  left: 26px;
  color: #7a7482;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1px;
  pointer-events: none;
}
.cmp-hero-banner__search-icon-wrapper {
  width: 60px;
  background: #000000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-hero-banner__search-icon {
  height: 18px;
  width: 20px;
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 0.8;
}
.cmp-hero-banner__search-placeholder-text {
  color: #26202e;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1px;
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  transition: all 200ms ease, opacity 150ms ease-in-out;
}
.cmp-hero-banner__search-slide-down {
  transform: translateY(20%);
  opacity: 0;
}
.cmp-hero-banner__chips-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cmp-hero-banner__chips-chip {
  padding: 5px 20px;
  border-radius: 34px;
  border: 1px solid #26202e;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #26202e;
  text-align: center;
  cursor: pointer;
}
.cmp-hero-banner__recommendations-button {
  color: #6700ff;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-decoration-line: none;
  background: transparent;
  cursor: pointer;
}
.cmp-hero-banner__recommendations-text {
  color: #26202e;
  font-size: 18px;
  font-weight: 400;
}
.cmp-hero-banner__title-section.not-logged-in .cmp-hero-banner__title--lighter {
  display: flex;
  flex-direction: column;
}
body:not(.user-logged-in) .cmp-hero-banner__title-section.logged-in,
body:not(.user-logged-in) .cmp-hero-banner__search-placeholder.logged-in,
body:not(.user-logged-in) .cmp-hero-banner__chips-container.logged-in {
  display: none;
}
body.user-logged-in .cmp-hero-banner__title-section.not-logged-in,
body.user-logged-in .cmp-hero-banner__search-placeholder.not-logged-in,
body.user-logged-in .cmp-hero-banner__chips-container.not-logged-in {
  display: none;
}
body.user-logged-in.no-user-preferences .cmp-hero-banner__chips-container.has-preferences {
  display: none;
}
body.user-logged-in:not(.no-user-preferences) .cmp-hero-banner__chips-container.no-preferences {
  display: none;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-video-banner {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  max-width: 1440px;
  margin: 0 auto;
  /* Mobile-only: move CTA box to left, without impacting other views */
  /* slick customizations specific to banner carousal */
  /* Ensure adjacent slides' content does not bleed into view */
  /* Play/Pause Button Styles */
}
.cmp-video-banner.slick-dotted.slick-slider {
  margin-top: 75px;
  margin-bottom: 75px;
}
@media screen and (max-width: 480px) {
  .cmp-video-banner.slick-dotted.slick-slider {
    margin-top: 36px;
    margin-bottom: 76px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner .banner-carousel-cta-link {
    position: absolute;
    right: 20px;
    bottom: 0;
    z-index: 200;
    transform: translateX(170px);
    will-change: transform;
  }
}
.cmp-video-banner__wrapper {
  position: relative;
  overflow: hidden;
}
.cmp-video-banner__ribbon-heading {
  position: absolute;
  top: 20px;
  left: 40px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner__ribbon-heading {
    top: 20px;
    left: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner__ribbon-heading {
    top: 20px;
    left: 20px;
  }
}
.cmp-video-banner__ribbon-wrapper {
  display: inline-block;
}
.cmp-video-banner__ribbon-bg {
  display: block;
  width: 178px;
  height: 33px;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner__ribbon-bg {
    width: 200px;
    height: 32px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner__ribbon-bg {
    width: 160px;
    height: 30px;
  }
}
.cmp-video-banner__ribbon-text {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-anchor: middle;
  dominant-baseline: middle;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner__ribbon-text {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner__ribbon-text {
    font-size: 14px;
  }
}
.cmp-video-banner__info-container {
  position: absolute;
  bottom: 2px;
  right: 80px;
  display: flex;
  gap: 47px;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner__info-container {
    right: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner__info-container {
    left: 20px;
    right: 20px;
    width: calc(60%);
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    row-gap: 12px;
    margin-top: 20px;
    bottom: -20px;
  }
}
.cmp-video-banner__video-text {
  font-size: 60px;
  font-weight: 300;
  color: #ffffff;
  opacity: 0.9;
  padding-top: 70px;
  margin-right: -20px;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner__video-text {
    font-size: 50px;
    padding-top: 60px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner__video-text {
    font-size: 32px;
    line-height: 36px;
    margin-right: 0;
    padding-bottom: 68px;
    text-align: left;
    align-self: flex-start;
    word-wrap: break-word;
  }
}
.cmp-video-banner__container {
  width: 100%;
  height: 767px;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner__container {
    height: 600px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner__container {
    height: 520px;
  }
}
.cmp-video-banner__img-styles {
  width: 100%;
  height: 100%;
}
.cmp-video-banner .slick-dots {
  width: fit-content;
  height: 60px;
  top: 30px;
  right: 120px;
  display: flex;
  gap: 12px;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner .slick-dots {
    top: 32px;
    right: 80px;
    gap: 10px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner .slick-dots {
    top: 32px;
    right: 40px;
    display: flex;
    flex-wrap: wrap;
    width: 160px;
    height: auto;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 8px 12px;
  }
}
.cmp-video-banner .slick-dots li {
  width: 40px;
}
@media screen and (max-width: 480px) {
  .cmp-video-banner .slick-dots li {
    width: 24px;
    flex: 0 0 24px;
    margin: 0;
  }
}
.cmp-video-banner .slick-dots li button {
  width: 100%;
  height: 4px;
  border-radius: 10px;
  padding: unset;
  background: #ffffff;
  position: relative;
  pointer-events: auto;
}
@media screen and (max-width: 480px) {
  .cmp-video-banner .slick-dots li button {
    height: 3px;
    border-radius: 8px;
  }
}
.cmp-video-banner .slick-prev.slick-disabled:before,
.cmp-video-banner .slick-next.slick-disabled:before {
  opacity: unset;
}
.cmp-video-banner .slick-dots li button:before {
  display: inline-block;
  width: 0px;
  height: 100%;
  content: "";
  background: #000000;
  border-radius: 10px;
  outline: none;
  transition: none;
}
.cmp-video-banner li.slick-active button:before {
  width: 100%;
  transition: width 3000ms ease-in-out;
}
.cmp-video-banner li.completed button:before {
  width: 100% !important;
  transition: none !important;
}
.cmp-video-banner li:not(.slick-active):not(.completed) button:before {
  width: 0px;
  transition: none;
}
.cmp-video-banner.carousel-paused li.slick-active button:before {
  transition: none !important;
  animation-play-state: paused;
}
.cmp-video-banner .slick-list {
  overflow: hidden;
}
.cmp-video-banner__play-pause-container {
  position: absolute;
  top: 20px;
  right: 60px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner__play-pause-container {
    right: 30px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner__play-pause-container {
    right: 0px;
  }
}
.cmp-video-banner__play-pause-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
.cmp-video-banner__play-pause-btn:hover {
  opacity: 0.8;
}
.cmp-video-banner__play-pause-btn:focus {
  outline-offset: 2px;
  border-radius: 50%;
}
.cmp-video-banner__play-pause-btn .pause-icon,
.cmp-video-banner__play-pause-btn .play-icon {
  transition: all 0.3s ease;
}
.cmp-video-banner__section-title {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  color: #000000;
  font-weight: 700;
  font-size: 40px;
  line-height: 34px;
  margin-bottom: -25px;
}
@media screen and (max-width: 768px) {
  .cmp-video-banner__section-title {
    font-size: 28px;
    padding: 0 30px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-banner__section-title {
    font-size: 26px;
    font-weight: 600;
    padding: 0 20px;
  }
}
.cq-Editable-dom.banner-carousel .cmp-video-banner__container {
  height: 767px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-explore__box {
  width: 145px;
  min-height: 139px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px 0px;
  overflow-wrap: break-word;
  margin-bottom: 70px;
  text-decoration: none;
  color: #000000;
  background: #ffffff;
  margin-right: 40px;
}
@media screen and (max-width: 768px) {
  .cmp-explore__box {
    width: 100px;
    min-height: 105px;
    padding: 8px 12px;
  }
}
.cmp-explore__box:hover {
  background: #feb940;
}
.cmp-explore__box--solid {
  color: black;
  background: #fff;
}
.cmp-explore__box:hover .cmp-explore__icon-wrapper {
  height: 34px;
  width: 34px;
}
.cmp-explore__box.chat {
  min-height: 0;
  height: auto;
  display: flex;
  width: 112px;
  padding: 12px 24px 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}
.cmp-explore__box.chat:hover {
  background: rgba(254, 185, 64, 0.05);
}
.cmp-explore__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  display: inline-block;
}
.cmp-explore__title.chat {
  text-align: center;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}
@media screen and (max-width: 768px) {
  .cmp-explore__title {
    font-size: 17px;
    line-height: 23px;
  }
}
.cmp-explore__icon-wrapper {
  position: relative;
  height: 14px;
  width: 14px;
  transition: all 300ms ease-in-out;
  overflow: hidden;
}
.cmp-explore__icon {
  position: absolute;
  height: 34px;
  width: 34px;
  top: 0;
  right: 0;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-footer {
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 75px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 991px) {
  .cmp-footer {
    flex-wrap: wrap;
  }
}
.cmp-footer__left-container {
  background-color: #26202e;
  padding: 56px 80px 60px 80px;
  flex-basis: 50%;
  display: flex;
  gap: 64px;
  flex-direction: column;
}
.cmp-footer__left-container.logged-in {
  align-self: stretch;
  justify-content: space-between;
  gap: 0;
  flex: 1 0 0;
}
@media screen and (max-width: 768px) {
  .cmp-footer__left-container.logged-in {
    display: flex;
    padding: 32px 20px 48px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
}
@media screen and (max-width: 991px) {
  .cmp-footer__left-container {
    flex-basis: 100%;
    padding: 32px 20px 48px 20px;
  }
}
.cmp-footer__not-logged-in {
  display: none;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  flex-direction: column;
  justify-content: space-between;
}
.cmp-footer__not-logged-in.active {
  display: flex !important;
}
@media screen and (max-width: 768px) {
  .cmp-footer__not-logged-in {
    max-width: 350px;
    max-height: 414px;
  }
}
.cmp-footer__logged-in {
  display: none !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
}
.cmp-footer__logged-in.active {
  display: flex !important;
}
.cmp-footer__heading {
  color: #ffffff;
  font-size: 42px;
  line-height: 57.2px;
  font-weight: 300;
  max-width: 452px;
}
@media screen and (max-width: 768px) {
  .cmp-footer__heading {
    font-size: 26px;
    line-height: 39px;
    max-width: 270px;
  }
}
.cmp-footer__user-details {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.cmp-footer__not-logged-in-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
}
.cmp-footer__content {
  color: #ffffff;
  font-size: 40px;
  font-weight: 400;
  line-height: 45px;
}
@media screen and (max-width: 768px) {
  .cmp-footer__content {
    font-family: 'Manrope', Helvetica, Roboto, sans-serif;
    line-height: 35px;
    max-width: 351px;
    font-size: 30px;
  }
}
.cmp-footer__content h2 {
  font-size: 40px;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  .cmp-footer__content h2 {
    font-size: 30px;
    line-height: 39px;
  }
}
.cmp-footer__content p {
  font-size: 17px;
  line-height: 28px;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .cmp-footer__content p {
    font-size: 17px;
    line-height: 35px;
    margin-top: -30px;
  }
}
.cmp-footer__content.user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.cmp-footer__content.username {
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}
.cmp-footer__content.designation {
  color: #7a7482;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
}
.cmp-footer__content.phoneNumber {
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  color: #ffffff;
  display: flex;
  align-items: center;
}
.cmp-footer__content.phoneNumber svg {
  width: 12.43px;
  height: 12.46px;
  margin-right: 5px;
  color: #ffffff;
  fill: currentColor;
}
.cmp-footer__content.info {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  margin-top: 30px;
  color: #7a7482;
}
.cmp-footer__mobile-button-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.cmp-footer__mobile-button-call {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .cmp-footer__mobile-button-call {
    display: flex !important;
  }
}
.cmp-footer__chat-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.cmp-footer__contact-us {
  max-width: 473px;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .cmp-footer__contact-us {
    flex-direction: column;
  }
}
.cmp-footer__contact-details {
  width: 238px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .cmp-footer__contact-details {
    margin-bottom: 10px;
  }
}
.cmp-footer__contact {
  display: flex;
  color: #ffffff;
  font-size: 14px;
  line-height: 28px;
  font-weight: 500;
  align-items: center;
}
.cmp-footer__contact.email {
  color: #feb940;
}
.cmp-footer__contact-phone-no {
  text-decoration: none;
  color: #ffffff;
}
.cmp-footer__social-icons {
  list-style: none;
  width: 148px;
  display: flex;
  justify-content: space-between;
  align-self: flex-end;
}
@media screen and (max-width: 768px) {
  .cmp-footer__social-icons {
    align-self: flex-start;
  }
}
.cmp-footer__social-icon {
  width: 22px;
  height: 22px;
}
.cmp-footer__contact-phone-icon {
  color: #ffffff;
}
.cmp-footer__contact-phone-icon,
.cmp-footer__contact-email-icon {
  width: 12.43px;
  height: 12.46px;
  margin-right: 5px;
}
.cmp-footer__right-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 50%;
  padding: 60px 79px 60px 32px;
}
.cmp-footer__right-container.logged-in {
  height: 637px;
  padding: 60px 79px 60px 32px;
}
@media screen and (max-width: 768px) {
  .cmp-footer__right-container.logged-in {
    flex-basis: 100%;
    padding: 32px 20px 48px 20px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-footer__right-container {
    flex-basis: 100%;
    padding: 32px 20px 48px 20px;
    gap: 3em;
  }
}
.cmp-footer__right-table {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2em;
}
@media screen and (max-width: 768px) {
  .cmp-footer__right-table {
    display: block;
  }
  .cmp-footer__right-table::after {
    content: "";
    display: table;
    clear: both;
  }
}
.cmp-footer__col {
  flex: 1 1 28%;
}
@media screen and (max-width: 768px) {
  .cmp-footer__col {
    flex: 1 1 48%;
  }
}
@media screen and (max-width: 768px) {
  .cmp-footer__col:last-child {
    padding-left: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .cmp-footer__col {
    width: 48%;
    float: right;
    margin-bottom: 2em;
  }
  .cmp-footer__col:first-child {
    float: left;
  }
}
.cmp-footer__col,
.cmp-footer__col-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
@media screen and (max-width: 480px) {
  .cmp-footer__col,
  .cmp-footer__col-list {
    gap: 18px;
  }
}
.cmp-footer__col-heading {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #7a7482;
  height: 1.2em;
}
@media screen and (max-width: 480px) {
  .cmp-footer__col-heading {
    font-size: 13px;
    font-weight: 600;
    height: 1.5em;
  }
}
.cmp-footer__col-item {
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: #26202e;
  line-height: 25px;
}
@media screen and (max-width: 480px) {
  .cmp-footer__col-item {
    font-size: 13px;
    font-weight: 500;
  }
}
.cmp-footer .cmp-explore__box.cmp-explore__box--solid {
  background: var(--AP-Yellow, #feb940);
}
.cmp-copyright {
  font-weight: 600;
  font-size: 13px;
  line-height: 17.76px;
  color: #5b5661;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.cmp-footer__newsletter {
  margin-top: 30px;
}
.cmp-footer__col.no-heading .cmp-footer__col-item {
  font-weight: 700 !important;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-notificationIcon {
  display: none;
  background-color: #22891a;
  padding: 12px 16px ;
  width: 420px;
  height: auto;
  position: fixed;
  top: 2%;
  left: 33%;
  justify-content: space-around;
  align-items: center;
  z-index: 60;
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .cmp-notificationIcon {
    width: 80%;
    left: 10%;
    padding: 12px 6px ;
    align-items: flex-start;
    justify-content: space-around;
  }
}
.cmp-notificationIcon.active {
  display: flex;
}
.cmp-notificationIcon .warning__label,
.cmp-notificationIcon .warning__svg,
.cmp-notificationIcon .warning__close {
  display: none;
}
.cmp-notificationIcon .warning__close,
.cmp-notificationIcon .success__close {
  height: 16px;
  width: 16px;
  cursor: pointer;
}
.cmp-notificationIcon .warning__svg,
.cmp-notificationIcon .success__svg {
  height: 24px;
  width: 24px;
}
.cmp-notificationIcon.warning {
  align-items: flex-start;
  background-color: #feb940;
}
.cmp-notificationIcon.warning .warning__label,
.cmp-notificationIcon.warning .warning__svg,
.cmp-notificationIcon.warning .warning__close {
  display: block;
  color: #26202e;
}
.cmp-notificationIcon.warning .success__label,
.cmp-notificationIcon.warning .success__svg,
.cmp-notificationIcon.warning .success__close {
  display: none;
}
.cmp-notificationIcon__label {
  max-width: 324px;
}
@media screen and (max-width: 768px) {
  .cmp-notificationIcon__label {
    max-width: 70%;
  }
}
.cmp-newsletter {
  width: 384px;
  height: 80px;
}
@media screen and (max-width: 768px) {
  .cmp-newsletter {
    width: 89%;
  }
}
.cmp-newsletter__label {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: #a29baa;
}
.cmp-newsletter__input {
  height: 48px;
  width: 86%;
  padding: 5px 20px;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  border: 1px solid #ccc;
}
.cmp-newsletter__input::placeholder {
  font-size: 17px;
  font-weight: 400;
}
.cmp-newsletter__button {
  background-color: #474150;
  color: #ffffff;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}
.cmp-newsletter__button:hover {
  background-color: #3b3642;
}
.cmp-newsletter__input-container {
  width: 100%;
  margin-top: 8px;
  display: flex;
}
.cmp-newsletter__button-flat-icon {
  height: 24px;
  width: 24px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-category {
  margin-top: 56px;
  width: 100%;
  position: relative;
}
.cmp-category__title {
  color: #26202e;
  font-family: 'Noto Serif', serif;
  font-size: 39px;
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  .cmp-category__title {
    font-size: 24px;
  }
}
.cmp-category__sub-title {
  color: #a29baa;
  font-size: 32px;
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  .cmp-category__sub-title {
    font-size: 22px;
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.cmp-category__card-carousal {
  position: relative;
  width: 100%;
  padding-top: 54px;
  padding-bottom: 12px;
}
@media screen and (max-width: 768px) {
  .cmp-category__card-carousal {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-top: 46px;
  }
}
.cmp-category__card-carousal .slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.cmp-category__card-carousal .slick-list {
  display: flex;
}
.cmp-category__card-carousal .slick-track {
  display: flex;
}
.cmp-category__card-carousal .slick-slide {
  display: flex;
}
.cmp-category__card-wrapper {
  text-decoration: none;
  width: 305px;
  min-height: 355.2px;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
}
.cmp-category__card-wrapper:last-child {
  margin-right: 0px;
}
@media screen and (max-width: 768px) {
  .cmp-category__card-wrapper {
    margin-right: 0px;
  }
}
.cmp-category__card-title-wrapper {
  flex: 1;
  min-height: 60px;
  background: #26202e;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.cmp-category__card-title {
  color: #ffffff;
  font-size: 22px;
  font-weight: 300;
  line-height: 28px;
}
.cmp-category__card-icon {
  display: inline-block;
  color: #ffffff;
  width: 16px;
  height: 16px;
  min-width: 16px;
}
.cmp-category__card-img-wrapper {
  width: 100%;
  min-width: 305px;
  height: 292px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-category__card-img-styles {
  display: block;
  width: 100%;
  min-width: 305px;
  aspect-ratio: 1.04452055;
}
.cmp-category__card-img-styles:hover {
  animation: zoomOut 500ms ease-out forwards 100ms 1;
}
@media screen and (max-width: 768px) {
  .cmp-category__card-img-styles:hover {
    animation: none;
  }
}
.cmp-category__card-prev-icon {
  position: absolute;
  top: -50px;
  right: 160px;
}
.cmp-category__card-next-icon {
  position: absolute;
  top: -50px;
  right: 80px;
}
.cmp-category__card-control-icon-wrapper {
  cursor: pointer;
  background: transparent;
  width: 50px;
  height: 50px;
}
.cmp-category__card-control-icon {
  height: 50px;
  width: 50px;
  color: #26202e;
  cursor: pointer;
}
.cmp-category__card-flip {
  transform: rotate(180deg);
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-accordion__item {
  background-color: #f5f5f5;
  font-size: 17px;
  padding: 27px 40px;
  border-bottom: 1px solid #dddddd;
}
@media screen and (max-width: 768px) {
  .cmp-accordion__item {
    padding: 30px 20px;
  }
}
.cmp-accordion__header {
  font-weight: 700;
  line-height: 28px;
  display: flex;
  justify-content: space-between;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  padding-bottom: 30px;
}
.cmp-accordion__panel {
  font-weight: 400;
  line-height: 28px;
}
@media screen and (max-width: 768px) {
  .cmp-accordion__panel {
    font-weight: 500;
  }
}
.cmp-accordion__button {
  background: none !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-image-gallery {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-image-gallery {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-image-gallery {
    padding: 0 20px;
  }
}
.cmp-image-gallery__container {
  width: 100%;
  margin-top: 75px;
  margin-bottom: 75px;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__container {
    gap: 32px;
    margin-bottom: 0;
    margin-top: 35px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-image-gallery__container {
    margin-top: 35px;
    margin-bottom: 10px;
  }
}
.cmp-image-gallery__icon {
  width: 50px;
  height: 50px;
  background-color: transparent;
  position: absolute;
  top: 0;
  z-index: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.cmp-image-gallery__icon:hover {
  opacity: 0.8;
}
.cmp-image-gallery__icon.slick-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__icon {
    width: 30px;
    height: 30px;
    top: auto;
    bottom: 20px;
  }
}
.cmp-image-gallery__icon--prev {
  top: 130px;
  right: 130px;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__icon--prev {
    top: -55px;
    right: 130px;
  }
}
.cmp-image-gallery__icon--next {
  top: 130px;
  right: 0;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__icon--next {
    top: -55px;
    right: 0;
  }
}
.cmp-image-gallery__heading {
  max-width: 60%;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__heading {
    max-width: 100%;
    text-align: left;
    margin-bottom: 20px;
  }
}
.cmp-image-gallery__heading--h1 {
  color: #26202e;
  font-size: 40px;
  letter-spacing: 0%;
  font-weight: 700;
  line-height: 55px;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__heading--h1 {
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
    width: 100%;
  }
}
.cmp-image-gallery__carousel-wrapper {
  position: relative;
  width: 100%;
  margin-top: -60px;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__carousel-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
}
.cmp-image-gallery .slick-disabled {
  opacity: 0.5;
}
.cmp-image-gallery__carousel-slide {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__carousel-slide {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
.cmp-image-gallery__left-section {
  display: flex !important;
  flex-direction: row;
  align-items: flex-end;
  width: 83%;
  height: 600px !important;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__left-section {
    width: 100% !important;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
  }
}
.cmp-image-gallery__carousel-top {
  display: flex !important;
  position: absolute;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cmp-image-gallery__carousel-top--heading {
  position: absolute;
  color: #ffffff;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  left: 50px;
  bottom: 50px;
  width: 900px;
  white-space: normal;
  word-wrap: break-word;
  z-index: 100 !important;
}
@media screen and (max-width: 1024px) and (min-width: 992px) {
  .cmp-image-gallery__carousel-top--heading {
    width: 600px;
    font-size: 24px;
    left: 40px;
    bottom: 40px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__carousel-top--heading {
    position: absolute;
    font-size: 22px;
    bottom: -190px;
    left: 20px;
    width: 600px;
    z-index: 100;
  }
}
@media screen and (max-width: 768px) {
  .cmp-image-gallery__carousel-top--heading {
    position: absolute;
    font-size: 22px;
    bottom: -190px;
    left: 20px;
    width: 500px;
    z-index: 100;
  }
}
@media screen and (max-width: 480px) {
  .cmp-image-gallery__carousel-top--heading {
    width: 310px;
    font-size: 20px;
  }
}
.cmp-image-gallery__image {
  width: 100% !important;
  height: 600px;
  object-fit: cover;
}
.cmp-image-gallery__image--middle {
  width: 100%;
  height: 600px;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__image--middle {
    width: 100%;
    height: 210px;
  }
}
.cmp-image-gallery__image-middle {
  position: relative;
  top: 120px;
  width: 100%;
}
.cmp-image-gallery__image-middle:before {
  content: '';
  position: absolute;
  height: 400px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 75%);
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__image-middle:before {
    height: 100px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__image-middle {
    top: auto;
    width: 100%;
    margin-bottom: 0;
    position: relative;
  }
}
.cmp-image-gallery .cmp-image-gallery__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 1;
}
.cmp-image-gallery .cmp-image-gallery__controls .cmp-image-gallery__count {
  font-size: 16px;
  color: #7a7482;
}
.cmp-image-gallery .cmp-image-gallery__controls .cmp-image-gallery__pause {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-image-gallery .cmp-image-gallery__controls .cmp-image-gallery__pause svg {
  transition: opacity 0.3s ease;
}
.cmp-image-gallery .cmp-image-gallery__controls .cmp-image-gallery__pause:hover svg {
  opacity: 0.8;
}
.cmp-image-gallery__right-section {
  display: flex !important;
  align-items: flex-end;
  align-self: flex-end;
  width: auto;
  gap: 70px;
  box-sizing: border-box;
  position: relative;
  top: 45px;
  height: 600px;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__right-section {
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    margin-top: -380px;
    top: 0;
    height: auto;
  }
}
.cmp-image-gallery .cmp-explore__box {
  width: 151px !important;
  height: 159px !important;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px 0px;
  text-decoration: none;
  color: #ffffff;
  background: #474150;
  margin-bottom: 50px;
  margin-right: 0;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery .cmp-explore__box {
    width: 110px !important;
    height: 115px !important;
    padding: 10px 14px;
    margin-right: 0;
  }
}
.cmp-image-gallery .cmp-explore__box:hover {
  gap: 20px;
}
.cmp-image-gallery .cmp-explore__box:hover .cmp-explore__icon-wrapper {
  height: 34px;
  width: 34px;
}
.cmp-image-gallery .cmp-explore__box.chat {
  min-height: 0;
  height: auto;
  display: flex;
  width: 112px;
  padding: 12px 24px 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}
.cmp-image-gallery .cmp-explore__box.chat:hover {
  background: rgba(254, 185, 64, 0.05);
}
.cmp-image-gallery .cmp-explore__title {
  font-size: 23px;
  font-weight: 300;
  line-height: 28px;
  display: inline-block;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery .cmp-explore__title {
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
  }
}
.cmp-image-gallery .cmp-explore__icon-wrapper {
  position: relative;
  height: 14px;
  width: 14px;
  transition: all 300ms ease-in-out;
  overflow: hidden;
}
.cmp-image-gallery__count {
  color: #a29baa;
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  position: absolute;
  top: 130px;
  right: 58px;
}
@media screen and (max-width: 991px) {
  .cmp-image-gallery__count {
    font-size: 30px;
    position: relative;
    top: -10px;
    right: 60px;
    display: block;
    text-align: right;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.slick-track {
  display: flex !important;
  align-items: flex-end;
}
.slick-slide {
  display: flex !important;
  align-items: baseline;
  justify-content: flex-start;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-text-image-carousel__container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  margin-top: 75px;
  margin-bottom: 75px;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-text-image-carousel__container {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__container {
    padding: 0 15px;
    margin-top: 25px;
    margin-bottom: 25px;
  }
}
.cmp-text-image-carousel__header {
  font-size: 40px;
  line-height: 37.2px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 30px;
}
@media screen and (max-width: 991px) {
  .cmp-text-image-carousel__header {
    margin-bottom: 0;
    width: 450px;
    line-height: 1.4;
    font-size: 30px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__header {
    font-size: 26px;
    line-height: 40px;
    margin-bottom: -80px;
    width: auto;
  }
}
.cmp-text-image-carousel__slide-container {
  position: relative;
  max-height: 600px;
}
@media screen and (max-width: 1200px) {
  .cmp-text-image-carousel__slide-container {
    max-height: fit-content;
  }
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__slide-container {
    margin-top: 90px;
    max-height: 650px;
  }
}
.cmp-text-image-carousel__slide-container .slick-arrow {
  position: absolute;
  top: -82px;
  z-index: 1;
  cursor: pointer;
}
.cmp-text-image-carousel__slide-container .slick-arrow::before {
  display: none;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__slide-container .slick-arrow {
    top: -36px;
  }
}
.cmp-text-image-carousel__slide-container .slick-arrow svg {
  width: 24px;
  height: 48px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__slide-container .slick-arrow svg {
    width: 12px;
    height: 24px;
  }
}
.cmp-text-image-carousel__slide-container .slick-prev {
  right: 150px;
  left: unset;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__slide-container .slick-prev {
    right: 120px;
  }
}
.cmp-text-image-carousel__slide-container .slick-next {
  right: 10px;
}
.cmp-text-image-carousel__slide-container .slick-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.cmp-text-image-carousel__slide-container .slide-length {
  position: absolute;
  top: -92px;
  right: 66px;
  font-size: 32px;
  line-height: 44px;
  color: #7a7482;
  font-weight: 300;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__slide-container .slide-length {
    font-size: 24px;
    line-height: 32px;
    top: -50px;
    right: 62px;
  }
}
.cmp-text-image-carousel__item {
  overflow: hidden;
}
.cmp-text-image-carousel__item.slick-slide {
  display: grid !important;
  grid-template-columns: 40% 65%;
  height: 100% !important;
  gap: 0;
}
@media screen and (max-width: 991px) {
  .cmp-text-image-carousel__item.slick-slide {
    grid-template-columns: 1fr;
  }
}
.cmp-text-image-carousel__item.slick-slide.text-right {
  grid-template-columns: 70% 30%;
}
@media screen and (max-width: 991px) {
  .cmp-text-image-carousel__item.slick-slide.text-right {
    grid-template-columns: 1fr;
  }
}
.cmp-text-image-carousel__item.slick-slide.text-right .cmp-text-image-carousel__text {
  order: 1;
}
@media screen and (max-width: 991px) {
  .cmp-text-image-carousel__item.slick-slide.text-right .cmp-text-image-carousel__text {
    order: 0;
  }
}
.cmp-text-image-carousel__img {
  height: 100%;
  max-height: 463px;
}
@media screen and (max-width: 991px) {
  .cmp-text-image-carousel__img {
    max-height: 300px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__img {
    max-height: 250px;
  }
}
.cmp-text-image-carousel__img picture {
  display: block;
  height: 100%;
}
.cmp-text-image-carousel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-text-image-carousel__text {
  background-color: #26202e;
  padding: 32px 40px;
  position: relative;
  height: 100%;
  min-height: 463px;
}
@media screen and (max-width: 991px) {
  .cmp-text-image-carousel__text {
    order: 1;
    padding: 25px 20px;
    padding-bottom: 150px;
  }
}
.cmp-text-image-carousel__text .cmp-rte {
  color: #ffffff;
}
.cmp-text-image-carousel__text .cmp-rte h1 {
  font-size: 37px;
  line-height: 43px;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 16px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte h1 {
    font-size: 30px;
    line-height: 32px;
    margin: 0 0 12px;
  }
}
.cmp-text-image-carousel__text .cmp-rte h2 {
  font-size: 32px;
  line-height: 38px;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 14px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte h2 {
    font-size: 24px;
    line-height: 30px;
    margin: 0 0 10px;
  }
}
.cmp-text-image-carousel__text .cmp-rte h3 {
  font-size: 26px;
  line-height: 34px;
  color: #7a7482;
  font-weight: 500;
  margin: 0 0 12px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte h3 {
    font-size: 22px;
    line-height: 28px;
    margin: 0 0 8px;
  }
}
.cmp-text-image-carousel__text .cmp-rte h4 {
  font-size: 23px;
  line-height: 30px;
  color: #7a7482;
  font-weight: 500;
  margin: 0 0 10px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte h4 {
    font-size: 20px;
    line-height: 26px;
    margin: 0 0 8px;
  }
}
.cmp-text-image-carousel__text .cmp-rte h5 {
  font-size: 20px;
  line-height: 26px;
  color: #ffffff;
  font-weight: 500;
  margin: 0 0 8px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte h5 {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 6px;
  }
}
.cmp-text-image-carousel__text .cmp-rte h6 {
  font-size: 17px;
  line-height: 24px;
  color: #7a7482;
  font-weight: 500;
  margin: 0 0 8px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte h6 {
    font-size: 16px;
    line-height: 22px;
    margin: 0 0 6px;
  }
}
.cmp-text-image-carousel__text .cmp-rte p {
  font-size: 17px;
  line-height: 28px;
  margin: 0 0 14px;
  color: #ffffff;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte p {
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 10px;
  }
}
.cmp-text-image-carousel__text .cmp-rte p.subtitle {
  font-size: 17px;
  color: #7a7482;
  font-weight: 300;
}
.cmp-text-image-carousel__text .cmp-rte p.description {
  font-size: 16px;
  color: #E8E8E8;
  line-height: 24px;
}
.cmp-text-image-carousel__text .cmp-rte p.highlight {
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 17px;
}
.cmp-text-image-carousel__text .cmp-rte ul,
.cmp-text-image-carousel__text .cmp-rte ol {
  margin: 0 0 14px;
  padding-left: 20px;
  color: #ffffff;
}
.cmp-text-image-carousel__text .cmp-rte ul li,
.cmp-text-image-carousel__text .cmp-rte ol li {
  font-size: 17px;
  line-height: 28px;
  margin-bottom: 8px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte ul li,
  .cmp-text-image-carousel__text .cmp-rte ol li {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 6px;
  }
}
.cmp-text-image-carousel__text .cmp-rte blockquote {
  border-left: 4px solid #7a7482;
  padding-left: 16px;
  margin: 16px 0;
  font-style: italic;
  color: #7a7482;
  font-size: 18px;
  line-height: 26px;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte blockquote {
    font-size: 16px;
    line-height: 24px;
    margin: 12px 0;
    padding-left: 12px;
  }
}
.cmp-text-image-carousel__text .cmp-rte pre {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: 4px;
  color: #ffffff;
  font-family: monospace;
  font-size: 14px;
  line-height: 20px;
  margin: 16px 0;
  overflow-x: auto;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte pre {
    font-size: 12px;
    line-height: 18px;
    padding: 12px;
    margin: 12px 0;
  }
}
.cmp-text-image-carousel__text .cmp-rte hr {
  border: none;
  border-top: 1px solid #7a7482;
  margin: 24px 0;
}
@media screen and (max-width: 480px) {
  .cmp-text-image-carousel__text .cmp-rte hr {
    margin: 16px 0;
  }
}
.cmp-text-image-carousel__text .cmp-rte strong,
.cmp-text-image-carousel__text .cmp-rte b {
  font-weight: 700;
  color: #ffffff;
}
.cmp-text-image-carousel__text .cmp-rte em,
.cmp-text-image-carousel__text .cmp-rte i {
  font-style: italic;
  color: #7a7482;
}
.cmp-text-image-carousel__text .cmp-rte a {
  color: #7a7482;
  text-decoration: underline;
  transition: color 0.3s ease;
}
.cmp-text-image-carousel__text .cmp-rte a:hover {
  color: #ffffff;
  text-decoration: none;
}
.cmp-text-image-carousel__cta {
  position: absolute;
  bottom: 60px;
  left: 40px;
  padding: 16px 20px 10px 10px;
  background: #ffffff;
  color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 132px;
  height: 138px;
  font-size: 24px;
  line-height: 28px;
  text-decoration: none;
  transition: all 100ms ease;
}
.cmp-text-image-carousel__cta:hover {
  background: #feb940;
}
@media screen and (max-width: 991px) {
  .cmp-text-image-carousel__cta {
    bottom: 20px;
    top: auto;
    transform: none;
    left: 20px;
    width: 100px;
    height: 100px;
    padding: 12px 15px;
    font-size: 18px;
    line-height: 22px;
    z-index: 2;
  }
}
.cmp-text-image-carousel__cta .arrow-icon {
  display: flex;
  position: relative;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-bottom-left-radius: 8px;
}
.cmp-text-image-carousel__cta .arrow-icon svg {
  transform: translate(0, 0);
  transition: transform 0.4s linear;
  position: absolute;
  top: 16px;
  left: -14px;
  width: 34px;
  height: 34px;
}
.cmp-text-image-carousel__cta:hover .arrow-icon svg {
  transform: translate(14px, -14px);
}
.cmp-text-image-carousel__dam-video {
  height: 100%;
}
.cmp-text-image-carousel__dam-video .dam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-text-image-carousel__yt-video {
  position: relative;
  height: 100%;
}
.cmp-text-image-carousel__yt-video .yt-video__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.cmp-text-image-carousel__yt-video .yt-video__container {
  width: 100%;
  height: 100%;
}
.cmp-text-image-carousel__yt-video .yt-video__container iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-submission {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 20px 0;
}
@media screen and (max-width: 480px) {
  .project-submission {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 20px 0px 20px;
    margin-left: -15px;
    padding: 20px 15px;
  }
}
.project-submission__text {
  display: inline;
  white-space: normal;
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  color: #000000;
}
@media screen and (max-width: 480px) {
  .project-submission__text {
    font-size: 17px;
    line-height: 1.4;
  }
}
.project-submission__highlight {
  display: inline;
  color: #6700ff;
  font-weight: 500;
  white-space: normal;
  text-decoration: none;
  transition: color 0.3s ease;
}
.project-submission__highlight:hover {
  color: #5200cc;
  text-decoration: underline;
}
@media screen and (max-width: 480px) {
  .project-submission__highlight {
    display: block;
    margin-top: 8px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-video-listing__container {
  padding: 0 80px;
  max-width: 1440px;
  margin: 0 auto;
  margin-top: 75px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cmp-video-listing__container {
    padding-left: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-video-listing__container {
    margin-top: 76px  ;
    margin-bottom: 76px ;
  }
}
.cmp-video-listing__container.animate-section .cmp-video-listing__title {
  opacity: 1;
}
.cmp-video-listing__container.animate-section .cmp-video-listing__card-wrapper {
  transform: translateX(0);
}
.cmp-video-listing__title {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 40px;
  line-height: 47px;
  font-weight: 500;
  max-width: 630px;
  margin-left: auto;
  color: #26202e;
  text-align: left;
  margin-left: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
}
@media screen and (max-width: 768px) {
  .cmp-video-listing__title {
    font-size: 30px;
    line-height: 40px;
    padding-right: 20px;
  }
}
.cmp-video-listing__card-wrapper {
  margin-top: 62px;
  position: relative;
  transform: translateX(100%);
  transition: all 1s ease-in-out;
}
@media screen and (max-width: 768px) {
  .cmp-video-listing__card-wrapper {
    margin-top: 46px;
  }
}
.cmp-video-listing__card-wrapper .slick-track {
  display: flex;
}
.cmp-video-listing__card-wrapper .slick-arrow {
  position: absolute;
  top: -62px;
}
.cmp-video-listing__card-wrapper .slick-arrow::before {
  content: "";
}
.cmp-video-listing__card-wrapper .slick-next {
  right: 100px;
}
.cmp-video-listing__card-wrapper .slick-prev {
  left: calc(-80%);
}
.cmp-video-listing__card-wrapper .slick-disabled {
  opacity: 0.5;
}
.cmp-video-listing__card {
  background-color: #26202e;
  color: #ffffff;
  aspect-ratio: 0.76415094;
  margin-right: 50px;
}
@media screen and (max-width: 768px) {
  .cmp-video-listing__card {
    margin-right: 24px;
  }
}
.cmp-video-listing__info {
  height: 196px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  line-height: 2;
  text-align: left;
  font-size: 17px;
}
@media screen and (max-width: 480px) {
  .cmp-video-listing__info {
    font-size: 14px;
  }
}
.cmp-video-listing__description {
  font-size: 17px;
  line-height: 28px;
}
.cmp-video-listing__profile {
  display: flex;
  align-items: center;
  padding-top: 80px;
}
@media screen and (max-width: 768px) {
  .cmp-video-listing__profile {
    padding-top: 20px;
  }
}
.cmp-video-listing__profile .profile__details {
  margin-left: 18px;
}
.cmp-video-listing__profile .profile__name,
.cmp-video-listing__profile .profile__position {
  font-size: 17px;
  line-height: 24px;
}
.cmp-video-listing__profile .profile__name {
  font-weight: 700;
}
@media screen and (max-width: 480px) {
  .cmp-video-listing__profile .profile__name {
    font-size: 14px;
  }
}
.cmp-video-listing__profile .profile__position {
  font-weight: 300;
}
@media screen and (max-width: 480px) {
  .cmp-video-listing__profile .profile__position {
    font-size: 14px;
  }
}
.cmp-video-listing__profile .profile__img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}
.cmp-video-listing__profile .profile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.cmp-video-listing__video-card {
  padding: 0;
  background-color: transparent;
}
.cmp-video-listing__video-card .video-card {
  position: relative;
}
.cmp-video-listing__video-card .video-card__thumbnail picture {
  display: block;
  height: 100%;
}
.cmp-video-listing__video-card .video-card__thumbnail picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-video-listing__video-card .video-card__thumbnail .thumbnail-image {
  position: relative;
  width: 100%;
  aspect-ratio: 0.76415094;
}
.cmp-video-listing__video-card .video-card__thumbnail-backdrop {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}
.cmp-video-listing__video-card .video-card__profile {
  position: absolute;
  bottom: 32px;
  left: 38px;
}
.cmp-video-listing__video-card .video-card__profile .video-play-btn {
  cursor: pointer;
  width: 48px;
  height: 48px;
}
.cmp-video-listing__video-card .video-card__profile .profile__name,
.cmp-video-listing__video-card .video-card__profile .profile__position {
  font-size: 17px;
  line-height: 24px;
  color: #ffffff;
}
.cmp-video-listing__video-card .video-card__profile .profile__name {
  font-weight: 700;
  margin-top: 10px;
}
.cmp-video-listing__video-card .video-card__profile .profile__position {
  font-weight: 300;
}
.cmp-video-listing__video-card .video-card__video {
  display: none;
  width: 100%;
  aspect-ratio: 0.76415094;
  object-fit: cover;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-hzntl-icon-list {
  max-width: 1440px;
  margin: 0 auto;
}
.cmp-hzntl-icon-list__text-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 34px;
}
.cmp-hzntl-icon-list__text-wrapper {
  grid-column-start: 1;
  grid-column-end: 5;
  font-size: 42px;
  font-weight: 300;
}
.cmp-hzntl-icon-list__text-wrapper--start-col-2 {
  grid-column-start: 2;
}
@media screen and (max-width: 768px) {
  .cmp-hzntl-icon-list__text-wrapper--start-col-2 {
    grid-column-start: 1;
  }
}
.cmp-hzntl-icon-list__text-wrapper--start-col-3 {
  grid-column-start: 3;
}
@media screen and (max-width: 768px) {
  .cmp-hzntl-icon-list__text-wrapper--start-col-3 {
    grid-column-start: 1;
  }
}
.cmp-hzntl-icon-list__text-wrapper--start-col-4 {
  grid-column-start: 4;
}
@media screen and (max-width: 768px) {
  .cmp-hzntl-icon-list__text-wrapper--start-col-4 {
    grid-column-start: 1;
  }
}
.cmp-hzntl-icon-list__heading {
  margin-bottom: 30px;
}
.cmp-hzntl-icon-list__description {
  font-size: 15px;
  line-height: 28px;
  color: #26202e;
  width: 255px;
  min-height: 100px;
  margin-bottom: 20px;
}
.cmp-hzntl-icon-list__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}
@media screen and (max-width: 1200px) {
  .cmp-hzntl-icon-list__content {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-hzntl-icon-list__content {
    grid-template-columns: 1fr;
    row-gap: 30px;
    justify-items: center;
  }
}
.cmp-hzntl-icon-list__icon-link {
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .cmp-hzntl-icon-list__icon-link {
    opacity: 1;
  }
}
.cmp-hzntl-icon-list__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  height: 100%;
}
.cmp-hzntl-icon-list__main-icon {
  position: relative;
  width: 58px;
  aspect-ratio: 1;
  margin-bottom: 25px;
  transition: 300ms all ease-out;
  right: 100px;
  margin-top: 39px;
}
@media screen and (max-width: 480px) {
  .cmp-hzntl-icon-list__main-icon {
    width: 64px;
  }
}
.cmp-hzntl-icon-list__link-text {
  font-size: 22px;
  line-height: 44px;
  color: #26202e;
  margin-right: 17px;
}
@media screen and (max-width: 480px) {
  .cmp-hzntl-icon-list__link-text {
    font-size: 24px;
    line-height: 32px;
  }
}
.cmp-hzntl-icon-list__arrow-icons-wrapper {
  height: 16px;
  width: 16px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.cmp-hzntl-icon-list__icon-link:hover .cmp-hzntl-icon-list__arrow-icons {
  transform: translate(calc(84%), calc(-84%));
}
.cmp-hzntl-icon-list__icon-link:hover .cmp-hzntl-icon-list__main-icon {
  transform: scale(1.2);
}
.cmp-hzntl-icon-list__arrow-icons {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 300ms ease-out;
}
.cmp-hzntl-icon-list__arrow-icon {
  height: 16px;
  width: 16px;
  position: absolute;
}
.cmp-hzntl-icon-list__arrow-icon:first-child {
  top: 0;
  right: 0;
}
.cmp-hzntl-icon-list__arrow-icon:last-child {
  bottom: 0;
  left: 0;
}
@keyframes icon-1 {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes icon-2 {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes icon-3 {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes icon-4 {
  0% {
    opacity: 0;
    transform: translateY(150%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.cmp-hzntl-icon-list__animate-icon-1 {
  animation: icon-1 500ms ease-out forwards 100ms 1;
}
@media screen and (max-width: 768px) {
  .cmp-hzntl-icon-list__animate-icon-1 {
    animation: none;
  }
}
.cmp-hzntl-icon-list__animate-icon-2 {
  animation: icon-2 500ms ease-out forwards 100ms 1;
}
@media screen and (max-width: 768px) {
  .cmp-hzntl-icon-list__animate-icon-2 {
    animation: none;
  }
}
.cmp-hzntl-icon-list__animate-icon-3 {
  animation: icon-3 500ms ease-out forwards 100ms 1;
}
@media screen and (max-width: 768px) {
  .cmp-hzntl-icon-list__animate-icon-3 {
    animation: none;
  }
}
.cmp-hzntl-icon-list__animate-icon-4 {
  animation: icon-4 500ms ease-out forwards 100ms 1;
}
@media screen and (max-width: 768px) {
  .cmp-hzntl-icon-list__animate-icon-4 {
    animation: none;
  }
}
.cmp-hzntl-icon-list__item {
  position: relative;
  padding: 0 31px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.cmp-hzntl-icon-list__item.with-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-left: 1px solid #26202e;
  min-height: 100%;
}
@media screen and (max-width: 991px) {
  .cmp-hzntl-icon-list__item.with-border::before {
    display: block;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-data-metrics {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-data-metrics {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-data-metrics {
    padding: 0 20px;
  }
}
.cmp-data-metrics.comp-padding-block {
  padding-block: 0px;
  margin-top: 75px;
  margin-bottom: 75px;
}
@media screen and (max-width: 480px) {
  .cmp-data-metrics.comp-padding-block {
    margin-top: 35px  ;
    margin-bottom: 35px ;
  }
}
.cmp-data-metrics__heading-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 34px;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__heading-container {
    margin-bottom: 30px;
  }
}
.cmp-data-metrics__heading {
  grid-column-start: 1;
  grid-column-end: 5;
  font-size: 40px;
  font-weight: 700;
  line-height: 55px;
  opacity: 0;
}
.cmp-data-metrics__heading--start-col-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__heading--start-col-1 {
    grid-column-start: 1;
    grid-column-end: 4;
  }
}
.cmp-data-metrics__heading--start-col-2 {
  grid-column-start: 2;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__heading--start-col-2 {
    grid-column-start: 1;
    grid-column-end: 4;
  }
}
.cmp-data-metrics__heading--start-col-3 {
  grid-column-start: 3;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__heading--start-col-3 {
    grid-column-start: 1;
  }
}
.cmp-data-metrics__heading--start-col-4 {
  grid-column-start: 4;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__heading--start-col-4 {
    grid-column-start: 1;
  }
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__heading {
    font-size: 30px;
    opacity: 1;
    font-weight: 600;
    line-height: 40px;
  }
}
.cmp-data-metrics__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: left;
  margin-top: 56px;
}
@media screen and (max-width: 1200px) {
  .cmp-data-metrics__content {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-data-metrics__content {
    justify-items: start;
    row-gap: 24px;
    column-gap: 30px;
  }
}
.cmp-data-metrics__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  margin-left: 0px;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__metric {
    opacity: 1;
    margin-left: 0px;
  }
}
.cmp-data-metrics__number {
  font-size: 85px;
  font-weight: 300;
  color: #26202e;
}
@media screen and (max-width: 480px) {
  .cmp-data-metrics__number {
    font-size: 40px;
    line-height: 100%;
  }
}
.cmp-data-metrics__name {
  font-size: 22px;
  font-weight: 300;
  color: #26202e;
  max-width: 15ch;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__name {
    font-size: 17px;
    line-height: 24px;
  }
}
.cmp-data-metrics--home .cmp-data-metrics__number {
  font-size: 85px;
}
@media screen and (max-width: 480px) {
  .cmp-data-metrics--home .cmp-data-metrics__number {
    font-size: 40px;
    line-height: 100%;
  }
}
.cmp-data-metrics--about .cmp-data-metrics__number {
  font-size: 64px;
}
@media screen and (max-width: 480px) {
  .cmp-data-metrics--about .cmp-data-metrics__number {
    font-size: 32px;
    line-height: 100%;
  }
}
@keyframes heading {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes metric {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.cmp-data-metrics__animate-heading {
  animation: heading 500ms ease-out forwards 100ms 1;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__animate-heading {
    animation: none;
  }
}
.cmp-data-metrics__animate-metric {
  animation: metric 500ms ease-out forwards 100ms 1;
}
@media screen and (max-width: 768px) {
  .cmp-data-metrics__animate-metric {
    animation: none;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
@media screen and (max-width: 768px) {
  .cmp-product-listing {
    margin: 0 20px;
    margin-top: 30px;
  }
}
.cmp-product-listing-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-filters-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.cmp-product-listing-filters-title-container {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 24px;
  border-bottom: 2px solid #7a7482;
}
.cmp-product-listing-filters-title-container.single-item {
  cursor: default;
  gap: 0;
  border-bottom: none !important;
}
.cmp-product-listing__bookmark-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
  align-items: center;
  justify-content: center;
}
.cmp-product-listing__bookmark-modal--visible {
  display: flex;
}
.cmp-product-listing-filters-title {
  font-size: 42px;
  font-weight: 600;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-filters-title {
    font-size: 24px;
  }
}
.cmp-product-listing-dropdown-icon {
  margin-top: 20px;
  margin-right: 15px;
  width: 26px;
  height: 26px;
  transition: transform 0.3s ease;
  flex: 0 0 auto;
}
.cmp-product-listing-dropdown-icon.active {
  transform: rotate(180deg);
}
.cmp-product-listing-dropdown-menu {
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 20;
  display: none;
  margin-top: 2px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e5e5e5;
}
.cmp-product-listing-dropdown-menu.active {
  display: block;
  align-items: center;
}
.cmp-product-listing-dropdown-item {
  display: block;
  padding: 12px 16px;
  color: #26202e;
  text-decoration: none;
  font-size: 14px;
}
.cmp-product-listing-dropdown-item:hover {
  background-color: #f5f5f5;
}
.cmp-product-listing-dropdown-item:not(:last-child) {
  border-bottom: 1px solid #e5e5e5;
}
.cmp-product-listing-filters-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #5b5661;
  margin: 0;
}
.cmp-product-listing-filters-icon:hover {
  color: #26202e;
}
.cmp-product-listing-filters-icon span {
  margin-left: 5px;
  font-size: 17px;
}
@media screen and (max-width: 480px) {
  .cmp-product-listing-filters-icon {
    margin-top: 0;
  }
}
.cmp-product-listing-filter-icon {
  width: 24px;
  height: 24px;
  stroke: #26202e;
  transition: stroke 0.2s ease;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-filter-icon {
    width: 20px;
    height: 20px;
  }
}
.cmp-product-listing-filter-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
}
.cmp-product-listing-filter-popup.active {
  display: flex;
  justify-content: center;
}
.cmp-product-listing-filter-popup-content {
  background-color: #ffffff;
  width: 375px;
  height: 667px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: auto;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-filter-popup-content {
    max-width: 95%;
    height: 550px;
    max-height: 100%;
    border-radius: 0;
  }
}
.cmp-product-listing-filter-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 25px;
  border-bottom: 1px solid #26202e;
  cursor: pointer;
}
.cmp-product-listing-filter-popup-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #26202e;
  margin-top: 10px;
}
.cmp-product-listing-filter-popup-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #26202e;
  margin-top: 10px;
}
.cmp-product-listing-filter-popup-close:hover {
  color: #26202e;
}
.cmp-product-listing-filter-popup-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.cmp-product-listing-filter-popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.cmp-product-listing-filter-layout {
  display: flex;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-filter-layout {
    flex-direction: row;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-listing-filter-layout {
    flex-direction: row;
  }
}
.cmp-product-listing-filter-categories {
  width: 50%;
  border-right: 1px solid #e5e5e5;
  overflow-y: auto;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-filter-categories {
    width: 50%;
    border-right: 1px solid #e5e5e5;
    border-bottom: none;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-listing-filter-categories {
    width: 50%;
    border-right: 1px solid #e5e5e5;
    border-bottom: none;
  }
}
.cmp-product-listing-filter-options-container {
  width: 50%;
  overflow-y: auto;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-filter-options-container {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-listing-filter-options-container {
    width: 50%;
  }
}
.cmp-product-listing-filter-category {
  padding: 15px 20px;
  cursor: pointer;
}
.cmp-product-listing-filter-category.active {
  background-color: #f5f5f5;
  border-left: 3px solid #f5f5f5;
}
.cmp-product-listing-filter-category h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: #5b5661;
  display: flex;
  justify-content: space-between;
}
.cmp-product-listing-filter-category h4 span {
  color: #5b5661;
  font-weight: 500;
  margin-right: 15px;
}
.cmp-product-listing-filter-options {
  padding: 15px 20px;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.cmp-product-listing-filter-options.active {
  display: flex;
}
.cmp-product-listing-filter-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
}
.cmp-product-listing-filter-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
.cmp-product-listing-filter-option input[type="checkbox"]:checked + .cmp-product-listing-filter-checkbox {
  background-color: #26202e;
  border-color: #26202e;
}
.cmp-product-listing-filter-option input[type="checkbox"]:checked + .cmp-product-listing-filter-checkbox:after {
  display: block;
}
.cmp-product-listing-filter-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid #5b5661;
  border-radius: 2px;
  margin-right: 8px;
  position: relative;
}
.cmp-product-listing-filter-checkbox:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cmp-product-listing-filter-label {
  font-size: 17px;
  color: #26202e;
}
.cmp-product-listing-filter-popup-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  border-top: 1px solid #e5e5e5;
}
.cmp-product-listing-filter-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cmp-product-listing-clear-btn {
  background-color: #474150;
  color: #ffffff;
  margin-left: 130px;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-clear-btn {
    margin-left: 100px;
  }
}
.cmp-product-listing-apply-btn {
  background-color: #feb940;
  color: #ffffff;
}
.cmp-product-listing-apply-btn:hover {
  background-color: #fea60d;
}
.cmp-product-listing-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-active-filters {
    margin-left: 0px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-listing-active-filters {
    margin-left: 0px;
  }
}
.cmp-product-listing-filter-tag {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #F0EAF7;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  color: #26202e;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cmp-product-listing-filter-tag:hover {
  background-color: #e8e8e8;
}
.cmp-product-listing-filter-tag span {
  margin-right: 8px;
}
.cmp-product-listing-filter-tag .cmp-product-listing-close-icon {
  width: 14px;
  height: 14px;
  stroke: #26202e;
}
.cmp-product-listing-filter-tag.cmp-product-listing-filter-tag-botanical {
  background-color: #f0eaf7;
}
.cmp-product-listing-filter-tag.cmp-product-listing-filter-tag-floral {
  background-color: #f0eaf7;
}
.cmp-product-listing-filter-tag.cmp-product-listing-filter-tag-geometric {
  background-color: #f0eaf7;
}
.cmp-product-listing-clear-all-btn {
  background: none;
  border: none;
  color: #6700ff;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 12px;
  font-weight: 500;
}
.cmp-product-listing-clear-all-btn:hover {
  text-decoration: underline;
}
.cmp-product-listing-container {
  font-family: Arial, sans-serif;
  align-items: center;
  margin-top: 40px;
  margin: 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-container {
    max-width: 100%;
  }
}
.cmp-product-listing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 100%;
}
@media screen and (max-width: 1200px) {
  .cmp-product-listing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-listing-grid {
    grid-template-columns: 1fr;
  }
}
.cmp-product-listing-card-wrapper {
  margin: 10px 0;
}
.cmp-product-listing-card {
  width: 100%;
  height: 350px;
  overflow: hidden;
}
.cmp-product-listing-image {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.cmp-product-listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: transparent;
}
.cmp-product-listing-bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: transparent;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.cmp-product-listing-bookmark {
  background: #F2F2F2;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cmp-product-listing-bookmark svg {
  width: 24px;
  height: 24px;
  display: block;
}
.cmp-product-listing-name {
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0%;
  font-weight: 400;
  color: #26202e;
  margin: 20px 0 20px 0;
}
.cmp-product-listing-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
}
.cmp-product-listing-count {
  font-size: 15px;
  color: #7a7482;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0%;
  margin-bottom: 15px;
}
.cmp-product-listing-load-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: hug(155px);
  height: fixed(48px);
  padding: 12px 12px 12px 12px;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0%;
  background: none;
  color: #26202e;
}
.cmp-product-listing-load-more .cmp-product-listing-load-more__icon {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-left: 5px;
  display: inline-block;
}
.cmp-product-listing-load-more__icon.up {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.cmp-product-listing-card-wrapper.hidden-card {
  display: none !important;
}
.cmp-product-listing-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cmp-product-listing-filters-title-container {
  min-width: 489px;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .cmp-product-listing-filters-title-container {
    min-width: auto;
    max-width: 100%;
    width: 489px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-similar-products-carousel {
  width: 100%;
  position: relative;
}
.cmp-similar-products-carousel__title,
.cmp-similar-products-carousel__sub-title {
  font-family: 'Noto Serif', serif;
}
.cmp-similar-products-carousel__sub-title {
  font-weight: 500;
}
.cmp-similar-products-carousel__link {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 2px;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products-carousel__link {
    margin-top: 0;
  }
}
.cmp-similar-products-carousel__icon-wrapper {
  position: relative;
  height: 20px;
  width: 20px;
  transition: all 300ms ease-in-out;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products-carousel__icon-wrapper {
    width: 14px;
    height: 14px;
  }
}
.cmp-similar-products-carousel__icon-wrapper:hover {
  height: 34px;
  width: 34px;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products-carousel__icon-wrapper:hover {
    width: 14px;
    height: 14px;
  }
}
.cmp-similar-products-carousel__arrow-icon {
  position: absolute;
  height: 34px;
  width: 34px;
  top: 0;
  right: 0;
}
.cmp-similar-products-carousel__wrapper {
  list-style-type: none;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products-carousel__wrapper {
    padding-top: 26px !important;
  }
}
.cmp-similar-products-carousel__item {
  margin-right: 20px;
  width: 305px;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products-carousel__item {
    margin-right: 0;
  }
}
.cmp-similar-products-carousel__card-image {
  min-width: 305px;
}
.cmp-similar-products-carousel__variations {
  display: flex;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.content-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  width: 100%;
}
@media screen and (max-width: 1200px) {
  .content-wrapper {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .content-wrapper {
    padding: 0 20px;
  }
}
.cmp-explore-gallery {
  height: 333px;
  display: flex;
  margin-top: 30px;
  background: #26202e;
  position: relative;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 991px) {
  .cmp-explore-gallery {
    flex-direction: column;
    width: 100%;
    height: 666px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery {
    height: 890px;
    flex-direction: column;
  }
}
.cmp-explore-gallery__top-heading {
  position: relative;
  top: 139px;
  margin-top: -70px;
  font-size: 32px;
  font-weight: 300;
  color: #26202e;
}
@media screen and (max-width: 991px) {
  .cmp-explore-gallery__top-heading {
    width: 280px;
  }
}
.cmp-explore-gallery__top-heading-category {
  font-weight: 700;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__top-heading {
    margin-bottom: 40px;
    font-size: 17px;
    line-height: 28px;
    width: 150px;
  }
}
.cmp-explore-gallery__carousel-wrapper {
  position: relative;
}
.cmp-explore-gallery__left {
  width: 49.21%;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 991px) {
  .cmp-explore-gallery__left {
    width: 100%;
    height: 333px;
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
  }
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__left {
    height: 390px;
    width: 100%;
    border-bottom: 1px solid #ffffff;
  }
}
.cmp-explore-gallery__carousel {
  display: block;
  width: 100%;
  height: 225px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__carousel {
    height: 224px;
    aspect-ratio: 1.57657658;
  }
}
.cmp-explore-gallery__left-image {
  width: 100%;
  height: 225px;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__left-image {
    aspect-ratio: 1.57657658;
  }
}
.cmp-explore-gallery__link {
  font-size: 17px;
  color: #feb940;
  display: flex;
  align-items: center;
  text-decoration: none;
  position: absolute;
  bottom: 57px;
  right: 30px;
}
.cmp-explore-gallery__link-title {
  color: #feb940;
  font-weight: 500;
  font-size: 17px;
  padding-right: 5px;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__link {
    position: absolute;
    bottom: 20px;
    left: 30px;
  }
}
.cmp-explore-gallery__link--right {
  position: static;
  margin-top: 15px;
}
.cmp-explore-gallery__link:hover .cmp-explore-gallery__icon {
  transform: translateX(3px);
}
.cmp-explore-gallery__content {
  font-size: 14px;
  font-weight: 500;
  color: #7a7482;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 30px;
}
.cmp-explore-gallery__content--right {
  margin-top: 0;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 20px 30px;
  height: auto;
  min-height: 30%;
  border-bottom: 1px solid #ffffff;
  position: relative;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__content--right {
    min-height: 180px;
    padding: 20px;
  }
}
.cmp-explore-gallery__content--right .cmp-explore-gallery__content-title {
  margin-bottom: 0;
  padding-bottom: 0;
  order: 1;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__content--right .cmp-explore-gallery__content-title {
    margin-left: 5px;
  }
}
.cmp-explore-gallery__content--right .cmp-explore-gallery__content-description {
  margin-bottom: 0;
  order: 2;
  flex-basis: auto;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__content--right .cmp-explore-gallery__content-description {
    margin-left: 5px;
  }
}
.cmp-explore-gallery__content--right .cmp-explore-gallery__link--right {
  margin-left: 0;
  margin-top: 0;
  position: absolute;
  right: 30px;
  bottom: 55px;
  order: 3;
}
.cmp-explore-gallery__content--right .cmp-explore-gallery__link--right .cmp-explore-gallery__link-title {
  color: #feb940;
  font-weight: 500;
  font-size: 17px;
  padding-right: 5px;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__content--right .cmp-explore-gallery__link--right {
    position: absolute;
    bottom: 20px;
    left: 30px;
  }
}
.cmp-explore-gallery__content-title {
  color: #ffffff;
  font-size: 17px;
  font-weight: 300;
  line-height: 28px;
  padding-bottom: 10px;
  margin-top: 5px;
}
.cmp-explore-gallery__content-description {
  color: #7a7482;
  font-size: 14px;
  font-weight: 500;
}
.cmp-explore-gallery__icon {
  width: 17px;
  height: 16px;
}
.cmp-explore-gallery__icon--top-right {
  width: 96px;
  height: 160px;
}
.cmp-explore-gallery__right {
  width: 50.79%;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  border-left: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
@media screen and (max-width: 991px) {
  .cmp-explore-gallery__right {
    width: 100%;
    height: 333px;
  }
  .cmp-explore-gallery__right .cmp-explore-gallery__right-carousel {
    order: 1;
  }
  .cmp-explore-gallery__right .cmp-explore-gallery__content--right {
    order: 2;
  }
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__right {
    width: 100%;
    height: 500px;
  }
  .cmp-explore-gallery__right .cmp-explore-gallery__right-carousel {
    order: 1;
  }
  .cmp-explore-gallery__right .cmp-explore-gallery__content--right {
    order: 2;
  }
}
.cmp-explore-gallery__right-carousel {
  height: 70%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__right-carousel {
    height: 220px;
  }
}
.cmp-explore-gallery__right-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cmp-explore-gallery__right-bottom {
  height: 50%;
  position: relative;
  overflow: hidden;
}
.cmp-explore-gallery__right-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__right-bottom img {
    height: 220px;
    object-fit: cover;
    object-position: center;
  }
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__right-bottom {
    height: 220px;
    object-fit: cover;
    object-position: center;
  }
}
.cmp-explore-gallery__right-top {
  display: flex;
  flex-direction: row;
  height: 50%;
  border-bottom: 1px solid #ffffff;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__right-top {
    height: 100%;
    flex-direction: column;
  }
}
.cmp-explore-gallery__right-top-left {
  position: relative;
  width: 50%;
  border-right: 1px solid #ffffff;
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  .cmp-explore-gallery__right-top-left {
    border-bottom: 3px solid #ffffff;
  }
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__right-top-left {
    height: 180px;
    width: 100%;
    border-bottom: 1px solid #ffffff;
  }
}
.cmp-explore-gallery__right-top-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cmp-explore-gallery__right-top-right {
  width: 50%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  .cmp-explore-gallery__right-top-right {
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
  }
}
.cmp-explore-gallery__right-top-right-icon {
  position: absolute;
  bottom: -50px;
  right: 0;
  overflow: hidden;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__right-top-right {
    height: 160px;
    width: 100%;
    border-left: none;
    border-bottom: none;
  }
}
.cmp-explore-gallery__description {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cmp-explore-gallery__progress-container {
  display: flex;
  gap: 8px;
  position: absolute;
  top: 15px;
  right: 30px;
  width: auto;
  max-width: 90%;
  padding: 0;
  z-index: 10;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cmp-explore-gallery__progress-container::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__progress-container {
    max-width: 250px;
  }
}
.cmp-explore-gallery__progress-bar {
  flex: 0 0 auto;
  min-width: 25px;
  max-width: 40px;
  height: 5px;
  background: #ffffff;
  border: 1px solid #fff;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.cmp-explore-gallery__progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #26202e;
  border-radius: 8px;
  transition: none;
  z-index: 1;
}
.cmp-explore-gallery__progress-bar.active::after {
  width: 100%;
  transition: width 4000ms linear;
}
.cmp-explore-gallery__progress-bar.completed::after {
  width: 100%;
  transition: none;
}
.cmp-explore-gallery__counter {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 20px 0;
  position: relative;
  gap: 20px;
  top: 78px;
  right: 70px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.cmp-explore-gallery__counter-text {
  font-size: 32px;
  font-weight: 300;
  color: #a29baa;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__counter-text {
    font-size: 22px;
    padding: 4px 12px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__counter {
    top: 68px;
    right: 28px;
  }
}
.cmp-explore-gallery__nav {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  gap: 65px;
  top: 10px;
  right: 0px;
  z-index: 1;
  font-size: 32px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__nav {
    gap: 30px;
    margin-top: 5px;
  }
}
.cmp-explore-gallery__prev,
.cmp-explore-gallery__next {
  height: 60px;
  width: 60px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C7C7C7;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__prev,
  .cmp-explore-gallery__next {
    height: 40px;
    width: 40px;
  }
}
.cmp-explore-gallery__prev:active,
.cmp-explore-gallery__next:active {
  transform: scale(0.95);
}
.cmp-explore-gallery__prev:disabled,
.cmp-explore-gallery__next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #C7C7C7;
}
.cmp-explore-gallery__prev:disabled:hover,
.cmp-explore-gallery__next:disabled:hover {
  background-color: transparent;
  transform: none;
}
.cmp-explore-gallery__prev.active,
.cmp-explore-gallery__next.active {
  color: #26202e;
}
.cmp-explore-gallery__prev svg,
.cmp-explore-gallery__next svg {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.cmp-explore-gallery__prev svg path,
.cmp-explore-gallery__next svg path {
  transition: stroke 0.3s ease, fill 0.3s ease;
}
.cmp-explore-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cmp-explore-gallery__footer {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  color: #26202e;
  margin-bottom: 40px;
}
.cmp-explore-gallery__footer-link {
  text-decoration: none;
  display: inline;
  color: #6700ff;
  font-weight: 500;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  .cmp-explore-gallery__footer {
    font-size: 17px;
    line-height: 24px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.ap-grid-bg {
  display: flex;
  justify-content: space-between;
  padding: 0 79px;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 0;
  overflow: hidden;
}
.ap-grid-bg--no-stripe .ap-grid-bg .ap-grid-bg__wrapper {
  display: none;
}
.ap-grid-bg--no-lines .ap-grid-bg {
  display: none;
}
.ap-grid-bg__item {
  border-left: 1px solid #dbdbdb;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ap-grid-bg__item:last-child {
  border-right: 1px solid #dbdbdb;
}
.ap-grid-bg__item:first-child {
  gap: 2419px;
  padding-top: 2880px;
}
.ap-grid-bg__item:nth-child(2) {
  gap: 1020px;
  padding-top: 1990px;
}
.ap-grid-bg__item:nth-child(3) {
  gap: 2900px;
  padding-top: 990px;
}
.ap-grid-bg--lines-3 .ap-grid-bg__item:nth-child(2) {
  display: none;
}
.ap-grid-bg--lines-3 .ap-grid-bg__item:nth-child(3) {
  display: none;
}
.ap-grid-bg__wrapper {
  width: 100%;
}
.ap-grid-bg__img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .ap-grid-bg {
    padding: 0 20px;
  }
  .ap-grid-bg__item:nth-child(2) {
    display: none;
  }
  .ap-grid-bg__item:nth-child(3) {
    display: none;
  }
  .ap-grid-bg__wrapper {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .ap-grid-bg {
    padding: 0 20px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-login {
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  /** Mobile responsive **/
}
.cmp-login--show {
  display: block;
}
.cmp-login__bk-drop {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
}
.cmp-login__btn-bk {
  margin-right: 6px;
}
.cmp-login__container {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  min-width: 456px;
  overflow-y: auto;
  padding: 40px 0;
  width: 31.5%;
}
.cmp-login__container--register {
  padding-bottom: 30px;
}
.cmp-login__container--success {
  height: auto;
  left: 50%;
  margin: 0 auto;
  padding: 56px 20px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
}
.cmp-login__show-blk {
  display: flex;
}
.cmp-login__hide-blk {
  display: none;
}
.cmp-login__header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  width: 100%;
}
.cmp-login__header-content {
  display: flex;
  align-items: center;
}
.cmp-login__logo {
  display: inline-block;
  width: 93px;
}
.cmp-login__logo-img {
  width: 100%;
}
.cmp-login__heading-txt {
  color: #26202e;
  font-size: 22px;
  font-weight: 500;
}
.cmp-login__footer {
  padding: 0 40px;
  margin-top: auto;
}
.cmp-login__footer--cta {
  border-top: 1px solid #e5e5e5;
  padding-top: 20px;
}
.cmp-login__footer-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cmp-login__footer-cta .btn {
  margin-left: auto;
}
.cmp-login__terms {
  color: #7a7482;
  font-size: 14px;
  font-weight: 500;
}
.cmp-login__terms-list {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}
.cmp-login__terms-item-divider {
  align-self: center;
  background: #c7c7c7;
  height: 10px;
  width: 1px;
}
.cmp-login__content {
  font-family: 'Noto Serif', serif;
  padding: 42px 40px 32px;
}
.cmp-login__content-heading {
  font-size: 32px;
  font-weight: 300;
}
.cmp-login__home-form {
  padding: 40px 0;
}
.cmp-login__home-form .form-field {
  padding-bottom: 24px;
}
.cmp-login__home-form .form-check {
  margin-top: 16px;
}
.cmp-login__register-link {
  color: #5b5661;
  font-size: 17px;
}
.cmp-login__register-progress {
  background: #c7c7c7;
  height: 3px;
  margin-top: 16px;
  width: 100%;
}
.cmp-login__register-bar {
  background: #5b5661;
  height: 3px;
}
.cmp-login__register-bar--step-1 {
  width: 33.33%;
}
.cmp-login__register-bar--step-2 {
  width: 66.66%;
}
.cmp-login__register-bar--step-3 {
  width: 100%;
}
.cmp-login__register-main {
  padding: 24px 40px;
}
.cmp-login__step-title {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
}
.cmp-login__step-title-txt {
  font-size: 17px;
  font-weight: 700;
}
.cmp-login__step-title-opt {
  color: #7a7482;
  font-weight: 400;
}
.cmp-login__step-back-icon {
  background: none;
  height: 24px;
  padding: 0;
  width: 24px;
}
.cmp-login .pincode-field {
  max-width: 180px;
}
.cmp-login__otp-txt {
  font-size: 17px;
  padding: 104px 0 44px;
}
.cmp-login__otp-txt-no {
  font-weight: 700;
}
.cmp-login__success-content {
  display: flex;
  flex-direction: column;
  font-size: 17px;
  align-items: center;
}
.cmp-login__success-content .btn {
  margin-top: 32px;
}
.cmp-login__success-icon {
  width: 160px;
}
.cmp-login__success-txt {
  font-size: 22px;
  font-weight: 600;
  padding: 32px 0 16px;
}
.cmp-login__terms {
  color: #a29baa;
  font-size: 14px;
  font-weight: 500;
}
.cmp-login__terms h4 {
  color: #5b5661;
  font-weight: 700;
  font-size: 17px;
}
.cmp-login__terms p {
  padding: 16px 0 32px 0;
}
@media screen and (max-width: 480px) {
  .cmp-login__container {
    min-width: 100%;
  }
  .cmp-login__content-heading {
    font-size: 22px;
  }
}

/* styles.css */
/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-breadcrumb {
  margin: 0 auto;
}
.cmp-breadcrumb__wrapper {
  width: 1440px;
  padding: 0 80px;
  max-width: 1440px;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  vertical-align: middle;
}
@media screen and (max-width: 1200px) {
  .cmp-breadcrumb__wrapper {
    padding: 0 40px;
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .cmp-breadcrumb__wrapper {
    padding: 0 20px;
    max-width: 100%;
    width: 100%;
  }
}
.cmp-breadcrumb__list-wrapper {
  list-style: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cmp-breadcrumb__list-item {
  display: inline-block;
  margin-right: 5px;
}
.cmp-breadcrumb__link {
  color: #6700ff;
  text-decoration: none;
}
.cmp-breadcrumb__list-item:last-child .cmp-breadcrumb__link {
  color: #7a7482;
}
.cmp-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  margin: 0 5px;
}
.cmp-breadcrumb__list-item:not(:last-child):after {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  vertical-align: middle;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-model-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  background: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cmp-model-container {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px;
  gap: 32px;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .cmp-model-container {
    padding: 42px 20px;
    margin: 10px;
    width: 90%;
  }
}
.cmp-model-title {
  color: #26202e;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}
.cmp-model-show {
  display: flex;
}
.cmp-model-hide {
  display: none;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-my-requests {
  max-width: 1440px;
  margin: 30px auto;
  padding-top: 48px;
  padding: 80px;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .cmp-my-requests {
    padding: 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-my-requests {
    padding-top: 54px;
    padding: 10px 20px;
    padding-top: 80px;
  }
}
.cmp-my-requests__title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 32px;
}
@media screen and (max-width: 480px) {
  .cmp-my-requests__title-wrapper {
    flex-direction: column;
    align-items: unset;
  }
}
.cmp-my-requests__title {
  font-size: 42px;
  font-weight: 800;
}
@media screen and (max-width: 480px) {
  .cmp-my-requests__title {
    font-size: 30px;
    padding-bottom: 24px;
  }
}
.cmp-my-requests__filter-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 34px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  flex-wrap: nowrap;
  width: 100%;
}
.cmp-my-requests__filter-buttons::-webkit-scrollbar {
  display: none;
}
.cmp-my-requests__filter-buttons .filter-btn {
  flex-shrink: 0;
  border: 1px solid #c7c7c7;
  background-color: transparent;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 30px;
}
.cmp-my-requests__filter-buttons .filter-btn.active {
  background-color: #26202e;
  color: #ffffff;
  border-color: #26202e;
}
.cmp-my-requests__filter-buttons .filter-btn:hover:not(.active) {
  border-color: #26202e;
  color: #26202e;
}
.cmp-my-requests__card-list-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.cmp-my-requests__no-results {
  width: 100%;
  margin: 20px 0;
}
.cmp-my-requests__no-request-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cmp-my-requests__no-request-section {
  max-width: 649px;
  width: 100%;
  background: #f5f5f5;
  padding: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .cmp-my-requests__no-request-section {
    padding: 56px 20px;
  }
}
.cmp-my-requests__no-request-img-styles {
  aspect-ratio: 0.89855072;
  margin-bottom: 32px;
}
.cmp-my-requests__no-request-title {
  color: #26202e;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  padding-bottom: 12px;
}
.cmp-my-requests__no-request-description {
  color: #26202e;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
}
.cmp-my-requests__no-request-description--medium {
  font-weight: 500;
}
.cmp-my-requests__card {
  margin-bottom: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 24px 32px 30px;
}
@media screen and (max-width: 480px) {
  .cmp-my-requests__card {
    padding: 30px 20px;
  }
}
.cmp-my-requests__card-title {
  font-weight: 500;
  font-size: 17px;
  text-transform: capitalize;
}
.cmp-my-requests__card-tag-title {
  color: #5b5661;
  font-size: 14px;
  font-weight: 500;
}
.cmp-my-requests__card-tag-title--cadbury {
  color: #26202e;
}
.cmp-my-requests__card-tag-title--purple-faded {
  color: #6700ff;
}
.cmp-my-requests__card-track-order {
  font-size: 14px;
  line-height: 20px;
  display: inline-block;
  padding: 4px 16px;
  cursor: pointer;
}
.cmp-my-requests__card-description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 305px;
}
.cmp-my-requests__card-container {
  padding-top: 16px;
  display: flex;
  width: 100%;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .cmp-my-requests__card-container {
    flex-direction: column;
    gap: 24px;
  }
}
.cmp-my-requests__card-child-wrapper {
  display: flex;
  gap: 14px;
}
.cmp-my-requests__card-child {
  flex: 1;
}
.cmp-my-requests__card-child--half {
  flex: 0.5;
}
.cmp-my-requests__card-product-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.cmp-my-requests__card-product-img {
  width: 88px;
  aspect-ratio: 1;
}
.cmp-my-requests__card-status-wrapper {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .cmp-my-requests__card-status-wrapper {
    padding-top: 20px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #c7c7c7;
  }
  .cmp-my-requests__card-status-wrapper div {
    padding-top: unset;
  }
}
.cmp-my-requests__card-process-wrapper {
  width: 90%;
  height: 4px;
  border-radius: 4px;
  background: #c7c7c7;
  margin-top: 8px;
  overflow: hidden;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .cmp-my-requests__card-process-wrapper {
    min-width: 130px;
  }
}
.cmp-my-requests__card-process-indicator {
  width: 30%;
  height: 100%;
  border-radius: 4px;
  background: #26202e;
}
.cmp-my-requests__card:last-child {
  margin-bottom: 0;
}
.cmp-my-requests__dropdown-parent {
  position: relative;
}
@media screen and (max-width: 480px) {
  .cmp-my-requests__dropdown-parent {
    width: 55%;
  }
}
.cmp-my-requests__dropdown-options-wrapper {
  display: none;
  position: absolute;
  top: 52px;
  z-index: 99;
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding: 4px 10px;
}
.cmp-my-requests__dropdown-options {
  padding: 4px 0px;
  list-style: none;
  font-size: 17px;
  line-height: 28px;
  cursor: pointer;
}
.cmp-my-requests__dropdown-wrapper {
  font-size: 17px;
  background: transparent;
  padding: 10px 16px;
  border: 1px solid #c7c7c7;
  line-height: 28px;
  cursor: pointer;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cmp-my-requests__dropdown-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  transition: all 300ms ease-in-out;
}
.cmp-my-requests__dropdown-icon-down {
  transform: rotate(90deg);
}
.cmp-my-requests__dropdown-icon-up {
  transform: rotate(-90deg);
}
.cmp-my-requests__cancel-model {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.8);
}
.cmp-my-requests__cancel-model-body {
  max-width: 552px;
  max-height: 388px;
  height: 100%;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  padding: 32px 24px;
  text-align: center;
}
.cmp-my-requests__cancel-model-details {
  display: inline-flex;
  padding: 12px;
  background: #f5f5f5;
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: left;
  width: 80%;
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}
.cmp-my-requests__cancel-model-btn-wrapper {
  display: flex;
  justify-content: center;
  gap: 38px;
}
.cmp-my-requests__success-notification {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 400px;
  max-width: 600px;
  padding: 10px 20px;
  background-color: #417817;
  color: #ffffff;
  z-index: 1100;
  display: none;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  line-height: 1.4;
  align-items: center;
}
.cmp-my-requests__success-notification.show {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cmp-my-requests__success-notification-icon {
  margin-left: 30px;
  width: 22px;
  height: 22px;
  color: #ffffff;
  flex-shrink: 0;
}
.cmp-my-requests__success-notification-text {
  margin-right: 65px;
}
.cmp-my-requests__success-notification-message {
  flex-grow: 1;
  padding: 0 5px;
}
.cmp-my-requests__success-notification-close {
  cursor: pointer;
  font-size: 24px;
  color: #ffffff;
  line-height: 1;
  background: transparent;
  border: none;
  padding: 0;
}
.cmp-my-requests__error-notification {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 400px;
  max-width: 600px;
  padding: 10px 12px;
  background-color: #dc3545;
  color: #ffffff;
  z-index: 1100;
  display: none;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  line-height: 1.4;
  align-items: center;
}
.cmp-my-requests__error-notification.show {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cmp-my-requests__error-notification-icon {
  margin-left: 20px;
  width: 22px;
  height: 22px;
  color: #ffffff;
  flex-shrink: 0;
}
.cmp-my-requests__error-notification-text {
  margin-right: 20px;
}
.cmp-my-requests__error-notification-message {
  flex-grow: 1;
  padding: 0 5px;
}
.cmp-my-requests__error-notification-close {
  cursor: pointer;
  font-size: 24px;
  color: #ffffff;
  line-height: 1;
  background: transparent;
  border: none;
  padding: 0;
}
.cmp-my-requests__pagination-wrapper {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.cmp-my-requests__pagination-wrapper #pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cmp-my-requests__pagination-wrapper .pagination-list {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 8px;
}
.cmp-my-requests__pagination-wrapper .pagination-item {
  display: inline-block;
}
.cmp-my-requests__pagination-wrapper .pagination-link {
  min-width: 38px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  color: #7a7482;
  font-family: 'Inter', Helvetica, Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  box-shadow: unset;
  border: none;
}
.cmp-my-requests__pagination-wrapper .pagination-link:hover {
  background: transparent;
}
.cmp-my-requests__pagination-wrapper .pagination-link.current {
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #a29baa;
  color: #26202e;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  box-shadow: unset;
  border-radius: unset;
  background: #ffffff;
}
.cmp-my-requests__pagination-wrapper .pagination-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cmp-my-requests__pagination-wrapper .pagination-ellipsis {
  color: #7a7482;
  font-family: 'Inter', Helvetica, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.cmp-my-requests__pagination-page-box {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cmp-my-requests__pagination-page-box-icon {
  height: 24px;
  width: 24px;
  color: #5b5661;
  cursor: pointer;
}
.cmp-my-requests__pagination-page-box-flip {
  transform: rotate(180deg);
}
.cmp-my-requests .cmp-model-hide {
  display: none;
}
.cmp-my-requests .cmp-model__wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .cmp-my-requests .cmp-model__wrapper {
    padding: 0 20px;
  }
}
.cmp-my-requests .cmp-model__body {
  background-color: #ffffff;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  max-width: 480px;
  width: 100%;
  padding: 45px;
  text-align: center;
  position: relative;
}
.cmp-my-requests .cmp-model__title {
  font-size: 20px;
  font-weight: 600;
  color: #26202e;
  margin-bottom: 16px;
}
.cmp-my-requests .cmp-model__content {
  font-size: 17px;
  color: #26202e;
}
@media screen and (max-width: 480px) {
  .cmp-my-requests .cmp-model__content {
    margin-top: -20px;
  }
}
.cmp-my-requests .cmp-model__content p {
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 600;
  color: #26202e;
}
.cmp-my-requests .d-flex {
  display: flex;
}
.cmp-my-requests .d-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.cmp-my-requests .pl-16 {
  padding-left: 16px;
}
.cmp-my-requests .pl-16 .d-name {
  font-size: 17px;
  font-weight: 600;
  color: #26202e;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.cmp-my-requests .pl-16 .d-type {
  font-size: 14px;
  font-weight: 500;
  color: #5b5661;
  margin-top: -10px;
}
.cmp-my-requests .pl-16 .d-code {
  font-size: 14px;
  font-weight: 500;
  color: #5b5661;
}
.cmp-my-requests .pt-4 {
  padding-top: 4px;
}
.cmp-my-requests .pt-8 {
  padding-top: 8px;
}
.cmp-my-requests .pt-16 {
  padding-top: 14px;
}
@media screen and (max-width: 480px) {
  .cmp-my-requests .pt-16 {
    padding-top: 6px;
  }
}
.cmp-my-requests .btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-width: 100px;
  border: none;
}
.cmp-my-requests .btn--outline {
  background-color: #474150;
  color: #ffffff;
  width: 35%;
}
.cmp-my-requests .btn--outline:hover {
  background-color: #3b3642;
}
.cmp-my-requests .btn--solid {
  background-color: #feb940;
  color: #000000;
  width: 35%;
}
.cmp-my-requests .btn--solid:hover {
  background-color: #feb027;
}
.cmp-my-requests .disable-button-default {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #6700ff;
}
.cmp-my-requests__img-placeholder {
  width: 80px;
  height: 80px;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.cmp-my-requests .d-color {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-rte-section__container {
  padding-top: 48px;
}
@media screen and (max-width: 768px) {
  .cmp-rte-section__container {
    padding-top: 60px;
  }
}
.cmp-rte-section__description {
  color: #26202e;
  font-size: 17px;
  line-height: 28px;
  max-width: 522px;
}

.croppie-container {
    width: 100%;
    height: 100%;
}

.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-height: none;
    max-width: none;
}

.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    position: absolute;
    border: 2px solid #fff;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.croppie-container .cr-resizer {
  z-index: 2;
  box-shadow: none;
  pointer-events: none;
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all;
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
    display: block;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    width: 10px;
    height: 10px;
    content: '';
}

.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px;
}

.croppie-container .cr-resizer-vertical::after {
    left: 50%;
    margin-left: -5px;
}

.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%;
}

.croppie-container .cr-resizer-horisontal::after {
    top: 50%;
    margin-top: -5px;
}

.croppie-container .cr-original-image {
    display: none;
}

.croppie-container .cr-vp-circle {
    border-radius: 50%;
}

.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
    touch-action: none;
}

.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
}

.croppie-result {
    position: relative;
    overflow: hidden;
}

.croppie-result img {
    position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
    -webkit-appearance: none;
/*removes default webkit styles*/
	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
    width: 300px;
/*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:focus {
    outline: none;
}
/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
	border-width: 6px 0;
	color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ddd;
	margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
}
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
	position: absolute;
	bottom: 5px;
	left: 5px;
	z-index: 1;
}
.cr-rotate-controls button {
	border: 0;
	background: none;
}
.cr-rotate-controls i:before {
	display: inline-block;
	font-style: normal;
	font-weight: 900;
	font-size: 22px;
}
.cr-rotate-l i:before {
	content: '↺';
}
.cr-rotate-r i:before {
	content: '↻';
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-profile {
  max-width: 1440px;
  margin: 30px auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-profile {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-profile {
    padding: 0 20px;
  }
}
.cmp-profile__heading {
  font-size: 42px;
  font-weight: 700;
  color: #26202E;
}
@media screen and (max-width: 991px) {
  .cmp-profile__heading {
    font-size: 30px;
    margin-bottom: -20px;
  }
}
.cmp-profile__wrapper {
  background: #f5f5f5;
  display: flex;
  flex-direction: row;
  margin-top: 48px;
  padding: 60px 0;
}
@media screen and (max-width: 991px) {
  .cmp-profile__wrapper {
    flex-direction: column;
    padding: 20px 0;
    padding-top: 80px;
  }
}
.cmp-profile__pic {
  width: 30%;
  display: flex;
}
@media screen and (max-width: 991px) {
  .cmp-profile__pic {
    width: 80%;
    justify-content: center;
    margin-bottom: 80px;
  }
}
.cmp-profile__pic-wrap {
  aspect-ratio: 1;
  background: #c7c7c7;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  max-width: 264px;
  max-height: 264px;
  margin-left: auto;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 991px) {
  .cmp-profile__pic-wrap {
    max-width: 224px;
    max-height: 224px;
    margin-left: 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-profile__pic-wrap {
    margin-left: auto;
  }
}
.cmp-profile__pic-wrap .btn {
  background-color: #ffffff;
  border: 1.5px solid #26202e;
  border-radius: 100%;
  bottom: 10px;
  height: 40px;
  padding: 6px;
  position: absolute;
  right: 10px;
  width: 40px;
}
.cmp-profile__pic-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-profile__pic-empty-icon {
  height: 110px;
  width: 110px;
}
.cmp-profile__info {
  width: 70%;
}
@media screen and (max-width: 991px) {
  .cmp-profile__info {
    width: 100%;
    padding: 0 15px;
  }
}
.cmp-profile__info-container {
  display: flex;
  flex-direction: column;
  padding: 0 40px 0 48px;
}
@media screen and (max-width: 991px) {
  .cmp-profile__info-container {
    padding: 0 15px;
  }
}
.cmp-profile__info-name {
  font-weight: 600;
  font-size: 26px;
}
.cmp-profile__info-header {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}
.cmp-profile__info-header .btn {
  margin-top: 6px;
}
.cmp-profile__personal {
  border-bottom: 1px solid #c7c7c7;
  display: flex;
  flex-direction: row;
  gap: 100px;
  padding: 32px 0;
}
@media screen and (max-width: 991px) {
  .cmp-profile__personal {
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
  }
}
.cmp-profile__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 17px;
  line-height: 28px;
}
.cmp-profile__contact-item {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: left;
}
.cmp-profile__contact-icon {
  height: 16px;
  width: 16px;
}
.cmp-profile__block-title {
  color: #7a7482;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}
.cmp-profile__firm-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
  margin-bottom: 10px;
}
.cmp-profile__design {
  font-size: 17px;
  line-height: 24px;
  padding: 32px 0;
}
.cmp-profile__design p {
  max-width: 520px;
}
.cmp-profile__design .btn {
  margin-top: 24px;
  margin-right: 10px;
  background-color: #474150;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.cmp-profile__design .btn:hover {
  background-color: #3a3548;
}
.cmp-profile__design .cmp-profile-edit-preference-btn {
  display: inline-block;
}
.cmp-profile__design .cmp-profile-edit-preference-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(71, 65, 80, 0.3);
}
.cmp-profile__expertise {
  margin-bottom: 34px;
}
.cmp-profile__expertise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.cmp-profile__expertise-header .cmp-profile__block-title {
  color: #7a7482;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 0;
}
.cmp-profile__expertise-header .cmp-profile__edit-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.cmp-profile__expertise-header .cmp-profile__edit-btn:hover {
  background-color: #f8f9fa;
}
.cmp-profile__expertise-header .cmp-profile__edit-btn:focus {
  outline: none;
  background-color: #f8f9fa;
}
.cmp-profile__expertise-header .cmp-profile__edit-btn svg {
  width: 16px;
  height: 16px;
}
.cmp-profile__expertise-content {
  font-size: 17px;
  line-height: 24px;
  padding: 10px 0;
  color: #26202e;
  font-weight: 400;
  margin-top: -15px;
  word-spacing: 5px;
}
.cmp-profile__styles {
  position: relative;
}
.cmp-profile__styles .cmp-profile__block-title {
  color: #7a7482;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}
.cmp-profile__styles-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  margin-top: -10px;
  margin-bottom: 10px;
}
.cmp-profile__styles-content span {
  font-size: 17px;
  line-height: 24px;
  color: #26202e;
  flex: 1;
  word-spacing: 5px;
}
.cmp-profile__styles-content .btn {
  margin-top: 0;
  font-size: 14px;
  padding: 0;
  background-color: transparent;
  color: #6700FF;
  border: none;
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}
.cmp-profile__styles-content .btn:hover {
  color: #5500CC;
  text-decoration: underline;
}
.cmp-profile__styles-content .btn:focus {
  outline: none;
  color: #5500CC;
}
.cmp-profile__design-updated {
  position: relative;
  max-width: none !important;
  width: 100%;
}
.form-field {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.form-field--full {
  width: 100%;
}
.form-field__label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #5B5661;
}
.cmp-modal-common {
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  transition: opacity 0.3s ease-in-out;
}
.cmp-modal-common--show {
  display: block;
}
.cmp-modal-common__bk-drop {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
}
.cmp-modal-common__container {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: auto;
  min-width: 456px;
  overflow-y: auto;
  padding: 40px 0;
  width: 31.5%;
  position: relative;
  z-index: 9999;
}
.cmp-modal-common__container--center {
  height: auto;
  left: 50%;
  margin: 0 auto;
  padding: 24px 0;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
}
.cmp-modal-common__container--center .cmp-modal-common__main {
  padding: 24px 0 40px;
}
.cmp-modal-common__main {
  padding: 24px 40px 40px;
}
.cmp-modal-common__header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  width: 100%;
}
.cmp-modal-common__header-content {
  display: flex;
  align-items: center;
}
.cmp-modal-common__header--border {
  border-bottom: 1px solid #c7c7c7;
  padding-bottom: 16px;
}
.cmp-modal-common__heading-txt {
  color: #26202e;
  font-size: 22px;
  font-weight: 500;
}
.cmp-modal-common__footer {
  padding: 0 40px;
  margin-top: auto;
}
.cmp-modal-common__footer--cta {
  border-top: 1px solid #e5e5e5;
  padding-top: 20px;
  display: flex;
}
.cmp-modal-common__footer-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.cmp-modal-common .btn-cancel {
  background-color: #474150;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.cmp-modal-common .btn-cancel:hover {
  background-color: #3a3548;
}
.cmp-modal-common .btn-save {
  background-color: #f4a633;
  color: #26202e;
  border: none;
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.cmp-modal-common .btn-save:hover {
  background-color: #e6962d;
}
@media screen and (max-width: 991px) {
  .cmp-modal-common__container {
    min-width: 100%;
  }
}
#cmp-profile__personal-modal .cmp-modal-common__container {
  height: 100%;
  max-height: 100vh;
  margin-left: auto;
  min-width: 456px;
  width: 31.5%;
  padding: 40px 0;
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  #cmp-profile__personal-modal .cmp-modal-common__container {
    min-width: 100%;
  }
}
#cmp-profile__personal-modal .cmp-modal-common__main {
  flex: 1;
  overflow-y: auto;
}
#cmp-profile__personal-modal .cmp-modal-common__main::-webkit-scrollbar {
  width: 6px;
}
#cmp-profile__personal-modal .cmp-modal-common__main::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
#cmp-profile__personal-modal .cmp-modal-common__main::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
#cmp-profile__personal-modal .cmp-modal-common__main::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
#cmp-profile__personal-modal .cmp-modal-common__header {
  flex-shrink: 0;
  background: #ffffff;
  position: relative;
  z-index: 1;
}
#cmp-profile__personal-modal .cmp-modal-common__footer {
  flex-shrink: 0;
  background: #ffffff;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.cmp-profile__otp-content {
  text-align: center;
  padding: 104px 0 44px;
  margin-right: 80px;
}
.cmp-profile__otp-content .cmp-profile__otp-txt {
  font-size: 16px;
  color: #26202e;
  margin-bottom: 30px;
  line-height: 24px;
}
.cmp-profile__otp-content .cmp-profile__otp-txt-no {
  font-weight: 700;
  color: #26202e;
}
.cmp-profile__otp-content .form-feedback {
  font-size: 12px;
  color: #dc3545;
  margin-top: 10px;
  display: none;
}
.cmp-profile__otp-content .cmp-profile__otp-resend {
  margin-top: 22px;
  margin-right: 180px;
}
.cmp-profile__otp-content .cmp-profile__otp-resend .link {
  color: #6700FF;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.cmp-profile__otp-content .cmp-profile__otp-resend .link:hover {
  text-decoration: underline;
}
.form-field__otp {
  display: flex;
  justify-content: center;
  gap: 21px;
  margin: 20px 0;
}
.form-field__otp .otp-input {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border: 2px solid #c7c7c7;
  background: #ffffff;
  color: #26202e;
  transition: border-color 0.3s ease;
}
.form-field__otp .otp-input:focus {
  outline: none;
  border-color: #6700FF;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.form-field__otp .otp-input.filled {
  border-color: #6700FF;
  background-color: #f8f9fa;
}
.form-field__otp .otp-input.error {
  border-color: #dc3545;
  background-color: #fff5f5;
}
.cmp-edit-design-modal .cmp-edit-design__form {
  padding: 20px 0;
}
.cmp-edit-design-modal .cmp-edit-design__section {
  margin-bottom: 32px;
}
.cmp-edit-design-modal .cmp-edit-design__section:last-child {
  margin-bottom: 0;
}
.cmp-edit-design-modal .cmp-edit-design__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.cmp-edit-design-modal .cmp-edit-design__label {
  font-size: 16px;
  font-weight: 500;
  color: #5B5661;
}
.cmp-edit-design-modal .cmp-edit-design__tags-container {
  border: none;
  background: none;
  padding: 0;
  box-shadow: none;
}
.cmp-profile-add-style-link {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  background: none;
  border: none;
  color: #6700FF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  outline: none;
  transition: color 0.2s;
}
.cmp-profile-add-style-link:hover,
.cmp-profile-add-style-link:focus {
  color: #5500CC;
  text-decoration: underline;
}
.profile-ui-hidden {
  display: none !important;
}
.custom-dropdown {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  font-size: 17px;
  color: #7A7482;
  min-height: 48px;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
  padding: 12px 16px;
  position: relative;
  cursor: pointer;
  margin: 0;
}
.dropdown-input {
  flex: 1;
  display: flex;
  align-items: center;
}
.dropdown-placeholder {
  color: #7A7482;
  font-size: 17px;
}
.dropdown-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  min-height: 0;
}
.dropdown-chips .cmp-edit-design__tag {
  display: inline-flex;
  align-items: center;
  background-color: #f0eaf7;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #5b5661;
  transition: all 0.3s ease;
}
.dropdown-chips .cmp-edit-design__tag.selected {
  background-color: #f0eaf7;
  color: #5b5661;
}
.dropdown-chips .cmp-edit-design__tag .cmp-edit-design__tag-remove {
  margin-left: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  color: #7a7482;
  transition: color 0.3s ease;
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.dropdown-chips .cmp-edit-design__tag .cmp-edit-design__tag-remove:hover {
  color: #dc3232;
  background-color: rgba(255, 255, 255, 0.8);
}
.dropdown-chips .cmp-edit-design__tag .cmp-edit-design__tag-remove:focus {
  outline: none;
  color: #dc3232;
  background-color: rgba(255, 255, 255, 0.8);
}
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100% !important;
  min-width: 100% !important;
  border: 1px solid #c7c7c7;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  background: #fff;
  z-index: 9999;
  box-sizing: border-box;
  padding: 0;
  display: none;
  max-height: 250px;
  overflow-y: auto;
}
.dropdown-list .dropdown-item {
  font-size: 17px;
  color: #5B5661;
  padding: 12px 16px;
  transition: background 0.2s;
  border-radius: 0;
}
.dropdown-list .dropdown-item:hover,
.dropdown-list .dropdown-item.selected {
  background: #F4F4F4;
  color: #26202E;
}
.dropdown-arrow {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  align-items: center;
}
.dropdown-arrow svg.rotated {
  transform: rotate(180deg);
  transition: transform 0.2s;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-progress-icon {
  max-width: 1440px;
  margin: 0 auto;
}
.cmp-progress-icon .timeline-container {
  width: 90%;
  max-width: 700px;
  margin: 50px auto;
  padding: 20px;
  margin-top: 150px;
}
@media screen and (max-width: 480px) {
  .cmp-progress-icon .timeline-container {
    margin-top: 50px;
  }
}
.cmp-progress-icon .title {
  text-align: center;
  color: #26202e;
  font-size: 40px;
  font-weight: 700;
  margin-left: 200px;
  margin-bottom: 70px;
}
@media screen and (max-width: 480px) {
  .cmp-progress-icon .title {
    margin-left: 140px;
    font-size: 28px;
  }
}
.cmp-progress-icon .timeline {
  position: relative;
  padding: 0;
}
.cmp-progress-icon .timeline::before {
  content: '';
  position: absolute;
  height: 84%;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: #26202e;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .cmp-progress-icon .timeline::before {
    height: 100%;
  }
}
.cmp-progress-icon .milestone {
  position: relative;
  margin-bottom: 40px;
  width: 50%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.cmp-progress-icon .milestone .dot {
  position: absolute;
  top: 0px;
  width: 17px;
  height: 17px;
  background-color: #b6aebf;
  border-radius: 50%;
  z-index: 1;
  border: 1px solid #26202e;
}
.cmp-progress-icon .milestone .content {
  width: 100%;
  max-width: 270px;
  background: none;
  color: #26202e;
  position: relative;
}
.cmp-progress-icon .milestone .content h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #5b5661;
  position: relative;
  top: 10%;
  margin-bottom: 8px;
}
.cmp-progress-icon .milestone .content p {
  font-size: 12.5px;
  line-height: 100%;
  white-space: pre;
}
.cmp-progress-icon .milestone.left {
  left: 0;
  text-align: right;
  justify-content: flex-start;
}
.cmp-progress-icon .milestone.left .dot {
  right: -8px;
}
.cmp-progress-icon .milestone.left .content {
  left: 20%;
  top: -10px;
  margin-right: 80px;
}
.cmp-progress-icon .milestone.left .content p {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 150px;
  margin-left: -50px;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
}
@media screen and (max-width: 768px) {
  .cmp-progress-icon .milestone.left .content {
    left: -110px;
  }
  .cmp-progress-icon .milestone.left .content h3 {
    position: relative;
    left: 50px;
  }
  .cmp-progress-icon .milestone.left .content p {
    position: relative;
    left: 110px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-progress-icon .milestone.left .content h3 {
    position: relative;
    left: 105px;
  }
}
.cmp-progress-icon .milestone.right {
  left: 50%;
  text-align: left;
  justify-content: flex-end;
}
.cmp-progress-icon .milestone.right .dot {
  left: -8px;
  top: 0px;
}
.cmp-progress-icon .milestone.right .lastdot {
  position: absolute;
  top: 0px;
  width: 16px;
  height: 16px;
  background-color: #b6aebf;
  border-radius: 50%;
  z-index: 1;
  left: -8px;
  border: 1px solid #26202e;
}
.cmp-progress-icon .milestone.right .content {
  right: 20%;
  top: -10px;
  margin-left: 80px;
}
.cmp-progress-icon .milestone.right .content p {
  width: 150px;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
}
@media screen and (max-width: 480px) {
  .cmp-progress-icon .milestone.right .content {
    left: 30px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-progress-icon .milestone.right .lastdot {
    top: 60px;
  }
  .cmp-progress-icon .milestone.right .content h3 {
    position: relative;
    right: 20px;
  }
  .cmp-progress-icon .milestone.right .content p {
    position: relative;
    right: 20px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-aboutuscards {
  background-color: #26202e;
  color: #ffffff;
  padding: 40px;
  text-align: center;
  margin-top: 80px;
}
.cmp-aboutuscards__title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 30px;
}
.cmp-aboutuscards__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto 30px;
  position: relative;
  flex-wrap: wrap;
}
.cmp-aboutuscards__arrow-group {
  display: flex;
  gap: 15px;
  margin-top: 0;
}
.cmp-aboutuscards__arrow {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  padding-left: 50px;
}
.cmp-aboutuscards__arrow:hover {
  opacity: 1;
}
.cmp-aboutuscards__arrow:focus {
  outline: none;
}
.cmp-aboutuscards__container {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}
.cmp-aboutuscards__wrapper {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  user-select: none;
  width: fit-content;
}
.cmp-aboutuscards__card {
  width: 300px;
  background-color: #26202e;
  border: 2px solid #7a7482;
  padding: 20px;
  margin: 10px;
  text-align: left;
  box-sizing: border-box;
  min-height: 350px;
  flex-shrink: 0;
}
.cmp-aboutuscards__card-image {
  width: auto;
}
.cmp-aboutuscards__card-title {
  font-size: 17px;
  font-weight: 700;
  margin-top: 50px;
}
.cmp-aboutuscards__card-description {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 10px;
  color: #b6aebf;
}
@media screen and (max-width: 991px) {
  .cmp-aboutuscards__card {
    width: 280px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-aboutuscards {
    padding: 20px;
  }
  .cmp-aboutuscards__header {
    flex-direction: column;
    align-items: center;
  }
  .cmp-aboutuscards__title {
    margin-top: 10px;
    margin-left: 150px;
  }
  .cmp-aboutuscards__arrow-group {
    margin-top: 15px;
    margin-left: 130px;
  }
  .cmp-aboutuscards__wrapper {
    display: flex;
    transition: transform 0.5s ease;
    max-width: 1200px;
    margin: 0 auto;
    will-change: transform;
    transform: translateX(0);
  }
  .cmp-aboutuscards__card {
    width: 300px;
    background-color: #26202e;
    border: 2px solid #7a7482;
    padding: 20px;
    margin: 10px;
    text-align: left;
    box-sizing: border-box;
    min-height: 350px;
    flex-shrink: 0;
  }
  .cmp-aboutuscards__card-image {
    width: auto;
  }
  .cmp-aboutuscards__card-title {
    font-size: 17px;
    font-weight: 500;
    margin-top: 50px;
  }
  .cmp-aboutuscards__card-description {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 10px;
    color: #b6aebf;
  }
}
@media screen and (max-width: 480px) {
  .cmp-aboutuscards__card {
    width: 270px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.section-heading {
  font-weight: 700;
  padding-top: 80px;
  color: #26202e;
  text-align: left;
  font-size: 42px;
  line-height: 32px;
}
@media screen and (max-width: 768px) {
  .section-heading {
    font-size: 40px;
    line-height: 52px;
  }
}
@media screen and (max-width: 480px) {
  .section-heading {
    text-align: left;
    padding-left: 20px;
    padding-right: 0;
  }
}
.section-subheading {
  font-size: 18px;
  padding-top: 39px;
  line-height: 24px;
  font-weight: 300;
  margin-bottom: 30px;
  color: #26202e;
  text-align: left;
  margin: 0 0 15px;
  line-height: 1.6;
  max-width: 600px;
}
@media screen and (max-width: 480px) {
  .section-subheading {
    text-align: left;
    font-size: 22px;
    line-height: 25px;
    font-weight: 300;
    padding-left: 20px;
    padding-right: 0;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-assetcard {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-assetcard {
    max-width: 100%;
    margin: 0;
    padding: 0 40px;
  }
}
.cmp-assetcard__nav {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.cmp-assetcard__filters {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.cmp-assetcard__btn {
  padding: 8px 20px;
  border: 1px solid #26202e;
  border-radius: 24px;
  background: #ffffff;
  color: #5b5661;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 17px;
  font-weight: 500;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.cmp-assetcard__btn:hover {
  background: #26202e;
  color: #ffffff;
}
.cmp-assetcard__btn--active {
  background: #26202e;
  color: #ffffff;
  font-weight: 600;
}
.cmp-assetcard__header {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
  .cmp-assetcard__header {
    margin-bottom: 0;
  }
}
.cmp-assetcard__header:has(.cmp-assetcard__view-all) {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cmp-assetcard__title {
  margin-bottom: 20px;
}
.cmp-assetcard__title h2 {
  font-size: 40px;
  font-weight: 500;
  color: #1e1e2f;
  margin: 0;
  display: flex;
  align-items: baseline;
}
.cmp-assetcard__header:has(.cmp-assetcard__view-all) .cmp-assetcard__title {
  margin-bottom: 0;
}
.cmp-assetcard__view-all {
  display: flex;
  align-items: center;
}
.cmp-assetcard__view-all-link {
  color: #6700ff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}
.cmp-assetcard__view-all-link:hover {
  color: #3d344a;
  text-decoration: underline;
}
.cmp-assetcard__count {
  color: #7a7482;
  font-size: 32px;
  font-weight: 300;
  margin-left: 8px;
}
.cmp-assetcard__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.cmp-assetcard__card {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 1;
  visibility: visible;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
}
.cmp-assetcard__card:hover,
.cmp-assetcard__card:focus {
  text-decoration: none !important;
  color: inherit;
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.586);
}
.cmp-assetcard__card-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  flex-shrink: 0;
}
.cmp-assetcard__card-image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: #f5f5f5;
  display: block;
}
.cmp-assetcard__card-title {
  padding: 16px;
  background: #1e1e2f;
  color: #ffffff;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
.cmp-assetcard__card-title h3 {
  font-size: 22px;
  font-weight: 300;
  margin: 0;
  color: #ffffff;
}
.cmp-assetcard__card-arrow {
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding-bottom: 5.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  color: #ffffff;
}
.cmp-assetcard__card-arrow:hover {
  transform: translateX(3px);
  background-color: transparent;
  cursor: pointer;
}
.cmp-assetcard__card-arrow svg {
  width: 14px;
  height: 14px;
}
.cmp-assetcard__pagination {
  margin-top: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cmp-assetcard__pagination-info {
  color: #989898;
  font-size: 14px;
  margin: 0;
}
.cmp-assetcard__load-more {
  font-size: 17px;
  background-color: transparent;
  color: #26202e;
  padding: 5px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.cmp-assetcard__load-less {
  background-color: transparent;
  font-size: 17px;
  color: #26202e;
  padding: 5px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  margin-top: 10px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 1200px) {
  .cmp-assetcard__content {
    grid-template-columns: repeat(2, 1fr);
  }
  .cmp-assetcard__filters {
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cmp-assetcard__btn {
    padding: 6px 16px;
    font-size: 17px;
    white-space: nowrap;
  }
}
@media screen and (max-width: 991px) {
  .cmp-assetcard__content {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .cmp-assetcard__header:has(.cmp-assetcard__view-all) {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .cmp-assetcard__header:has(.cmp-assetcard__view-all) .cmp-assetcard__title {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-assetcard {
    padding: 24px 20px;
  }
  .cmp-assetcard__content {
    margin-top: 30px;
    gap: 16px;
  }
  .cmp-assetcard__btn {
    padding: 6px 16px;
    font-size: 14px;
    white-space: nowrap;
  }
  .cmp-assetcard__card-image {
    height: 160px;
  }
  .cmp-assetcard__card-title {
    padding: 12px 16px;
  }
  .cmp-assetcard__card-title h3 {
    font-size: 16px;
  }
  .cmp-assetcard__title h2 {
    font-size: 24px;
  }
  .cmp-assetcard__header:has(.cmp-assetcard__view-all) {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }
  .cmp-assetcard__header:has(.cmp-assetcard__view-all) .cmp-assetcard__title {
    margin-bottom: 0;
  }
  .cmp-assetcard__view-all-link {
    font-size: 14px;
    margin-top: 5px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-assetcard__title h2 {
    font-size: 24px;
  }
  .cmp-assetcard__count {
    font-size: 22px;
  }
  .cmp-assetcard__filters {
    margin-bottom: 30px;
  }
}
.cmp-assetcard__load-more svg,
.cmp-assetcard__load-less svg {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  margin-left: 8px;
}
.cmp-assetcard__load-less svg {
  vertical-align: bottom;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-showcase {
  display: flex;
  width: 100%;
  min-height: 400px;
  max-width: 1440px;
  margin: 50px auto;
  padding: 0 80px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 1200px) {
  .cmp-showcase {
    padding: 0 40px;
    margin: 40px 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-showcase {
    flex-direction: column;
    padding: 0 20px;
  }
}
.cmp-showcase__left {
  width: 55%;
  height: 400px;
}
@media screen and (max-width: 480px) {
  .cmp-showcase__left {
    width: 100%;
    height: 196px;
  }
}
.cmp-showcase__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-showcase__right {
  width: 45%;
  height: 400px;
  background-color: #26202e;
  color: #ffffff;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 480px) {
  .cmp-showcase__right {
    width: 100%;
    height: 370px;
    padding: 20px 30px;
  }
}
.cmp-showcase__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}
@media screen and (max-width: 480px) {
  .cmp-showcase__title {
    font-size: 28px;
  }
}
.cmp-showcase__feature-item {
  font-weight: 400;
  font-size: 17px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #a29baa;
}
.cmp-showcase__checkmark {
  color: #a29baa;
  margin-right: 10px;
}
.cmp-showcase__store-link {
  color: #feb940;
  font-weight: 500;
  text-decoration: none;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  font-size: 17px;
}
.cmp-showcase__store-link:hover {
  color: #fea60d;
}
.cmp-showcase__store-link:hover .cmp-showcase__arrow-icon {
  transform: translateX(5px);
}
.cmp-showcase__arrow-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  stroke: currentColor;
  stroke-width: 2;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-product-details {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 80px;
  color: #26202e;
  box-sizing: border-box;
  /* Variants swatch strip - Used by BOTH texture and paint products */
  /* Variant swatch - Works for both <a> (texture) and <button> (paint) */
  /* Variant icon - Used by both texture and paint */
  /* Subshade tabs - PAINT PRODUCTS ONLY (optional feature) */
}
@media screen and (max-width: 1200px) {
  .cmp-product-details {
    padding: 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-details {
    padding: 20px;
  }
}
.cmp-product-details__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}
.cmp-product-details__title h1 {
  font-size: 42px;
  font-weight: 800;
  color: #26202e;
  max-width: 800px;
}
@media screen and (max-width: 768px) {
  .cmp-product-details__title h1 {
    font-size: 30px;
  }
}
.cmp-product-details__sku {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 14px;
  color: #5b5661;
}
.cmp-product-details__collection {
  color: #6700ff;
  border-left: 2px solid #7a7482;
  padding-left: 15px;
  text-decoration: none;
}
.cmp-product-details__collection-link {
  text-decoration: none;
}
.cmp-product-details__actions {
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  .cmp-product-details__actions {
    margin-right: 0;
  }
}
.cmp-product-details__action-container {
  display: flex;
  align-items: center;
  gap: 30px;
}
.cmp-product-details__action-icons {
  display: flex;
  gap: 30px;
}
.cmp-product-details__action-buttons {
  display: flex;
  gap: 10px;
}
@media screen and (max-width: 480px) {
  .cmp-product-details__action-buttons {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 20px;
    background-color: #ffffff;
    display: flex;
    align-content: flex-end;
    justify-content: flex-end;
    padding-right: 20px;
    z-index: 20;
  }
}
.cmp-product-details__icon-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.cmp-product-details__icon-button:hover {
  background-color: #e5e5e5;
}
.cmp-product-details__icons {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
}
.cmp-product-details__download-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: #5b5661;
}
.cmp-product-details__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media screen and (max-width: 991px) {
  .cmp-product-details__content {
    display: flex;
    flex-direction: column;
  }
}
.cmp-product-details__images {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 991px) {
  .cmp-product-details__images {
    order: 1;
  }
}
.cmp-product-details__image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 700px;
  width: 600px;
  min-height: 362px;
  object-fit: contain;
  align-content: center;
  background-color: #f2f2f2;
}
@media screen and (max-width: 991px) {
  .cmp-product-details__image-container {
    min-height: 237px;
    max-width: 100%;
    width: 100%;
  }
}
.cmp-product-details__image {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
}
.cmp-product-details__zoom-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  padding: 15px;
  width: 16px;
  height: 16px;
  display: block;
  align-content: center;
  margin: auto;
  cursor: pointer;
}
.cmp-product-details__zoom-button .cmp-product-details__enlarge-icon {
  position: relative;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
}
.cmp-product-details__details-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (max-width: 991px) {
  .cmp-product-details__details-container {
    order: 1;
  }
}
.cmp-product-details__variants {
  display: grid;
  grid-template-columns: repeat(6, 66px);
  grid-auto-rows: 66px;
  gap: 14px;
  column-gap: 40px;
  margin: 8px 0 16px;
  align-items: center;
}
@media screen and (max-width: 991px) {
  .cmp-product-details__variants {
    order: -2;
  }
}
@media screen and (max-width: 768px) {
  .cmp-product-details__variants {
    grid-template-columns: repeat(5, 56px);
    grid-auto-rows: 56px;
    gap: 12px;
    column-gap: 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-details__variants {
    grid-template-columns: repeat(4, 50px);
    grid-auto-rows: 50px;
    gap: 10px;
    column-gap: 45px;
  }
}
.cmp-product-details__variant {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.cmp-product-details__variant:hover,
.cmp-product-details__variant.active {
  border-color: #26202e;
  transform: translateY(-1px);
}
@media screen and (max-width: 768px) {
  .cmp-product-details__variant {
    width: 56px;
    height: 56px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-details__variant {
    width: 50px;
    height: 50px;
  }
}
.cmp-product-details__variant-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .cmp-product-details__variant-icon {
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-details__variant-icon {
    width: 44px;
    height: 44px;
  }
}
.cmp-product-details__subshade-container {
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .cmp-product-details__subshade-container {
    order: -1;
  }
}
.cmp-product-details__subshade-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
  .cmp-product-details__subshade-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.cmp-product-details__subshade-tab {
  padding: 8px 10px;
  font-size: 17px;
  font-weight: 500;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  color: #26202e;
  background-color: #ffffff;
  border: 1.5px solid #7a7482;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-product-details__subshade-tab:hover {
  background-color: #e5e5e5;
  border-color: #26202e;
}
.cmp-product-details__subshade-tab.active {
  background-color: #26202e;
  color: #ffffff;
  border-color: #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-product-details__subshade-tab {
    padding: 7px 14px;
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-details__subshade-tab {
    padding: 6px 10px;
    font-size: 14px;
    white-space: normal;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.cmp-product-details__subshade-panel {
  display: none;
}
.cmp-product-details__subshade-panel.active {
  display: block;
}
.cmp-product-details__description {
  font-size: 17px;
  line-height: 1.6;
  color: #7a7482;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #5b5661;
}
.cmp-product-details__description li {
  margin-left: 50px;
}
.cmp-product-details__section {
  margin-bottom: 20px;
}
.cmp-product-details__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 38px;
}
.cmp-product-details__section-header h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}
.cmp-product-details__collapse-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}
@media screen and (max-width: 768px) {
  .cmp-product-details__collapse-toggle {
    display: block;
    padding-right: 10px;
  }
}
.cmp-product-details__collapse-toggle.active .cmp-product-details__toggle-icon {
  transform: rotate(180deg);
}
.cmp-product-details__toggle-icon {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}
.cmp-product-details__specs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 480px) {
  .cmp-product-details__section.collapsed .cmp-product-details__specs {
    display: none;
  }
}
.cmp-product-details__spec-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cmp-product-details__spec-label {
  font-size: 14px;
  color: #7a7482;
}
.cmp-product-details__spec-value {
  font-size: 17px;
  color: #26202e;
  font-weight: 400;
}
.cmp-product-details__color-options {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.cmp-product-details__color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}
.cmp-product-details__color-swatch--beige {
  background-color: #cdc0a6;
}
.cmp-product-details__color-swatch--mint {
  background-color: #a6cdc4;
}
.cmp-product-details__color-swatch:hover,
.cmp-product-details__color-swatch.active {
  border-color: #989898;
}
.cmp-product-details__calculator {
  background-color: #f8f0ff;
  padding: 20px;
  line-height: 20px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}
.cmp-product-details__calculator h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 20px 0;
}
.cmp-product-details__form-label {
  font-size: 14px;
  color: #26202e;
  margin-bottom: 10px;
  font-weight: 700;
}
.cmp-product-details__dimension-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmp-product-details__input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cmp-product-details__input-group label {
  font-size: 14px;
  color: #5b5661;
}
.cmp-product-details__input-group input {
  width: 80px;
  padding: 8px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.cmp-product-details__result {
  color: #5b5661;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 15px;
  margin-top: 15px;
}
.cmp-product-details__result-value {
  font-weight: 400;
  font-size: 39px;
  line-height: normal;
}
.cmp-product-details__downloads {
  background-color: #26202E0D;
  padding: 20px;
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}
.cmp-product-details__downloads h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 20px 0;
}
.cmp-product-details__downloads h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 15px 0;
}
@media screen and (max-width: 991px) {
  .cmp-product-details__downloads {
    order: 3;
  }
}
.cmp-product-details__download-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cmp-product-details__section-group {
  padding-bottom: 15px;
}
.cmp-product-details__section-group:not(:last-child) {
  border-bottom: 1px solid #e5e5e5;
}
.cmp-product-details__download-options,
.cmp-product-details__plugin-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media screen and (max-width: 480px) {
  .cmp-product-details__download-options,
  .cmp-product-details__plugin-options {
    grid-template-columns: 1fr;
  }
}
.cmp-product-details__download-option,
.cmp-product-details__plugin-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px;
  font-size: 17px;
  border: 1.5px solid #e5e5e5;
  border-radius: 4px;
  text-decoration: none;
  color: #5b5661;
  transition: all 0.3s ease;
}
.cmp-product-details__download-option:hover,
.cmp-product-details__plugin-option:hover {
  background-color: #f5f5f5;
}
.cmp-product-details__plug {
  margin-left: 0;
}
@media screen and (max-width: 480px) {
  .cmp-product-details__plug {
    margin-right: 45px;
  }
}
.cmp-product-details__icon {
  width: 20px;
  height: 20px;
}
.cmp-product-details__bookmark-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
  align-items: center;
  justify-content: center;
}
.cmp-product-details__bookmark-modal--visible {
  display: flex;
}
.cmp-product-details__request-meeting-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
  align-items: center;
  justify-content: center;
}
.cmp-product-details__request-meeting-modal--visible {
  display: flex;
}
.cmp-product-details__share-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
  align-items: center;
  justify-content: center;
}
.cmp-product-details__share-modal--visible {
  display: flex;
}
.cmp-product-details__request-sample-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
  align-items: center;
  justify-content: center;
}
.cmp-product-details__request-sample-modal--visible {
  display: flex;
}
@media screen and (max-width: 480px) {
  .cmp-product-details {
    padding: 20px 15px;
    width: 100%;
  }
  .cmp-product-details__header {
    flex-direction: column;
    gap: 20px;
  }
  .cmp-product-details__actions {
    align-items: flex-start;
    margin-top: 20px;
  }
  .cmp-product-details__image-container {
    width: 100%;
  }
}
@media screen and (max-width: 991px) {
  .cmp-product-details {
    width: 100%;
  }
  .cmp-product-details__content {
    grid-template-columns: 1fr;
  }
  .cmp-product-details__details-container {
    gap: 30px;
  }
  .cmp-product-details__calculator,
  .cmp-product-details__downloads {
    width: 100%;
    margin-top: 20px;
  }
}
.cmp-product-details .btn {
  padding: 10px 15px;
  font-weight: 500;
  font-size: 17px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  color: #26202e;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}
.cmp-product-details .btn.btn-primary {
  background-color: #feb940;
}
.cmp-product-details .btn.btn-primary:hover {
  background-color: #fea60d;
}
.cmp-product-details .btn.btn-secondary {
  background-color: #474150;
  color: #ffffff;
}
.cmp-product-details .btn.btn-secondary:hover {
  background-color: #2e2a34;
}
@media screen and (max-width: 768px) {
  .cmp-product-details .btn {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .cmp-product-details__details-container {
    gap: 0;
  }
  .cmp-product-details__description {
    margin-bottom: 17px;
  }
}
.cmp-product-details__image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-product-details__image-modal {
    padding: 0;
  }
}
.cmp-product-details__image-modal-content {
  width: auto;
  height: 100%;
  object-fit: cover;
}
.cmp-product-details__image-modal-wrapper {
  background: #ffffff;
  padding: 58px 14px 14px;
  margin: auto;
  position: relative;
  height: 90%;
  overflow: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 1440px;
}
@media screen and (max-width: 768px) {
  .cmp-product-details__image-modal-wrapper {
    padding: 52px 13px 13px 14px;
    height: 100%;
    width: 100%;
  }
}
.cmp-product-details__image-modal-wrapper::-webkit-scrollbar {
  display: none;
}
.cmp-product-details__image-modal-close {
  position: absolute;
  top: 17px;
  right: 14px;
  cursor: pointer;
}
.cmp-product-details__image-inner-wrapper {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cmp-product-details__image-inner-wrapper::-webkit-scrollbar {
  display: none;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.product-filters-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 15px;
}
.product-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.product-filters-title {
  font-size: 42px;
  font-weight: 600;
  color: #26202e;
  margin: 0;
  margin-left: -40px;
}
.product-filters-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #5b5661;
}
.product-filters-icon:hover {
  color: #26202e;
}
.product-filters-icon span {
  margin-left: 5px;
  font-size: 17px;
}
.filter-icon {
  width: 24px;
  height: 24px;
  stroke: #26202e;
  transition: stroke 0.2s ease;
}
.filter-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
}
.filter-popup.active {
  display: block;
}
.filter-popup-content {
  background-color: #ffffff;
  width: 375px;
  /* Standard mobile width */
  height: 667px;
  /* Standard mobile height */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Center the popup */
  position: relative;
  margin: auto;
  margin-top: 80px;
}
.filter-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 25px;
  border-bottom: 1px solid #26202e;
}
.filter-popup-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #26202e;
  margin-top: 10px;
}
.filter-popup-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #26202e;
  margin-top: 10px;
}
.filter-popup-close:hover {
  color: #26202e;
}
.filter-popup-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.filter-popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.filter-layout {
  display: flex;
  height: 100%;
}
.filter-categories {
  width: 50%;
  border-right: 1px solid #e5e5e5;
  overflow-y: auto;
}
.filter-options-container {
  width: 50%;
  overflow-y: auto;
}
.filter-category {
  padding: 15px 20px;
  cursor: pointer;
}
.filter-category.active {
  background-color: #f5f5f5;
  border-left: 3px solid #f5f5f5;
}
.filter-category h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: #5b5661;
  display: flex;
  justify-content: space-between;
}
.filter-category h4 span {
  color: #5b5661;
  font-weight: 500;
  margin-right: 15px;
}
.filter-options {
  padding: 15px 20px;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.filter-options.active {
  display: flex;
}
.filter-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
}
.filter-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
.filter-option input[type="checkbox"]:checked + .filter-checkbox {
  background-color: #26202e;
  border-color: #26202e;
}
.filter-option input[type="checkbox"]:checked + .filter-checkbox:after {
  display: block;
}
.filter-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid #5b5661;
  border-radius: 2px;
  margin-right: 8px;
  position: relative;
}
.filter-checkbox:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-label {
  font-size: 17px;
  color: #26202e;
}
.filter-popup-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  border-top: 1px solid #e5e5e5;
}
.filter-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.clear-btn {
  background-color: #474150;
  color: #ffffff;
  margin-left: 130px;
}
.clear-btn:hover {
  background-color: #26202e;
}
.apply-btn {
  background-color: #feb940;
  color: #ffffff;
}
.apply-btn:hover {
  background-color: #fea60d;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  margin-left: -40px;
}
.filter-tag {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #f5f5f5;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  color: #26202e;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.filter-tag:hover {
  background-color: #e8e8e8;
}
.filter-tag span {
  margin-right: 8px;
}
.filter-tag .close-icon {
  width: 14px;
  height: 14px;
  stroke: #26202e;
}
.filter-tag.botanical {
  background-color: #f0eaf7;
}
.filter-tag.floral {
  background-color: #f0eaf7;
}
.filter-tag.geometric {
  background-color: #f0eaf7;
}
.clear-all-btn {
  background: none;
  border: none;
  color: #6700ff;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 12px;
  font-weight: 500;
}
.clear-all-btn:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .product-filters-title {
    font-size: 24px;
    margin-left: 10px;
  }
  .filter-icon {
    width: 20px;
    height: 20px;
  }
  .filter-popup-content {
    max-width: 95%;
    height: 550px;
    max-height: 100%;
    border-radius: 0;
  }
  .filter-layout {
    flex-direction: row;
  }
  .filter-categories,
  .filter-options-container {
    width: 50%;
  }
  .filter-categories {
    border-right: 1px solid #e5e5e5;
    border-bottom: none;
  }
  .clear-btn {
    margin-left: 100px;
  }
  .active-filters {
    margin-left: 0px;
  }
}
@media screen and (max-width: 480px) {
  .product-filters-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .product-filters-icon {
    margin-top: 0;
  }
  .filter-layout {
    flex-direction: row;
  }
  .filter-categories,
  .filter-options-container {
    width: 50%;
  }
  .filter-categories {
    border-right: 1px solid #e5e5e5;
    border-bottom: none;
  }
  .active-filters {
    margin-left: 0px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-about-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-about-wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0 40px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-about-wrapper {
    padding: 0 20px;
  }
}
.cmp-about {
  position: relative;
  overflow: hidden;
  text-align: left;
  margin-top: 56px;
  padding-top: 56px;
}
.cmp-about__title {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 50px;
}
@media screen and (max-width: 1200px) {
  .cmp-about__title {
    font-size: 30px;
    line-height: 100%;
    margin-bottom: 30px;
  }
}
.cmp-about__description {
  font-size: 26px;
  line-height: 100%;
  margin-bottom: 40px;
  font-weight: 600;
  letter-spacing: 0;
}
@media screen and (max-width: 1200px) {
  .cmp-about__description {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 20px;
  }
}
.cmp-about__image {
  width: 100%;
  height: auto;
  position: relative;
}
.cmp-about__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media screen and (max-width: 1200px) {
  .cmp-about__image img {
    width: 100%;
    height: 200px !important;
  }
}
@media screen and (max-width: 1200px) {
  .cmp-about__image {
    width: 100%;
    height: 200px !important;
  }
}
@media screen and (max-width: 1200px) {
  .cmp-about {
    padding-top: 56px;
  }
}
.about-left * {
  font-size: 32px !important;
  font-weight: 300;
  line-height: 55px !important;
  letter-spacing: 0%;
  margin-bottom: 40px;
}
@media screen and (max-width: 1200px) {
  .about-left * {
    font-size: 24px;
    line-height: 32px;
  }
}
.about-right * {
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0%;
  margin-bottom: 40px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-collections-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
}
.cmp-collections-slider-container .cmp-collections-slider__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
  gap: 28px;
  margin-bottom: 30px;
}
.cmp-collections-slider-container .cmp-collections-slider__nav button {
  background: none;
  border: none;
  font-size: 30px;
  color: #26202e;
  cursor: pointer;
  padding: 10px 0;
  transition: all 0.3s ease;
}
.cmp-collections-slider-container .cmp-collections-slider__nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #a29baa;
}
.cmp-collections-slider-container .cmp-collections-slider__nav button:disabled:hover {
  background-color: transparent;
  transform: none;
}
.cmp-collections-slider-container .cmp-collections-slider__nav button.active {
  color: #26202e;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__nav button {
    font-size: 20px;
    gap: 15px;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__nav .cmp-collections-slider__counter {
  font-size: 32px;
  color: #a29baa;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  min-width: 50px;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__nav {
    top: 245px;
    right: 10px;
  }
}
.cmp-collections-slider-container .cmp-collections-slider {
  margin-top: 50px;
  position: relative;
  overflow: visible;
  max-width: 1440px;
}
.cmp-collections-slider-container .cmp-collections-slider__slides-wrapper {
  background-color: #f5f5f5;
  position: relative;
  padding: 0 80px;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
@media screen and (max-width: 1200px) {
  .cmp-collections-slider-container .cmp-collections-slider__slides-wrapper {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__slides-wrapper {
    display: flex;
    position: static;
    margin-left: -20px;
    margin-right: 0;
    padding: 0 20px;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__slide {
  display: flex;
  flex-wrap: wrap;
  max-width: 1440px;
  align-content: center;
  justify-content: center;
  position: relative;
  transition: filter 0.3s ease;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .cmp-collections-slider-container .cmp-collections-slider__slide {
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cmp-collections-slider-container .cmp-collections-slider__slide::-webkit-scrollbar {
    display: none;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__left {
  flex: 1;
  max-width: 680px;
}
@media screen and (max-width: 1200px) {
  .cmp-collections-slider-container .cmp-collections-slider__left {
    max-width: 100%;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__heading {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 55px;
  max-width: 580px;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__heading {
    font-size: 28px;
    line-height: 1.4;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__description {
  font-size: 22px;
  font-weight: 400;
  line-height: 34px;
  margin-bottom: 30px;
  color: #26202e;
  max-width: 530px;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__description {
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0%;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__tabs-nav {
  margin-bottom: 60px;
  gap: 15px;
  display: flex;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__tabs-nav {
    margin-top: -10px;
    margin-bottom: 60px;
    gap: 10px;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__tab-panel {
  display: none;
}
.cmp-collections-slider-container .cmp-collections-slider__tab-panel.active {
  display: block;
}
.cmp-collections-slider-container .cmp-collections-slider__tab-btn {
  padding: 10px 23px;
  border: 1px solid #26202e;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 34px;
  color: #26202e;
}
.cmp-collections-slider-container .cmp-collections-slider__tab-btn.active {
  background-color: #26202e;
  color: #ffffff;
}
.cmp-collections-slider-container .cmp-collections-slider__grid {
  display: grid;
  width: fit-content;
  height: fit-content;
  grid-template-columns: repeat(2, auto);
  margin: 0;
  gap: 5px;
}
.cmp-collections-slider-container .cmp-collections-slider__grid img {
  width: 339px;
  height: 323px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.cmp-collections-slider-container .cmp-collections-slider__grid img:nth-child(1) {
  grid-column: 2;
  grid-row: span 2;
}
.cmp-collections-slider-container .cmp-collections-slider__grid img:nth-child(2) {
  grid-row: span 2;
  margin-top: -80px;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__grid img:nth-child(2) {
    margin-top: -40px;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__grid img:nth-child(3) {
  grid-row: span 2;
  margin-top: 0;
}
.cmp-collections-slider-container .cmp-collections-slider__grid img:nth-child(4) {
  margin-top: -40px;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__grid img:nth-child(4) {
    margin-top: -20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__grid img {
    max-width: 164px;
    height: 160px;
    width: 100%;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__right {
  flex: 1;
  padding-top: 50px;
  width: 558px;
  max-width: 590px;
  padding-left: 60px;
}
@media screen and (max-width: 1200px) {
  .cmp-collections-slider-container .cmp-collections-slider__right {
    padding-left: 0;
    padding-top: 50px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0%;
  margin-bottom: 30px;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
  }
}
.cmp-collections-slider-container .cmp-collections-slider__text {
  font-size: 17px;
  font-weight: 400;
  line-height: 2;
  margin-bottom: 45px;
  letter-spacing: 0%;
  width: auto;
  padding-right: 30px;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__text {
    font-size: 14px;
    line-height: 26px;
    width: 100%;
    padding-right: 0;
  }
}
.cmp-collections-slider-container .cmp-collections-slider .cmp-explore__box {
  width: 151px !important;
  height: 159px !important;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px 0px;
  text-decoration: none;
  color: #ffffff;
  background: #26202e;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider .cmp-explore__box {
    width: 110px !important;
    height: 115px !important;
    padding: 10px 14px;
  }
}
.cmp-collections-slider-container .cmp-collections-slider .cmp-explore__box:hover {
  gap: 20px;
}
.cmp-collections-slider-container .cmp-collections-slider .cmp-explore__box:hover .cmp-explore__icon-wrapper {
  height: 34px;
  width: 34px;
}
.cmp-collections-slider-container .cmp-collections-slider .cmp-explore__box__title {
  font-size: 23px;
  font-weight: 300;
  line-height: 28px;
  display: inline-block;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider .cmp-explore__box__title {
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
  }
}
.cmp-collections-slider-container .cmp-collections-slider .cmp-explore__icon-wrapper {
  position: relative;
  height: 14px;
  width: 14px;
  transition: all 300ms ease-in-out;
  overflow: hidden;
}
.cmp-collections-slider-container .cmp-collections-slider .cmp-collections-slider__peek {
  position: absolute;
  top: 0;
  right: -5% !important;
  width: 5%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(6px);
  transform: scale(1.05);
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider .cmp-collections-slider__peek {
    right: -2%;
    width: 2%;
  }
}
.cmp-collections-slider-container .cmp-collections-slider .cmp-collections-slider__peek-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.05);
}
.cmp-collections-slider-container .disabled {
  opacity: 0.3;
}
@media screen and (max-width: 480px) {
  .cmp-collections-slider-container .cmp-collections-slider__nav {
    gap: 4px;
  }
  .cmp-collections-slider-container .cmp-collections-slider__nav svg {
    width: 30px;
    height: 30px;
  }
  .cmp-collections-slider-container .cmp-collections-slider__nav .cmp-collections-slider__counter {
    font-size: 20px;
  }
}
.cmp-collections-slider__slides {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.cmp-collections-slider__slide {
  display: none;
  width: 100%;
}
.cmp-collections-slider__slide.active {
  display: flex;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-catalogue-gallery {
  overflow: hidden;
}
.cmp-catalogue-gallery__container {
  padding: 0 80px;
  max-width: 1440px;
  margin: 50px auto;
}
@media screen and (max-width: 1200px) {
  .cmp-catalogue-gallery__container {
    max-width: 100%;
    padding: 0 40px;
    margin: 40px 0;
    gap: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-catalogue-gallery__container {
    padding: 0 20px;
    margin: 30px 0;
    gap: 20px;
  }
}
.cmp-catalogue-gallery__icon {
  width: 50px;
  height: 50px;
  background-color: transparent;
  position: absolute;
  top: 0;
  z-index: 10;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__icon {
    width: 30px;
    height: 30px;
    top: 10px;
    bottom: auto;
  }
}
.cmp-catalogue-gallery__icon--prev {
  top: -75px;
  right: 140px;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__icon--prev {
    top: -50px;
    right: 80px;
  }
}
.cmp-catalogue-gallery__icon--next {
  top: -75px;
  right: 0;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__icon--next {
    top: -50px;
    right: 0px;
  }
}
.cmp-catalogue-gallery__heading {
  max-width: 718px;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__heading {
    max-width: 100%;
    margin-bottom: 60px;
    padding-bottom: 0;
  }
}
.cmp-catalogue-gallery__heading--h1 {
  color: #26202e;
  font-size: 35px;
  letter-spacing: 0%;
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__heading--h1 {
    font-size: 28px;
    line-height: 36px;
    width: 100%;
    margin-bottom: 10px;
  }
}
.cmp-catalogue-gallery__heading--description {
  color: #26202e;
  font-size: 17px;
  line-height: 28px;
  width: 700px;
  margin-top: 20px;
  margin-bottom: -30px;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__heading--description {
    font-size: 17px;
    line-height: 28px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 350px;
  }
}
.cmp-catalogue-gallery__tabs-nav {
  display: flex;
  margin-top: 60px;
  margin-bottom: -35px;
  gap: 15px;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__tabs-nav {
    margin-top: -40px;
    margin-bottom: 0;
  }
}
.cmp-catalogue-gallery__tab-panel {
  display: none;
}
.cmp-catalogue-gallery__tab-panel.active {
  display: block;
}
.cmp-catalogue-gallery__tab-btn {
  padding: 10px 23px;
  border: 1px solid #26202e;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 34px;
  color: #26202e;
}
.cmp-catalogue-gallery__tab-btn.active {
  background-color: #26202e;
  color: #ffffff;
}
.cmp-catalogue-gallery__carousel-wrapper {
  position: relative;
  width: 100%;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__carousel-wrapper {
    margin-top: 60px;
  }
}
.cmp-catalogue-gallery .slick-disabled {
  opacity: 0.5;
}
.cmp-catalogue-gallery__carousel-slide {
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__carousel-slide {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
.cmp-catalogue-gallery__carousel-top--heading {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 0 80px 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-catalogue-gallery__carousel-top--heading {
    padding: 0 0 80px 40px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__carousel-top--heading {
    padding: 0 0 30px 30px;
    width: 117px;
  }
}
.cmp-catalogue-gallery__carousel-top--heading-h2 {
  color: #ffffff;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  margin: 0;
}
@media screen and (max-width: 1200px) {
  .cmp-catalogue-gallery__carousel-top--heading-h2 {
    width: 350px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__carousel-top--heading-h2 {
    font-size: 17px;
    line-height: 24px;
    width: 17px;
  }
}
.cmp-catalogue-gallery__image {
  width: 100%;
  height: 545px;
  object-fit: cover;
}
.cmp-catalogue-gallery__image--middle {
  width: 100%;
  height: 545px;
  display: block;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__image--middle {
    width: 100%;
    height: 208px;
  }
}
.cmp-catalogue-gallery__image-middle {
  position: relative;
  width: 100%;
  height: 545px;
}
.cmp-catalogue-gallery__image-middle:before {
  content: '';
  position: absolute;
  height: 350px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 69%);
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__image-middle:before {
    height: 100px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__image-middle {
    height: 208px;
    position: relative;
  }
}
.cmp-catalogue-gallery__overlay-image {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 30;
  padding: 0 0 50px 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-catalogue-gallery__overlay-image {
    padding: 0 0 40px 40px;
  }
}
.cmp-catalogue-gallery__overlay-image img {
  height: 150px;
  max-width: 450px;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__overlay-image img {
    height: 68px;
    width: 180px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__overlay-image {
    padding: 0 0 20px 20px;
  }
}
.cmp-catalogue-gallery__count {
  color: #a29baa;
  text-align: center;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  position: absolute;
  z-index: 10;
  opacity: 1;
  top: -75px;
  right: 70px;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery__count {
    font-size: 21px;
    position: absolute;
    top: -55px;
    right: 30px;
    text-align: right;
    padding: 5px 10px;
    border-radius: 4px;
    transform: none;
    width: auto;
    margin: 0;
  }
}
.cmp-catalogue-gallery .cmp-explore__box {
  position: absolute;
  right: 80px;
  bottom: 40px;
  width: 160px !important;
  height: 159px !important;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px 0px;
  text-decoration: none;
  color: #26202e;
  background: #ffffff;
  z-index: 3;
  margin-bottom: 0;
  margin-right: -20px;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery .cmp-explore__box {
    width: 87px !important;
    height: 80px !important;
    padding: 10px;
    position: absolute;
    bottom: 20px;
    right: 10px;
    margin: 0;
  }
}
.cmp-catalogue-gallery .cmp-explore__box:hover {
  gap: 20px;
}
.cmp-catalogue-gallery .cmp-explore__box:hover .cmp-explore__icon-wrapper {
  height: 34px;
  width: 34px;
}
.cmp-catalogue-gallery .cmp-explore__title {
  font-size: 22px;
  font-weight: 300;
  line-height: 28px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .cmp-catalogue-gallery .cmp-explore__title {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
}
.cmp-catalogue-gallery .cmp-explore__icon-wrapper {
  position: relative;
  height: 14px;
  width: 14px;
  transition: all 300ms ease-in-out;
  overflow: hidden;
}
.cmp-catalogue-gallery__icon.is-first,
.cmp-catalogue-gallery__icon.is-last {
  opacity: 0.3;
}
.slick-track {
  display: flex !important;
  align-items: flex-end;
}
.slick-slide {
  display: flex !important;
  align-items: baseline;
  justify-content: flex-start;
}
/* Fix for slick font 404 errors */
.slick-slider .slick-prev:before,
.slick-slider .slick-next:before {
  font-family: inherit !important;
  content: '' !important;
}
/* Custom arrow styling */
.slick-prev,
.slick-next {
  background-image: url('data:image/svg+xml;utf8,<svg ...></svg>') !important;
  background-repeat: no-repeat !important;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-similar-products {
  margin: 0 auto;
  padding: 0 80px;
  max-width: 1440px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  margin-top: 80px;
  position: relative;
}
.cmp-similar-products__title {
  font-weight: 500;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #26202e;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products__title {
    font-size: 28px;
    margin-bottom: 10px;
  }
}
.cmp-similar-products__bookmark-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
  align-items: center;
  justify-content: center;
}
.cmp-similar-products__bookmark-modal--visible {
  display: flex;
}
.cmp-similar-products__category {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.cmp-similar-products__category-collections {
  font-weight: 700;
  font-size: 40px;
  line-height: 100%;
  letter-spacing: 0%;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products__category-collections {
    font-size: 28px;
  }
}
.cmp-similar-products__category-arrow {
  width: 27px;
  height: 45px;
  line-height: 100%;
}
.cmp-similar-products__category-arrow .img {
  transform: e;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products__category {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
}
.cmp-similar-products .cmp-similar-products-grid {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  gap: 30px;
  padding: 50px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cmp-similar-products .cmp-similar-products-grid::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 768px) {
  .cmp-similar-products .cmp-similar-products-grid {
    padding: 20px 0;
  }
}
.cmp-similar-products .cmp-similar-products-card-wrapper {
  margin: 10px 0;
}
.cmp-similar-products .cmp-similar-products-card {
  width: 305px;
  height: 350px;
}
.cmp-similar-products .cmp-similar-products-card:hover {
  transform: translateY(-5px);
}
.cmp-similar-products .cmp-similar-products-image {
  position: relative;
  max-width: 305px;
  height: 350px;
  object-fit: contain;
  align-content: center;
  background-color: #f2f2f2;
}
.cmp-similar-products .cmp-similar-products-image img {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
}
.cmp-similar-products .cmp-similar-products-bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  background-color: transparent;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
}
.cmp-similar-products .cmp-similar-products-bookmark-icon {
  width: 24px;
  height: 24px;
}
.cmp-similar-products .cmp-similar-products-bookmark:hover {
  background: #f0f0f0;
}
.cmp-similar-products .cmp-similar-products-bookmark:hover img {
  filter: brightness(0.5);
}
.cmp-similar-products .cmp-similar-products-name {
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0%;
  font-weight: 400;
  color: #26202e;
  margin: 20px 0 20px 0;
}
.cmp-similar-products .cmp-similar-products-colors {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  margin: 0 0 20px 0;
}
.cmp-similar-products .color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
}
.cmp-similar-products .color-dot.color-black {
  background-color: #000000;
}
.cmp-similar-products .color-dot.color-brown {
  background-color: #964B00;
}
.cmp-similar-products .color-dot.color-beige {
  background-color: #F5F5DC;
}
@media screen and (max-width: 1200px) {
  .cmp-similar-products {
    margin: 0;
    padding: 40px;
    max-width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .cmp-similar-products {
    margin: 50px 0;
    padding: 0 20px;
    max-width: 100%;
  }
}
.js-carousel-button {
  position: absolute;
  z-index: 50;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: none;
}
.js-carousel-button.js-prev {
  position: absolute;
  z-index: 1;
  top: 50px;
  right: 140px;
}
@media screen and (max-width: 480px) {
  .js-carousel-button.js-prev {
    display: none;
  }
}
.js-carousel-button.js-next {
  position: absolute;
  z-index: 1;
  top: 50px;
  right: 80px;
}
.js-carousel-button svg {
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 480px) {
  .js-carousel-button {
    display: none !important;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-find-store {
  max-width: 100%;
  margin: 0 80px;
  color: #26202e;
  margin-top: 60px;
}
.cmp-find-store__header {
  margin-bottom: 20px;
}
.cmp-find-store__title {
  font-size: 42px;
  font-weight: 800;
  color: #26202e;
  line-height: 100%;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__title {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
.cmp-find-store__search-container {
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  max-width: 900px;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__search-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    align-items: flex-start;
  }
}
.cmp-find-store__search-box {
  display: flex;
  align-items: center;
  flex: 1;
  width: 650px;
  height: 60px;
  overflow: hidden;
  position: relative;
  border: 1px solid #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__search-box {
    width: 100%;
  }
}
.cmp-find-store__search-icon {
  width: 30px;
  height: 30px;
  padding: 30px 30px;
  background-color: #000000;
  color: #ffffff;
}
.cmp-find-store__search-input {
  font-size: 17px;
  font-weight: 500;
  color: #a29baa;
  line-height: 24px;
  letter-spacing: 0%;
  width: 590px;
  height: 60px;
  flex: 1;
  border: none;
  outline: none;
  padding-left: 20px;
}
.cmp-find-store__location-box {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__location-box {
    display: flex;
    align-items: flex-start;
  }
}
.cmp-find-store__location-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.cmp-find-store__location-text {
  font-weight: 600;
  font-size: 17px;
  color: #6700ff;
  line-height: 28px;
  letter-spacing: 0%;
}
.cmp-find-store__results-count {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  color: #5b5661;
  margin-top: 15px;
  margin-bottom: 50px;
}
.cmp-find-store__view-toggle {
  display: none;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__view-toggle {
    display: flex;
    margin-top: 20px;
    align-items: flex-start;
  }
}
.cmp-find-store__toggle-btn {
  display: flex;
  gap: 0;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #26202e;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cmp-find-store__toggle-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0);
  transition: filter 0.3s ease;
}
.cmp-find-store__toggle-btn.active {
  background: #26202e;
}
.cmp-find-store__toggle-btn.active img {
  filter: brightness(100);
}
.cmp-find-store__toggle-btn.active span {
  color: #ffffff;
}
.cmp-find-store__content {
  display: flex;
  gap: 20px;
  max-height: hug(1000px);
  height: 120vh;
  overflow: auto;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__content {
    position: relative;
    flex-direction: column;
    height: 80vh;
  }
}
.cmp-find-store__list {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transition: opacity 0.3s ease;
    padding-right: 0;
    z-index: 2;
  }
  .cmp-find-store__list.hidden {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
}
.cmp-find-store__item {
  background-color: #f5f5f5;
  gap: 9px;
  padding: 20px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.cmp-find-store__item:hover {
  transform: translateY(-2px);
}
.cmp-find-store__item-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.cmp-find-store__item-title {
  font-weight: 700;
  font-size: 17px;
  color: #26202e;
  line-height: 24px;
  letter-spacing: 0%;
  margin-bottom: 0;
}
.cmp-find-store__item-icons {
  display: flex;
  gap: 10px;
}
.cmp-find-store__item-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.cmp-find-store__item-icon:hover {
  opacity: 0.7;
}
.cmp-find-store__info-line {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #26202e;
}
.cmp-find-store__line-icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
.cmp-find-store__map-container {
  flex: 1;
  height: 540px;
  width: 630px;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
}
.cmp-find-store__map-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    z-index: 1;
  }
  .cmp-find-store__map-container.hidden {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
}
.cmp-find-store__map {
  height: 540px;
  width: 630px;
  position: relative;
}
.cmp-find-store__map .leaflet-control-zoom {
  position: absolute;
  bottom: 20px;
  right: 20px;
  margin: 0;
  border: none;
}
.cmp-find-store__map .leaflet-control-zoom-in,
.cmp-find-store__map .leaflet-control-zoom-out {
  background: #ffffff;
  color: #26202e;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  border: 1px solid #f5f5f5;
}
.cmp-find-store__map .leaflet-control-zoom-in:hover,
.cmp-find-store__map .leaflet-control-zoom-out:hover {
  background: #f5f5f5;
  color: #26202e;
}
.cmp-find-store__map-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  z-index: 1000;
}
.cmp-find-store__map-toggle {
  background: #ffffff;
  padding: 2px;
  font-weight: 700;
}
.cmp-find-store__map-type {
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #26202e;
  transition: all 0.3s ease;
}
.cmp-find-store__map-type.active {
  font-weight: 800;
}
.cmp-find-store__map-type:hover {
  opacity: 0.8;
}
.cmp-find-store__fullscreen-btn {
  display: none;
  background: #ffffff;
  border: none;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
  .cmp-find-store__fullscreen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.cmp-find-store__fullscreen-btn img {
  width: 20px;
  height: 20px;
}
.cmp-find-store__fullscreen-btn.active {
  background: #f5f5f5;
}
.cmp-find-store__fullscreen-btn:hover {
  transform: scale(1.05);
}
.cmp-find-store .current-location-marker .pulse-dot {
  width: 16px;
  height: 16px;
  background: #26202e;
  border-radius: 50%;
  position: relative;
}
.cmp-find-store .current-location-marker .pulse-dot::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  width: 32px;
  height: 32px;
  background: rgba(38, 32, 46, 0.3);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@media screen and (max-width: 768px) {
  .cmp-find-store {
    margin: 0 20px;
    margin-top: 30px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-request-catalogues {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  margin-top: 30px;
}
.cmp-request-catalogues-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.cmp-request-catalogues-header-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
}
@media screen and (max-width: 480px) {
  .cmp-request-catalogues-header-title {
    font-size: 30px;
  }
}
.cmp-request-catalogues-header-description {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: #26202e;
  margin: 0 0 16px 0;
  max-width: 100%;
  letter-spacing: 1px;
  margin-bottom: 30px;
}
.cmp-request-catalogues-header-actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.cmp-request-catalogues-header-actions-download {
  width: hug(157px);
  height: hug(48px);
  min-width: 122px;
  padding: 12px 24px 12px 24px;
  background-color: #feb940;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  color: #26202e;
  cursor: pointer;
}
.cmp-request-catalogues-header-actions-select-all {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  color: #6700ff;
  padding: 12px 24px 12px 24px;
  background: none;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  .cmp-request-catalogues-header-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 16px 20px;
    z-index: 10;
    justify-content: space-between;
  }
}
@media screen and (max-width: 480px) {
  .cmp-request-catalogues-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
  }
}
.cmp-request-catalogues__filter-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin-bottom: 30px;
}
.cmp-request-catalogues__filter-section .cmp-request-catalogues-tags {
  flex: 1;
}
.cmp-request-catalogues__filter-section .cmp-request-catalogues-controls {
  flex-shrink: 0;
}
@media screen and (max-width: 480px) {
  .cmp-request-catalogues__filter-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 35px;
  }
}
.cmp-request-catalogues-controls {
  display: flex;
  gap: 20px;
  align-items: center;
}
.cmp-request-catalogues-sort-button {
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  color: #6700ff;
  background: none;
  cursor: pointer;
}
.cmp-request-catalogues__filter-button {
  font-size: 18px;
  font-weight: 500;
  color: #26202e;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.cmp-request-catalogues-filter-button .filter-icon {
  width: 16px;
  height: 16px;
}
.cmp-request-catalogues-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media screen and (max-width: 480px) {
  .cmp-request-catalogues-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-align: center;
    max-width: 100%;
  }
}
.cmp-request-catalogues-tag {
  padding: 5px 16px 5px 16px;
  background-color: #ffffff;
  border-radius: 34px;
  border: 1px solid #5b5661;
  height: fixed(32px);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #5b5661;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}
.cmp-request-catalogues-tag.selected {
  background-color: #26202e;
  color: #ffffff;
  border: 1px solid #5b5661;
}
.cmp-request-catalogues-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(329px, 1fr));
  gap: 30px;
  width: 100%;
}
@media screen and (max-width: 480px) {
  .cmp-request-catalogues-cards {
    grid-template-columns: 100%;
  }
}
.cmp-request-catalogues-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  position: relative;
  width: hug(414px);
  height: 317px;
  margin-bottom: 30px;
}
.cmp-request-catalogues-card-image {
  width: hug(414px);
  height: 254px;
  margin-bottom: 18px;
}
.cmp-request-catalogues-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.cmp-request-catalogues-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0%;
  margin-bottom: 8px;
}
.cmp-request-catalogues-card-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #000000;
}
.cmp-request-catalogues-card-info {
  padding: 0 20px;
  display: flex;
  gap: 8px;
}
.cmp-request-catalogues-card-products {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
  padding-right: 8px;
  border-right: 2px solid #e5e5e5;
}
.cmp-request-catalogues-card-description {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
}
.cmp-request-catalogues-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
}
.cmp-request-catalogues-count {
  font-size: 15px;
  color: #7a7482;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0%;
  margin-bottom: 15px;
}
.cmp-request-catalogues__load-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: hug(155px);
  height: fixed(48px);
  padding: 12px;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0%;
  background: none;
  cursor: pointer;
  color: #26202e;
}
.cmp-request-catalogues-load-more__icon {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-left: 5px;
  display: inline-block;
}
.cmp-request-catalogues-disclaimer {
  margin-top: 30px;
  padding: 15px 20px;
  border: 1px solid #26202e;
  font-size: 13px;
  line-height: 1.6;
  color: #26202e;
  text-align: left;
  margin-bottom: 75px;
}
@media screen and (max-width: 1200px) {
  .cmp-request-catalogues {
    padding: 0 40px;
    margin-top: 30px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-request-catalogues {
    padding: 0 20px;
    margin-top: 30px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-plugins-details {
  max-width: 1440px;
  margin: 30px auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-plugins-details {
    padding: 0 40px;
  }
}
.cmp-plugins-details__header {
  text-align: left;
  margin-bottom: 60px;
}
.cmp-plugins-details__title {
  font-size: 42px;
  font-weight: 800;
  color: #26202e;
  margin-bottom: 20px;
  line-height: 1.2;
}
.cmp-plugins-details__description {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: #26202e;
  margin: 0 0 16px 0;
  max-width: 100%;
  letter-spacing: 0.2px;
}
.cmp-plugins-details__cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
  visibility: visible;
  opacity: 1;
  width: 100%;
}
.cmp-plugins-details__card {
  background: #f5f5f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border: none;
  margin-bottom: 20px;
  max-height: 400px;
}
.cmp-plugins-details__card:hover {
  transform: none;
  box-shadow: none;
}
.cmp-plugins-details__card-title {
  padding: 20px;
  background: #f5f5f5;
  color: #26202e;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}
.cmp-plugins-details__card-image {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.cmp-plugins-details__card-image img {
  width: 100%;
  height: 100%;
  object-fit: none;
  display: block;
  transition: transform 0.3s ease;
}
.cmp-plugins-details__card-image img:hover {
  transform: scale(1.05);
}
.cmp-plugins-details__software-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 80px;
  row-gap: 30px;
  padding: 20px;
  align-items: center;
}
.cmp-plugins-details__software-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-right: 15px;
  margin-bottom: 0;
  font-size: 14px;
  color: #5b5661;
  font-weight: 700;
  border: none;
  border-radius: 0;
  transition: color 0.3s ease;
  text-decoration: none;
}
.cmp-plugins-details__software-item:hover {
  background-color: transparent;
  color: #5b5661;
}
.cmp-plugins-details__software-item img {
  width: 24px;
  height: 24px;
}
.cmp-plugins-details__software-item a {
  color: #5b5661;
  font-weight: 700;
  text-decoration: none;
}
.cmp-plugins-details__download-btn {
  display: inline-block;
  margin: 10px 0 20px 20px;
  padding: 8px 20px;
  background: #474150;
  color: #ffffff;
  text-align: center;
  border: none;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-transform: uppercase;
  border-radius: 0;
  align-self: flex-start;
}
.cmp-plugins-details__download-btn:hover {
  background: #26202e;
}
.cmp-plugins-details__footer-description {
  margin-top: 30px;
  padding: 15px 20px;
  border: 1px solid #26202e;
  font-size: 13px;
  line-height: 1.6;
  color: #26202e;
  text-align: left;
}
@media screen and (max-width: 1200px) {
  .cmp-plugins-details__cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .cmp-plugins-details__title {
    font-size: 30px;
    margin-left: 10px;
  }
  .cmp-plugins-details__description {
    font-size: 17px;
    margin-left: 10px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-plugins-details {
    padding: 20px 20px;
  }
  .cmp-plugins-details__cards-container {
    grid-template-columns: 1fr;
  }
  .cmp-plugins-details__software-icons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-category-listing {
  margin: 0 80px;
  font-family: Arial, sans-serif;
  align-items: center;
  margin-top: 80px;
}
.cmp-category-listing__header {
  margin-top: 36px;
}
.cmp-category-listing__title {
  font-size: 36px;
  font-weight: 600;
  color: #26202e;
  margin-bottom: 36px;
}
.cmp-category-listing__description {
  font-size: 16px;
  line-height: 1.5;
  color: #666666;
  max-width: 600px;
  margin-bottom: 36px;
}
.cmp-category-listing__filters {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
}
.cmp-category-listing__filter-btn {
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #26202e;
  border-radius: 100px;
}
.cmp-category-listing__filter-btn:hover {
  border-color: #26202e;
}
.cmp-category-listing__filter-btn.active {
  background-color: #26202e;
  color: #ffffff;
  border-color: #26202e;
}
.cmp-category-listing__category-count {
  font-size: 40px;
  font-weight: 500;
  color: #26202e;
  margin-bottom: 36px;
}
.cmp-category-listing__category-count span {
  color: #666666;
}
.cmp-category-listing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.cmp-category-listing__item {
  position: relative;
  background: #F5F5F5;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.cmp-category-listing__item:hover .cmp-category-listing__item-arrow {
  transform: translateX(4px);
}
.cmp-category-listing__item-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cmp-category-listing__item-image {
  position: relative;
  padding-bottom: 100%;
  background-color: #f5f5f5;
}
.cmp-category-listing__item-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-category-listing__item-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  background-color: #1c1c1c;
}
.cmp-category-listing__item-arrow {
  width: 16px;
  height: 16px;
  position: relative;
  transition: transform 0.3s ease;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.3999 1H15.0001V13.6002" stroke="white" stroke-width="1.5"/><path d="M14.8578 1.14062C10.8193 5.08941 2.50528 13.4931 0.997559 15.0009" stroke="white" stroke-width="1.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.cmp-category-listing__load-more {
  text-align: center;
  margin-top: 40px;
}
.cmp-category-listing__load-more-btn {
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 500;
  color: #26202e;
  background: none;
  border: 1px solid #26202e;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cmp-category-listing__load-more-btn:hover {
  background-color: #26202e;
  color: #ffffff;
}
@media (max-width: 1024px) {
  .cmp-category-listing__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .cmp-category-listing {
    padding: 24px 16px;
  }
  .cmp-category-listing__title {
    font-size: 28px;
  }
  .cmp-category-listing__filters {
    flex-wrap: wrap;
  }
  .cmp-category-listing__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .cmp-category-listing__grid {
    grid-template-columns: 1fr;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-search-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.586);
  z-index: 40;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.cmp-search-modal-overlay.active {
  display: block;
  opacity: 1;
}
.cmp-search {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 650px;
  width: 650px;
  height: auto;
  padding: 30px 40px;
  background-color: #ffffff;
  z-index: 41;
  transition: all 0.3s ease;
}
.cmp-search.active {
  display: block;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .cmp-search {
    width: 90%;
    max-width: 90%;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.cmp-search__close {
  position: absolute;
  top: 30px;
  right: 30px;
  background: none;
  border: none;
  font-size: 24px;
  color: #26202e;
  cursor: pointer;
  z-index: 42;
  transition: color 0.3s ease;
}
.cmp-search__close:hover {
  color: #000000;
}
.cmp-search .search-container {
  position: relative;
  display: inline-block;
  width: 90%;
}
.cmp-search .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: #26202e;
  pointer-events: none;
  z-index: 2;
}
.cmp-search-input {
  border: 1px solid #000000;
  background: #ffffff;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  width: 100%;
  padding: 5px 10px;
  border-radius: 30px;
  padding-left: 45px;
}
.cmp-search-input:focus {
  outline: none;
}
.cmp-search__container {
  display: flex;
  gap: 30px;
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .cmp-search__container {
    flex-direction: column;
    gap: 30px;
  }
}
.cmp-search__left {
  flex: 0 0 200px;
}
@media screen and (max-width: 768px) {
  .cmp-search__left {
    flex: 1;
    width: 100%;
  }
}
.cmp-search__section-title {
  font-size: 14px;
  font-weight: 700;
  color: #26202e;
  line-height: 20px;
  letter-spacing: 0%;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid #a29baa;
}
@media screen and (max-width: 768px) {
  .cmp-search__section-title {
    margin-bottom: 20px;
    font-size: 17px;
  }
}
.cmp-search__trending-searches {
  margin-bottom: 20px;
}
.cmp-search__tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-search__tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-start;
    margin-right: 80px;
    gap: 10px;
  }
}
.cmp-search__tag {
  color: #26202e;
  font-size: 13px;
  border: 1px solid #26202e;
  border-radius: 34px;
  line-height: 100%;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .cmp-search__tag {
    height: 28px;
    padding: 10px 14px;
    width: fit-content;
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
  }
}
.cmp-search__tag:hover {
  background: #f5f5f5;
}
.cmp-search__tag.selected {
  background: #a29baa;
  color: #ffffff;
}
.cmp-search__quick-links {
  margin-top: 10px;
}
.cmp-search__links-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  gap: 8px;
}
.cmp-search__link {
  font-weight: 500;
  font-size: 14px;
  color: #26202e;
  line-height: 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.3s ease;
  gap: 5px;
}
@media screen and (max-width: 768px) {
  .cmp-search__link {
    font-size: 17px;
    gap: 2px;
  }
}
.cmp-search__link-icon {
  width: 12px;
  height: 12px;
}
.cmp-search__right {
  flex: 1;
}
@media screen and (max-width: 768px) {
  .cmp-search__right {
    width: 100%;
  }
}
.cmp-search__products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-search__products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 10px;
  }
}
.cmp-search__product-card {
  max-width: 120px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
@media screen and (max-width: 768px) {
  .cmp-search__product-card {
    max-width: 100%;
    height: auto;
  }
}
.cmp-search__product-image {
  height: 75px;
  width: 100px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cmp-search__product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}
.cmp-search__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-search__product-title {
  font-weight: 500;
  font-size: 13px;
  line-height: 100%;
  margin-top: 10px;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 768px) {
  .cmp-search__product-title {
    font-size: 14px;
    margin-top: 5px;
  }
}
/* Search Overlay Component Styles - Add to your existing LESS file */
/* Overlay container */
.search-overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.search-overlay-container.active {
  display: block;
  opacity: 1;
}
/* Background overlay */
.search-overlay-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
/* Content container */
.search-overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
}
/* Body scroll prevention */
body.search-overlay-open {
  overflow: hidden;
  height: 100vh;
}
/* Component specific styles when in overlay */
.search-overlay-content .cmp-search {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 30px 40px;
  z-index: auto;
}
@media screen and (max-width: 768px) {
  .search-overlay-content .cmp-search {
    padding: 20px;
    margin: 0;
    border-radius: 4px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-benefits-banner__heading-section {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  margin-bottom: 20px;
}
.cmp-benefits-banner__main-heading {
  font-size: 40px;
  font-weight: 700;
  color: #26202e;
  margin: 0;
  padding: 10px 0;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__main-heading {
    font-size: 32px;
    padding: 15px 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__main-heading {
    font-size: 35px;
    padding: 10px 0;
  }
}
.cmp-benefits-banner {
  width: 100%;
  color: #ffffff;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner {
    margin: 20px auto;
    padding: 0;
  }
}
.cmp-benefits-banner__container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #26202e 0%, #220f3c 50%, #220d3e 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__container {
    border-radius: 0px;
  }
}
.cmp-benefits-banner__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.cmp-benefits-banner__background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 20%, #26202e, #220d3e 0%, transparent 80%);
}
.cmp-benefits-banner__background:after {
  content: '';
  position: absolute;
  top: -200px;
  left: -280px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse at top left, rgba(254, 185, 64, 0.5) 0%, rgba(254, 185, 64, 0.7) 40%, transparent 70%);
  z-index: 2;
  transform: rotate(-35deg) scale(1.8, 1.5);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__background:after {
    top: -150px;
    left: -200px;
    width: 300px;
    height: 300px;
    transform: rotate(-35deg) scale(-2.2, 1.5);
  }
}
.cmp-benefits-banner__smoky-gradient-test {
  display: none;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__smoky-gradient-test {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 40%;
    background: radial-gradient(circle at bottom right, #332b3f 0%, rgba(34, 13, 62, 0.95) 10%, rgba(35, 17, 58, 0.9) 25%, rgba(35, 18, 58, 0.7) 45%, rgba(35, 18, 58, 0.4) 65%, transparent 85%);
    transform-origin: bottom right;
    transform: scale(9.8);
    z-index: -1;
  }
}
.cmp-benefits-banner__dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #feb940;
  opacity: 1;
  z-index: 3;
  /* Dots for wave-top */
  /* Dots for wave-bottom */
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__dot {
    width: 4px;
    height: 4px;
  }
}
.cmp-benefits-banner__dot--top-1 {
  top: 25px;
  right: 50px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__dot--top-1 {
    top: 50px;
    right: 50px;
  }
}
.cmp-benefits-banner__dot--top-2 {
  top: 100px;
  right: 85px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__dot--top-2 {
    top: 85px;
    right: 70px;
  }
}
.cmp-benefits-banner__dot--bottom-1 {
  bottom: 280px;
  left: 30px;
  width: 7px;
  height: 7px;
}
.cmp-benefits-banner__dot--bottom-2 {
  bottom: 310px;
  left: 190px;
}
.cmp-benefits-banner__dot--bottom-3 {
  bottom: 220px;
  left: 150px;
}
.cmp-benefits-banner__wave-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background-image: url('../../../content/dam/decorpro/Vector1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__wave-top {
    width: 200px;
    height: 200px;
    top: -20px;
    right: -20px;
    opacity: 1;
  }
}
.cmp-benefits-banner__wave-bottom {
  position: absolute;
  top: 370px;
  left: 3px;
  width: 350px;
  height: 350px;
  background-image: url(../../../content/dam/decorpro/Vector2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 1;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__wave-bottom {
    display: none;
  }
}
.cmp-benefits-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__content {
    flex-direction: column;
    padding: 30px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__content {
    padding: 25px;
    flex-direction: column;
    gap: 10px;
  }
}
.cmp-benefits-banner__info {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  min-height: 400px;
  padding: 40px 20px;
  left: 40px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__info {
    width: 100%;
    margin-bottom: 30px;
    min-height: 300px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__info {
    width: 100%;
    min-height: auto;
    padding: 15px 10px;
    left: 0;
    margin-bottom: 15px;
  }
}
.cmp-benefits-banner__title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__title {
    font-size: 35px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__title {
    font-size: 26px;
    margin: 0 0 15px 0;
  }
}
.cmp-benefits-banner__description {
  font-size: 17px;
  line-height: 1.5;
  margin: 0px 0px 20px -3px;
  max-width: 85%;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__description {
    font-size: 17px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__description {
    font-size: 17px;
    margin: 0 0 15px 0;
    max-width: 100%;
    line-height: 1.4;
  }
}
.cmp-benefits-banner__description .highlight {
  color: #dbdbdb;
  font-weight: 700;
  font-size: 24px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__description .highlight {
    font-size: 22px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__description .highlight {
    font-size: 17px;
  }
}
.cmp-benefits-banner__note {
  position: relative;
  font-size: 12.5px;
  opacity: 0.7;
  margin-top: auto;
  top: 130px;
  z-index: 2;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__note {
    font-size: 20px;
    position: relative;
    top: 530px;
    margin-bottom: 10px;
    right: 2px;
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__note {
    font-size: 12px;
    position: relative;
    top: 390px;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
  }
}
.cmp-benefits-banner__data {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  padding: 50px 20px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__data {
    width: 100%;
    padding: 20px 0;
    bottom: 80px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__data {
    width: 100%;
    padding: 10px 5px;
    bottom: 80px;
  }
}
.cmp-benefits-banner__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 30px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__header {
    margin-bottom: 20px;
  }
}
.cmp-benefits-banner__quarter {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__quarter {
    font-size: 12px;
    margin-bottom: 10px;
  }
}
.cmp-benefits-banner__metrics {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 80px;
  width: 100%;
  margin-right: 20px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__metrics {
    gap: 30px;
    margin-right: 0;
  }
}
.cmp-benefits-banner__metrics .metric {
  text-align: left;
}
.cmp-benefits-banner__metrics .metric__label {
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 8px;
  font-weight: 400;
  color: #b6aebf;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__metrics .metric__label {
    font-size: 12px;
    margin-bottom: 5px;
  }
}
.cmp-benefits-banner__metrics .metric__value {
  font-size: 40px;
  font-weight: 700;
  color: #feb940;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banner__metrics .metric__value {
    font-size: 36px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__metrics .metric__value {
    font-size: 36px;
  }
}
.cmp-benefits-banner__metrics .metric__value--points {
  color: #feb940;
}
.cmp-benefits-banner__progress {
  margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__progress {
    margin-bottom: 25px;
  }
}
.cmp-benefits-banner__progress .progress-bar {
  width: 100%;
}
.cmp-benefits-banner__progress .progress-bar__track {
  position: relative;
  height: 3px;
  background-color: #7a7482;
  border-radius: 2px;
  margin-bottom: 60px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__progress .progress-bar__track {
    margin-bottom: 40px;
  }
}
.cmp-benefits-banner__progress .progress-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: #feb940;
  border-radius: 3px;
}
.cmp-benefits-banner__progress .progress-bar__end-marker {
  position: absolute;
  top: -10px;
  left: 20%;
  width: 1px;
  height: 25px;
  background-color: #feb940;
  border-radius: 0;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__progress .progress-bar__end-marker {
    width: 1px;
    height: 10px;
    top: -3px;
  }
}
.cmp-benefits-banner__progress .progress-bar__markers {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: -15px;
}
.cmp-benefits-banner__progress .progress-bar__markers .marker {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #4d4a5a;
  margin-top: -7px;
  z-index: 2;
  transition: background-color 0.3s ease;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__progress .progress-bar__markers .marker {
    width: 14px;
    height: 14px;
    margin-top: -5px;
  }
}
.cmp-benefits-banner__progress .progress-bar__markers .marker--line {
  width: 1px;
  height: 15px;
  border-radius: 0;
  background-color: #feb940;
  margin-top: -6px;
  margin-right: 70px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__progress .progress-bar__markers .marker--line {
    height: 6px;
    margin-right: 40px;
  }
}
.cmp-benefits-banner__progress .progress-bar__markers .marker--active {
  background-color: #c7c7c7;
}
.cmp-benefits-banner__progress .progress-bar__markers .marker--achieved {
  background-color: #feb940;
  box-shadow: 0 0 0 2px #ffffff;
}
.cmp-benefits-banner__progress .progress-bar__markers .marker__label {
  position: absolute;
  top: 25px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 16px;
  left: 20px;
  font-weight: 500;
  text-align: center;
  width: 100px;
  color: #ffffff;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
  opacity: 0;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__progress .progress-bar__markers .marker__label {
    font-size: 8px;
    width: 50px;
    top: 20px;
    left: 10px;
  }
}
.cmp-benefits-banner__progress .progress-bar__markers .marker__sublabel {
  position: absolute;
  top: 50px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  text-align: start;
  left: 25px;
  width: 100px;
  color: #ffffff;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__progress .progress-bar__markers .marker__sublabel {
    font-size: 8px;
    width: 65px;
    top: 40px;
    left: 20px ;
  }
}
.cmp-benefits-banner__table {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0;
  overflow: hidden;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__table {
    border-radius: 4px;
  }
}
.cmp-benefits-banner__table table {
  width: 100%;
  border-collapse: collapse;
}
.cmp-benefits-banner__table table th,
.cmp-benefits-banner__table table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  background-color: #342843;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__table table th,
  .cmp-benefits-banner__table table td {
    padding: 0.1px 0.8px;
  }
}
.cmp-benefits-banner__table table th {
  font-size: 14px;
  font-weight: 300;
  opacity: 0.7;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #26202e;
}
.cmp-benefits-banner__table table th:first-child {
  padding-left: 25px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__table table th {
    font-size: 12px;
    padding: 12px 8px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .cmp-benefits-banner__table table th:first-child {
    padding-left: 12px;
  }
}
.cmp-benefits-banner__table table tbody tr td:first-child {
  font-weight: 700;
}
.cmp-benefits-banner__table table td {
  font-size: 14px;
  color: #c7c7c7;
  background-color: #342843;
  font-weight: 400;
}
.cmp-benefits-banner__table table td:first-child {
  padding-left: 2.5px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banner__table table td {
    font-size: 12px;
    padding: 10px 8px;
  }
  .cmp-benefits-banner__table table td:first-child {
    padding-left: 12px;
  }
}
.cmp-benefits-banner__table table tr:last-child td {
  border-bottom: none;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-benefits-banners {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners {
    padding: 0;
  }
}
.cmp-benefits-banners__heading-section {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto 20px auto;
  padding: 0;
}
.cmp-benefits-banners__main-heading {
  font-size: 40px;
  font-weight: 800;
  color: #26202e;
  margin: 0;
  padding: 10px 0;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners__main-heading {
    font-size: 32px;
    padding: 15px 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__main-heading {
    font-size: 24px;
    padding: 10px 20px;
  }
}
.cmp-benefits-banners__container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #26202e 0%, #220f3c 50%, #220d3e 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  min-height: 281px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__container {
    min-height: 140px;
  }
}
.cmp-benefits-banners__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.cmp-benefits-banners__background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 20%, #26202e, #220d3e 0%, transparent 80%);
}
.cmp-benefits-banners__background:after {
  content: '';
  position: absolute;
  top: -140px;
  left: -200px;
  width: 360px;
  height: 360px;
  background: radial-gradient(ellipse at top left, rgba(254, 185, 64, 0.5) 0%, rgba(254, 185, 64, 0.7) 40%, transparent 70%);
  z-index: 2;
  transform: rotate(-35deg) scale(1.4, 1.2);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__background:after {
    top: -80px;
    left: -100px;
    width: 160px;
    height: 160px;
    transform: rotate(0) scale(2.5, 1);
  }
}
.cmp-benefits-banners__wave-top {
  position: absolute;
  top: 0;
  right: 200px;
  width: 280px;
  height: 180px;
  background-image: url('../../../content/dam/decorpro/icons/Vector1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__wave-top {
    display: none;
  }
}
.cmp-benefits-banners__wave-bottom {
  position: absolute;
  bottom: -120px;
  left: -10px;
  width: 320px;
  height: 200px;
  background-image: url('../../../content/dam/decorpro/icons/Vector2.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 1;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__wave-bottom {
    display: none;
  }
}
.cmp-benefits-banners__wave-mobile {
  position: absolute;
  display: none;
  /* Hidden by default on desktop/tablet */
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__wave-mobile {
    display: block;
    bottom: 10px;
    right: -60px;
    width: 250px;
    height: 90px;
    z-index: 10;
  }
}
.cmp-benefits-banners__wave-mobile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cmp-benefits-banners__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px;
  min-height: 240px;
  gap: 16px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__content {
    min-height: auto;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
  }
}
.cmp-benefits-banners__info {
  margin: 42px 0 0 40px;
  width: 55%;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners__info {
    width: 100%;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__info {
    width: 100%;
    margin: 0;
    padding-right: 0;
    order: 1;
  }
}
.cmp-benefits-banners__left-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners__left-title {
    font-size: 28px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__left-title {
    margin-top: 15px;
    font-size: 20px;
    margin-bottom: 6px;
  }
}
.cmp-benefits-banners__text {
  color: #dbdbdb;
  font-size: 24px;
  font-weight: 400;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__text {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.3;
  }
}
.cmp-benefits-banners__data {
  width: 40%;
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners__data {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__data {
    width: 100%;
    align-items: flex-start;
    text-align: left;
    padding-top: 0;
    padding-left: 0;
    order: 2;
    max-width: 100%;
    overflow: hidden;
  }
}
.cmp-benefits-banners__earned-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__earned-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
}
.cmp-benefits-banners__period {
  color: #ffffff;
  font-weight: 300;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__period {
    font-size: 11px;
  }
}
.cmp-benefits-banners__amount {
  color: #feb940;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  margin: 0 0 14px 0;
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: right;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-banners__amount {
    font-size: 62px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__amount {
    font-size: 66px;
    margin: 0 0 6px 0;
    max-width: 100%;
    overflow: visible;
    word-break: break-word;
    white-space: normal;
    line-height: 0.9;
  }
}
.cmp-benefits-banners__currency {
  font-size: 30px;
  vertical-align: baseline;
  margin-right: 6px;
  color: #b6aebf;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__currency {
    font-size: 34px;
    margin-right: 10px;
    max-width: 100%;
  }
}
.cmp-benefits-banners__updated {
  color: #C1C1C1;
  font-size: 12px;
  opacity: 0.9;
  font-weight: 400;
  padding-top: 25px;
  margin-right: 5px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners__updated {
    font-size: 9px;
    padding-top: 4px;
    margin-right: 0;
  }
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__content,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__content {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 90px 28px;
  min-height: 200px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__content,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__content {
    padding: 40px 16px;
    min-height: 140px;
  }
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info {
  margin: 0;
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__left-title,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__left-title {
  text-align: center;
  margin-bottom: 16px;
  font-size: 32px;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__left-title,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__left-title {
    font-size: 32px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__left-title,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__left-title {
    font-size: 24px;
    margin-bottom: 12px;
  }
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__text,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__text {
  text-align: center;
  font-size: 24px;
  margin: 0;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__text,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__text {
    font-size: 18px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__text,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__text {
    font-size: 16px;
  }
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__contact-link,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__contact-link {
  color: #fdc964;
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__contact-link:hover,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__contact-link:hover {
  color: #fdc964;
  text-decoration: none;
  transform: translateY(-1px);
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__contact-link:active,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__contact-link:active {
  transform: translateY(0);
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__contact-link,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__contact-link {
    font-size: 18px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__contact-link,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__contact-link {
    font-size: 16px;
  }
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__login-link,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__login-link {
  color: #fdc964;
  text-decoration: underline;
  text-decoration-color: #fdc964;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  font-size: 32px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__login-link:hover,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__login-link:hover {
  color: #fdc964;
  text-decoration: none;
  transform: translateY(-1px);
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__login-link:active,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__login-link:active {
  transform: translateY(0);
}
@media screen and (max-width: 768px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__login-link,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__login-link {
    font-size: 18px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__info .cmp-benefits-banners__login-link,
  .cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__info .cmp-benefits-banners__login-link {
    font-size: 24px;
    text-decoration: none;
  }
}
.cmp-benefits-banners .banner-state-no-access .cmp-benefits-banners__data,
.cmp-benefits-banners .banner-state-no-access-no-login .cmp-benefits-banners__data {
  display: none;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-benefits-percentage {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  background: #ffffff;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-percentage {
    padding: 0 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage {
    padding: 0 60px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage {
    padding: 0 16px;
  }
}
.cmp-benefits-percentage__container {
  padding: 2rem 0;
}
.cmp-benefits-percentage .benefits-header {
  margin-bottom: 20px;
}
.cmp-benefits-percentage .benefits-header .benefits-title {
  font-size: 26px;
  font-weight: 600;
  color: #26202e;
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-percentage .benefits-header .benefits-title {
    font-size: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefits-header .benefits-title {
    font-size: 20px;
    margin-left: 2px;
  }
}
.cmp-benefits-percentage .benefits-business-summary-section {
  margin-bottom: 60px;
  display: none;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefits-business-summary-section {
    margin-bottom: 20px;
  }
}
.cmp-benefits-percentage .benefits-business-summary-section .benefits-business-summary-bar {
  background: #dbdbdb;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  height: 72px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-business-summary-bar {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(132%);
    padding: 1rem 1rem;
    min-height: 60px;
  }
}
.cmp-benefits-percentage .benefits-business-summary-section .benefits-business-summary-bar .benefits-business-label {
  font-size: 16px;
  font-weight: 500;
  color: #26202e;
  margin-left: 15px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-business-summary-bar .benefits-business-label {
    font-size: 14px;
    white-space: nowrap;
    overflow: visible;
    margin-left: 10px;
  }
}
.cmp-benefits-percentage .benefits-business-summary-section .benefits-business-summary-bar .benefits-benefit-label {
  font-size: 16px;
  font-weight: 500;
  color: #26202e;
  margin-right: 20px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-business-summary-bar .benefits-benefit-label {
    font-size: 14px;
    white-space: nowrap;
    overflow: visible;
    margin-right: 100px;
  }
}
.cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  margin-top: 40px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display {
    padding: 10px 15px;
    margin-top: 15px;
    align-items: flex-end;
  }
}
.cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display .benefits-business-amount {
  font-size: 20px;
  font-weight: 700;
  color: #26202e;
  margin-left: 20px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display .benefits-business-amount {
    margin-left: -10px;
    max-width: 55%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
  }
}
.cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display .benefits-benefit-amount {
  font-size: 25px;
  font-weight: 700;
  color: #F8AB23;
  margin-right: 22px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display .benefits-benefit-amount {
    max-width: 55%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
    margin-right: -11px;
  }
}
.cmp-benefits-percentage .benefit-cards-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "card7 card9 card5" "card7 card2 card2";
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "card7 card9" "card7 card5" "card2 card2";
    gap: 3rem;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefit-cards-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "card5" "card7" "card9" "card2";
    gap: 2rem;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(112%);
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card {
  background: #f6f6f6;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  max-width: 100%;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header {
  margin: 20px 0 20px 20px;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header {
    margin: 12px 0 12px 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header {
    margin: 20px 0 20px 12px;
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header .benefit-percentage {
  display: flex;
  font-size: 40px;
  font-weight: 700;
  color: color-charcoal-purple-dark;
  margin: 0 0 0.5rem 0;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header .benefit-percentage {
    font-size: 34px;
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header .benefit-percentage-text {
  font-size: 30px;
  font-weight: 300;
  color: color-charcoal-purple-dark;
  margin: 11px 0 0 11px;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header .benefit-percentage-text {
    font-size: 26px;
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header .benefit-subtitle {
  font-size: 16px;
  color: #343a40;
  margin: 0;
  font-weight: 300;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items .benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.75rem;
  margin-top: -5px;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items .benefit-item .benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 65px;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items .benefit-item .benefit-icon svg {
  width: 100%;
  height: 100%;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items .benefit-item .item-label {
  font-size: 14px;
  font-weight: 300;
  color: #78777B;
  text-align: center;
  margin-top: -5px;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-description {
  margin-top: -10px;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-description p {
  font-size: 1rem;
  color: #495057;
  margin: 0;
  line-height: 1.5;
  text-align: center;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card-7 {
  grid-area: card7;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card-7 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card-7 .benefit-items {
  grid-template-rows: repeat(2, auto);
  row-gap: 30px;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card-9 {
  grid-area: card9;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card-9 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card-5 {
  grid-area: card5;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card-5 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card-2 {
  grid-area: card2;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card-2 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
  }
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card-2 .benefit-description p {
  font-size: 20px;
  font-weight: 300;
  color: #6c757d;
  text-align: left;
  margin: 0 0 0 20px;
}
.cmp-benefits-percentage .benefit-cards-section .benefit-card-2 .benefit-description p strong {
  font-weight: 500;
  color: #495057;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card-2 .benefit-description p {
    font-size: 14px;
    margin: 0 0 0 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    width: 80%;
  }
}
.cmp-benefits-percentage .footer-note {
  padding: 1rem 0;
  margin-top: 2rem;
}
.cmp-benefits-percentage .footer-note p {
  font-size: 18px;
  font-weight: 500;
  color: #6a607c;
  margin: 0;
  line-height: 1.5;
  text-align: left;
}
.cmp-benefits-percentage .footer-note p strong {
  font-weight: 700;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-percentage .footer-note p {
    font-size: 12px;
    margin-left: 15px;
  }
}
@media (max-width: 768px) {
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display {
    flex-direction: row;
    gap: 1rem;
    text-align: center;
  }
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display .benefits-benefit-amount {
    font-size: 30px;
  }
  .cmp-benefits-percentage .benefits-business-summary-section .benefits-amounts-display .benefits-business-amount {
    font-size: 14px;
  }
  .cmp-benefits-percentage .benefit-cards-section .benefit-card {
    padding: 1rem;
  }
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-card-header .benefit-percentage {
    font-size: 40px;
  }
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items .benefit-item .benefit-icon {
    width: 47px;
    height: 69px;
  }
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items .benefit-item .item-label {
    font-size: 14px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .cmp-benefits-percentage .benefit-cards-section .benefit-card .benefit-items .benefit-item .benefit-icon {
    width: 45px;
    height: 45px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-benefits-masters {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
.cmp-benefits-masters__container {
  width: 100%;
}
.cmp-benefits-masters__main-block {
  display: flex;
  position: relative;
  height: 245px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Left Section (30%) - Lavender background */
.cmp-benefits-masters__left-section {
  width: 35%;
  background: linear-gradient(135deg, #e6e6fa 0%, #d8bfd8 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cmp-benefits-masters__pattern-left {
  position: absolute;
  top: 0px;
  left: -15px;
}
.cmp-benefits-masters__pattern-left img {
  width: 290px;
  height: 80px;
  opacity: 1;
}
.cmp-benefits-masters__pattern-mobile-top {
  position: absolute;
  top: 0px;
  left: -15px;
  display: none;
}
.cmp-benefits-masters__logo {
  margin-bottom: 20px;
}
.cmp-benefits-masters__logo img {
  width: 266px;
  height: 88px;
}
.cmp-benefits-masters__subtitle {
  font-size: 20px;
  color: #29183b;
  text-align: center;
  font-weight: 300;
}
/* Triangular separator */
.cmp-benefits-masters__separator {
  position: absolute;
  left: 32.5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.cmp-benefits-masters__separator svg {
  width: 46px;
  height: 53px;
  display: block;
}
/* Right Section (70%) - Deep purple background */
.cmp-benefits-masters__right-section {
  width: 65%;
  background: #29183b;
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cmp-benefits-masters__pattern-right {
  position: absolute;
  top: 0px;
  right: -70px;
  z-index: 1;
}
.cmp-benefits-masters__pattern-right img {
  width: 220px;
  height: 180px;
  opacity: 1;
}
.cmp-benefits-masters__pattern-mobile-bottom {
  position: absolute;
  bottom: 20px;
  right: -80px;
  z-index: 1;
  display: none;
}
.cmp-benefits-masters__progress-section {
  width: 100%;
  position: relative;
}
.cmp-benefits-masters__progress-bar {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}
.cmp-benefits-masters__flag-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
  position: absolute;
  left: 240px;
  top: -35px;
  transition: left 0.3s ease;
  z-index: 10;
}
.cmp-benefits-masters__flag-icon {
  width: 24px;
  height: 25px;
}
.cmp-benefits-masters__current-amount {
  color: #9fddb8;
  font-size: 20px;
  font-weight: 700;
}
.cmp-benefits-masters__progress-track {
  width: 45%;
  height: 10px;
  border-radius: 2px;
  position: relative;
  margin-left: 230px;
  overflow: visible;
  z-index: 1;
}
.cmp-benefits-masters__progress-filled {
  height: 100%;
  background-color: #59c383;
  border-radius: 8px;
  position: absolute;
  left: 0;
  top: 0;
  min-width: 4px;
  transition: width 0.5s ease-out;
  overflow: visible !important;
  width: 0%;
  z-index: 3;
}
.cmp-benefits-masters__progress-dotted {
  position: absolute;
  height: 2px;
  top: 50%;
  border-top: 2px dotted rgba(255, 255, 255, 0.6);
  transform: translateY(-50%);
  z-index: 2;
}
.cmp-benefits-masters__progress-marker-current {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #220D3E;
  border: 2px solid #feb940;
  border-radius: 50%;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 4;
}
.cmp-benefits-masters__progress-marker-current.active {
  background-color: #feb940;
  border: 3px solid #feb940;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
}
.cmp-benefits-masters__progress-marker-current.nearest {
  border: 2px solid #feb940;
  box-shadow: 0 0 4px rgba(255, 193, 7, 0.4);
}
.cmp-benefits-masters__progress-marker-target {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #220D3E;
  border: 2px solid #feb940;
  border-radius: 50%;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 4;
}
.cmp-benefits-masters__progress-marker-target.active {
  background-color: #feb940;
  border: 3px solid #feb940;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
}
.cmp-benefits-masters__progress-marker-target.nearest {
  border: 2px solid #feb940;
  box-shadow: 0 0 4px rgba(255, 193, 7, 0.4);
}
.cmp-benefits-masters__benefits-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  z-index: 2;
}
.cmp-benefits-masters__info-row {
  display: flex;
  align-items: center;
}
.cmp-benefits-masters__info-label {
  color: #C6BAD7;
  font-size: 24px;
  font-weight: 600;
  min-width: 140px;
  margin-right: 15px;
  text-align: left;
}
.cmp-benefits-masters__info-values {
  display: flex;
  gap: 60px;
  position: relative;
}
.cmp-benefits-masters__value-current {
  color: #f1f1f1;
  font-size: 24px;
  font-weight: 500;
  transform: translateX(110px);
}
.cmp-benefits-masters__value-target {
  color: #f1f1f1;
  font-size: 24px;
  font-weight: 500;
  transform: translateX(185px);
}
.cmp-benefits-masters__tickets-current {
  transform: translateX(162px);
}
.cmp-benefits-masters__tickets-target {
  transform: translateX(218px);
}
.cmp-benefits-masters__qualification {
  padding: 1rem 0;
  margin-top: 2rem;
}
.cmp-benefits-masters__qualification p {
  font-size: 18px;
  font-weight: 500;
  color: #6a607c;
  margin: 0;
  line-height: 1.5;
  text-align: left;
}
.cmp-benefits-masters__qualification strong {
  font-weight: 700;
}
/* Desktop specific styles */
@media (min-width: 1025px) {
  .cmp-benefits-masters__right-section::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -120px;
    width: 350px;
    height: 200px;
    background: radial-gradient(circle at center, rgba(189, 157, 230, 0.5) -10%, rgba(47, 26, 75, 0.4) 40%, transparent 70%);
    transform: rotate(-25deg) scale(2.3, 2.1);
    z-index: 2;
    pointer-events: none;
  }
  .cmp-benefits-masters__progress-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 30%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(34, 13, 62, 0.3) 20%, rgba(34, 13, 62, 0.5) 50%, rgba(34, 13, 62, 0.3) 80%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
  .cmp-benefits-masters__benefits-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 230px;
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 2;
  }
}
/* Tablet styles (768px to 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
  .cmp-benefits-masters {
    padding: 0 40px;
  }
  .cmp-benefits-masters__main-block {
    flex-direction: row;
    height: 220px;
  }
  .cmp-benefits-masters__left-section {
    width: 35%;
    height: auto;
  }
  .cmp-benefits-masters__pattern-left {
    display: block;
  }
  .cmp-benefits-masters__pattern-mobile-top {
    display: none;
  }
  .cmp-benefits-masters__logo img {
    width: 220px;
    height: auto;
  }
  .cmp-benefits-masters__subtitle {
    font-size: 18px;
  }
  .cmp-benefits-masters__separator {
    display: none;
  }
  .cmp-benefits-masters__separator svg {
    display: none;
  }
  .cmp-benefits-masters__right-section {
    width: 65%;
    height: auto;
    padding: 20px;
  }
  .cmp-benefits-masters__pattern-right {
    display: block;
  }
  .cmp-benefits-masters__pattern-mobile-bottom {
    display: none;
  }
  .cmp-benefits-masters__flag-container {
    left: 150px;
    top: -40px;
    gap: 8px;
  }
  .cmp-benefits-masters__current-amount {
    font-size: 16px;
  }
  .cmp-benefits-masters__progress-track {
    width: 50%;
    margin-left: 180px;
  }
  .cmp-benefits-masters__flag-icon {
    width: 20px;
    height: 21px;
  }
  .cmp-benefits-masters__benefits-info {
    gap: 12px;
  }
  /* Vertical divider position for tablet */
  .cmp-benefits-masters__benefits-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 180px;
    /* adjust as needed for perfect alignment */
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 2;
  }
  .cmp-benefits-masters__info-label {
    font-size: 20px;
    min-width: 130px;
    margin-right: 12px;
  }
  .cmp-benefits-masters__info-row:first-child .cmp-benefits-masters__info-label {
    width: auto;
    white-space: nowrap;
    line-height: normal;
  }
  .cmp-benefits-masters__info-values {
    gap: 40px;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
  }
  .cmp-benefits-masters__value-current {
    font-size: 20px;
    transform: translateX(8rem);
  }
  .cmp-benefits-masters__value-target {
    font-size: 20px;
    transform: none;
    white-space: nowrap;
    text-align: right;
  }
  .cmp-benefits-masters__tickets-current {
    font-size: 20px;
    transform: translateX(8rem);
  }
  .cmp-benefits-masters__tickets-target {
    font-size: 20px;
    transform: none;
    white-space: nowrap;
    text-align: right;
  }
  .cmp-benefits-masters__qualification {
    padding: 0.8rem 0;
    margin-top: 1.5rem;
  }
  .cmp-benefits-masters__qualification p {
    font-size: 16px;
  }
}
/* iPad Pro specific styles (1024px) */
@media (min-width: 1024px) and (max-width: 1024px) {
  .cmp-benefits-masters__value-target {
    font-size: 20px;
    transform: translateX(-5rem);
  }
  .cmp-benefits-masters__tickets-target {
    font-size: 20px;
    transform: translateX(-5rem);
  }
}
/* Mobile styles (up to 767px) */
@media (max-width: 767px) {
  .cmp-benefits-masters {
    padding: 0;
    margin-top: -40px;
  }
  .cmp-benefits-masters__main-block {
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }
  .cmp-benefits-masters__left-section {
    width: 100%;
    height: 200px;
    order: 1;
    padding: 16px;
  }
  .cmp-benefits-masters__pattern-left {
    display: none;
  }
  .cmp-benefits-masters__pattern-mobile-top {
    display: block;
    top: 0px;
    left: -10px;
  }
  .cmp-benefits-masters__pattern-mobile-top img {
    width: 200px;
    height: 60px;
  }
  .cmp-benefits-masters__logo img {
    width: 200px;
    height: auto;
  }
  .cmp-benefits-masters__subtitle {
    font-size: 18px;
  }
  .cmp-benefits-masters__separator {
    position: absolute;
    left: 50%;
    top: 180px;
    transform: translateX(-50%);
    z-index: 1;
  }
  .cmp-benefits-masters__separator svg {
    width: 30px;
    height: 35px;
    transform: rotate(90deg);
  }
  .cmp-benefits-masters__right-section {
    width: 100%;
    height: 250px;
    order: 2;
    padding: 16px;
  }
  .cmp-benefits-masters__pattern-right {
    display: none;
  }
  .cmp-benefits-masters__pattern-mobile-bottom {
    display: block;
    bottom: -20px;
    right: -20px;
  }
  .cmp-benefits-masters__pattern-mobile-bottom img {
    width: 200px;
    height: 120px;
  }
  .cmp-benefits-masters__flag-container {
    left: 0;
    top: -35px;
  }
  .cmp-benefits-masters__current-amount {
    font-size: 16px;
  }
  .cmp-benefits-masters__progress-track {
    width: 50%;
    margin-left: 110px;
  }
  .cmp-benefits-masters__progress-marker-current {
    left: 35%;
  }
  .cmp-benefits-masters__progress-marker-target {
    left: 100%;
    width: 16px;
    height: 16px;
  }
  .cmp-benefits-masters__benefits-info {
    gap: 10px;
  }
  .cmp-benefits-masters__benefits-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 110px;
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 2;
  }
  .cmp-benefits-masters__info-label {
    font-size: 18px;
    min-width: 120px;
    margin-right: 10px;
  }
  .cmp-benefits-masters__info-row:first-child .cmp-benefits-masters__info-label {
    display: inline-block;
    white-space: normal;
    line-height: 1.3;
    width: 110px;
    text-align: left;
  }
  .cmp-benefits-masters__info-values {
    gap: 20px;
    flex-direction: row;
  }
  .cmp-benefits-masters__value-current {
    font-size: 18px;
    transform: translateX(15px);
  }
  .cmp-benefits-masters__value-target {
    font-size: 18px;
    transform: translateX(64px);
  }
  .cmp-benefits-masters__tickets-current {
    transform: translateX(15px);
  }
  .cmp-benefits-masters__tickets-target {
    transform: translateX(50px);
  }
  .cmp-benefits-masters__qualification {
    padding: 1rem 16px;
    margin-top: 1rem;
  }
  .cmp-benefits-masters__qualification p {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-benefits-achievements {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
  position: relative;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements {
    padding: 0 16px;
  }
}
.cmp-benefits-achievements__container {
  background: #ffffff;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements__container {
    padding: 1.5rem;
    margin: 15px 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements__container {
    padding: 0;
    margin: 0;
  }
}
.cmp-benefits-achievements .scheme-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 35px;
}
.cmp-benefits-achievements .scheme-header .scheme-title {
  font-size: 32px;
  font-weight: 400;
  color: #26202e;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements .scheme-header .scheme-title {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .scheme-header .scheme-title {
    font-size: 24px;
    font-weight: 500;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .scheme-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 40px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .period-tabs-right {
    position: absolute;
    top: 30px;
    right: 20px;
    width: auto;
    margin-top: 0;
  }
  .cmp-benefits-achievements .period-tabs-right .download-btn {
    padding: 8px 12px;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #26202e;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cmp-benefits-achievements .period-tabs-right .download-btn .download-icon {
    width: 16px;
    height: 16px;
  }
}
.cmp-benefits-achievements .period-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}
.cmp-benefits-achievements .period-tabs .period-tabs-left {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  margin-right: 1rem;
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.cmp-benefits-achievements .period-tabs .period-tabs-left::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements .period-tabs .period-tabs-left {
    gap: 1rem;
    margin-right: 1.5rem;
  }
}
.cmp-benefits-achievements .period-tabs .period-tabs-left .period-tab {
  background: #ffffff;
  border: 1px solid #26202e;
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
  color: #26202e;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements .period-tabs .period-tabs-left .period-tab {
    padding: 0.75rem 1.25rem;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .period-tabs .period-tabs-left .period-tab {
    padding: 10px;
  }
}
.cmp-benefits-achievements .period-tabs .period-tabs-left .period-tab:hover {
  background: #e5e5e5;
}
.cmp-benefits-achievements .period-tabs .period-tabs-left .period-tab.active {
  background: #26202e;
  color: #ffffff;
  border-color: #26202e;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .period-tabs .period-tabs-left {
    width: 100%;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    margin-right: 0;
  }
}
.cmp-benefits-achievements .period-tabs .period-tabs-right .download-btn {
  background: #ffffff;
  border: 1px solid #c7c7c7;
  padding: 0.75rem 1rem;
  color: #26202e;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  text-decoration: none;
}
.cmp-benefits-achievements .period-tabs .period-tabs-right .download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cmp-benefits-achievements .period-tabs .period-tabs-right .download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.cmp-benefits-achievements .period-tabs .period-tabs-right .download-btn .download-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}
.cmp-benefits-achievements .period-tabs .period-tabs-right .download-btn .download-icon path {
  transition: stroke 0.2s;
}
.cmp-benefits-achievements .period-tabs .period-tabs-right .download-btn:hover .download-icon {
  transform: translateY(1px);
}
.cmp-benefits-achievements .period-tabs .period-tabs-right .download-btn:hover .download-icon path {
  stroke: #26202e;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .period-tabs {
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .cmp-benefits-achievements .period-tabs .period-tabs-left {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
  }
  .cmp-benefits-achievements .period-tabs .period-tab {
    flex: 0 0 auto;
    min-width: 90px;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid #c7c7c7;
    color: #26202e;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  .cmp-benefits-achievements .period-tabs .period-tab.active {
    background: #26202e;
    color: #ffffff;
    border-color: #26202e;
  }
}
.cmp-benefits-achievements .coatings-section {
  margin-bottom: 30px;
}
.cmp-benefits-achievements .coatings-section .coatings-title {
  font-size: 25px;
  font-weight: 600;
  color: #26202e;
  margin: 0 0 1rem 0;
  margin-bottom: 30px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .coatings-section .coatings-title {
    font-size: 22px;
    margin-bottom: 35px;
  }
}
.cmp-benefits-achievements .coatings-section .product-categories {
  display: flex;
  gap: 6rem;
  align-items: center;
  margin-left: -20px;
}
.cmp-benefits-achievements .coatings-section .product-categories .category-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 24px;
  transition: all 0.2s;
  cursor: pointer;
}
.cmp-benefits-achievements .coatings-section .product-categories .category-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cmp-benefits-achievements .coatings-section .product-categories .category-item.hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cmp-benefits-achievements .coatings-section .product-categories .category-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -3rem;
  width: 1px;
  background: #c7c7c7;
}
.cmp-benefits-achievements .coatings-section .product-categories .category-item .category-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .coatings-section .product-categories .category-item .category-icon {
    width: 40px;
    height: 40px;
  }
}
.cmp-benefits-achievements .coatings-section .product-categories .category-item .category-label {
  font-size: 20px;
  color: #26202e;
  font-weight: 400;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .coatings-section .product-categories .category-item .category-label {
    font-size: 14px;
  }
}
.cmp-benefits-achievements .coatings-section .product-categories .category-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: 8px;
  height: 65px;
  right: -3rem;
  width: 1px;
  background: #c7c7c7;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .coatings-section .product-categories {
    display: flex;
    gap: 6rem;
    align-items: center;
    margin-left: -20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .coatings-section {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements .coatings-section .product-categories {
    gap: 4rem;
    padding-bottom: 15px;
  }
  .cmp-benefits-achievements .coatings-section .product-categories .category-item:not(:last-child)::after {
    right: -2rem;
  }
}
.cmp-benefits-achievements .business-done-section {
  margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .business-done-section {
    margin-bottom: 20px;
  }
}
.cmp-benefits-achievements .business-done-section .business-done-bar {
  background: #dbdbdb;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  height: 72px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .business-done-section .business-done-bar {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(132%);
  }
}
.cmp-benefits-achievements .business-done-section .business-done-bar .business-label {
  font-size: 16px;
  font-weight: 500;
  color: #26202e;
  margin-left: 10px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .business-done-section .business-done-bar .business-label {
    font-size: 14px;
    white-space: nowrap;
    overflow: visible;
    margin-left: 10px;
    margin-left: 15px;
  }
}
.cmp-benefits-achievements .business-done-section .business-done-bar .benefit-label {
  font-size: 16px;
  font-weight: 500;
  color: #26202e;
  margin-right: 15px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .business-done-section .business-done-bar .benefit-label {
    font-size: 14px;
    white-space: nowrap;
    overflow: visible;
    margin-right: 100px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .business-done-section .business-done-bar {
    padding: 0.75rem 1rem;
    height: 60px;
  }
}
.cmp-benefits-achievements .business-done-section .amounts-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  margin-top: 25px;
}
.cmp-benefits-achievements .business-done-section .amounts-display .business-amount {
  font-size: 2rem;
  font-weight: 700;
  color: #26202e;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .business-done-section .amounts-display .business-amount {
    font-size: 15px;
    margin-left: -7px;
    max-width: 55%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
  }
}
.cmp-benefits-achievements .business-done-section .amounts-display .benefit-amount {
  font-size: 30px;
  font-weight: 700;
  color: #feb940;
  margin-right: 5px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .business-done-section .amounts-display .benefit-amount {
    font-size: 30px;
    max-width: 55%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
    margin-right: -11px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .business-done-section .amounts-display {
    padding: 10px 15px;
    margin-top: 15px;
  }
}
.cmp-benefits-achievements .progress-section {
  background: #f6f6f6;
  padding: 30px 20px;
  height: 175px;
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements .progress-section {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(132%);
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(132%);
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 20px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-benefits-achievements .progress-section {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(132%);
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(132%);
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 20px;
  }
}
.cmp-benefits-achievements .progress-section .progress-bar {
  margin-bottom: 2rem;
  /* Keep original positioning for milestones */
  padding-left: 140px;
  /* original position to keep milestones in place */
  box-sizing: border-box;
  width: 95%;
  /* Tablet font-size adjustments for better fit */
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements .progress-section .progress-bar {
    width: 1800px;
    min-width: 1800px;
    margin-bottom: 2rem;
    padding-left: 140px;
    padding-right: 200px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-benefits-achievements .progress-section .progress-bar {
    width: 1800px;
    min-width: 1800px;
    margin-bottom: 2rem;
    padding-left: 140px;
    padding-right: 200px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .progress-bar {
    width: 1800px;
    min-width: 1800px;
    margin-bottom: 2rem;
    padding-left: 140px;
    padding-right: 200px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .progress-bar {
    width: 1400px;
    min-width: 1400px;
    margin-bottom: 2rem;
    padding-left: 140px;
    padding-right: 100px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .progress-bar .slab-row .slab-label {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .progress-bar .slab-row .slab-amounts .slab-amount,
  .cmp-benefits-achievements .progress-section .progress-bar .slab-row .benefit-amounts .slab-amount,
  .cmp-benefits-achievements .progress-section .progress-bar .slab-row .slab-amounts .benefit-value,
  .cmp-benefits-achievements .progress-section .progress-bar .slab-row .benefit-amounts .benefit-value {
    font-size: 14px;
  }
}
.cmp-benefits-achievements .progress-section .progress-bar .progress-line {
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(to right, #dee2e6 0px, #dee2e6 8px, transparent 8px, transparent 16px);
  border-radius: 2px;
  margin: 2rem 0;
  width: 100%;
  /* Full width container */
  margin-left: 0;
  /* Align to start */
}
.cmp-benefits-achievements .progress-section .progress-bar .progress-line .progress-fill {
  position: absolute;
  left: -23px;
  /* Start from vertical line position */
  top: -4px;
  height: 12px;
  background: #26202e;
  border-radius: 8px;
  width: calc(7.5%);
  /* Include the extra width to reach first milestone */
}
.cmp-benefits-achievements .progress-section .progress-bar .progress-line .milestone-dots {
  position: absolute;
  top: -3.5px;
  left: 20px;
  right: 0;
  display: flex;
  justify-content: space-between;
}
.cmp-benefits-achievements .progress-section .progress-bar .progress-line .milestone-dots .milestone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9d75bd;
}
.cmp-benefits-achievements .progress-section .progress-bar .progress-line .milestone-dots .milestone-dot.active {
  background: #9d75bd;
}
.cmp-benefits-achievements .progress-section .progress-bar .progress-line .flag-marker {
  position: absolute;
  top: -27px;
  /* above dot */
  left: 17%;
  /* initial position, will be updated dynamically by JavaScript */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transition: left 0.3s ease;
  /* smooth animation when position changes */
}
.cmp-benefits-achievements .progress-section .progress-bar .progress-line .flag-marker.flag-completed svg path {
  fill: #9d75bd;
}
.cmp-benefits-achievements .progress-section .benefit-slabs {
  position: relative;
  /* Single vertical line for both rows */
}
.cmp-benefits-achievements .progress-section .benefit-slabs:before {
  content: '';
  position: absolute;
  top: 0;
  left: 120px;
  /* matches min-width of labels */
  width: 1px;
  height: 100%;
  background: #c7c7c7;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs {
    width: 1400px;
    min-width: 1400px;
    position: relative;
    padding-right: 100px;
  }
  .cmp-benefits-achievements .progress-section .benefit-slabs:before {
    left: 120px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs {
    width: 1800px;
    min-width: 1800px;
    position: relative;
    padding-right: 200px;
  }
  .cmp-benefits-achievements .progress-section .benefit-slabs:before {
    left: 120px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs {
    width: 1800px;
    min-width: 1800px;
    position: relative;
    padding-right: 200px;
  }
  .cmp-benefits-achievements .progress-section .benefit-slabs:before {
    left: 120px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs {
    width: 1400px;
    min-width: 1400px;
    position: relative;
    padding-right: 100px;
  }
  .cmp-benefits-achievements .progress-section .benefit-slabs:before {
    left: 120px;
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  /* Benefit row: lock into 8 fixed columns so per-item tweaks don't reflow others */
  /* Replace margin nudges with transform so siblings are not affected */
  /* Individual slab amount alignment with transform */
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row:last-child {
  margin-bottom: 0;
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-label {
  font-size: 16px;
  font-weight: 600;
  color: #7a7482;
  min-width: 120px;
  margin-right: 1rem;
  text-align: left;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-label {
    font-size: 10px;
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts,
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount,
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .slab-amount {
  font-size: 18px;
  color: #6f6a75;
  text-align: center;
  flex: 0 0 auto;
  font-weight: 500;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount,
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .slab-amount {
    font-size: 12px;
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .benefit-value,
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value {
  font-size: 18px;
  color: #495057;
  text-align: center;
  flex: 0 0 auto;
  font-weight: 500;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .benefit-value,
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value {
    font-size: 12px;
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  justify-items: center;
  align-items: center;
  column-gap: 0;
  color: #3F3946;
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-1 {
  margin-left: 0;
  transform: translateX(-40px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-1 {
    transform: translateX(-52px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-1 {
    transform: translateX(-62px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-2 {
  margin-left: 0;
  transform: translateX(-33px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-2 {
    transform: translateX(-25px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-2 {
    transform: translateX(-48px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-3 {
  margin-left: 0;
  transform: translateX(-28px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-3 {
    transform: translateX(-16px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-4 {
  margin-left: 0;
  transform: translateX(-25px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-4 {
    transform: translateX(-3px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-4 {
    transform: translateX(-10px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-5 {
  margin-left: 0;
  transform: translateX(-25px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-5 {
    transform: translateX(10px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-5 {
    transform: translateX(3px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-6 {
  margin-left: 0;
  transform: translateX(-17px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-6 {
    transform: translateX(28px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-6 {
    transform: translateX(27px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-7 {
  margin-left: 0;
  transform: translateX(-14px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-7 {
    transform: translateX(43px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-7 {
    transform: translateX(55px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-8 {
  margin-left: 0;
  transform: translateX(-10px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-8 {
    transform: translateX(60px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .benefit-amounts .benefit-value-8 {
    transform: translateX(45px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-1 {
  transform: translateX(0px);
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-2 {
  transform: translateX(7px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-2 {
    transform: translateX(20px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-3 {
  transform: translateX(10px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-3 {
    transform: translateX(20px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-3 {
    transform: translateX(20px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-4 {
  transform: translateX(12px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-4 {
    transform: translateX(25px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-4 {
    transform: translateX(30px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-5 {
  transform: translateX(11px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-5 {
    transform: translateX(30px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-5 {
    transform: translateX(36px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-6 {
  transform: translateX(4px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-6 {
    transform: translateX(30px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-6 {
    transform: translateX(42px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-7 {
  transform: translateX(-4px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-7 {
    transform: translateX(30px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-7 {
    transform: translateX(45px);
  }
}
.cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-8 {
  transform: translateX(-13px);
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-8 {
    transform: translateX(30px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .cmp-benefits-achievements .progress-section .benefit-slabs .slab-row .slab-amounts .slab-amount-8 {
    transform: translateX(20px);
  }
}
.cmp-benefits-achievements .footer-note {
  display: flex;
  font-size: 18px;
  color: #6a607c;
  margin-top: 1rem;
  font-weight: 700;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .footer-note {
    font-size: 12px;
  }
}
.cmp-benefits-achievements .footer-note .footer-note-text {
  font-size: 18px;
  color: #6a607c;
  font-weight: 400;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .footer-note .footer-note-text {
    font-size: 12px;
  }
}
.cmp-benefits-achievements .year-layout {
  margin-bottom: 40px;
}
.cmp-benefits-achievements .year-layout .year-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.cmp-benefits-achievements .year-layout .year-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.cmp-benefits-achievements .year-layout .year-section-title {
  font-size: 25px;
  font-weight: 600;
  color: #26202e;
  margin: 0 0 20px 0;
}
.cmp-benefits-achievements .year-layout .year-section-title .year-section-subtitle {
  font-size: 16px;
  color: #6a607c;
  font-weight: 400;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-section-title .year-section-subtitle {
    margin-top: 5px;
    display: block;
  }
}
.cmp-benefits-achievements .year-layout .year-business-bar {
  background: #dbdbdb;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  margin-bottom: 1rem;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-business-bar {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(132%);
    padding: 0.75rem 1rem;
    height: 60px;
  }
}
.cmp-benefits-achievements .year-layout .year-business-bar .year-business-label {
  font-size: 16px;
  font-weight: 500;
  color: #495057;
  margin-left: 15px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-business-bar .year-business-label {
    font-size: 14px;
  }
}
.cmp-benefits-achievements .year-layout .year-business-bar .year-benefit-label {
  font-size: 16px;
  font-weight: 500;
  color: #495057;
  margin-right: 20px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-business-bar .year-benefit-label {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-business-bar .year-business-label {
    white-space: nowrap;
    overflow: visible;
    margin-left: 10px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-business-bar .year-benefit-label {
    white-space: nowrap;
    overflow: visible;
    margin-right: 100px;
  }
}
.cmp-benefits-achievements .year-layout .year-amounts-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  margin-top: 40px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-amounts-display {
    padding: 10px 15px;
    margin-top: 20px;
    align-items: flex-start;
  }
}
.cmp-benefits-achievements .year-layout .year-amounts-display .coatings-business-done,
.cmp-benefits-achievements .year-layout .year-amounts-display .decor-business-done {
  font-size: 20px;
  font-weight: 700;
  color: #26202e;
  margin-left: 7px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-amounts-display .coatings-business-done,
  .cmp-benefits-achievements .year-layout .year-amounts-display .decor-business-done {
    margin-left: -10px;
    max-width: 50%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
  }
}
.cmp-benefits-achievements .year-layout .year-amounts-display .coatings-benefit-earned,
.cmp-benefits-achievements .year-layout .year-amounts-display .decor-benefit-earned {
  font-size: 30px;
  font-weight: 700;
  color: #F8AB23;
  margin-right: 8px;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-achievements .year-layout .year-amounts-display .coatings-benefit-earned,
  .cmp-benefits-achievements .year-layout .year-amounts-display .decor-benefit-earned {
    max-width: 50%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
    margin-right: -12px;
  }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  /* Only adjust the first benefit value (₹7,500) within 1200–1400px */
  .cmp-benefits-achievements .benefit-amounts .benefit-value-1 {
    transform: translateX(-25px) !important;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-benefits-points-system {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
.cmp-benefits-points-system__header {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  position: relative;
}
.cmp-benefits-points-system__title {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 5px;
  color: #26202e;
}
.cmp-benefits-points-system__title .span-year {
  font-weight: 700;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__title .span-year {
    display: block;
  }
}
.cmp-benefits-points-system__title-icon {
  margin-left: 8px;
  color: #26202e;
  transition: transform 0.3s ease;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__title-icon {
    position: relative;
    bottom: 30px;
    left: 100px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__title {
    font-size: 26px;
  }
}
.cmp-benefits-points-system__subtitle {
  font-size: 17px;
  color: #26202e;
  margin-bottom: 15px;
  font-weight: 400;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-points-system__subtitle {
    font-size: 16px;
  }
}
.cmp-benefits-points-system__download {
  position: absolute;
  right: 0;
  top: 15px;
  font-size: 17px;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__download {
    position: relative;
    margin-top: 10px;
    margin-left: 190px;
    border-bottom: 20px solid #ffffff;
  }
}
.cmp-benefits-points-system__download-icon {
  position: relative;
  left: 10px;
}
.cmp-benefits-points-system__download-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #d4d4d4;
  text-decoration: none;
  color: #26202e;
  background-color: #ffffff;
  transition: background-color 0.2s ease;
}
.cmp-benefits-points-system__download-link:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 5px;
}
.cmp-benefits-points-system__table {
  background-color: #f8f8f8;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  max-height: 620px;
  overflow-y: auto;
  scrollbar-width: none;
  /* Scrollbar styling */
}
.cmp-benefits-points-system__table::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__table {
    max-height: none;
    overflow-y: visible;
  }
}
.cmp-benefits-points-system__table-header {
  display: flex;
  background-color: #dbdbdb;
  padding: 25px 10px;
  color: #26202e;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 5px solid #ffffff;
  margin-bottom: 5px;
  font-size: 17px;
  font-weight: 500;
}
.cmp-benefits-points-system__table-header .cmp-benefits-points-system__column {
  font-size: 17px;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__table-header {
    display: none;
  }
}
.cmp-benefits-points-system__table-row {
  display: flex;
  padding: 20px 10px;
  border-bottom: 5px solid #ffffff;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__table-row {
    flex-direction: column;
    padding: 20px;
    border-bottom: 15px solid #ffffff;
  }
}
.cmp-benefits-points-system__table-row:last-child {
  border-bottom: none;
}
.cmp-benefits-points-system__column {
  display: flex;
  align-items: center;
  padding: 0 15px;
  /* Add padding on both sides of each column */
}
.cmp-benefits-points-system__column--category {
  width: 20%;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  padding-left: 0;
  /* Remove left padding from first column */
}
@media screen and (max-width: 991px) {
  .cmp-benefits-points-system__column--category {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__column--category {
    width: 100%;
    margin-bottom: 15px;
    margin-left: 30px;
  }
}
.cmp-benefits-points-system__column--products {
  width: 30%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  white-space: normal;
  line-height: 1.6;
  font-size: 17px;
  font-weight: 500;
  padding-right: 15px;
  /* Consistent right padding */
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__column--products {
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    display: block;
    font-size: 17px;
  }
  .cmp-benefits-points-system__column--products:before {
    content: "Products";
    display: block;
    margin-bottom: 5px;
    color: #26202e;
    font-size: 14px;
  }
}
.cmp-benefits-points-system__column--points {
  width: 25%;
  font-size: 17px;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__column--points {
    width: 100%;
    margin-bottom: 15px;
    display: block;
    clear: both;
    font-weight: 700;
  }
  .cmp-benefits-points-system__column--points:before {
    content: "Points";
    display: block;
    font-weight: 400;
    margin-bottom: 5px;
    color: #26202e;
    font-size: 14px;
  }
}
.cmp-benefits-points-system__column--purchases {
  width: 25%;
  font-size: 17px;
  font-weight: 700;
  padding-right: 0;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system__column--purchases {
    width: 90%;
    background-color: #dbdbdb;
    padding: 20px;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 22px;
    display: block;
    clear: both;
  }
  .cmp-benefits-points-system__column--purchases:before {
    content: "My Purchases";
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    color: #26202e;
    font-size: 14px;
  }
}
.cmp-benefits-points-system__category-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  overflow: hidden;
  flex-shrink: 0;
}
.cmp-benefits-points-system__category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-benefits-points-system__category-name {
  font-weight: 700;
  font-size: 22px;
  align-self: center;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-points-system {
    padding: 20px 10px;
  }
  .cmp-benefits-points-system__table {
    max-height: none;
  }
}
.cmp-benefits-points-system__dropdown-container {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0 5px;
}
.cmp-benefits-points-system__year-quarter-dropdown {
  font-size: 32px;
  font-weight: bold;
  color: #231F20;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0 25px 0 0;
  letter-spacing: 0.02em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  min-width: 120px;
  height: auto;
  line-height: 1.2;
}
.cmp-benefits-points-system__dropdown-icon {
  position: absolute;
  right: 2px;
  pointer-events: none;
  width: 22px;
  height: 22px;
}
.cmp-benefits-points-system__year-quarter-dropdown:focus {
  outline: none;
  box-shadow: none;
}
.cmp-benefits-points-system__year-quarter-dropdown option {
  font-size: 16px;
  font-weight: normal;
  color: #231F20;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-benefits-scheme {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme {
    padding: 14px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-scheme {
    padding: 10px;
  }
}
.cmp-benefits-scheme__container {
  background-color: #ffffff;
  overflow: hidden;
}
.cmp-benefits-scheme__title {
  font-size: 32px;
  font-weight: 400;
  color: #26202e;
  margin: 20px 0 30px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__title {
    font-size: 26px;
    margin: 20px 0 25px;
  }
}
.cmp-benefits-scheme__quarter {
  font-size: 32px;
  font-weight: 700;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__quarter {
    font-size: 26px;
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-scheme__quarter {
    font-size: 22px;
    display: block;
  }
}
.cmp-benefits-scheme__table {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.5fr;
}
.cmp-benefits-scheme__table-header {
  display: contents;
}
.cmp-benefits-scheme__table-header .cmp-benefits-scheme__column {
  background-color: #7a7482;
  color: #ffffff;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__table-header .cmp-benefits-scheme__column {
    padding: 10px 20px;
    font-size: 13px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-scheme__table-header .cmp-benefits-scheme__column {
    padding: 8px 10px;
    font-size: 12px;
  }
}
.cmp-benefits-scheme__table-body {
  display: contents;
}
.cmp-benefits-scheme__table-row {
  display: contents;
}
.cmp-benefits-scheme__table-row:hover > .cmp-benefits-scheme__column {
  background-color: #dbdbdb;
}
.cmp-benefits-scheme__column {
  color: #26202e;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-bottom: 1px solid #c7c7c7;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__column {
    padding: 12px 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-scheme__column {
    padding: 10px 10px;
  }
}
.cmp-benefits-scheme__column--name {
  font-weight: 500;
  font-size: 17px;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__column--name {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-scheme__column--name {
    font-size: 13px;
  }
}
.cmp-benefits-scheme__column--qualified {
  text-align: left;
  justify-content: flex-start;
  font-weight: 400;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__column--qualified {
    font-size: 13px;
  }
}
.cmp-benefits-scheme__column--earned {
  text-align: left;
  justify-content: flex-start;
  font-weight: 400;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__column--earned {
    font-size: 13px;
  }
}
.cmp-benefits-scheme__column--download {
  justify-content: center;
}
.cmp-benefits-scheme__download-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #5b5661;
  transition: all 0.2s ease;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__download-link {
    width: 28px;
    height: 28px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-scheme__download-link {
    width: 24px;
    height: 24px;
  }
}
.cmp-benefits-scheme__download-link:hover {
  color: #26202e;
}
.cmp-benefits-scheme__download-link svg {
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-scheme__download-link svg {
    width: 14px;
    height: 14px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-scheme__download-link svg {
    width: 12px;
    height: 12px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-benefits-conditions {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}
.cmp-benefits-conditions__header {
  max-width: 1440px;
  margin: 0 auto 20px;
}
.cmp-benefits-conditions__title {
  max-width: 1440px;
  margin: 0 auto 54px;
  font-size: 32px;
  font-weight: 400;
  color: #26202e;
  padding-left: 50px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-conditions__title {
    font-size: 20px;
    padding-left: 20px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-conditions__title {
    padding-left: 0;
  }
}
.cmp-benefits-conditions__content {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 45px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-conditions__content {
    padding: 0 15px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-conditions__content {
    padding: 0 ;
  }
}
.cmp-benefits-conditions__list {
  max-width: 1440px;
  margin: 0 auto;
  column-count: 2;
  column-gap: 30px;
  list-style: none;
  padding-left: 0;
  counter-reset: item;
  column-gap: 129px;
}
@media screen and (max-width: 768px) {
  .cmp-benefits-conditions__list {
    column-count: 1;
  }
}
@media screen and (max-width: 480px) {
  .cmp-benefits-conditions__list {
    column-gap: 20px;
  }
}
.cmp-benefits-conditions__item {
  margin-bottom: 15px;
  padding-left: 20px;
  break-inside: avoid-column;
  page-break-inside: avoid;
  position: relative;
  font-size: 17px;
  color: #26202e;
  font-weight: 400;
  counter-increment: item;
  line-height: 1.6;
}
.cmp-benefits-conditions__item::before {
  content: counter(item) ".";
  font-weight: 400;
  position: absolute;
  left: -8px;
  width: 20px;
  text-align: right;
  color: #26202e;
}
.cmp-benefits-conditions__item-content {
  display: block;
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
  color: #26202e;
}
.cmp-benefits-conditions__item--placeholder {
  color: #26202e;
  font-style: italic;
}
@media screen and (max-width: 480px) {
  .cmp-benefits-conditions__item {
    padding-left: 20px;
    font-size: 14px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 10px;
  max-width: 1200px;
  margin: 0 auto;
}
.cmp-no-results__search-query {
  font-size: 42px;
  font-weight: 600;
  color: #26202e;
  margin-bottom: 20px;
  align-self: flex-start;
  padding-left: 10px;
}
@media screen and (max-width: 768px) {
  .cmp-no-results__search-query {
    font-size: 30px;
    margin-bottom: 30px;
    padding-left: 15px;
  }
}
.cmp-no-results__wrapper {
  max-width: 550px;
  width: 100%;
  padding: 55px 15px;
  text-align: center;
  margin-top: -50px;
  background-color: #f5f5f5;
}
@media screen and (max-width: 768px) {
  .cmp-no-results__wrapper {
    max-width: 100%;
    padding: 40px 20px;
  }
}
.cmp-no-results__icon-container {
  position: relative;
  width: 180px;
  height: 140px;
  margin: 0 auto 60px;
}
@media screen and (max-width: 768px) {
  .cmp-no-results__icon-container {
    width: 150px;
    height: 120px;
    margin-bottom: 30px;
    transform: scale(0.9);
  }
}
.cmp-no-results__folder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}
@media screen and (max-width: 768px) {
  .cmp-no-results__folder-icon {
    width: 160px;
    height: 160px;
  }
}
.cmp-no-results__title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 7.5px;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-no-results__title {
    font-size: 18px;
    font-weight: 500;
  }
}
.cmp-no-results__message {
  font-size: 17px;
  font-weight: 400;
  color: #26202e;
  line-height: 1.5;
  margin: 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .cmp-no-results__message {
    font-size: 16px;
    max-width: 300px;
  }
}
.cmp-no-results .cmp-no-results__button {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 25px;
  background: #feb940;
  color: #26202e;
  font-size: 16px;
  font-weight: 500;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
}
.cmp-no-results .cmp-no-results__button:hover {
  background: #e6b12e;
}
.cmp-no-results .cmp-no-results__subtitle {
  font-size: 17px;
  font-weight: 600;
  color: #26202e;
  margin-bottom: 10px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-bookmark {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.cmp-bookmark__container {
  z-index: 40;
  position: relative;
  background: #ffffff;
  height: 80%;
  width: 456px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 480px) {
  .cmp-bookmark__container {
    width: 346px;
  }
}
.cmp-bookmark__header {
  padding: 40px 40px 16px 40px;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp-bookmark__create-project-back-icon {
  cursor: pointer;
  width: 24px;
  height: 24px;
}
.cmp-bookmark__title {
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}
.cmp-bookmark__content {
  padding: 24px 40px;
  flex-grow: 1;
  overflow-y: auto;
  height: calc(596px);
  padding-bottom: 120px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cmp-bookmark__content::-webkit-scrollbar {
  display: none;
}
.cmp-bookmark__subtitle {
  font-size: 17px;
  font-weight: 700;
  color: #26202e;
  margin: 0 0 10px 0;
  line-height: 24px;
}
.cmp-bookmark__subtitle span {
  color: #7a7482;
  font-weight: 500;
  line-height: 28px;
}
.cmp-bookmark__description {
  font-size: 14px;
  font-weight: 500;
  color: #5b5661;
  margin: 0 0 20px 0;
  line-height: 20px;
}
.cmp-bookmark__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #7a7482;
  margin-bottom: 5px;
  display: block;
}
.cmp-bookmark__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dddddd;
  font-size: 14px;
  transition: border-color 0.3s ease;
  margin-bottom: 15px;
}
.cmp-bookmark__input:focus {
  outline: none;
  border-color: #0066cc;
}
.cmp-bookmark__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding: 20px 40px;
  border-top: 1px solid #eeeeee;
  width: 100%;
  background: #ffffff;
}
.cmp-bookmark__button {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.cmp-bookmark__button--cancel {
  background-color: #474150;
  color: white;
}
.cmp-bookmark__button--cancel:hover {
  cursor: pointer;
}
.cmp-bookmark__button--primary {
  background-color: #FEB940;
  color: #26202E;
  align-self: flex-end;
}
.cmp-bookmark__button--primary:hover {
  cursor: pointer;
}
.cmp-bookmark__project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}
.cmp-bookmark__project-name {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin: 0;
}
.cmp-bookmark__project-action {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  background: none;
  border: none;
  color: #6700ff;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  margin-top: 12px;
}
.cmp-bookmark__project-action:hover {
  text-decoration: underline;
}
.cmp-bookmark__search {
  margin-bottom: 15px;
}
.cmp-bookmark__search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dddddd;
  font-size: 14px;
}
.cmp-bookmark__project-options {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cmp-bookmark__project-options::-webkit-scrollbar {
  display: none;
}
.cmp-bookmark__project-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cmp-bookmark__project-option input[type="checkbox"] {
  height: 18px;
  width: 18px;
  accent-color: #26202e;
  cursor: pointer;
}
.cmp-bookmark__project-option label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.cmp-bookmark__project-title {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: #333333;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-share {
  background-color: #ffffff;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  max-width: 90%;
  width: 456px;
  margin: auto;
  min-height: 80vh;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.cmp-share__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 40px 16px;
  border-bottom: 1px solid #e5e5e5;
}
.cmp-share__header-text {
  font-size: 22px;
}
.cmp-share__header-icon {
  background: transparent;
}
.cmp-share__header-icon-img {
  height: 24px;
  width: 24px;
  cursor: pointer;
}
.cmp-share__content-card-container {
  padding: 24px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cmp-share__content-card {
  padding: 6px 0px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  justify-content: center;
  height: fit-content;
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}
.cmp-share__content-icon {
  height: 32px;
  width: 32px;
}
.cmp-share__content-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 15px;
}
.cmp-share__success-message {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #22891a;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cmp-share__success-message--show {
  opacity: 1;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-faq {
  max-width: 1440px;
  margin: 75px auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-faq {
    padding: 0 40px;
    margin: 40px 0;
  }
}
@media screen and (max-width: 480px) {
  .cmp-faq {
    max-width: 100%;
    padding: 0 20px;
    margin-bottom: 25px;
    margin-top: 25px;
  }
}
.cmp-faq__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 480px) {
  .cmp-faq__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
.cmp-faq__title {
  font-size: 40px;
  font-weight: 700;
  color: #26202e;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .cmp-faq__title {
    font-size: 28px;
    font-weight: 500;
  }
}
.cmp-faq__filter {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmp-faq__filter .cmp-faq__label {
  font-size: 14px;
}
.cmp-faq__filter .cmp-faq__select {
  font-size: 14px;
  padding: 8px 25px 8px 10px;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  color: #26202e;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 150px;
}
.cmp-faq__list {
  display: flex;
  flex-direction: column;
  background-color: #F5F5F5;
}
.cmp-faq__footer {
  margin-top: 20px;
  font-size: 14px;
  color: #555;
}
.cmp-faq__footer .cmp-faq__ask-link {
  margin-left: 5px;
  color: #6600cc;
  text-decoration: none;
  font-weight: 600;
}
.cmp-faq__footer .cmp-faq__ask-link:hover {
  text-decoration: underline;
}
.cmp-accordion {
  border-bottom: 1px solid #e0e0e0;
  padding: 0 20px;
}
.cmp-accordion__header {
  width: 100%;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 28px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #26202e;
  transition: color 0.3s ease;
}
.cmp-accordion__header:hover {
  color: #0d0b10;
}
.cmp-accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  margin-left: 15px;
  flex-shrink: 0;
}
.cmp-accordion__icon svg {
  width: 21px;
  height: 11px;
  transition: stroke 0.3s ease;
}
.cmp-accordion__content {
  display: none;
  padding: 0 0 32px;
  font-size: 17px;
  color: #26202E;
  line-height: 24px;
  font-weight: 400;
}
.cmp-accordion__content p {
  margin: 0;
}
.cmp-accordion__content a {
  color: #6600cc;
  text-decoration: none;
  font-weight: 500;
}
.cmp-accordion__content a:hover {
  text-decoration: underline;
}
.cmp-accordion.open .cmp-accordion__content {
  display: block;
}
.cmp-accordion.open .cmp-accordion__icon {
  transform: rotate(180deg);
}
.cmp-accordion.open .cmp-accordion__icon svg path {
  stroke: #353238;
}
@media screen and (max-width: 480px) {
  .cmp-accordion {
    padding: 0 10px;
  }
  .cmp-accordion__header {
    padding: 14px 0;
    font-size: 16px;
    line-height: 24px;
  }
  .cmp-accordion__content {
    font-size: 15px;
    line-height: 22px;
  }
  .cmp-accordion__icon {
    margin-left: 10px;
  }
  .cmp-accordion__icon svg {
    width: 18px;
    height: 9px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cards-component {
  margin-top: 230px;
  margin-bottom: 230px;
  width: 100%;
  background: transparent;
}
.cards-component .layout {
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
}
.cards-component .cards-heading {
  max-width: 700px;
  padding-bottom: 40px;
  font-size: 40px;
  font-weight: 700;
  color: #26202E;
  padding: 0 80px 0 80px;
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  .cards-component .cards-heading {
    font-size: 28px;
    line-height: 32px;
    max-width: 100%;
    padding: 0 20px 0 20px;
  }
}
.cards-component .cards-container {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0 80px 0 80px;
}
@media screen and (max-width: 768px) {
  .cards-component .cards-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    margin-top: 40px;
    gap: 10px;
    padding: 0 20px 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cards-component .cards-container::-webkit-scrollbar {
    display: none;
  }
}
.cards-component .card {
  width: 280px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start !important;
  flex-wrap: wrap;
}
.cards-component .card-image {
  width: 280px;
  height: 350px;
  overflow: hidden;
}
.cards-component .card-image img {
  width: 305px;
  height: 400px;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .cards-component .card-image img {
    width: 230px;
    height: 301px;
  }
}
@media screen and (max-width: 768px) {
  .cards-component .card-image {
    width: 230px;
    height: 301px;
  }
}
.cards-component .card-content {
  padding-top: 22px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cards-component .card-content .card-name {
  font-size: 22px;
  font-weight: 600;
  color: #26202e;
  padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .cards-component .card-content .card-name {
    font-size: 19px;
    line-height: 28px;
    font-weight: 500;
  }
}
.cards-component .card-content .card-role {
  font-size: 17px;
  color: #5b5661;
  font-weight: 500;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .cards-component .card-content .card-role {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.decoro-auth-container {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  width: 456px;
  max-width: 90%;
  height: 80%;
  margin: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.decoro-auth-container__header {
  display: flex;
  justify-content: space-between;
  padding: 40px;
  padding-bottom: 0px;
  width: 100%;
  border: none;
}
.decoro-auth-container__header--register {
  background-image: linear-gradient(to right, #26202e 0%, #26202e 40%, #c7c7c7 40%, #c7c7c7 100%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: bottom left;
  padding-bottom: 16px;
}
.decoro-auth-container__header--designPreference {
  border-bottom: 3px solid #26202e;
  padding-bottom: 16px;
}
.decoro-auth-container__logo {
  font-size: 32px;
  font-weight: 700;
  color: #26202e;
  width: 93px;
  height: 44px;
}
.decoro-auth-container__close-icon {
  background: transparent;
  border: none;
  cursor: pointer;
}
.decoro-auth-container__close-icon-img {
  width: 24px;
  height: 24px;
}
.decoro-auth-container__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.decoro-auth-container__back-icon {
  height: 24px;
  width: 24px;
}
.decoro-auth-container__back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 28px;
  font-weight: 400;
}
.decoro-auth-container__title {
  margin: 0;
  flex-grow: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.decoro-auth-container__title-optional {
  font-size: 17px;
  font-weight: 400;
  color: #7a7482;
}
.decoro-login {
  padding: 47px 40px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  flex-grow: 1;
  padding-bottom: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.decoro-login::-webkit-scrollbar {
  display: none;
}
.decoro-login__title {
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 700;
  color: #26202e;
}
.decoro-login__sub-title {
  margin-bottom: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #26202e;
}
.decoro-login__form-group {
  margin-bottom: 24px;
}
.decoro-login__form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #5b5661;
}
.decoro-login__form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  height: 48px;
}
.decoro-login__form-group input:focus {
  outline: none;
  border-color: #0066cc;
}
.decoro-login__submit {
  width: 100%;
  padding: 12px 24px;
  background-color: #feb940;
  color: #26202e;
  border: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
}
.decoro-login__submit:hover {
  background-color: #feb940;
}
.decoro-login__remember-options {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 40px;
}
.decoro-login__remember {
  padding: 0px;
  font-size: 14px;
  font-weight: 500;
  color: #5b5661;
}
.decoro-login__remember-checkbox {
  width: 24px;
  height: 24px;
}
.decoro-login__register-link-container {
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: 400;
  color: #5b5661;
}
.decoro-login__register-link {
  text-decoration: none;
  color: #6700ff;
  font-weight: 500;
}
.decoro-login__terms-container {
  width: 100%;
  padding: 0px;
  padding-bottom: 40px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-self: bottom;
  background-color: #ffffff;
}
.decoro-login__terms-text {
  font-size: 14px;
  font-weight: 500;
  color: #7a7482;
  line-height: 20px;
}
.decoro-login__terms-links {
  margin-top: 8px;
  display: flex;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  align-items: end;
  color: #c7c7c7;
}
.decoro-login__terms-service-link {
  font-size: 14px;
  font-weight: 500;
  color: #6700ff;
  line-height: 20px;
  cursor: pointer;
}
.decoro-login__terms-privacy-link {
  font-size: 14px;
  font-weight: 500;
  color: #6700ff;
  line-height: 20px;
  cursor: pointer;
}
#decoroRegisterContainer {
  flex-grow: 1;
  overflow-y: scroll;
  padding-bottom: 80px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#decoroRegisterContainer::-webkit-scrollbar {
  display: none;
}
#decoroOtpContainer {
  flex-grow: 1;
  overflow-y: scroll;
  padding: 86px 0px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#decoroOtpContainer::-webkit-scrollbar {
  display: none;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.decoro-register {
  padding: 40px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.decoro-register__multiselect-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.decoro-register__toast-container {
  width: 100%;
  padding: 12px 16px;
  display: none;
  align-items: start;
  gap: 8px;
  background-color: #cc2e2e;
}
.decoro-register__toast-message {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0%;
}
.decoro-register__toast-icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.decoro-register__toast-close-btn {
  width: 16px;
  height: 16px;
  cursor: pointer;
  background: transparent;
  color: #ffffff;
  margin-top: 4px;
  padding: 0;
}
.decoro-register__back {
  background: none;
  border: none;
  color: #0066cc;
  cursor: pointer;
  font-size: 10px;
  margin-bottom: 10px;
  padding: 0;
}
.decoro-register__back:hover {
  text-decoration: underline;
}
.decoro-register__title {
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}
.decoro-register__subtitle {
  text-align: center;
  color: #666;
  font-style: italic;
  margin-bottom: 20px;
}
.decoro-register__form-group {
  margin-bottom: 15px;
}
.decoro-register__form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #5b5661;
}
.decoro-register__form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  height: 48px;
}
.decoro-register__form-group input:focus {
  outline: none;
  border-color: #0066cc;
}
.decoro-register__multiselect {
  position: relative;
  width: 100%;
}
.decoro-register__multiselect-placeholder {
  color: #999;
  font-size: 14px;
}
.decoro-register__multiselect-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  height: 48px;
  display: flex;
  align-items: center;
  position: relative;
}
.decoro-register__multiselect-input:focus {
  outline: none;
  border-color: #0066cc;
}
.decoro-register__multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.decoro-register__multiselect-chip {
  background-color: #f0eaf7;
  color: #5b5661;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.decoro-register__multiselect-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  font-size: 12px;
  padding: 0;
  line-height: 1;
}
.decoro-register__multiselect-remove:hover {
  color: #333;
}
.decoro-register__multiselect-options {
  position: absolute;
  top: 38px;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  z-index: 40;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}
.decoro-register__multiselect-option {
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
}
.decoro-register__multiselect-option:hover {
  background-color: #f5f5f5;
}
.decoro-register__multiselect-option.selected {
  background-color: #e5e5e5;
  color: #26202e;
}
.decoro-register__terms {
  margin: 15px 0;
  position: absolute;
  bottom: 32px;
  left: 40px;
  z-index: 30;
}
@media screen and (max-width: 480px) {
  .decoro-register__terms {
    bottom: 96px;
  }
}
.decoro-register__terms-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #26202e;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.decoro-register__terms-checkbox {
  width: 24px;
  height: 24px;
}
.decoro-register__terms-link {
  color: #0066cc;
  text-decoration: none;
}
.decoro-register__terms-link:hover {
  text-decoration: underline;
}
.decoro-register__form-submit-container {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #ffffff;
  padding: 20px 40px 30px 40px;
  border-top: 1px solid #e5e5e5;
}
.decoro-register__submit {
  padding: 12px 24px;
  background-color: #feb940;
  color: #26202e;
  border: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  line-height: 24px;
}
.decoro-register__submit:hover {
  background-color: #feb940;
}
.decoro-terms {
  background: white;
  height: 100%;
}
.decoro-terms__title {
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}
.decoro-terms__content {
  overflow-y: scroll;
  padding-bottom: 85px;
  border-radius: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.decoro-terms__content::-webkit-scrollbar {
  display: none;
}
.decoro-terms__back {
  padding: 8px;
  background-color: #feb940;
  color: #26202e;
  border: none;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}
.decoro-terms__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 20px 40px 30px 40px;
  background: #ffffff;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.decoro-terms__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}
.decoro-terms__description {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-top: 16px;
  margin-bottom: 32px;
}
.decoro-terms__link {
  color: #feb940;
}
.decoro-success {
  width: 100%;
  background-color: #ffffff;
  padding: 56px 90px;
}
@media screen and (max-width: 768px) {
  .decoro-success {
    width: 100%;
  }
}
.decoro-success__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.decoro-success__icon {
  width: 160px;
  height: 160px;
  margin-bottom: 16px;
}
.decoro-success__title {
  font-size: 22px;
  font-weight: 600;
  margin: 16px 0;
}
.decoro-success__message {
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 32px;
}
.decoro-success__done {
  padding: 12px 24px;
  background-color: #feb940;
  color: #26202e;
  border: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
}
.decoro-success__done:hover {
  background-color: #feb940;
}
#decoroShowTerms {
  text-decoration: none;
  color: #6700ff;
}
#decoroTermsScreen {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: -100px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.decoro-otp-verification {
  padding: 40px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80%;
}
.decoro-otp-verification__message {
  display: flex;
  flex-direction: column;
  color: #26202e;
  margin-bottom: 50px;
  font-size: 17px;
  font-weight: 400;
}
.decoro-otp-verification__mobile {
  font-weight: 500;
  color: #26202e;
}
.decoro-otp-verification__mobile::before {
  content: '+91 ';
}
.decoro-otp-verification__input-group {
  margin-bottom: 15px;
}
.decoro-otp-verification__input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #444;
}
.decoro-otp-verification__input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 16px;
  text-align: center;
  height: 48px;
  width: 48px;
}
.decoro-otp-verification__input-group input:focus {
  outline: none;
  border-color: #0066cc;
}
.decoro-otp-verification__resend {
  font-size: 14px;
  font-weight: 700;
}
.decoro-otp-verification__resend-link {
  color: #6700ff;
  text-decoration: none;
}
.decoro-otp-verification__resend-link:hover {
  text-decoration: underline;
}
.decoro-otp-verification__resend-link.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
  color: #7a7482;
}
.decoro-otp-verification__otp-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}
.decoro-otp-verification__otp-inputs input {
  width: 48px;
  height: 48px;
  text-align: center;
  font-size: 16px;
  border: 1px solid #ddd;
}
.decoro-otp-verification__otp-inputs input:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
}
.decoro-otp-verification__error-message {
  color: #cc2e2e;
  font-size: 14px;
  font-weight: 500;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.promo-banner-card__wrapper {
  margin: 30px auto;
  margin-bottom: 50px;
  padding: 0 80px;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1200px) {
  .promo-banner-card__wrapper {
    margin: 0;
    padding: 40px;
  }
}
@media screen and (max-width: 480px) {
  .promo-banner-card__wrapper {
    margin: 30px 0;
    padding: 0 20px;
    max-width: 100%;
  }
}
.promo-banner-card__header h1 {
  color: #26202e;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin-bottom: 24px;
}
@media screen and (min-width: 1200px) {
  .promo-banner-card__header h1 {
    font-size: 42px;
    padding: 0;
    margin-bottom: 26.5px;
  }
}
.promo-banner-card__img-container-wrapper {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1200px) {
  .promo-banner-card__img-container-wrapper {
    flex-direction: row;
  }
}
.promo-banner-card__primary-img-container {
  position: relative;
}
.promo-banner-card__primary-img-container:before {
  content: '';
  position: absolute;
  height: 200px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.69) 69%);
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .promo-banner-card__primary-img-container:before {
    height: 100px;
  }
}
@media screen and (min-width: 1200px) {
  .promo-banner-card__primary-img-container {
    padding: 0;
  }
}
.promo-banner-card__primary-img img {
  display: block;
  width: 100%;
  align-self: stretch;
  background: #d3d3d3 50% / cover no-repeat;
  max-width: 100%;
  height: auto;
}
@media screen and (min-width: 1200px) {
  .promo-banner-card__primary-img img {
    max-width: 100%;
    height: auto;
  }
}
.promo-banner-card__logo img {
  width: 40%;
  position: absolute;
  bottom: 5%;
  right: 5%;
  color: #ffffff;
  text-align: right;
  z-index: 11;
}
.promo-banner-card__secondary-img img {
  width: 100%;
  display: block;
  fill: #a29baa;
  opacity: 0.49;
}
@media screen and (min-width: 1200px) {
  .promo-banner-card__secondary-img img {
    max-width: 100%;
  }
}
.promo-banner-card__text {
  top: 60%;
  padding-right: 20px;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .promo-banner-card__text {
    top: 55% !important;
    position: absolute;
  }
}
@media screen and (min-width: 1200px) {
  .promo-banner-card__text {
    top: 37%;
    left: 10%;
    position: absolute;
    padding-right: 0;
  }
}
.promo-banner-card__content {
  display: flex;
  position: relative;
  flex-direction: column;
}
@media screen and (min-width: 1200px) {
  .promo-banner-card__content {
    padding: 0;
  }
}
.promo-banner-card__title {
  color: #26202e;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 21px;
}
@media screen and (min-width: 1200px) {
  .promo-banner-card__title {
    font-size: 40px;
    margin-bottom: 21px;
  }
}
.promo-banner-card__description {
  color: #444444;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-remove-bookmark {
  font-family: Manrope;
  margin: 20px;
  width: 100%;
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background: white;
}
@media (min-width: 768px) {
  .cmp-remove-bookmark {
    max-width: 552px;
    margin: auto;
  }
}
.cmp-remove-bookmark__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cmp-remove-bookmark__head-text {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
.cmp-remove-bookmark__product-detail {
  padding: 8px 12px 8px 8px;
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: auto;
  background-color: #F5F5F5;
  max-width: 321px;
}
.cmp-remove-bookmark__product-img {
  height: 88px;
  width: 88px;
}
.cmp-remove-bookmark__product-name {
  font-size: 17px;
  font-weight: 600;
}
.cmp-remove-bookmark__btn-cont {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.cmp-remove-bookmark__no-btn {
  padding: 12px 24px;
  background-color: #474150;
  color: white;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  width: 152px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}
.cmp-remove-bookmark__no-btn:hover {
  background-color: #2e2a34;
}
.cmp-remove-bookmark__yes-btn {
  padding: 12px 24px;
  background-color: #FEB940;
  color: #26202E;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  width: 152px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}
.cmp-remove-bookmark__yes-btn:hover {
  background-color: #fea60d;
}
.cmp-remove-bookmark__yes-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-my-projects {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  padding: 0 80px;
  max-width: 1440px;
  margin: 30px auto;
  margin-top: 100px;
  background: #ffffff;
}
@media screen and (max-width: 1200px) {
  .cmp-my-projects {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-my-projects {
    max-width: 100%;
    padding: 0 20px;
    margin: 0;
    margin-top: 100px;
  }
}
.cmp-my-projects__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-bottom: 30px;
  flex-wrap: wrap;
}
.cmp-my-projects__title {
  margin: 0;
}
@media (min-width: 768px) {
  .cmp-my-projects__title {
    font-size: 42px;
    font-weight: 800;
  }
}
.cmp-my-projects__add-button {
  font-size: 17px;
  font-weight: 500;
  padding: 12px 24px;
  background-color: #FEB940;
  color: #26202E;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease;
  min-width: 150px;
}
.cmp-my-projects__add-button:hover,
.cmp-my-projects__add-button:focus {
  background-color: #fea60d;
  outline: none;
}
.cmp-my-projects__list-cont {
  width: 100%;
}
.cmp-my-projects__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 19px;
}
@media screen and (min-width: 992px) {
  .cmp-my-projects__list {
    justify-content: flex-start;
  }
}
.cmp-my-projects__card {
  background-color: #26202e;
  width: 100%;
  max-width: 351px;
  color: white;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .cmp-my-projects__card {
    max-width: 414px;
  }
}
.cmp-my-projects__card--general .cmp-my-projects__card-detail .cmp-my-projects__card-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 5px;
}
@media (min-width: 768px) {
  .cmp-my-projects__card--general .cmp-my-projects__card-detail .cmp-my-projects__card-title {
    font-size: 17px;
  }
}
.cmp-my-projects__card--general .cmp-my-projects__card-img {
  height: 281px;
  width: 100%;
}
.cmp-my-projects__card--general .cmp-my-projects__card-img-container {
  height: 281px;
  width: 100%;
  background-color: #f5f5f5;
}
.cmp-my-projects__card--general .cmp-my-projects__card-detail--general {
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 10px;
}
@media (min-width: 768px) {
  .cmp-my-projects__card--general .cmp-my-projects__card-detail--general {
    padding: 38px 24px 50px;
    height: 116px;
  }
}
.cmp-my-projects__card-img-container {
  height: 261px;
  width: 100%;
  background-color: #f5f5f5;
  position: relative;
}
.cmp-my-projects__card-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  width: 100%;
}
.cmp-my-projects__card-img-grid-item {
  position: relative;
  overflow: hidden;
}
.cmp-my-projects__card-img-grid-item img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.cmp-my-projects__card-img {
  width: 100%;
  height: 261px;
  display: block;
}
.cmp-my-projects__card-img-placeholder {
  width: 100%;
  height: auto;
  display: block;
  background-color: #f5f5f5;
}
.cmp-my-projects__card-detail {
  display: flex;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 10px;
}
@media (min-width: 768px) {
  .cmp-my-projects__card-detail {
    padding: 28px 24px;
    min-height: 135px;
  }
}
.cmp-my-projects__card-text-cont {
  flex: 1;
}
.cmp-my-projects__card-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 5px;
}
@media (min-width: 768px) {
  .cmp-my-projects__card-title {
    font-size: 17px;
  }
}
.cmp-my-projects__card-location {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  opacity: 0.8;
}
.cmp-my-projects__card-redirect-logo-cont {
  padding-top: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.cmp-my-projects__card-redirect-logo-cont:hover,
.cmp-my-projects__card-redirect-logo-cont:focus {
  transform: scale(1.1);
}
.cmp-my-projects__card-redirect-logo-cont img {
  display: block;
  width: 14px;
  height: 14px;
}
.cmp-my-projects__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 107px 64px;
  max-width: 649px;
  background-color: #f5f5f5;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .cmp-my-projects__empty-state {
    padding: 50px 30px;
  }
}
.cmp-my-projects__empty-state-img {
  width: 186px;
  height: 206px;
  margin-bottom: 32px;
}
.cmp-my-projects__empty-state-text {
  color: #26202e;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 12px;
}
.cmp-my-projects__empty-state-subtext {
  color: #26202e;
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 28px;
}
.cmp-my-projects__create-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(38, 32, 46, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  display: none;
  animation: fadeIn 0.3s ease;
}
.cmp-my-projects__create-form > * {
  background: white;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#openFormButton {
  margin-right: 49px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-my-projects__form-container {
  position: relative;
  font-family: Manrope;
  max-width: 600px;
  margin: auto;
  background: white;
  height: 90%;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cmp-my-projects__form-container::-webkit-scrollbar {
  display: none;
}
.cmp-my-projects__form-title {
  margin-top: 0;
  padding: 40px 40px 16px 40px;
  font-size: 22px;
  font-weight: 600;
  color: #26202e;
  border-bottom: 1px solid #e5e5e5;
}
@media screen and (max-width: 480px) {
  .cmp-my-projects__form-title {
    padding: 24px;
  }
}
.cmp-my-projects__form-content {
  height: 90%;
  overflow: scroll;
  padding: 24px 40px ;
  padding-bottom: 190px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media screen and (max-width: 480px) {
  .cmp-my-projects__form-content {
    padding: 24px;
    padding-bottom: 190px;
  }
}
.cmp-my-projects__form-content::-webkit-scrollbar {
  display: none;
}
.cmp-my-projects__form-group {
  margin-bottom: 20px;
}
.cmp-my-projects__form-group--half {
  width: 180px;
}
.cmp-my-projects__form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
  color: #26202E;
}
.cmp-my-projects__form-input {
  flex: 1;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  transition: border-color 0.3s;
  color: #26202E;
  height: 48px;
}
.cmp-my-projects__form-input:focus {
  outline: none;
  border-color: #4a6bff;
}
.cmp-my-projects__form-input[readonly] {
  background-color: white;
  cursor: pointer;
}
.cmp-my-projects__custom-select {
  position: relative;
  width: 100%;
}
.cmp-my-projects__select-selected {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  color: #26202E;
  height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: white;
}
.cmp-my-projects__select-items {
  display: none;
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #e0e0e0;
  border-top: none;
  z-index: 30;
}
.cmp-my-projects__select-option {
  padding: 10px 12px;
  font-size: 14px;
  color: #26202E;
  cursor: pointer;
  transition: background-color 0.2s;
}
.cmp-my-projects__select-option:hover {
  background-color: #f5f5f5;
}
.cmp-my-projects__select-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform 0.2s;
}
.cmp-my-projects__select-arrow--active {
  transform: translateY(-50%) rotate(180deg);
}
.cmp-my-projects__select-arrow img {
  width: 12px;
  height: 12px;
}
.cmp-my-projects__style-select-container {
  position: relative;
}
.cmp-my-projects__style-dropdown {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 140px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e0e0e0;
  border-top: none;
  z-index: 40;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cmp-my-projects__style-dropdown::-webkit-scrollbar {
  display: none;
}
.cmp-my-projects__style-option {
  padding: 10px 12px;
  font-size: 14px;
  color: #26202E;
  cursor: pointer;
  transition: background-color 0.2s;
}
.cmp-my-projects__style-option:hover {
  background-color: #f5f5f5;
}
.cmp-my-projects__form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}
@media screen and (max-width: 480px) {
  .cmp-my-projects__form-row {
    flex-direction: column;
    gap: 15px;
  }
}
.cmp-my-projects__form-col {
  display: flex;
  flex-direction: column;
}
.cmp-my-projects__styles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cmp-my-projects__no-styles {
  color: #999;
  font-size: 13px;
  font-style: italic;
}
.cmp-my-projects__style-tag {
  background: #f5f5f5;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  display: flex;
  align-items: center;
  color: #26202E;
}
.cmp-my-projects__remove-style {
  margin-left: 6px;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}
.cmp-my-projects__remove-style:hover {
  color: #ff4d4f;
}
.cmp-my-projects__form-actions {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e5e5e5;
  padding: 20px 40px 30px 40px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  z-index: 30;
}
@media screen and (max-width: 480px) {
  .cmp-my-projects__form-actions {
    padding: 15px 10px;
    justify-content: center;
  }
}
.cmp-my-projects__btn {
  padding: 10px 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 17px;
  min-width: 122px;
  border: none;
}
.cmp-my-projects__btn--cancel {
  background: #474150;
  color: white;
}
.cmp-my-projects__btn--cancel:hover {
  background: #2e2a34;
}
.cmp-my-projects__btn--save {
  background: #FEB940;
  color: #26202E;
}
.cmp-my-projects__btn--save:hover {
  background: #fea60d;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.project-detail {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: -20px !important;
  background: #ffffff;
}
.project-detail__container {
  padding: 24px 80px 40px 79px;
  color: #ffffff;
  background-color: #26202e;
}
@media screen and (max-width: 480px) {
  .project-detail__container {
    padding: 18px 20px 40px 20px;
  }
}
.project-detail__general-header {
  display: none;
}
.project-detail__header {
  margin-bottom: 20px;
}
.project-detail__breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #6700ff;
}
.project-detail__breadcrumb-item {
  margin: 0 5px;
  cursor: pointer;
  color: #ffffff;
}
.project-detail__breadcrumb-item.active {
  color: #a29baa;
}
.project-detail__breadcrumb-separator {
  margin: 0 5px;
  color: #C7C7C7;
}
.project-detail__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.project-detail__title h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}
.project-detail__actions-toggle {
  cursor: pointer;
  padding: 5px;
  position: relative;
  display: none;
}
@media screen and (max-width: 480px) {
  .project-detail__actions-toggle {
    display: block;
  }
}
.project-detail__info {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.project-detail__info-section {
  flex: 1;
  min-width: 200px;
}
.project-detail__info-section h3 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #a29baa;
}
.project-detail__info-section p {
  margin: 5px 0;
  font-size: 17px;
  font-weight: 400;
}
.project-detail__actions {
  display: flex;
  gap: 32px;
}
@media screen and (max-width: 480px) {
  .project-detail__actions {
    display: none;
  }
}
.project-detail__mobile-actions {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 40px;
  right: 10px;
  background: white;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  justify-content: space-around;
  z-index: 100;
  border-radius: 4px;
}
.project-detail__mobile-actions .project-detail__btn {
  color: #26202e;
  padding: 8px 12px;
  justify-content: flex-start;
}
.project-detail__mobile-actions .project-detail__btn .project-detail__action-icon {
  fill: #26202e;
}
.project-detail__btn {
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
}
.project-detail__btn:hover {
  opacity: 0.8;
}
.project-detail__action-icon {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}
.project-detail__update-form,
.project-detail__delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(38, 32, 46, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  display: none;
  animation: fadeIn 0.3s ease;
}
.project-detail__update-form > *,
.project-detail__delete-modal > * {
  background: white;
  max-width: 600px;
  width: 90%;
  overflow-y: hidden;
  animation: slideUp 0.3s ease;
  position: relative;
}
@media screen and (max-width: 480px) {
  .project-detail__update-form,
  .project-detail__delete-modal {
    padding: 10px;
  }
  .project-detail__update-form > *,
  .project-detail__delete-modal > * {
    width: 95%;
    max-height: 95vh;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-showcase-display {
  padding: 0 80px;
  margin: 30px auto;
  max-width: 1440px;
  /* My Projects Component Styles */
}
@media screen and (max-width: 1200px) {
  .cmp-showcase-display {
    padding: 0 40px;
    margin: 30px 0;
  }
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display {
    margin: 0 20px;
    margin-top: 30px;
    padding: 0;
  }
}
.cmp-showcase-display__no-projects {
  padding: 80px;
  width: 100%;
  background: #f5f5f5;
  text-align: center;
}
.cmp-showcase-display__no-projects-img {
  width: 186px;
  height: 207px;
  margin-bottom: 14px;
}
.cmp-showcase-display__no-projects-text {
  margin: 14px 0;
  font-size: 22px;
  font-weight: 600;
}
.cmp-showcase-display__no-projects-subtext {
  font-size: 17px;
  font-weight: 400;
}
.cmp-showcase-display__no-projects-submit {
  font-size: 17px;
  font-weight: 700;
  color: #6700ff;
  cursor: pointer;
}
.cmp-showcase-display__header {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__header {
    flex-direction: column;
    align-items: flex-start;
  }
}
.cmp-showcase-display__title {
  font-size: 42px;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: 0%;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__title {
    font-size: 30px;
    margin-bottom: 20px;
  }
}
.cmp-showcase-display__submit-btn {
  background-color: #474150;
  color: #ffffff;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0%;
  padding: 12px 24px;
  gap: 10px;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 0;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__submit-btn {
    font-size: 17px;
    padding: 10px 20px;
    margin-bottom: 56px;
    position: unset;
  }
}
.cmp-showcase-display__description {
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0%;
  color: #26202e;
  margin-bottom: 56px;
  max-width: 522px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__description {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 100%;
  }
}
.cmp-showcase-display__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
  }
}
.cmp-showcase-display__tabs {
  display: flex;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__tabs {
    width: 100%;
    overflow-x: auto;
    gap: 20px;
  }
}
.cmp-showcase-display__tab {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #7a7482;
  padding-bottom: 10px;
  position: relative;
  padding: 8px 8px 16px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__tab {
    font-size: 17px;
    white-space: nowrap;
    margin-bottom: 20px;
  }
}
.cmp-showcase-display__tab.is-active {
  color: #26202e;
}
.cmp-showcase-display__tab.is-active::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 2px;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #26202e;
}
.cmp-showcase-display__dropdown {
  position: relative;
  width: 160px;
  font-size: 14px;
  color: #000000;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__dropdown {
    width: 100%;
    margin-bottom: 30px;
  }
}
.cmp-showcase-display__dropdown.visible {
  display: block;
}
.cmp-showcase-display__dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #e5e5e5;
}
.cmp-showcase-display__dropdown-label {
  font-size: 14px;
  color: #000000;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__dropdown-label {
    font-size: 14px;
  }
}
.cmp-showcase-display__dropdown-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}
.cmp-showcase-display__dropdown-icon.active {
  transform: rotate(180deg);
}
.cmp-showcase-display__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-top: none;
  z-index: 10;
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.cmp-showcase-display__dropdown-option {
  padding: 8px 12px;
  font-size: 14px;
  color: #000000;
  white-space: nowrap;
  list-style: none;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__dropdown-option {
    font-size: 14px;
  }
}
.cmp-showcase-display__dropdown-option:hover {
  background-color: #dbdbdb;
}
.cmp-showcase-display__dropdown.is-open .cmp-showcase-display__dropdown-menu {
  display: block;
  list-style: none;
}
.cmp-showcase-display__tab-content {
  display: none;
}
.cmp-showcase-display__tab-content.is-active {
  display: block;
}
.cmp-showcase-display__count {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #7a7482;
  line-height: 100%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__count {
    font-size: 14px;
  }
}
.cmp-showcase-display__load-more {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__load-more {
    margin-top: 15px;
  }
}
.cmp-showcase-display__load-more #load-more-btn {
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: #26202e;
  background-color: none;
  background: none;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__load-more #load-more-btn {
    font-size: 17px;
  }
}
.cmp-showcase-display__load-more-icon {
  width: 18px;
  height: 18px;
  fill: #26202e;
}
.cmp-showcase-display__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 100%;
}
@media screen and (max-width: 1200px) {
  .cmp-showcase-display__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-showcase-display__cards {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}
.cmp-showcase-display__card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__card {
    width: 100%;
    margin-bottom: 30px;
  }
}
.cmp-showcase-display__card-image {
  width: 100%;
  height: 232px;
  margin-bottom: 28px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__card-image {
    height: 198px;
    margin-bottom: 20px;
  }
}
.cmp-showcase-display__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__card-header {
    padding: 0 15px;
    margin-bottom: 5px;
  }
}
.cmp-showcase-display__card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__card-title {
    font-size: 17px;
    line-height: 18px;
  }
}
.cmp-showcase-display__card-icon {
  width: 16px;
  height: 16px;
}
.cmp-showcase-display__card-designer {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
  padding: 0 24px;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__card-designer {
    font-size: 14px;
    padding: 0 15px;
    line-height: 16px;
    margin-bottom: 20px;
  }
}
.cmp-showcase-display__card-info {
  padding: 0 24px;
  display: flex;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__card-info {
    padding: 0 15px;
    gap: 6px;
  }
}
.cmp-showcase-display__card-property,
.cmp-showcase-display__card-location,
.cmp-showcase-display__card-area {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__card-property,
  .cmp-showcase-display__card-location,
  .cmp-showcase-display__card-area {
    font-size: 14px;
    line-height: 16px;
  }
}
.cmp-showcase-display__card-property,
.cmp-showcase-display__card-location {
  padding-right: 8px;
  position: relative;
}
.cmp-showcase-display__card-property::after,
.cmp-showcase-display__card-location::after {
  content: '|';
  position: absolute;
  width: 2px;
  right: 0;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display__card-property,
  .cmp-showcase-display__card-location {
    padding-right: 6px;
  }
}
.cmp-showcase-display .cmp-showcase-my-projects {
  background-color: #ffffff;
  margin-top: 10px;
}
.cmp-showcase-display .cmp-showcase-my-projects__title {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 39px;
  font-weight: 700;
  color: #000000;
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display .cmp-showcase-my-projects__title {
    font-size: 24px;
  }
}
.cmp-showcase-display .cmp-showcase-my-projects__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.cmp-showcase-display .cmp-showcase-my-projects__card {
  display: flex;
  justify-content: space-between;
  padding: 24px;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display .cmp-showcase-my-projects__card {
    flex-direction: column;
    gap: 20px;
  }
}
.cmp-showcase-display .cmp-showcase-my-projects__image-cont {
  display: flex;
  gap: 24px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display .cmp-showcase-my-projects__image-cont {
    flex-direction: column;
    align-items: flex-start;
  }
}
.cmp-showcase-display .cmp-showcase-my-projects__image {
  height: 96px;
  width: 171px;
  background-color: #dbdbdb;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
.cmp-showcase-display .cmp-showcase-my-projects__project-title {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 5px 0;
}
.cmp-showcase-display .cmp-showcase-my-projects__project-category {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #7a7482;
  margin: 0 0 15px 0;
}
.cmp-showcase-display .cmp-showcase-my-projects__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display .cmp-showcase-my-projects__status {
    align-items: flex-start;
  }
}
.cmp-showcase-display .cmp-showcase-my-projects__status-url {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-display .cmp-showcase-my-projects__status-url {
    align-items: flex-start;
  }
}
.cmp-showcase-display .cmp-showcase-my-projects__submission-date {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #7a7482;
}
.cmp-showcase-display .cmp-showcase-my-projects__status-badge {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  padding: 5px 10px;
  border-radius: 34px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid #e5e5e5;
}
.cmp-showcase-display .cmp-showcase-my-projects__status-badge--in-review {
  background-color: #ffffff;
  color: #926f3a;
}
.cmp-showcase-display .cmp-showcase-my-projects__status-badge--published {
  background-color: #ffffff;
  color: #417817;
}
.cmp-showcase-display .cmp-showcase-my-projects__status-badge--rejected {
  background-color: #ffffff;
  color: #7a7482;
}
.cmp-showcase-display .cmp-showcase-my-projects__view-project {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  color: #474150;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.cmp-showcase-display .cmp-showcase-my-projects__view-project:hover {
  text-decoration: underline;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-showcase-detail {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  margin: 0 auto;
  padding: 0;
}
.cmp-showcase-detail__banner {
  position: relative;
  margin-bottom: 40px;
}
.cmp-showcase-detail__slider {
  width: 100%;
  height: 720px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-detail__slider {
    height: 400px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-showcase-detail__slider {
    height: 200px;
  }
}
.cmp-showcase-detail__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.cmp-showcase-detail__slide[aria-hidden="false"] {
  display: block;
}
.cmp-showcase-detail__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-showcase-detail__slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
}
.cmp-showcase-detail__slider-arrow {
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cmp-showcase-detail__slider-arrow:hover {
  background: rgba(255, 255, 255, 0.9);
}
.cmp-showcase-detail__slider-arrow__gallery-prev-img {
  width: 13px;
  height: 24px;
}
.cmp-showcase-detail__slider-arrow__gallery-next-img {
  width: 13px;
  height: 24px;
}
.cmp-showcase-detail__slider-controls {
  position: absolute;
  top: 36.5px;
  right: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cmp-showcase-detail__slider-dots {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
}
.cmp-showcase-detail__slider-dot {
  width: 40px;
  border-radius: 8px;
  height: 4px;
  background: #ffffff;
  border: 1px solid #ffffff;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.cmp-showcase-detail__slider-dot.active {
  background: #26202e;
}
.cmp-showcase-detail__details {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-detail__details {
    padding: 0 24px;
  }
}
.cmp-showcase-detail__breadcrumb {
  color: #5B5661;
  margin-bottom: 16px;
  font-weight: 500;
}
.cmp-showcase-detail__header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.cmp-showcase-detail__header {
  margin-bottom: 40px;
}
.cmp-showcase-detail__title {
  font-size: 32px;
  font-weight: 700;
  color: #26202e;
  margin: 0 0 8px 0;
  line-height: 1.2;
}
.cmp-showcase-detail__designer {
  font-size: 18px;
  color: #5B5661;
  margin: 0;
  font-weight: 500;
}
.cmp-showcase-detail__header-img {
  cursor: pointer;
}
.cmp-showcase-detail__play-pause {
  border-radius: 50%;
  border: 1px solid #26202e;
  width: 25px;
  height: 25px;
  margin-left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cmp-showcase-detail__share-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cmp-showcase-detail__meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 56px 107px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-detail__meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .cmp-showcase-detail__meta-grid {
    grid-template-columns: 1fr;
  }
}
.cmp-showcase-detail__meta-item {
  display: flex;
  flex-direction: column;
}
.cmp-showcase-detail__meta-label {
  font-size: 14px;
  color: #5B5661;
  margin-bottom: 8px;
  font-weight: 500;
}
.cmp-showcase-detail__meta-value {
  font-size: 16px;
  font-weight: 600;
  color: #26202e;
}
.cmp-showcase-detail__description {
  padding: 0px 107px 48px 107px;
  font-size: 16px;
  line-height: 1.6;
  color: #5B5661;
  margin: 0;
}
.cmp-showcase-detail__description p {
  font-size: 16px;
  line-height: 1.6;
  color: #5B5661;
  margin: 0;
}
.cmp-showcase-detail__products {
  padding: 40px 0;
}
.cmp-showcase-detail__products-title {
  font-size: 24px;
  font-weight: 700;
  color: #26202e;
  margin: 0 0 24px 0;
}
.cmp-showcase-detail__products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media screen and (max-width: 768px) {
  .cmp-showcase-detail__products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .cmp-showcase-detail__products-grid {
    grid-template-columns: 1fr;
  }
}
.cmp-showcase-detail__product {
  text-align: center;
}
.cmp-showcase-detail__product img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}
.cmp-showcase-detail__product img:hover {
  transform: scale(1.03);
}
.cmp-showcase-detail__product p {
  font-size: 14px;
  color: #26202e;
  font-weight: 500;
  margin: 0;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-project-showcase {
  font-family: Manrope;
  margin: 0 auto;
  padding: 20px;
}
.cmp-project-showcase__response-popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: fit-content;
  margin: auto;
  color: white;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 649px;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__response-popup {
    max-width: calc(100% - 40px);
  }
}
.cmp-project-showcase__response-popup--success {
  background-color: #22891a;
}
.cmp-project-showcase__response-popup--error {
  background-color: #dc3232;
}
.cmp-project-showcase__container {
  border-radius: 8px;
  position: relative;
  padding: 10px 0 30px;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__container {
    padding: 26px 0 30px;
  }
}
.cmp-project-showcase__title {
  font-size: 28px;
  font-weight: 600;
  color: #26202e;
  margin: 0 0 30px 0;
}
.cmp-project-showcase__actions {
  position: fixed;
  top: auto;
  bottom: -10px;
  right: 0;
  width: 100%;
  background-color: white;
  padding: 16px 20px;
  box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.08);
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media screen and (min-width: 992px) {
  .cmp-project-showcase__actions {
    position: absolute;
    top: 10px;
    right: 30px;
    bottom: auto;
    width: auto;
    padding: 0;
    box-shadow: none;
  }
}
.cmp-project-showcase__cancel-btn {
  background-color: #474150;
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.cmp-project-showcase__submit-btn {
  background-color: #feb940;
  color: #26202e;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.cmp-project-showcase__submit-btn:disabled {
  background-color: #b6aebf;
  color: #ffffff;
}
.cmp-project-showcase__form-cont {
  background-color: #f5f5f5;
  padding: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__form-cont {
    padding: 32px 16px 30px;
  }
}
.cmp-project-showcase__form {
  border-radius: 6px;
  max-width: 631px;
}
.cmp-project-showcase__form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .cmp-project-showcase__form-row {
    flex-direction: column;
    gap: 15px;
  }
}
.cmp-project-showcase__form-row--file {
  margin-top: 60px;
  padding: 32px 40px 40px 40px;
  background-color: #ffffff;
}
.cmp-project-showcase__form-group {
  flex: 1;
}
.cmp-project-showcase__form-group--full {
  width: 100%;
}
.cmp-project-showcase__form-group label:not(.cmp-project-showcase__upload-placeholder) {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #5b5661;
}
.cmp-project-showcase__input,
.cmp-project-showcase__select,
.cmp-project-showcase__textarea {
  width: 100%;
  padding: 10px 12px 10px 16px;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
  font-family: Manrope;
}
.cmp-project-showcase__input:focus,
.cmp-project-showcase__select:focus,
.cmp-project-showcase__textarea:focus {
  outline: none;
  border-color: #949494;
}
.cmp-project-showcase__input,
.cmp-project-showcase__select {
  height: 48px;
}
.cmp-project-showcase__textarea {
  font-size: 17px;
  font-weight: 400;
  min-height: 120px;
  resize: vertical;
}
.cmp-project-showcase__select-wrapper {
  position: relative;
}
.cmp-project-showcase__select-wrapper:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #7a7482;
  pointer-events: none;
}
.cmp-project-showcase__select {
  appearance: none;
  padding-right: 30px;
}
.cmp-project-showcase__char-count {
  text-align: right;
  font-size: 12px;
  color: #7a7482;
  margin-top: 5px;
}
.cmp-project-showcase__char-count.error {
  color: #dc3232;
}
.cmp-project-showcase__tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: .8px;
  padding: 8px 12px;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
  background-color: white;
  min-height: 48px;
}
.cmp-project-showcase__tag {
  display: inline-flex;
  align-items: center;
  background-color: #f5f1fa;
  padding: 4px 16px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
}
.cmp-project-showcase__tag.selected {
  background-color: #f0eaf7;
  color: #5b5661;
}
.cmp-project-showcase__tag-remove {
  margin-left: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}
.cmp-project-showcase__tag-input {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  font-size: 13px;
  padding: 4px 0;
}
.cmp-project-showcase__upload-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}
.cmp-project-showcase__upload-desc {
  font-size: 13px;
  color: #7a7482;
  margin-bottom: 20px;
}
.cmp-project-showcase__upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
@media (max-width: 768px) {
  .cmp-project-showcase__upload-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .cmp-project-showcase__upload-grid {
    grid-template-columns: 1fr;
  }
}
.cmp-project-showcase__upload-item {
  position: relative;
  border: 1px solid #c7c7c7;
}
.cmp-project-showcase__upload-placeholder {
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.cmp-project-showcase__upload-placeholder:hover {
  border-color: #949494;
}
.cmp-project-showcase__upload-placeholder.has-file {
  border-style: solid;
}
.cmp-project-showcase__upload-placeholder.has-file .cmp-project-showcase__upload-icon {
  display: none;
}
.cmp-project-showcase__upload-actions {
  height: 44px;
  border-top: 1px solid #c7c7c7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cmp-project-showcase__show-cover {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 10px;
  gap: 6px;
}
.cmp-project-showcase__show-cover-radio {
  width: 18px;
  height: 18px;
}
.cmp-project-showcase__show-cover-text {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
}
.cmp-project-showcase__upload-icon {
  position: relative;
  z-index: 1;
  padding: 14px 14px 15px 15px;
  transition: background-color 0.3s ease;
  pointer-events: auto;
}
.cmp-project-showcase__upload-icon img {
  width: 44px;
  height: 44px;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__upload-icon img {
    width: 32px;
    height: 32px;
  }
}
.cmp-project-showcase__upload-icon:hover {
  background-color: #f5f5f5;
}
.cmp-project-showcase__file-input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  opacity: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__file-input {
    width: 32px;
    height: 32px;
  }
}
.cmp-project-showcase__file-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmp-project-showcase__file-remove {
  width: 20px;
  height: 20px;
  margin: 12px;
  background: transparent;
  color: #26202E;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  text-align: end;
  justify-content: center;
  align-items: center;
  align-self: center;
}
.cmp-project-showcase__preview-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 10px 0 30px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__preview-container {
    padding-left: 0;
    padding-right: 0;
    padding-top: 26px;
  }
}
.cmp-project-showcase__preview-header {
  margin-bottom: 20px;
}
.cmp-project-showcase__preview-title {
  font-size: 28px;
  font-weight: 600;
  color: #26202e;
  margin: 0 0 5px 0;
}
.cmp-project-showcase__designer {
  font-size: 16px;
  color: #7a7482;
}
.cmp-project-showcase__preview-divider {
  height: 1px;
  background-color: #c7c7c7;
  margin: 20px 0;
}
.cmp-project-showcase__preview-details {
  margin-bottom: 25px;
}
.cmp-project-showcase__preview-detail-carrier {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  padding: 56px 107px;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__preview-detail-carrier {
    display: grid;
    gap: 28px 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 0 30px;
    align-items: flex-start;
  }
}
.cmp-project-showcase__preview-detail {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.cmp-project-showcase__preview-label {
  font-weight: 500;
  font-size: 14px;
  width: 150px;
  color: #7a7482;
}
.cmp-project-showcase__preview-value {
  flex: 1;
  color: #26202e;
  font-weight: 500;
  font-size: 17px;
}
.cmp-project-showcase__preview-description {
  line-height: 1.6;
  margin-bottom: 30px;
  font-weight: 400;
  font-size: 17px;
  color: #47444c;
  padding: 0 107px;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__preview-description {
    padding: 0;
  }
}
.cmp-project-showcase__preview-gallery-container {
  margin: 30px 0;
  position: relative;
}
.cmp-project-showcase__preview-gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 500px;
}
@media (max-width: 768px) {
  .cmp-project-showcase__preview-gallery {
    height: 350px;
  }
}
.cmp-project-showcase__slides-container {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
  will-change: transform;
}
.cmp-project-showcase__slide {
  width: 100%;
  flex-shrink: 0;
  height: 100%;
  box-sizing: border-box;
}
.cmp-project-showcase__slide-inner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.cmp-project-showcase__slide-media {
  width: 100%;
  height: 100%;
  object-fit: inherit;
  display: block;
}
.cmp-project-showcase__slide-media video {
  background-color: #26202e;
}
.cmp-project-showcase__gallery-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  padding: 0 20px;
  box-sizing: border-box;
}
.cmp-project-showcase__gallery-prev,
.cmp-project-showcase__gallery-next {
  pointer-events: all;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: #26202e;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-project-showcase__gallery-prev-img,
.cmp-project-showcase__gallery-next-img {
  width: 50px;
  height: 50px;
}
.cmp-project-showcase__gallery-dots {
  display: flex;
  justify-content: center;
  padding: 8px 12px;
  gap: 8px;
}
.cmp-project-showcase__gallery-dots .dot {
  width: 38px;
  height: 4px;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.cmp-project-showcase__preview-actions {
  position: fixed;
  top: auto;
  bottom: -10px;
  right: 0;
  width: 100%;
  background-color: white;
  padding: 16px 20px;
  box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.08);
  z-index: 12;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media screen and (min-width: 992px) {
  .cmp-project-showcase__preview-actions {
    position: static;
    border: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    box-shadow: none;
  }
}
.cmp-project-showcase__back-btn {
  background-color: #474150;
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.cmp-project-showcase__confirm-btn {
  background-color: #feb940;
  color: #26202e;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.cmp-project-showcase__upload-section {
  padding: 32px 40px 40px;
  background: #ffffff;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__upload-section {
    padding: 40px 20px;
  }
}
.cmp-project-showcase__slider-controls {
  position: absolute;
  top: 36.5px;
  right: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .cmp-project-showcase__slider-controls {
    right: 20px;
    flex-wrap: wrap;
  }
}
.cmp-project-showcase__play-pause {
  background-color: transparent;
  width: 25px;
  height: 25px;
  margin-left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .3s ease;
}
.cmp-project-showcase__play-pause svg {
  width: 100%;
  height: 100%;
}
.cmp-project-showcase__play-pause:hover {
  opacity: .8;
}
.cmp-project-showcase .popup-check-icon {
  width: 24px;
  aspect-ratio: 1;
}
.cmp-project-showcase .popup-close-icon {
  width: 16px;
  aspect-ratio: 1;
  cursor: pointer;
}
.cmp-project-showcase .dot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #000000;
  border-radius: 8px;
  transition: none;
  z-index: 1;
  opacity: .25;
}
.cmp-project-showcase .dot.active::before {
  width: 100%;
  transition: width 5000ms ease-in-out;
  animation-play-state: running;
  opacity: .75;
}
.cmp-project-showcase .dot:not(.active):not(.completed)::before {
  width: 0;
  transition: none;
}
.cmp-project-showcase .dot:not(.active) {
  transition: none;
}
.cmp-project-showcase .dot.completed::before {
  width: 100%;
  transition: none;
}
.cmp-project-showcase .dot.completed:hover,
.cmp-project-showcase .dot.completed:focus {
  opacity: 1;
  background-color: #000000;
}
.cmp-project-showcase__slider-controls.carousel-paused .dot.active::before {
  transition: none;
  animation-play-state: paused;
}
/* --- DESIGN STYLES MULTISELECT DROPDOWN --- */
.cmp-project-showcase__multiselect-dropdown {
  position: absolute;
  top: 50px;
  left: 0;
  background: #fff;
  width: 100%;
  border: 1px solid #E5E5E5;
  font-family: inherit;
}
.cmp-project-showcase__multiselect-option {
  padding: 12px 20px 12px 40px;
  font-size: 16px;
  color: #2b1a32;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background 0.17s;
}
.cmp-project-showcase__multiselect-option:not(.disabled):hover {
  background: #F5F5F5;
}
.cmp-project-showcase__multiselect-option.disabled {
  cursor: not-allowed;
  background: #F5F5F5;
}
/* Check icon on selected options */
.cmp-project-showcase__multiselect-option.selected::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 13px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
}
.cmp-project-showcase__multiselect-toggle {
  position: relative;
  min-height: 48px;
  margin: -8px -12px;
  padding: 8px 12px;
  width: 100%;
  color: #2b1a32;
  align-items: center;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  cursor: pointer;
  overflow: visible;
  gap: 6px;
}
.cmp-project-showcase__multiselect-toggle .cmp-project-showcase__tag {
  margin: 0;
}
.cmp-project-showcase__multiselect-placeholder {
  white-space: nowrap;
  opacity: 0.6;
  user-select: none;
  padding: 4px 0;
}
.cmp-project-showcase__multiselect-arrow {
  position: absolute;
  right: 12px;
  top: 18px;
  color: #7A7482;
  pointer-events: none;
  font-size: 10px;
  transition: transform 0.15s;
  font-weight: 700;
}
/* Ensure the container is position:relative for dropdown */
#designStylesContainer {
  position: relative;
}
/* Hide vertical scrollbar for options if not enough */
.cmp-project-showcase__multiselect-dropdown {
  overflow-y: auto;
  max-height: 300px;
}
/* Hide border on last option */
.cmp-project-showcase__multiselect-option:last-child {
  border-bottom: none;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-colours-catalogues {
  max-width: 1440px;
  margin: 50px auto;
  padding: 0 80px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 768px) {
  .cmp-colours-catalogues {
    margin: 40px 20px;
    max-width: 100%;
    padding: 0;
  }
}
@media screen and (max-width: 1200px) {
  .cmp-colours-catalogues {
    margin: 40px;
    padding: 0;
  }
}
.cmp-colours-catalogues__wrapper {
  display: block;
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 20;
  padding-bottom: 10px;
}
.cmp-colours-catalogues__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .cmp-colours-catalogues__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
  }
}
.cmp-colours-catalogues__title {
  font-size: 40px;
  font-weight: 700;
  color: #26202e;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .cmp-colours-catalogues__title {
    font-size: 30px;
    font-weight: 800;
  }
}
.cmp-colours-catalogues__actions {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-colours-catalogues__actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 16px 20px;
    z-index: 40;
    justify-content: space-between;
  }
}
.cmp-colours-catalogues__clear {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  vertical-align: middle;
  color: #6700ff;
  background: none;
  cursor: pointer;
}
.cmp-colours-catalogues__request {
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: #26202e;
  padding: 12px 24px;
  background-color: #feb940;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  cursor: pointer;
}
.cmp-colours-catalogues__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #c7c7c7;
  margin-bottom: 40px;
}
@media screen and (max-width: 1200px) {
  .cmp-colours-catalogues__tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-align: center;
    max-width: 100%;
    gap: 10px;
    background-color: #ffffff;
    z-index: 100;
    margin-bottom: 20px;
  }
}
.cmp-colours-catalogues__tag {
  font-weight: 500;
  line-height: 24px;
  color: #26202e;
  font-size: 17px;
  padding: 5px 10px 5px 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  gap: 8px;
  white-space: nowrap;
}
.cmp-colours-catalogues__tag--active {
  font-weight: 700;
  border-bottom: 3px solid #26202e;
  border-width: 50%;
}
.cmp-colours-catalogues__tag-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}
.cmp-colours-catalogues__divider {
  height: 1px;
  background-color: #f5f5f5;
  margin: 20px 0;
}
.cmp-colours-catalogues__subtitle {
  font-size: 32px;
  font-weight: 700;
  line-height: 100%;
  color: #26202e;
  letter-spacing: 0%;
  margin-bottom: 20px;
  text-transform: capitalize;
}
@media screen and (max-width: 768px) {
  .cmp-colours-catalogues__subtitle {
    font-size: 17px;
  }
}
.cmp-colours-catalogues__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 5px;
  margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
  .cmp-colours-catalogues__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin: 0 auto;
  }
}
.cmp-colours-catalogues__card {
  display: flex;
  flex-direction: column;
  max-width: 155.2px;
  width: 100%;
  height: 237px;
  border-top-right-radius: 15%;
  border: 1px solid #e5e5e5;
  margin-bottom: 10px;
}
.cmp-colours-catalogues__color {
  height: 165px;
  margin-bottom: 5px;
  border-top-right-radius: 15%;
  width: 100%;
}
.cmp-colours-catalogues__details {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.cmp-colours-catalogues__details-flex {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
}
.cmp-colours-catalogues__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid #5b5661;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  background-color: #ffffff;
  transition: border-color 0.2s ease;
  z-index: 10;
}
.cmp-colours-catalogues__checkbox:checked {
  border-color: #26202e;
  background-color: #26202e;
}
.cmp-colours-catalogues__checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: block;
  z-index: 10;
}
.cmp-colours-catalogues__checkbox:hover {
  border-color: #5b5661;
}
.cmp-colours-catalogues__checkbox:focus {
  outline: none;
  border-color: #26202e;
}
.cmp-colours-catalogues__code {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 10px;
  color: #26202e;
}
.cmp-colours-catalogues__name {
  font-size: 14px;
  color: #7a7482;
  max-height: 20px;
  max-width: 130px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-colours-catalogues__popup {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  max-height: 100vh;
  height: 100vh;
  display: none;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 100;
}
.cmp-colours-catalogues__popup::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.586);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .cmp-colours-catalogues__popup {
    max-width: 768px;
    width: 100%;
  }
  .cmp-colours-catalogues__popup::before {
    width: 100%;
    max-width: 768px;
  }
}
.cmp-colours-catalogues__popup-content {
  background-color: #ffffff;
  padding: 0 30px;
  width: 100%;
  height: 100vh;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.586);
  overflow-x: scroll;
  padding-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .cmp-colours-catalogues__popup-content {
    width: 100%;
    max-width: 768px;
  }
}
.cmp-colours-catalogues__popup-title {
  font-size: 22px;
  font-weight: 600;
  color: #26202e;
  line-height: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
  display: block;
  width: 100%;
  margin: 0 0 20px 0;
  padding-top: 30px;
}
.cmp-colours-catalogues__popup-section {
  margin-bottom: 10px;
}
.cmp-colours-catalogues__popup-category {
  font-size: 17px;
  font-weight: 700;
  color: #26202e;
  line-height: 24px;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.cmp-colours-catalogues__popup-swatch {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.cmp-colours-catalogues__popup-swatch:last-child {
  border-bottom: none;
}
.cmp-colours-catalogues__popup-color {
  height: 68px;
  width: 131px;
  margin-right: 15px;
  border-top-right-radius: 10%;
}
.cmp-colours-catalogues__popup-swatch-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.cmp-colours-catalogues__popup-code {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #26202e;
  margin-bottom: 15px;
}
.cmp-colours-catalogues__popup-name {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  text-transform: capitalize;
}
.cmp-colours-catalogues__popup-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  margin-left: 10px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.cmp-colours-catalogues__popup-delete:hover {
  opacity: 1;
}
.cmp-colours-catalogues__popup-actions {
  position: absolute;
  bottom: 0;
  padding-bottom: 30px;
  left: 0;
  right: 0;
  padding: 20px 30px 0 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background-color: #ffffff;
}
.cmp-colours-catalogues__popup-actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #c7c7c7;
}
.cmp-colours-catalogues__popup-cancel {
  background-color: #474150;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  line-height: 24px;
  padding: 12px 24px;
  cursor: pointer;
  margin-bottom: 30px;
}
.cmp-colours-catalogues__popup-submit {
  font-size: 17px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-weight: 500;
  background-color: #feb940;
  color: #26202e;
  line-height: 24px;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 30px;
}
.cmp-colours-catalogues-toast {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: #cc2e2e;
  color: #ffffff;
  width: 375px;
  max-width: 375px;
  height: 64px;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}
.cmp-colours-catalogues-toast-icon {
  fill: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  top: -5px;
}
.cmp-colours-catalogues-toast-message {
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0%;
  width: 281px;
}
.cmp-colours-catalogues-toast-close {
  fill: #ffffff;
  flex-shrink: 0;
  cursor: pointer;
  width: 22px;
  height: 22px;
  position: relative;
  top: -5px;
}
.cmp-colours-catalogues__swatch-toast {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: #cc2e2e;
  color: #ffffff;
  width: 375px;
  max-width: 375px;
  height: 64px;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}
.cmp-colours-catalogues__swatch-toast-message {
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0%;
  width: 281px;
}
.cmp-colours-catalogues__success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.586);
  z-index: 99;
  display: none;
}
.cmp-colours-catalogues__success-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 552px;
  min-height: 484px;
  background-color: #ffffff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 768px) {
  .cmp-colours-catalogues__success-message {
    width: 100%;
    height: 100%;
  }
}
.cmp-colours-catalogues__success-icon {
  width: 140px;
  height: 140px;
  margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
  .cmp-colours-catalogues__success-icon {
    width: 145px;
    height: 145px;
    margin-bottom: 20px;
  }
}
.cmp-colours-catalogues__success-text {
  font-size: 22px;
  color: #26202e;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 20px;
}
.cmp-colours-catalogues__success-accepted {
  font-size: 18px;
  color: #22891a;
  font-weight: 600;
}
.cmp-colours-catalogues__success-pending {
  font-size: 18px;
  color: #dc3232;
  font-weight: 600;
}
.cmp-colours-catalogues__success-request-id {
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: #a29baa;
  margin-bottom: 25px;
}
.cmp-colours-catalogues__success-main-request-id {
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: #a29baa;
  margin-bottom: 25px;
}
.cmp-colours-catalogues__success-done-button {
  font-size: 17px;
  font-weight: 500;
  color: #26202e;
  background-color: #feb940;
  line-height: 24px;
  padding: 12px 24px;
  gap: 10px;
  min-width: 122px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.cmp-colours-catalogues-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.cmp-colours-catalogues-count {
  font-size: 14px;
  font-weight: 500;
  color: #7a7482;
  line-height: 100%;
  margin-bottom: 20px;
  margin-top: 30px;
}
.cmp-colours-catalogues-load-more {
  color: #26202e;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  background: none;
  background-color: none;
  cursor: pointer;
}
.cmp-colours-catalogues-load-more img {
  padding-left: 10px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-delete-project {
  font-family: Manrope;
  text-align: center;
  margin: 20px auto;
  width: 90%;
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #26202e;
}
@media (min-width: 768px) {
  .cmp-delete-project {
    max-width: 552px;
    margin: auto;
  }
}
.cmp-delete-project__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmp-delete-project__head-text {
  font-size: 22px;
  font-weight: 600;
}
.cmp-delete-project__note-text {
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
}
.cmp-delete-project__btn-cont {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.cmp-delete-project__delete-btn {
  padding: 12px 24px;
  background-color: #474150;
  color: white;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  width: 152px;
}
.cmp-delete-project__keep-btn {
  padding: 12px 24px;
  background-color: #FEB940;
  color: #26202E;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  width: 152px;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
/* Base Styles */
.cmp-project-bookmarks {
  background-color: #ffffff;
  margin: 80px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.cmp-project-bookmarks__empty-state {
  font-size: 16px;
  width: 100%;
  padding: 0;
  text-align: left;
}
.cmp-project-bookmarks__empty-state-text-link {
  text-decoration: none;
  color: #6700ff;
}
.cmp-project-bookmarks__empty-state-text-link:hover {
  cursor: pointer;
}
.cmp-project-bookmarks__general-breadcrumb {
  display: none;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #6700ff;
  margin-bottom: 56px;
}
.cmp-project-bookmarks__general-breadcrumb-item {
  margin: 0 5px;
  cursor: pointer;
}
.cmp-project-bookmarks__general-breadcrumb-item.active {
  color: #a29baa;
}
.cmp-project-bookmarks__general-breadcrumb-separator {
  margin: 0 5px;
}
.general-folder-view {
  padding: 0px !important;
  margin-top: -30px !important;
  padding-top: 0px !important;
}
.general-header {
  font-size: 42px;
  font-weight: 800;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  margin-bottom: 48px;
}
.project-bookmark-header {
  width: fit-content;
  font-size: 17px;
  font-weight: 700;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  margin-bottom: 48px;
  padding-bottom: 8px;
  position: relative;
}
.project-bookmark-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  border-bottom: 3px solid #26202e;
}
/* Tabs Container */
.cmp-project-bookmarks__tabs-container {
  display: flex;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
}
/* Tab Styles */
.cmp-project-bookmarks__tab {
  cursor: pointer;
  padding: 10px 24px;
  white-space: nowrap;
  border-radius: 34px;
  background: transparent;
  border: 1.19px solid #7a7482;
  transition: all 0.3s ease;
}
.cmp-project-bookmarks__tab-title {
  font-size: 14px;
  font-weight: 500;
  color: #7a7482;
}
.cmp-project-bookmarks__tab:hover {
  background-color: #d8d8d8;
}
.cmp-project-bookmarks__tab.active {
  background-color: #26202e;
  border-color: #26202e;
}
.cmp-project-bookmarks__tab.active .cmp-project-bookmarks__tab-title {
  color: #ffffff;
  font-weight: 600;
}
/* Cards Container */
.cmp-project-bookmarks__cards-container {
  display: grid;
  grid-template-columns: repeat(4, 305px);
  gap: 20px;
}
/* Card Styles */
.cmp-project-bookmarks__card {
  width: 305px;
  margin-bottom: 76px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}
.cmp-project-bookmarks__card-image {
  width: 100%;
  height: 350px;
}
/* Menu Button */
.cmp-project-bookmarks__card-menu-button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: transparent;
  z-index: 10;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-project-bookmarks__card-menu-button svg {
  width: 20px;
  height: 20px;
}
/* Card Content */
.cmp-project-bookmarks__card-content {
  padding: 16px 0px;
  padding-right: 8px;
}
.cmp-project-bookmarks__card-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #26202e;
}
/* Card Actions */
.cmp-project-bookmarks__card-actions {
  display: none;
  position: absolute;
  top: 52px;
  right: 20px;
  flex-direction: column;
  min-width: 200px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  overflow: hidden;
}
.cmp-project-bookmarks__card-actions.active {
  display: flex;
  animation: fadeIn 0.2s ease;
}
.cmp-project-bookmarks__card-actions-action {
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  color: #26202e;
  transition: all 0.2s ease;
}
.cmp-project-bookmarks__card-actions-action:hover {
  background-color: #F5F5F5;
}
.cmp-project-bookmarks__card-actions-action:not(:last-child) {
  border-bottom: 1px solid #f5f5f5;
}
/* Texture Container */
.cmp-project-bookmarks__card-texture-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp-project-bookmarks__card-texture-image {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 12px;
}
.cmp-project-bookmarks__empty-state {
  color: #26202e;
}
/* Modal Styles */
.cmp-project-bookmarks__modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Responsive Styles */
@media (max-width: 1120px) {
  .cmp-project-bookmarks__cards-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .cmp-project-bookmarks {
    margin: 40px;
  }
}
@media (max-width: 767px) {
  .cmp-project-bookmarks__cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .cmp-project-bookmarks__cards-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-consultation {
  background-color: #26202e;
  color: #ffffff;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
}
.cmp-consultation__container {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  max-width: 1440px;
  margin: 50px auto;
  padding: 0 80px;
}
.cmp-consultation__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 130%;
  width: 550px;
  margin-bottom: 20px;
}
.cmp-consultation__text {
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  width: 570px;
  color: #a29baa;
}
.cmp-consultation__button {
  height: 159px;
}
.cmp-consultation .cmp-enquire__box {
  width: 151px;
  height: 159px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px 0px;
  text-decoration: none;
  color: #26202e;
  background: #feb940;
}
@media screen and (max-width: 768px) {
  .cmp-consultation .cmp-enquire__box {
    width: 110px;
    height: 115px;
    padding: 10px 14px;
  }
}
.cmp-consultation .cmp-enquire__box:hover {
  gap: 20px;
}
.cmp-consultation .cmp-enquire__box:hover .cmp-enquire__icon-wrapper {
  height: 34px;
  width: 34px;
}
.cmp-consultation .cmp-enquire__box__title {
  font-size: 22px;
  font-weight: 500;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  line-height: 31px;
  display: inline-block;
}
.cmp-consultation .cmp-enquire__icon-wrapper {
  position: relative;
  height: 20px;
  width: 20px;
  transition: all 300ms ease-in-out;
  overflow: hidden;
}
@media screen and (max-width: 1200px) {
  .cmp-consultation {
    display: none;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-icon-listing {
  max-width: 1440px;
  margin: 50px auto;
  padding: 0 80px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.cmp-icon-listing__title {
  font-size: 40px;
  font-weight: 700;
  color: #26202e;
  margin-bottom: 30px;
  line-height: 100%;
}
@media screen and (max-width: 768px) {
  .cmp-icon-listing__title {
    font-size: 28px;
  }
}
.cmp-icon-listing__description {
  font-size: 22px;
  color: #26202e;
  margin-bottom: 50px;
  line-height: 28px;
  font-weight: 400;
  max-width: 557px;
}
@media screen and (max-width: 768px) {
  .cmp-icon-listing__description {
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 10px;
  }
}
.cmp-icon-listing__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 50px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .cmp-icon-listing__items {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cmp-icon-listing__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cmp-icon-listing__icon {
  width: 150px;
  height: 164px;
  margin-bottom: 15px;
}
.cmp-icon-listing__text {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  color: #26202e;
  text-align: center;
  max-width: 151px;
}
@media screen and (max-width: 768px) {
  .cmp-icon-listing__text {
    font-size: 14px;
  }
}
@media screen and (max-width: 1200px) {
  .cmp-icon-listing {
    max-width: 100%;
    margin: 0;
    padding: 40px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-icon-listing {
    max-width: 100%;
    margin: 0;
    padding: 30px 20px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.shades-banner {
  position: relative;
  margin-bottom: 30px;
}
@media screen and (max-width: 480px) {
  .shades-banner {
    margin-bottom: 15px;
  }
}
.shades-banner-wrapper {
  max-width: 1440px;
  padding: 0 80px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .shades-banner-wrapper {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner-wrapper {
    padding: 0 20px;
  }
}
.shades-banner__main-title-wrapper {
  background: #ffffff;
  margin: 30px 0;
}
.shades-banner__main-title {
  font-size: 48px;
  font-weight: bold;
  margin: 0;
  color: #333;
  line-height: 1.2;
}
@media screen and (max-width: 480px) {
  .shades-banner__main-title {
    font-size: 36px;
    padding-left: 0;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner__main-title {
    font-size: 30px;
    padding-left: 0;
    font-weight: 800;
  }
}
.shades-banner__banner-container {
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 480px) {
  .shades-banner__banner-container {
    padding: 0 20px;
    min-height: 200px;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner__banner-container {
    height: 200px;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
  }
}
.shades-banner__banner-container.has-background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.94) 94%);
  z-index: 1;
  pointer-events: none;
}
.shades-banner__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
@media screen and (max-width: 480px) {
  .shades-banner__background {
    height: 200px;
  }
}
.shades-banner__main-content {
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: white;
  max-width: 500px;
}
@media screen and (max-width: 480px) {
  .shades-banner__main-content {
    left: 40px;
    max-width: 400px;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner__main-content {
    position: static;
    transform: none;
    text-align: center;
    max-width: 100%;
    margin-top: 20px;
  }
}
.shades-banner__main-subtitle {
  font-size: 18px;
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 480px) {
  .shades-banner__main-subtitle {
    font-size: 17px;
  }
}
.shades-banner__left-content {
  position: absolute;
  left: 70px;
  bottom: 60px;
  z-index: 2;
  color: white;
  max-width: 400px;
}
@media screen and (max-width: 1200px) {
  .shades-banner__left-content {
    left: 40px;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner__left-content {
    left: 40px;
    max-width: 300px;
    bottom: 10px;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner__left-content {
    position: absolute;
    text-align: left;
    max-width: 65%;
    margin-left: -30px;
  }
}
.shades-banner__left-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.4;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 480px) {
  .shades-banner__left-title {
    font-size: 24px;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner__left-title {
    font-size: 17px;
    max-width: 207px;
    line-height: 24px;
  }
}
.shades-banner__left-subtitle {
  color: #333;
  font-size: 18px;
  margin: 18px 0 0 0;
  line-height: 1.5;
  opacity: 0.9;
  text-align: left;
  text-shadow: none;
}
@media screen and (max-width: 480px) {
  .shades-banner__left-subtitle {
    font-size: 16px;
    text-align: center;
    margin: 12px 0 0 0;
  }
}
.shades-banner__cta {
  position: absolute;
  right: 60px;
  top: 70%;
  transform: translateY(-50%);
  z-index: 2;
  background: #ffffff;
  color: #26202e;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 132px;
  height: 138px;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  text-decoration: none;
  transition: all 100ms ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px 20px;
}
@media screen and (max-width: 480px) {
  .shades-banner__cta {
    right: 40px;
    min-width: 160px;
    padding: 16px 18px;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner__cta {
    position: static;
    transform: none;
    margin-left: auto;
    margin-top: auto;
    min-width: auto;
    max-width: 90px;
    font-size: 14px;
    line-height: 20px;
    height: auto;
    padding: 12px 16px;
  }
}
.shades-banner__cta:hover {
  background: #feb940;
}
.shades-banner__cta .arrow-icon {
  display: flex;
  position: relative;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-bottom-left-radius: 8px;
}
.shades-banner__cta .arrow-icon svg {
  transform: translate(0, 0);
  transition: transform 0.2s linear;
  position: absolute;
  top: 16px;
  left: -14px;
  width: 34px;
  height: 34px;
}
.shades-banner__cta:hover .arrow-icon svg {
  transform: translate(14px, -14px);
}
.shades-banner__cta-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shades-banner__cta-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.3;
  display: inline-block;
}
@media screen and (max-width: 480px) {
  .shades-banner__cta-title {
    font-size: 13px;
  }
}
.shades-banner__cta-link {
  display: inline-flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  transition: all 0.3s ease;
  line-height: 1.4;
}
@media screen and (max-width: 480px) {
  .shades-banner__cta-link {
    font-size: 13px;
  }
}
.shades-banner__cta-arrow {
  font-size: 16px;
  font-weight: bold;
  transition: all 300ms ease-in-out;
  position: relative;
  height: 14px;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shades-banner__cta--solid {
  background: #fff;
  color: black;
  border: 2px solid #333;
}
.shades-banner__cta--solid:hover {
  background: #f5f5dc;
}
.shades-banner__cta--compact {
  min-width: 140px;
  padding: 12px 16px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: auto;
}
@media screen and (max-width: 480px) {
  .shades-banner__cta--compact {
    min-width: 120px;
    padding: 10px 14px;
  }
}
@media screen and (max-width: 480px) {
  .shades-banner__cta--compact {
    max-width: 160px;
    padding: 10px 12px;
  }
}
.shades-banner__cta--compact .shades-banner__cta-content {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.shades-banner__cta--compact .shades-banner__cta-title {
  font-size: 14px;
  margin: 0;
}
.shades-banner__cta--compact:hover {
  background: #f9f9f0;
}
.no_content {
  padding: 20px;
  border: 2px dashed #ccc;
  background: #f5f5f5;
  color: #666;
  font-family: Arial, sans-serif;
}
.shades-banner__left-subtitle--mobile {
  display: none;
}
@media screen and (max-width: 480px) {
  .shades-banner__left-subtitle--mobile {
    display: block;
    color: #333;
    font-size: 17px;
    font-weight: 400;
    margin: 12px 0 0 0;
    line-height: 1.5;
    opacity: 0.9;
    text-align: left;
    text-shadow: none;
  }
}
.shades-banner__left-subtitle--desktop {
  display: block;
  color: #fff;
}
@media screen and (max-width: 480px) {
  .shades-banner__left-subtitle--desktop {
    display: none;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-lightning-services {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 480px) {
  .cmp-lightning-services {
    padding: 0 20px;
  }
}
.cmp-lightning-services__header {
  margin-bottom: 70px;
  text-align: left;
}
.cmp-lightning-services__title {
  color: #26202e;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 12px;
}
@media screen and (max-width: 1200px) {
  .cmp-lightning-services__title {
    font-size: 28px;
    line-height: 40px;
    font-weight: 700;
  }
}
.cmp-lightning-services__subtitle {
  color: #26202e;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 25px;
  line-height: 1.5;
  max-width: 670px;
}
@media screen and (max-width: 480px) {
  .cmp-lightning-services__subtitle {
    font-size: 17px;
  }
}
.cmp-lightning-services__tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
@media screen and (max-width: 480px) {
  .cmp-lightning-services__tabs {
    gap: 8px;
  }
}
.cmp-lightning-services__tab {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  padding: 10px 24px;
  border: 1px solid #26202e;
  background: #ffffff;
  color: #26202e;
  border-radius: 24px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  outline: none;
}
@media screen and (max-width: 480px) {
  .cmp-lightning-services__tab {
    font-size: 14px;
    padding: 8px 18px;
  }
}
.cmp-lightning-services__tab:hover {
  background: #f5f5f5;
}
.cmp-lightning-services__tab--active {
  background: #26202e;
  color: #ffffff;
  border-color: #26202e;
}
.cmp-lightning-services__tab--active:hover {
  background: #26202e;
}
.cmp-lightning-services__content-wrapper {
  position: relative;
}
.cmp-lightning-services__content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cmp-lightning-services__content--active {
  display: flex;
  opacity: 1;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 20px;
}
@media screen and (max-width: 1200px) {
  .cmp-lightning-services__content--active {
    flex-direction: column;
    gap: 20px;
  }
}
.cmp-lightning-services__image-section {
  flex: 0 0 60%;
  max-width: 60%;
}
@media screen and (max-width: 1200px) {
  .cmp-lightning-services__image-section {
    max-width: 100%;
    flex: 1 1 100%;
  }
}
.cmp-lightning-services__image {
  width: 100%;
  height: 450px;
  object-fit: cover;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 480px) {
  .cmp-lightning-services__image {
    height: 264px;
  }
}
.cmp-lightning-services__text-section {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media screen and (max-width: 1200px) {
  .cmp-lightning-services__text-section {
    max-width: 100%;
    flex: 1 1 100%;
  }
}
.cmp-lightning-services__side-title {
  font-size: 28px;
  font-weight: 500;
  color: #26202e;
  margin-bottom: 20px;
  line-height: 1.3;
}
@media screen and (max-width: 480px) {
  .cmp-lightning-services__side-title {
    font-size: 24px;
  }
}
.cmp-lightning-services__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: #26202e;
}
@media screen and (max-width: 480px) {
  .cmp-lightning-services__list {
    font-size: 16px;
  }
}
.cmp-lightning-services__list li {
  position: relative;
  padding-left: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.cmp-lightning-services__list li:last-child {
  margin-bottom: 0;
}
.cmp-lightning-services__icon {
  display: inline-block;
  vertical-align: top;
  margin-right: 18px;
  margin-top: 7px;
  flex-shrink: 0;
}
@media screen and (max-width: 480px) {
  .cmp-lightning-services__icon {
    margin-right: 14px;
    margin-top: 3px;
  }
}
@media screen and (max-width: 1200px) {
  .cmp-lightning-services__header {
    margin-bottom: 30px;
  }
}
/* Animation for smooth tab transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cmp-lightning-services__content--active {
  animation: fadeIn 0.3s ease forwards;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-search-listing {
  margin: 50px auto;
  padding: 0 80px;
  max-width: 1440px;
}
@media screen and (max-width: 1200px) {
  .cmp-search-listing {
    margin: 0 40px;
    padding: 0;
    max-width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .cmp-search-listing {
    margin: 0 20px;
    padding: 20px 0;
    max-width: 100%;
  }
}
.cmp-search-listing-title {
  font-size: 42px;
  font-weight: 800;
  color: #26202e;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-title {
    font-size: 30px;
    line-height: 120%;
    margin-bottom: 30px;
  }
}
.cmp-search-listing__filters {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__filters {
    margin-bottom: 25px;
  }
}
.cmp-search-listing__filter {
  background: none;
  border: 1px solid #5b5661;
  border-radius: 35px;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  color: #5b5661;
  transition: color 0.3s ease;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__filter {
    padding: 10px 15px;
    font-size: 17px;
  }
}
.cmp-search-listing__filter.active {
  color: #ffffff;
  background-color: #26202e;
}
.cmp-search-listing__filter:hover:not(.active) {
  color: #26202e;
}
.cmp-search-listing__filter:focus {
  outline: none;
}
.cmp-search-listing-category {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-category {
    margin-bottom: 30px;
  }
}
.cmp-search-listing-category-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #26202e;
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-category-title {
    font-size: 17px;
    margin-bottom: 20px;
  }
}
.cmp-search-listing-container {
  align-items: center;
  margin-top: 40px;
  margin: 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-container {
    margin: 0;
    max-width: 100%;
  }
}
.cmp-search-listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 5px;
    gap: 8px;
  }
  .cmp-search-listing-tags::-webkit-scrollbar {
    display: none;
  }
}
.cmp-search-listing-tag {
  padding: 5px 16px 5px 16px;
  background-color: #ffffff;
  border-radius: 34px;
  border: 1px solid #5b5661;
  height: fixed(32px);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #5b5661;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-tag {
    padding: 4px 12px;
    font-size: 14px;
    height: 28px;
  }
}
.cmp-search-listing-tag.selected {
  background-color: #26202e;
  color: #ffffff;
  border: 1px solid #5b5661;
}
.cmp-search-listing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 100%;
}
@media screen and (max-width: 1200px) {
  .cmp-search-listing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .cmp-search-listing-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.cmp-search-listing-card-wrapper {
  margin: 10px 0;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-card-wrapper {
    margin: 5px 0;
  }
}
.cmp-search-listing-card {
  width: 100%;
  height: 350px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-card {
    height: 350px;
  }
}
.cmp-search-listing-image {
  position: relative;
  width: 100%;
  height: 100%;
}
.cmp-search-listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: transparent;
}
.cmp-search-listing-bookmark {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-bookmark {
    top: 20px;
    right: 20px;
  }
}
.cmp-search-listing-bookmark svg {
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-bookmark svg {
    width: 20px;
    height: 20px;
  }
}
.cmp-search-listing-name {
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0%;
  font-weight: 400;
  color: #26202e;
  margin: 20px 0;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-name {
    font-size: 15px;
    line-height: 22px;
    margin: 10px 0;
  }
}
.cmp-search-listing-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-footer {
    margin-top: 15px;
  }
}
.cmp-search-listing-count {
  font-size: 15px;
  color: #7a7482;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0%;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-count {
    font-size: 13px;
    margin-bottom: 10px;
  }
}
.cmp-search-listing-load-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: hug(155px);
  height: fixed(48px);
  padding: 12px;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0%;
  background: none;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-load-more {
    font-size: 15px;
    height: fixed(40px);
    padding: 10px;
  }
}
.cmp-search-listing-load-more__icon {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing-load-more__icon {
    width: 14px;
    height: 14px;
  }
}
.cmp-search-listing__showcase-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.cmp-search-listing__showcase-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  position: relative;
  width: hug(414px);
  height: 370px;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card {
    width: 100%;
    height: 320px;
    margin-bottom: 20px;
  }
}
.cmp-search-listing__showcase-card-image {
  width: hug(414px);
  height: 254px;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card-image {
    width: 100%;
    height: 200px;
    margin-bottom: 15px;
  }
}
.cmp-search-listing__showcase-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card-header {
    padding: 0 15px;
  }
}
.cmp-search-listing__showcase-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0%;
  margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card-title {
    font-size: 16px;
    line-height: 22px;
  }
}
.cmp-search-listing__showcase-card-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #000000;
}
.cmp-search-listing__showcase-card-info {
  padding: 0 20px;
  display: flex;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card-info {
    padding: 0 15px;
    gap: 6px;
  }
}
.cmp-search-listing__showcase-card-designer {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
  padding: 0 20px;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card-designer {
    font-size: 14px;
    padding: 0 15px;
  }
}
.cmp-search-listing__showcase-card-property {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
  padding-right: 8px;
  border-right: 2px solid #e5e5e5;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card-property {
    font-size: 13px;
    padding-right: 6px;
  }
}
.cmp-search-listing__showcase-card-location {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
  padding-right: 8px;
  border-right: 2px solid #e5e5e5;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card-location {
    font-size: 13px;
    padding-right: 6px;
  }
}
.cmp-search-listing__showcase-card-area {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing__showcase-card-area {
    font-size: 13px;
  }
}
.cmp-search-listing .cmp-search-listing__path {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing .cmp-search-listing__path {
    margin-top: 20px;
  }
}
.cmp-search-listing .cmp-search-listing__path-wrapper {
  display: flex;
  background-color: #f2f2f2;
  gap: 180px;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing .cmp-search-listing__path-wrapper {
    flex-direction: column;
    padding: 20px;
    gap: 30px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .cmp-search-listing .cmp-search-listing__path-row {
    margin-bottom: 20px;
  }
}
.cmp-search-listing .cmp-search-listing__path-title {
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0%;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing .cmp-search-listing__path-title {
    font-size: 16px;
    margin-bottom: 15px;
  }
}
.cmp-search-listing .cmp-search-listing__path-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  width: 200%;
  height: 1px;
}
.cmp-search-listing .cmp-search-listing__path__links-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing .cmp-search-listing__path__links-list {
    gap: 6px;
  }
}
.cmp-search-listing .cmp-search-listing__path__link {
  font-weight: 400;
  font-size: 17px;
  color: #26202e;
  line-height: 28px;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.3s ease;
  gap: 6px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing .cmp-search-listing__path__link {
    font-size: 15px;
    line-height: 22px;
  }
}
.cmp-search-listing .cmp-search-listing__path__link-icon {
  width: 12px;
  height: 12px;
}
@media screen and (max-width: 768px) {
  .cmp-search-listing .cmp-search-listing__path__link-icon {
    width: 10px;
    height: 10px;
  }
}
.cmp-search-listing__bookmark-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
  align-items: center;
  justify-content: center;
}
.cmp-search-listing__bookmark-modal--visible {
  display: flex;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-product-banner {
  max-width: 1440px;
  padding: 0 80px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 50px;
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.cmp-product-banner__header .cmp-product-banner__title {
  font-size: 42px;
  font-weight: 800;
  color: #26202e;
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__header .cmp-product-banner__title {
    font-size: 30px;
  }
}
.cmp-product-banner__header .cmp-product-banner__description {
  font-size: 22px;
  font-weight: 400;
  color: #26202e;
  line-height: 36px;
  margin-bottom: 30px;
  max-width: 532px;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__header .cmp-product-banner__description {
    display: none;
    margin-bottom: 0;
  }
}
.cmp-product-banner__header .cmp-product-banner__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 50px;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__tab-buttons .cmp-product-banner__tab-button {
  padding: 10px 24px;
  border: 1px solid #26202e;
  background: #ffffff;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #26202e;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__tab-buttons .cmp-product-banner__tab-button--active {
  background: #26202e;
  color: #ffffff;
  border-color: #26202e;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__tab-buttons .cmp-product-banner__tab-button:hover:not(.cmp-product-banner__tab-button--active) {
  border-color: #26202e;
  color: #26202e;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__tab-buttons {
    margin-bottom: 10px;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-align: center;
    max-width: 100%;
  }
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation {
  display: flex;
  align-items: center;
  gap: 32px;
  color: #dbdbdb;
  font-size: 32px;
  margin-bottom: 50px;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation .cmp-product-banner__slide-counter {
  font-weight: 400;
  color: #a29baa;
  font-size: 32px;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation .cmp-product-banner__nav-button {
  width: 30px;
  height: 40px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation .cmp-product-banner__nav-button:hover {
  border-color: #26202e;
  background: #ffffff;
  color: #26202e;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation .cmp-product-banner__nav-button--disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation .cmp-product-banner__nav-button--disabled:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: #dbdbdb;
}
.cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation .cmp-product-banner__nav-button svg {
  width: 45px;
  height: 45px;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation .cmp-product-banner__nav-button svg {
    height: 35px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__header .cmp-product-banner__controls .cmp-product-banner__slider-navigation {
    margin-bottom: 10px;
    align-self: flex-end;
    gap: 15px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__header .cmp-product-banner__controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
.cmp-product-banner__content {
  display: flex;
}
.cmp-product-banner__content .cmp-product-banner__image {
  width: 60%;
  position: relative;
}
.cmp-product-banner__content .cmp-product-banner__image img {
  width: 100%;
  height: 580px;
  object-fit: contain;
  display: block;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__content .cmp-product-banner__image img {
    height: 234px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-banner__content .cmp-product-banner__image img {
    height: 234px;
    object-fit: cover;
  }
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__content .cmp-product-banner__image {
    height: 234px;
    width: 100%;
  }
}
.cmp-product-banner__content .cmp-product-banner__details {
  width: 40%;
  padding-left: 50px;
  position: relative;
}
.cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__product-title {
  font-size: 40px;
  font-weight: 700;
  color: #26202e;
  line-height: 1.1;
  margin-bottom: 25px;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__product-title {
    font-size: 28px;
  }
}
.cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__product-description {
  font-size: 17px;
  color: #26202e;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 40px;
}
.cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
  margin-bottom: 40px;
}
.cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__features .cmp-product-banner__feature-item .cmp-product-banner__feature-title {
  font-size: 32px;
  font-weight: 500;
  color: #26202e;
  margin-bottom: 10px;
  line-height: 100%;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__features .cmp-product-banner__feature-item .cmp-product-banner__feature-title {
    font-size: 26px;
  }
}
.cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__features .cmp-product-banner__feature-item .cmp-product-banner__feature-subtitle {
  font-size: 20px;
  color: #26202e;
  font-weight: 400;
  line-height: 28px;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__features .cmp-product-banner__feature-item .cmp-product-banner__feature-subtitle {
    font-size: 14px;
  }
}
.cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__cta .cmp-product-banner__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #6700ff;
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__cta .cmp-product-banner__cta-link {
    font-size: 17px;
  }
}
.cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__cta .cmp-product-banner__cta-link:hover .cmp-product-banner__arrow {
  transform: translateX(4px);
}
.cmp-product-banner__content .cmp-product-banner__details .cmp-product-banner__cta .cmp-product-banner__cta-link .cmp-product-banner__arrow {
  transition: transform 0.3s ease;
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__content .cmp-product-banner__details {
    padding-top: 50px;
    width: 100%;
    padding-left: 10px;
  }
}
@media screen and (max-width: 991px) {
  .cmp-product-banner__content {
    flex-direction: column;
  }
}
@media screen and (max-width: 1200px) {
  .cmp-product-banner {
    padding: 0 40px;
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .cmp-product-banner {
    padding: 0 20px;
    max-width: 100%;
    width: 100%;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-process-icon-listing {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 80px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
@media screen and (max-width: 1200px) {
  .cmp-process-icon-listing {
    padding: 40px;
  }
}
.cmp-process-icon-listing__title {
  font-size: 40px;
  font-weight: 700;
  color: #26202e;
  margin-bottom: 30px;
  line-height: 100%;
}
@media screen and (max-width: 991px) {
  .cmp-process-icon-listing__title {
    font-size: 28px;
  }
}
.cmp-process-icon-listing__description {
  font-size: 22px;
  color: #26202e;
  margin-bottom: 50px;
  line-height: 28px;
  font-weight: 400;
  max-width: 557px;
}
@media screen and (max-width: 991px) {
  .cmp-process-icon-listing__description {
    font-size: 17px;
    line-height: 28px;
  }
}
.cmp-process-icon-listing__items {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  align-items: center;
  gap: 20px 0;
}
@media screen and (max-width: 991px) {
  .cmp-process-icon-listing__items {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
  }
}
.cmp-process-icon-listing__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}
.cmp-process-icon-listing__icon {
  width: 150px;
  height: 164px;
  margin-bottom: 15px;
}
.cmp-process-icon-listing__text {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  color: #26202e;
  text-align: center;
  max-width: 151px;
}
@media screen and (max-width: 991px) {
  .cmp-process-icon-listing__text {
    font-size: 14px;
  }
}
.cmp-process-icon-listing__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
  margin-top: -100px;
}
@media screen and (max-width: 991px) {
  .cmp-process-icon-listing__arrow {
    margin: 10px 0;
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    align-content: center;
    margin-top: 0;
  }
}
@media screen and (max-width: 991px) {
  .cmp-process-icon-listing {
    max-width: 100%;
    margin: 0;
    padding: 30px 20px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.aid__wrapper {
  background-color: #f5f5f5;
  max-width: 100%;
  display: flex;
  padding: 40px 0 60px 30px;
  gap: 20px !important;
  flex-direction: column;
}
@media screen and (min-width: 1200px) {
  .aid__wrapper {
    padding: 17px 63px 17px 32.5px;
    flex-direction: row;
    gap: 50px !important;
  }
}
.aid__img img {
  height: 143px;
  width: 141px;
}
.aid__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 100%;
  letter-spacing: 0;
  color: #26202e;
}
@media screen and (min-width: 992px) {
  .aid__title {
    font-family: Manrope;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.3;
    letter-spacing: 0;
    padding: 20px 0;
    width: 530px;
  }
}
.aid__content .aid__description {
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0;
  color: #26202e;
  padding-right: 10px;
  padding-bottom: 10px;
}
@media screen and (min-width: 992px) {
  .aid__content .aid__description {
    padding-right: 0;
    padding-bottom: 0;
    line-height: 25px;
    letter-spacing: 0;
    margin-top: 30px;
    width: 400px;
  }
}
.aid__content .aid__links {
  margin-top: 20px;
  font-weight: 600;
  font-size: 17px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #6700ff !important;
  display: flex;
  flex-direction: column;
  gap: 23px;
}
@media screen and (min-width: 992px) {
  .aid__content .aid__links {
    padding: 0;
    flex-direction: row;
  }
}
.aid__content .aid__links a {
  color: #6700ff !important;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.category-cards__container {
  width: 100%;
  padding: 20px;
  background-color: #ffffff;
  padding-right: 0;
}
@media screen and (min-width: 1200px) {
  .category-cards__container {
    margin-left: 90px;
  }
}
.category-cards__header-title {
  max-width: 70%;
  color: #26202e;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 20px;
  line-height: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .category-cards__header-title {
    max-width: 35%;
  }
}
@media screen and (min-width: 1200px) {
  .category-cards__header-title {
    font-size: 40px;
    max-width: 35%;
  }
}
.category-cards__header-description {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0;
  margin-bottom: 20px;
  max-width: 80%;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .category-cards__header-description {
    max-width: 43%;
  }
}
@media screen and (min-width: 1200px) {
  .category-cards__header-description {
    font-family: 'Manrope', Helvetica, Roboto, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 0;
    max-width: 33%;
  }
}
.category-cards__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 50px;
  margin-right: 10%;
}
@media screen and (min-width: 1200px) {
  .category-cards__header {
    flex-direction: row;
  }
}
.category-cards__tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: none;
}
.category-cards__tab-button {
  background-color: #ffffff;
  padding: 10px 23.87px;
  margin-right: 10px;
  cursor: pointer;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  color: #000000;
  border-radius: 34px;
  border-width: 0.5px;
  border: 0.5px solid #26202e;
}
.category-cards__tab-button:hover {
  background-color: #000000;
  color: #ffffff;
}
.category-cards__tab-button.active {
  background-color: #000000;
  border-color: #444444;
  color: #ffffff;
  font-weight: 400;
}
.category-cards__slider-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 15px;
  color: #f5f5f5;
  gap: 10px;
}
.category-cards__slider-controls .category-cards__arrow {
  background-color: #ffffff;
  border: 2px;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  color: #000000;
}
.category-cards__page-indicator {
  color: #a29baa;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 100%;
  text-align: center;
}
.category-cards__tab-content.active {
  display: block;
}
.category-cards__tab-content {
  display: none;
}
.category-cards__image-slider {
  overflow: hidden;
  position: relative;
  padding-bottom: 0;
}
.category-cards__slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  padding-right: 0;
  box-sizing: border-box;
}
.category-cards__slide {
  flex: 0 0 85%;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .category-cards__slide {
    flex: 0 0 calc(42%);
    margin-right: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .category-cards__slide {
    flex: 0 0 calc(42%);
    margin-right: 15px;
  }
}
.category-cards__slide:last-child {
  margin-right: 0;
}
.category-cards__slide img {
  width: 100%;
  display: block;
  height: 250px;
  object-fit: cover;
}
.category-cards__slide-text {
  color: #ffffff;
  padding: 15px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-weight: 300;
  font-size: 22px;
  background-color: #000000;
  line-height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.category-cards__slide-text .category-cards__arrow-icon {
  font-size: 20px;
  color: #ffffff;
}
.category-cards__image-slider::after {
  width: 0;
  background: none;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .category-cards__image-slider::after {
    width: 0;
    background: none;
    background: linear-gradient(to right, transparent, #474150 80%);
  }
}
@media screen and (min-width: 1200px) {
  .category-cards__image-slider::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    background: linear-gradient(to right, transparent, #f2f2f2 95%);
    pointer-events: none;
    z-index: 10;
  }
}
@media screen and (min-width: 1200px) {
  .category-cards__container:not(:has(.category-cards__tabs)) .category-cards__header {
    margin-left: 80%;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-request-meeting {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 456px;
  height: 80%;
  margin: 0 auto;
  padding: 24px 40px;
  position: relative;
}
@media screen and (max-width: 480px) {
  .cmp-request-meeting {
    max-width: 346px;
  }
}
.cmp-request-meeting__container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmp-request-meeting__header {
  margin-bottom: 10px;
  color: #26202e;
}
.cmp-request-meeting__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 24px;
}
.cmp-request-meeting__subtitle {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  line-height: 20px;
}
.cmp-request-meeting__product {
  text-align: center;
  margin: 10px 0;
}
.cmp-request-meeting__product-name {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.cmp-request-meeting__form-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmp-request-meeting__form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.cmp-request-meeting__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #5b5661;
}
.cmp-request-meeting__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dddddd;
  font-size: 14px;
  height: 161px;
}
.cmp-request-meeting__input:focus {
  outline: none;
  border-color: #4a90e2;
}
.cmp-request-meeting__note {
  font-size: 12px;
  color: #666666;
  font-style: italic;
  text-align: center;
  margin-top: 15px;
  line-height: 1.4;
}
.cmp-request-meeting__success-view {
  display: none;
  text-align: center;
  padding: 15px 0;
}
.cmp-request-meeting__success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cmp-request-meeting__success-icon {
  width: 160px;
  height: 160px;
  margin-bottom: 16px;
}
.cmp-request-meeting__success-message {
  font-size: 22px;
  font-weight: 600;
  color: #26202e;
  line-height: 1.4;
  margin: 16px;
}
.cmp-request-meeting__executive-info {
  font-size: 17px;
  color: #26202e;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 32px;
}
.cmp-request-meeting__already-view {
  display: none;
  text-align: center;
  padding: 15px 0;
}
.cmp-request-meeting__already-message {
  font-size: 14px;
  color: #666666;
  margin: 0;
  line-height: 1.4;
}
.cmp-request-meeting__actions {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 20px 40px 30px 30px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 20px;
  border-top: 1px solid #e5e5e5;
}
.cmp-request-meeting__btn {
  width: 122px;
  font-size: 17px;
  font-weight: 500;
  padding: 12px 0;
  cursor: pointer;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
.cmp-request-meeting__btn--cancel {
  background-color: #474150;
  color: #ffffff;
}
.cmp-request-meeting__btn--submit {
  background-color: #feb940;
  color: #26202e;
}
.cmp-request-meeting__btn--done {
  background-color: #feb940;
  color: #26202e;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-title {
  max-width: 1440px;
  margin: 0 auto;
  margin-top: 110px;
  margin-bottom: 30px;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .cmp-title {
    max-width: 100%;
    padding: 0 40px;
  }
}
.cmp-title__text {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0%;
  color: #26202e;
  margin-bottom: 25px;
  line-height: 55px;
}
@media screen and (max-width: 480px) {
  .cmp-title__text {
    font-size: 30px;
    margin-bottom: 15px;
    line-height: 40px;
  }
}
.cmp-title__description {
  max-width: 630px;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  font-size: 22px;
  line-height: 34px;
  font-weight: 400;
  color: #26202e;
  margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
  .cmp-title__description {
    font-size: 17px;
    line-height: 28px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-title {
    padding: 0 20px;
    margin-bottom: 15px;
  }
}
.cmp-title--margin-bottom-applied {
  margin-bottom: -100px;
}
@media screen and (max-width: 480px) {
  .cmp-title--margin-bottom-applied {
    margin-bottom: -80px;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.skeleton-loader {
  background: #fff;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}
@media screen and (max-width: 480px) {
  .skeleton-loader {
    padding: 0 8px;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader {
    padding: 0 16px;
  }
}
.skeleton-loader__top-header {
  width: 100%;
  height: 80px;
  margin: 0 auto 24px auto;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__top-header {
    height: 36px;
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__top-header {
    height: 48px;
    margin-bottom: 12px;
  }
}
.skeleton-loader__header-row {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  margin-bottom: 14px;
  gap: 16px;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__header-row {
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 4px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__header-row {
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 6px;
  }
}
.skeleton-loader__header-left {
  width: 304px;
  height: 55px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__header-left {
    width: 100px;
    height: 20px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__header-left {
    width: 140px;
    height: 28px;
  }
}
.skeleton-loader__header-right {
  width: 304px;
  height: 55px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__header-right {
    width: 100px;
    height: 20px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__header-right {
    width: 140px;
    height: 28px;
  }
}
.skeleton-loader__list {
  margin-bottom: 32px;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__list {
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__list {
    margin-bottom: 12px;
  }
}
.skeleton-loader__item {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  background: #fcfcfc;
  padding: 18px 20px;
  border: 1px solid #f0f0f0;
  box-shadow: none;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__item {
    padding: 6px 4px;
    margin-bottom: 6px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__item {
    padding: 8px 6px;
    margin-bottom: 8px;
  }
}
.skeleton-loader__avatar {
  width: 126px;
  height: 114px;
  margin-right: 28px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__avatar {
    width: 36px;
    height: 32px;
    margin-right: 4px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__avatar {
    width: 48px;
    height: 42px;
    margin-right: 8px;
  }
}
.skeleton-loader__columns {
  display: flex;
  flex: 1;
  justify-content: space-around;
  gap: 31px;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__columns {
    gap: 4px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__columns {
    gap: 8px;
  }
}
.skeleton-loader__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 30%;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__col {
    gap: 2px;
    width: 30%;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__col {
    gap: 4px;
    width: 30%;
  }
}
.skeleton-loader__line {
  height: 18px;
  width: 126px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__line {
    height: 6px;
    width: 40px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__line {
    height: 8px;
    width: 60px;
  }
}
.skeleton-loader__button {
  width: 304px;
  height: 55px;
  margin: 80px auto 80px auto;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__button {
    width: 100px;
    height: 20px;
    margin: 12px auto 12px auto;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__button {
    width: 140px;
    height: 28px;
    margin: 16px auto 16px auto;
  }
}
.skeleton-loader__section-header {
  width: 304px;
  height: 55px;
  margin: 0 0 18px 0;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__section-header {
    width: 100px;
    height: 20px;
    margin-bottom: 4px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__section-header {
    width: 140px;
    height: 28px;
    margin-bottom: 6px;
  }
}
.skeleton-loader__footer {
  margin-top: 18px;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__footer {
    margin-top: 4px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__footer {
    margin-top: 8px;
  }
}
.skeleton-loader__footer-box {
  background: #fff;
  border: 1px solid #f0f0f0;
  padding: 22px 15px;
  margin-bottom: 12px;
  max-width: 100%;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__footer-box {
    padding: 4px 2px;
    margin-bottom: 2px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__footer-box {
    padding: 6px 4px;
    margin-bottom: 4px;
  }
}
.skeleton-loader__footer-line {
  height: 15px;
  width: 100%;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
@media screen and (max-width: 480px) {
  .skeleton-loader__footer-line {
    height: 4px;
  }
}
@media screen and (max-width: 768px) {
  .skeleton-loader__footer-line {
    height: 6px;
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 10px;
  max-width: 1200px;
  margin: 0 auto;
}
.cmp-error-page__search-query {
  font-size: 42px;
  font-weight: 600;
  color: #26202e;
  margin-bottom: 20px;
  align-self: flex-start;
  padding-left: 10px;
}
@media screen and (max-width: 768px) {
  .cmp-error-page__search-query {
    font-size: 30px;
    margin-bottom: 30px;
    padding-left: 15px;
  }
}
.cmp-error-page__wrapper {
  max-width: 550px;
  width: 100%;
  padding: 55px 15px;
  text-align: center;
  margin-top: -50px;
  background-color: #f5f5f5;
}
@media screen and (max-width: 768px) {
  .cmp-error-page__wrapper {
    max-width: 100%;
    padding: 40px 20px;
  }
}
.cmp-error-page__icon-container {
  position: relative;
  width: 180px;
  height: 140px;
  margin: 0 auto 60px;
}
@media screen and (max-width: 768px) {
  .cmp-error-page__icon-container {
    width: 150px;
    height: 120px;
    margin-bottom: 30px;
    transform: scale(0.9);
  }
}
.cmp-error-page__folder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}
@media screen and (max-width: 768px) {
  .cmp-error-page__folder-icon {
    width: 160px;
    height: 160px;
  }
}
.cmp-error-page__title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 7.5px;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .cmp-error-page__title {
    font-size: 18px;
    font-weight: 500;
  }
}
.cmp-error-page__subtitle {
  font-size: 17px;
  font-weight: 600;
  color: #26202e;
  margin-bottom: 10px;
}
.cmp-error-page__message {
  font-size: 17px;
  font-weight: 400;
  color: #26202e;
  line-height: 1.5;
  margin: 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .cmp-error-page__message {
    font-size: 16px;
    max-width: 300px;
  }
}
.cmp-error-page__button {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 25px;
  background: #feb940;
  color: #26202e;
  font-size: 16px;
  font-weight: 500;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
}
.cmp-error-page__button:hover {
  background: #e6b12e;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-bath-collection-listing__title {
  font-size: 42px;
  font-weight: 800;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  line-height: 1.2;
  color: #26202e;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .cmp-bath-collection-listing__title {
    font-size: 30px;
    margin-bottom: 30px;
  }
}
.cmp-bath-collection-listing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media screen and (max-width: 1200px) {
  .cmp-bath-collection-listing__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}
@media screen and (max-width: 480px) {
  .cmp-bath-collection-listing__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.cmp-bath-collection-listing__card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
  position: relative;
  width: hug(414px);
  height: hug(500px);
  margin-bottom: 30px;
  cursor: pointer;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .cmp-bath-collection-listing__card {
    width: 100%;
    height: hug(500px);
    margin-bottom: 20px;
  }
}
.cmp-bath-collection-listing__card-image {
  width: 100%;
  height: 254px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cmp-bath-collection-listing__card-image {
    width: 100%;
    height: 200px;
    margin-bottom: 15px;
  }
}
.cmp-bath-collection-listing__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
@media screen and (max-width: 768px) {
  .cmp-bath-collection-listing__card-header {
    padding: 0 20px;
  }
}
.cmp-bath-collection-listing__card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0%;
  margin-bottom: 15px;
  color: #26202e;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .cmp-bath-collection-listing__card-title {
    line-height: 12px;
  }
}
.cmp-bath-collection-listing__card-info {
  padding: 0 20px;
  display: flex;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .cmp-bath-collection-listing__card-info {
    padding: 0 15px;
    gap: 6px;
  }
}
.cmp-bath-collection-listing__card-description {
  font-size: 14px;
  color: #7a7482;
  font-weight: 500;
  line-height: 20px;
  padding: 0 20px;
  margin-bottom: 20px;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .cmp-bath-collection-listing__card-description {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
.cmp-bath-collection-listing-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
}
.cmp-bath-collection-listing-count {
  font-size: 15px;
  color: #7a7482;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0%;
  margin-bottom: 15px;
}
.cmp-bath-collection-listing__load-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: hug(155px);
  height: fixed(48px);
  padding: 12px 12px 12px 12px;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0%;
  background: none;
  color: #26202e;
}
.cmp-bath-collection-listing-load-more__icon {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-left: 5px;
  display: inline-block;
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.cmp-request-sample {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  height: 100%;
}
.cmp-request-sample__container {
  margin: auto;
  margin-top: 70px;
  position: relative;
  background: #ffffff;
  height: 88%;
  max-height: 810px;
  width: 456px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 480px) {
  .cmp-request-sample__container {
    width: 346px;
  }
}
.cmp-request-sample__header {
  padding: 4rem 4rem 1.6rem 4rem;
  border-bottom: 1px solid #E5E5E5;
}
.cmp-request-sample__title {
  font-size: 22px;
  font-weight: 600;
  color: #26202e;
  margin: 0;
}
.cmp-request-sample__product-detail {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.cmp-request-sample__product-img {
  width: 8.8rem;
  height: 8.8rem;
  object-fit: cover;
  border-radius: 0.4rem;
}
.cmp-request-sample__product-name {
  font-size: 17px;
  font-weight: 500;
  color: #26202e;
  margin: 0;
}
.cmp-request-sample__form-container {
  padding: 2.4rem 4rem;
  overflow-y: scroll;
  max-height: 62.6rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-bottom: 8rem;
}
.cmp-request-sample__form-group {
  margin-bottom: 2.4rem;
}
.cmp-request-sample__form-group--half {
  width: 48%;
}
.cmp-request-sample__form-row {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: -2rem;
}
.cmp-request-sample__label {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #374151;
}
.cmp-request-sample__input {
  width: 100%;
  padding: 1.2rem 1.6rem;
  border: 0.2rem solid #e5e7eb;
  font-size: 1.6rem;
  transition: all 0.3s ease;
  background: white;
}
.cmp-request-sample__input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 0.3rem rgba(102, 126, 234, 0.1);
}
.cmp-request-sample__input[readonly] {
  background-color: #f9fafb;
  color: #6b7280;
}
.cmp-request-sample__address-options {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.cmp-request-sample__address-option {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 1.2rem;
}
.cmp-request-sample__radio {
  width: 2.4rem;
  height: 2.4rem;
  accent-color: #26202e;
}
.cmp-request-sample__address-display {
  font-size: 14px;
  font-weight: 500;
  color: #26202e;
  line-height: 1.6;
}
.cmp-request-sample__new-option {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #5b5661;
}
.cmp-request-sample__new-option-note {
  display: none;
  font-size: 13px;
  font-weight: 500;
}
.cmp-request-sample__new-address-section {
  margin: 2.4rem 0;
}
.cmp-request-sample__input-with-icon {
  position: relative;
}
.cmp-request-sample__location-icon {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6b7280;
  transition: color 0.3s ease;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-request-sample__location-icon:hover {
  color: #667eea;
}
.cmp-request-sample__location-icon svg {
  width: 2rem;
  height: 2rem;
}
.cmp-request-sample__error-message {
  color: #ef4444;
  font-size: 1.4rem;
  margin-top: 0.4rem;
  min-height: 2rem;
}
.cmp-request-sample__form-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem 4rem 3rem 2rem;
  border-top: 0.1rem solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
  background-color: #ffffff;
  z-index: 1;
}
.cmp-request-sample__btn {
  padding: 1.4rem 2.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
}
.cmp-request-sample__btn--cancel {
  background: #474150;
  color: #ffffff;
}
.cmp-request-sample__btn--submit {
  border: none;
  cursor: pointer;
}
.cmp-request-sample__btn--submit:hover:not(:disabled) {
  background-color: #feb940;
  border: none !important;
}
.cmp-request-sample__btn--done {
  margin-top: 2rem;
  margin-left: 11rem;
  background: #feb940;
  color: #26202e;
  padding: 1rem 4rem;
}
.cmp-request-sample__success-view {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.cmp-request-sample__success-message {
  text-align: center;
  max-width: 100%;
  padding: 20px;
  padding-top: 40px;
}
.cmp-request-sample__success-icon {
  font-size: 6rem;
  color: #10b981;
  margin-bottom: 2.4rem;
  font-weight: bold;
}
.cmp-request-sample__success-title {
  color: #26202e;
  margin-bottom: 3.5rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
}
.cmp-request-sample__request-id {
  font-weight: 500;
  color: #7A7482;
  font-size: 1.6rem;
}
.cmp-request-sample__track-message {
  margin-top: 2.2rem;
  margin-bottom: 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.cmp-request-sample__track-text {
  cursor: default;
  color: #5B5661;
  text-decoration: none;
}
.cmp-request-sample__track-link {
  color: #667eea;
}
.cmp-request-sample__track-link:hover {
  color: #5a67d8;
}
@media (max-width: 640px) {
  .cmp-request-sample__container {
    margin: 3rem;
    height: auto;
    max-height: 90vh;
  }
  .cmp-request-sample__container--success {
    margin: 2rem;
    padding: 1.5rem;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
  .cmp-request-sample__form-row {
    flex-direction: column;
  }
  .cmp-request-sample__form-group--half {
    width: 100%;
  }
  .cmp-request-sample__form-actions {
    position: relative;
    flex-direction: column;
  }
  .cmp-request-sample__btn {
    width: 100%;
  }
  .cmp-request-sample__btn--submit {
    flex: 1;
  }
  .cmp-request-sample__btn--done {
    width: 100%;
    margin: 2rem auto 0 auto;
    margin-left: 0;
  }
  .cmp-request-sample__success-title {
    font-size: 1.8rem;
  }
  .cmp-request-sample__success-icon {
    font-size: 4.8rem;
  }
  .cmp-request-sample__success-message {
    padding: 1rem;
  }
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */

/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiAyp8kv8JHgFVrJJLmE0tDMPKhSkFEkm8.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiAyp8kv8JHgFVrJJLmE0tMMPKhSkFEkm8.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiAyp8kv8JHgFVrJJLmE0tCMPKhSkFE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmv1pVFteOYktMqlap.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmv1pVGdeOYktMqlap.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmv1pVF9eOYktMqg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21lVFteOYktMqlap.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21lVGdeOYktMqlap.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21lVF9eOYktMqg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLucXtAOvWDSHFF.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLufntAOvWDSHFF.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLucHtAOvWDSA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hVFteOYktMqlap.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hVGdeOYktMqlap.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hVF9eOYktMqg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19VFteOYktMqlap.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19VGdeOYktMqlap.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19VF9eOYktMqg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15VFteOYktMqlap.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15VGdeOYktMqlap.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15VF9eOYktMqg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm111VFteOYktMqlap.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm111VGdeOYktMqlap.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm111VF9eOYktMqg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xVFteOYktMqlap.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xVGdeOYktMqlap.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xVF9eOYktMqg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTucXtAOvWDSHFF.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTufntAOvWDSHFF.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTucHtAOvWDSA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z1xlFd2JQEk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1xlFd2JQEk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z1xlFd2JQEk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Font Light */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuOKfMZ1rib2Bg-4.woff2) format('woff2');
}
/* Inter Font Regular */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZ1rib2Bg-4.woff2) format('woff2');
}
/* Inter Font Medium */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fMZ1rib2Bg-4.woff2) format('woff2');
}
/* Inter Font SemiBold */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYMZ1rib2Bg-4.woff2) format('woff2');
}
/* Inter Font Bold */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYMZ1rib2Bg-4.woff2) format('woff2');
}
/* Noto Serif Font Light */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZ9lCjxc0Lhq_Szw.woff2) format('woff2');
}
/* Noto Serif Font Regular */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFCjxc0Lhq_Szw.woff2) format('woff2');
}
/* Noto Serif Font Medium */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZmlCjxc0Lhq_Szw.woff2) format('woff2');
}
/* Noto Serif Font SemiBold */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZdlejxc0Lhq_Szw.woff2) format('woff2');
}
/* Noto Serif Font Bold */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/notoserif/v23/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZT1ejxc0Lhq_Szw.woff2) format('woff2');
}

/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
*,
*::after,
*::before {
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  box-sizing: border-box;
}
:root {
  font-size: 10px;
  overflow-x: hidden;
}
body {
  color: #26202e;
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
  overflow-x: hidden;
}

/* For defining common styles that can be used across multiple components like utility classes */
/* For defining variables and maps not related to colors or typography  */
/* For defining variables and maps related to typography i.e. font-size, line-height, font-weight etc. */
.ap-page__wrapper {
  background: #ffffff;
  position: relative;
}
.ap-page__main {
  position: relative;
}
.content {
  padding: 0 80px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .content {
    padding: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .content {
    padding: 0 20px;
  }
}
.content-main-block {
  padding-top: 80px;
}
.comp-padding-block {
  padding-block: 75px;
}
@media screen and (max-width: 480px) {
  .comp-padding-block {
    padding-block: 56px;
  }
}
.comp-padding-top {
  padding-top: 115px;
}
@media screen and (max-width: 480px) {
  .comp-padding-top {
    padding-top: 76px;
  }
}
.comp-padding-bottom {
  padding-bottom: 115px;
}
@media screen and (max-width: 480px) {
  .comp-padding-bottom {
    padding-bottom: 76px;
  }
}
.limit-content {
  max-width: 1440px;
  margin: 0 auto;
}
.no_content {
  border-color: #32bed9;
  border-style: dashed;
  border-width: 1px;
  color: #32bed9;
  font-size: 20px;
  padding: 15px 15px 20px;
  background-color: #f5f5f5;
}
.section-heading-h3 {
  font-size: 32px;
  font-weight: 300;
  line-height: 44px;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .section-heading-h3 {
    font-size: 22px;
    line-height: 30px;
  }
}
.section-heading-h3--bold {
  font-weight: 700;
}
.section-heading-h1 {
  font-size: 42px;
  font-weight: 300;
  line-height: 57px;
  color: #26202e;
}
@media screen and (max-width: 768px) {
  .section-heading-h1 {
    font-size: 30px;
    line-height: 40px;
  }
}
.section-heading-h1--bold {
  font-weight: 700;
}
.section-heading-small {
  color: #26202e;
  font-size: 17px;
  line-height: 24px;
}
.section-heading-small--medium {
  font-weight: 500;
}
.section-heading-small--bold {
  font-weight: 700;
}
.ap-page__heading--h1 {
  color: #26202e;
  font-family: 'Noto Serif', serif;
  font-size: 42px;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .ap-page__heading--h1 {
    font-size: 30px;
    font-weight: 500;
    line-height: 40px;
  }
}
/* button */
.btn {
  cursor: pointer;
  font-size: 17px;
  font-weight: 400;
  padding: 12px 24px;
  user-select: none;
}
.btn:hover,
.btn:active,
.btn:focus {
  outline: none;
}
.btn:disabled,
.btn:disabled:hover {
  background: #b6aebf;
  border: 1px solid #b6aebf;
  color: #5b5661;
  cursor: not-allowed;
}
.btn__only-icon {
  background: none;
  height: 24px;
  margin: 0;
  padding: 0;
  width: 24px;
}
.btn__only-icon-svg {
  height: 24px;
  width: 24px;
}
.btn--primary {
  background: #feb940;
  border: 1px solid #feb940;
  color: #26202e;
}
.btn--primary:hover {
  background: #ffcc73;
  border-color: #26202e;
}
.btn--outline {
  background: #ffffff;
  color: #26202e;
  border: 1px solid #26202e;
}
.btn--w-full {
  width: 100%;
}
.btn--secondary {
  background: #ffffff;
  color: #26202e;
  border: 1px solid #26202e;
}
.btn--secondary:hover {
  font-weight: 700;
}
.btn--icon {
  padding: 12px;
  background: #feb940;
  border: 1px solid #feb940;
  color: #26202e;
}
.btn--icon:hover {
  border-color: #000000;
  background: #ffcc73;
}
/** links **/
.link {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
}
.link--primary {
  color: #6217c1;
}
.link--primary:hover {
  border-bottom: 1px solid #6217c1;
}
.link--normal {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}
.link--small {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}
@media screen and (max-width: 480px) {
  .link {
    font-size: 20px;
    font-weight: 400;
  }
}
/** list style **/
.list-style--none {
  list-style: none;
}
.pt-4 {
  padding-top: 4px;
}
.pt-8 {
  padding-top: 8px;
}
.pt-12 {
  padding-top: 12px;
}
.pt-16 {
  padding-top: 16px;
}
.disable-link-default {
  text-decoration: none;
  color: inherit;
}
.disable-button-default {
  background: transparent;
  outline: none;
  cursor: pointer;
}
.overflow-hidden {
  overflow: hidden;
}
.content-left-padding {
  padding-left: 80px;
}
@media screen and (max-width: 768px) {
  .content-left-padding {
    padding-left: 20px;
  }
}
.container-wrapper {
  max-width: 1440px;
  margin: 50px auto;
  padding: 0 80px;
}
@media screen and (max-width: 1200px) {
  .container-wrapper {
    max-width: 100%;
    padding: 40px;
    margin: 0;
  }
}
@media screen and (max-width: 480px) {
  .container-wrapper {
    max-width: 100%;
    padding: 0 20px;
    margin: 30px 0;
  }
}
.cmp-padding-side {
  padding: 0 80px;
}
button {
  font-family: 'Manrope', Helvetica, Roboto, sans-serif;
}
body[class*="aem-AuthorLayer"] .skeleton-loader-container {
  display: none !important;
}

/*
 *  Copyright 2019 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
.cmp-accordion__header {
  margin: 0;
}
.cmp-accordion__button {
  display: block;
  width: 100%;
  text-align: left;
}
.cmp-accordion__panel--hidden {
  display: none;
}
.cmp-accordion__panel--expanded {
  display: block;
}

/*
 *  Copyright 2018 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
.cmp-tabs__tablist {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}
.cmp-tabs__tab {
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
  padding: .5rem 1rem;
  cursor: pointer;
}
.cmp-tabs__tab--active {
  border-color: inherit;
}
.cmp-tabs__tabpanel {
  display: none;
}
.cmp-tabs__tabpanel--active {
  display: block;
}

/*
 *  Copyright 2018 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
.cmp-carousel__content {
  position: relative;
}
.cmp-carousel__item {
  display: none;
}
.cmp-carousel__item--active {
  display: block;
}
.cmp-carousel__action {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.cmp-carousel__indicators {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cmp-carousel__indicator {
  position: relative;
  flex: 0 1 auto;
  width: 10px;
  height: 10px;
  margin: 0 7px;
  border-radius: 50%;
  font-size: 0;
  text-indent: -3000px;
  background-color: rgba(0, 0, 0, 0.5);
}
.cmp-carousel__indicator--active {
  background-color: rgba(0, 0, 0, 0.8);
}

/*
 *  Copyright 2021 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
/** @define image */
.cmp-image__image {
  width: 100%;
  height: auto;
}

/*
 *  Copyright 2017 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
/** @define breadcrumb */
.cmp-breadcrumb {
  display: inline-block;
  list-style: none;
  padding: 0;
}
.cmp-breadcrumb__item {
  display: inline-block;
  vertical-align: top;
}

/*
 *  Copyright 2022 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
.cmp-search {
  position: relative;
}
.cmp-search__field {
  position: relative;
  height: 2rem;
}
.cmp-search__input {
  padding-left: 2rem;
  padding-right: 2rem;
  height: 100%;
  width: 100%;
}
.cmp-search__icon {
  display: block;
  position: absolute;
  left: .5rem;
  top: .5rem;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTE1MnB4IiBoZWlnaHQ9IjExNTJweCIgdmlld0JveD0iMCAwIDExNTIgMTE1MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTE1MiAxMTUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik02NzIsMEM0MDYuOTAzLDAsMTkyLDIxNC45MDMsMTkyLDQ4MGMwLDk1LjcsMjguMDExLDE4NC44NTUsNzYuMjc1LDI1OS43MjVDMTgxLjY0Niw4MjYuMzU0LDQ4LjA3NSw5NTkuOTI1LDM2LDk3Mg0KCWMtMTgsMTgtMzYsMzYtMzYsNzJzMTgsNTQsMzYsNzJzMzYuMDEyLDM2LDcyLDM2czU0LTE4LDcyLTM2YzEyLjA3NS0xMi4wNzUsMTQ1LjY0Ni0xNDUuNjQ2LDIzMi4yNzUtMjMyLjI3NQ0KCUM0ODcuMTQ0LDkzMS45ODgsNTc2LjMsOTYwLDY3Miw5NjBjMjY1LjA5NywwLDQ4MC0yMTQuOTAzLDQ4MC00ODBDMTE1MiwyMTQuOTAzLDkzNy4wOTcsMCw2NzIsMHogTTY3Miw4MTYNCgljLTE4NS41NjgsMC0zMzYtMTUwLjQzMy0zMzYtMzM2YzAtMTg1LjU2OCwxNTAuNDMyLTMzNiwzMzYtMzM2YzE4NS41NjcsMCwzMzYsMTUwLjQzMiwzMzYsMzM2QzEwMDgsNjY1LjU2Nyw4NTcuNTY3LDgxNiw2NzIsODE2eiINCgkvPg0KPC9zdmc+DQo=");
  background-size: contain;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}
.cmp-search__loading-indicator {
  display: none;
  position: absolute;
  top: .5rem;
  left: .5rem;
  border: 3px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  animation: cmp-search__loading-indicator-spin 2s linear infinite;
}
@keyframes cmp-search__loading-indicator-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cmp-search__clear {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.cmp-search__clear-icon {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTE1MnB4IiBoZWlnaHQ9IjExNTJweCIgdmlld0JveD0iMCAwIDExNTIgMTE1MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTE1MiAxMTUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJYTUxJRF85XyIgZD0iTTgyLjYsOTM3LjJsMzYyLTM2Mkw4NCwyMTQuOGMtMTQuMS0xNC4xLTE0LjEtMzYuOSwwLTUxbDgxLjItODEuMmMxNC4xLTE0LjEsMzYuOS0xNC4xLDUxLDBsMzYwLjUsMzYwLjUNCglMOTM3LjIsODIuNmMxNC4xLTE0LjEsMzYuOS0xNC4xLDUxLDBsODEuMiw4MS4yYzE0LjEsMTQuMSwxNC4xLDM2LjksMCw1MUw3MDguOSw1NzUuM2wzNjAuNSwzNjAuNWMxNC4xLDE0LjEsMTQuMSwzNi45LDAsNTENCglsLTgxLjIsODEuMmMtMTQuMSwxNC4xLTM2LjksMTQuMS01MSwwTDU3Ni43LDcwNy41bC0zNjIsMzYyYy0xNC4xLDE0LjEtMzYuOSwxNC4xLTUxLDBsLTgxLjItODEuMg0KCUM2OC41LDk3NC4yLDY4LjUsOTUxLjMsODIuNiw5MzcuMnoiLz4NCjwvc3ZnPg0K");
  background-size: contain;
  width: 1rem;
  height: 1rem;
}
.cmp-search__results {
  display: none;
  overflow-y: auto;
  min-width: 100%;
  max-height: 10rem;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999999;
  border: 1px solid #ccc;
  background: #fff;
}
.cmp-search__item {
  display: block;
}
.cmp-search__item--is-focused {
  background-color: #ccc;
}
.cmp_search__info {
  height: 20px;
  font-size: .875rem;
  font-style: italic;
}

/*
 *  Copyright 2020 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
.cmp-pdfviewer__content {
  height: 500px;
}
.pdfviewer:not(.cq-Editable-dom) .cmp-pdfviewer__full-window-borderless {
  height: 100vh;
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 9999;
}
.pdfviewer.cq-Editable-dom .cmp-pdfviewer__full-window-borderless {
  height: 500px;
}

/*
 *  Copyright 2022 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
.cmp-embed__youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.cmp-embed__youtube-iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/*
 *  Copyright 2018 Adobe Systems Incorporated
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
/*
 * ADOBE CONFIDENTIAL
 *
 * Copyright 2015 Adobe Systems Incorporated
 * All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and may be covered by U.S. and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */
/* grid component */
.aem-Grid {
  display: block;
  width: 100%;
}
.aem-Grid::before,
.aem-Grid::after {
  display: table;
  content: " ";
}
.aem-Grid::after {
  clear: both;
}
/* placeholder for new components */
.aem-Grid-newComponent {
  clear: both;
  margin: 0;
}
/* column of a grid */
.aem-GridColumn {
  box-sizing: border-box;
  clear: both;
}
/* force showing hidden */
.aem-GridShowHidden > .aem-Grid > .aem-GridColumn {
  display: block !important;
}
/* Generates all the rules for the grid columns up to the given amount of column */
/* Generates all the rules for the grid column offset up to the given amount of column */
/* Generates all the rules for the grid and columns for the given break point and total of columns */
/* Generates all the rules for the grids and columns */
/* API function to be called to generate a grid config */
/* maximum amount of grid cells to be provided */
/* default breakpoint */
.aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 20%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 40%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 60%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 80%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 20%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 40%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 60%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 80%;
}
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 16.66666667%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 83.33333333%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 16.66666667%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 83.33333333%;
}
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 14.28571429%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 28.57142857%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 42.85714286%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 57.14285714%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 71.42857143%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 85.71428571%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 14.28571429%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 28.57142857%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 42.85714286%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 57.14285714%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 71.42857143%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 85.71428571%;
}
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 12.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 37.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 62.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 87.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 12.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 37.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 62.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 87.5%;
}
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 11.11111111%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 22.22222222%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 44.44444444%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 55.55555556%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 77.77777778%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 88.88888889%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 11.11111111%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 22.22222222%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 44.44444444%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 55.55555556%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 77.77777778%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 88.88888889%;
}
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 10%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 20%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 30%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 40%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 60%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 70%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 80%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 90%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 10%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 20%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 30%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 40%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 60%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 70%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 80%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 90%;
}
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 9.09090909%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 18.18181818%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 27.27272727%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 36.36363636%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 45.45454545%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 54.54545455%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 63.63636364%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 72.72727273%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 81.81818182%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 90.90909091%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--default--11 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 9.09090909%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 18.18181818%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 27.27272727%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 36.36363636%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 45.45454545%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 54.54545455%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 63.63636364%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 72.72727273%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 81.81818182%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 90.90909091%;
}
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--11 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 8.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 16.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 41.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 58.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 83.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--11 {
  float: left;
  clear: none;
  width: 91.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--default--12 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 8.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 16.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 41.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 58.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 83.33333333%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--11 {
  margin-left: 91.66666667%;
}
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--12 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--1 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--2 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--default--3 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--default--4 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 20%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 40%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 60%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 80%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 20%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 40%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 60%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 80%;
}
.aem-Grid.aem-Grid--default--5 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 16.66666667%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 83.33333333%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 16.66666667%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 83.33333333%;
}
.aem-Grid.aem-Grid--default--6 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 14.28571429%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 28.57142857%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 42.85714286%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 57.14285714%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 71.42857143%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 85.71428571%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 14.28571429%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 28.57142857%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 42.85714286%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 57.14285714%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 71.42857143%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 85.71428571%;
}
.aem-Grid.aem-Grid--default--7 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 12.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 37.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 62.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 87.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 12.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 37.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 62.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 87.5%;
}
.aem-Grid.aem-Grid--default--8 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 11.11111111%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 22.22222222%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 44.44444444%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 55.55555556%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 77.77777778%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 88.88888889%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 11.11111111%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 22.22222222%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 44.44444444%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 55.55555556%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 77.77777778%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 88.88888889%;
}
.aem-Grid.aem-Grid--default--9 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 10%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 20%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 30%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 40%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 60%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 70%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 80%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 90%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 10%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 20%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 30%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 40%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 60%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 70%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 80%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 90%;
}
.aem-Grid.aem-Grid--default--10 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 9.09090909%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 18.18181818%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 27.27272727%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 36.36363636%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 45.45454545%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 54.54545455%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 63.63636364%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 72.72727273%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 81.81818182%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 90.90909091%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--default--11 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 9.09090909%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 18.18181818%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 27.27272727%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 36.36363636%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 45.45454545%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 54.54545455%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 63.63636364%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 72.72727273%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 81.81818182%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 90.90909091%;
}
.aem-Grid.aem-Grid--default--11 > .aem-GridColumn.aem-GridColumn--offset--default--11 {
  margin-left: 100%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--1 {
  float: left;
  clear: none;
  width: 8.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--2 {
  float: left;
  clear: none;
  width: 16.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--3 {
  float: left;
  clear: none;
  width: 25%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--4 {
  float: left;
  clear: none;
  width: 33.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--5 {
  float: left;
  clear: none;
  width: 41.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--6 {
  float: left;
  clear: none;
  width: 50%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--7 {
  float: left;
  clear: none;
  width: 58.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--8 {
  float: left;
  clear: none;
  width: 66.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--9 {
  float: left;
  clear: none;
  width: 75%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--10 {
  float: left;
  clear: none;
  width: 83.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--11 {
  float: left;
  clear: none;
  width: 91.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--default--12 {
  float: left;
  clear: none;
  width: 100%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--0 {
  margin-left: 0%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
  margin-left: 8.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--2 {
  margin-left: 16.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--3 {
  margin-left: 25%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--4 {
  margin-left: 33.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--5 {
  margin-left: 41.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--6 {
  margin-left: 50%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--7 {
  margin-left: 58.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--8 {
  margin-left: 66.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--9 {
  margin-left: 75%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--10 {
  margin-left: 83.33333333%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--11 {
  margin-left: 91.66666667%;
}
.aem-Grid.aem-Grid--default--12 > .aem-GridColumn.aem-GridColumn--offset--default--12 {
  margin-left: 100%;
}
.aem-Grid > .aem-GridColumn.aem-GridColumn--default--newline {
  /* newline behavior */
  display: block;
  clear: both !important;
}
.aem-Grid > .aem-GridColumn.aem-GridColumn--default--none {
  /* none behavior */
  display: block;
  clear: none !important;
  float: left;
}
.aem-Grid > .aem-GridColumn.aem-GridColumn--default--hide {
  /* hide behavior */
  display: none;
}
/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 14.28571429%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 28.57142857%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 42.85714286%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 57.14285714%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 71.42857143%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 85.71428571%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 14.28571429%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 28.57142857%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 42.85714286%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 57.14285714%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 71.42857143%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 85.71428571%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 12.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 37.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 62.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 87.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 12.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 37.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 62.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 87.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 11.11111111%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 22.22222222%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 44.44444444%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 55.55555556%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 77.77777778%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 88.88888889%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 11.11111111%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 22.22222222%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 44.44444444%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 55.55555556%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 77.77777778%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 88.88888889%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 10%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 30%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 70%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 90%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 10%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 30%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 70%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 90%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 9.09090909%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 18.18181818%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 27.27272727%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 36.36363636%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 45.45454545%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 54.54545455%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 63.63636364%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 72.72727273%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 81.81818182%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 90.90909091%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--phone--11 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 9.09090909%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 18.18181818%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 27.27272727%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 36.36363636%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 45.45454545%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 54.54545455%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 63.63636364%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 72.72727273%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 81.81818182%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 90.90909091%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--phone--11 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 8.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 41.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 58.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--11 {
    float: left;
    clear: none;
    width: 91.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--phone--12 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 8.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 41.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 58.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--11 {
    margin-left: 91.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--phone--12 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--1 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--2 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--3 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--phone--4 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--phone--5 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--phone--6 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 14.28571429%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 28.57142857%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 42.85714286%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 57.14285714%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 71.42857143%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 85.71428571%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 14.28571429%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 28.57142857%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 42.85714286%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 57.14285714%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 71.42857143%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 85.71428571%;
  }
  .aem-Grid.aem-Grid--phone--7 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 12.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 37.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 62.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 87.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 12.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 37.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 62.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 87.5%;
  }
  .aem-Grid.aem-Grid--phone--8 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 11.11111111%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 22.22222222%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 44.44444444%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 55.55555556%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 77.77777778%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 88.88888889%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 11.11111111%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 22.22222222%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 44.44444444%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 55.55555556%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 77.77777778%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 88.88888889%;
  }
  .aem-Grid.aem-Grid--phone--9 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 10%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 30%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 70%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 90%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 10%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 30%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 70%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 90%;
  }
  .aem-Grid.aem-Grid--phone--10 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 9.09090909%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 18.18181818%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 27.27272727%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 36.36363636%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 45.45454545%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 54.54545455%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 63.63636364%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 72.72727273%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 81.81818182%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 90.90909091%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--phone--11 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 9.09090909%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 18.18181818%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 27.27272727%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 36.36363636%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 45.45454545%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 54.54545455%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 63.63636364%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 72.72727273%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 81.81818182%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 90.90909091%;
  }
  .aem-Grid.aem-Grid--phone--11 > .aem-GridColumn.aem-GridColumn--offset--phone--11 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--1 {
    float: left;
    clear: none;
    width: 8.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--2 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--3 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--4 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--5 {
    float: left;
    clear: none;
    width: 41.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--6 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--7 {
    float: left;
    clear: none;
    width: 58.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--8 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--9 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--10 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--11 {
    float: left;
    clear: none;
    width: 91.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--12 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 8.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--2 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--3 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--4 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--5 {
    margin-left: 41.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--6 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--7 {
    margin-left: 58.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--8 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--9 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--10 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--11 {
    margin-left: 91.66666667%;
  }
  .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--12 {
    margin-left: 100%;
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--newline {
    /* newline behavior */
    display: block;
    clear: both !important;
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--none {
    /* none behavior */
    display: block;
    clear: none !important;
    float: left;
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--phone--hide {
    /* hide behavior */
    display: none;
  }
}
/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 14.28571429%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 28.57142857%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 42.85714286%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 57.14285714%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 71.42857143%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 85.71428571%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 14.28571429%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 28.57142857%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 42.85714286%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 57.14285714%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 71.42857143%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 85.71428571%;
  }
  .aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 12.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 37.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 62.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 87.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 12.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 37.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 62.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 87.5%;
  }
  .aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 11.11111111%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 22.22222222%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 44.44444444%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 55.55555556%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 77.77777778%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 88.88888889%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 11.11111111%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 22.22222222%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 44.44444444%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 55.55555556%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 77.77777778%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 88.88888889%;
  }
  .aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 10%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 30%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 70%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 90%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 10%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 30%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 70%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 90%;
  }
  .aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 9.09090909%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 18.18181818%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 27.27272727%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 36.36363636%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 45.45454545%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 54.54545455%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 63.63636364%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 72.72727273%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 81.81818182%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 90.90909091%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--tablet--11 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 9.09090909%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 18.18181818%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 27.27272727%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 36.36363636%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 45.45454545%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 54.54545455%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 63.63636364%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 72.72727273%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 81.81818182%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 90.90909091%;
  }
  .aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--11 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 8.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 41.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 58.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--11 {
    float: left;
    clear: none;
    width: 91.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--tablet--12 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 8.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 41.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 58.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--11 {
    margin-left: 91.66666667%;
  }
  .aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--12 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--1 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--1 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--1 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--2 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--3 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--tablet--4 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--tablet--5 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--6 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 14.28571429%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 28.57142857%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 42.85714286%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 57.14285714%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 71.42857143%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 85.71428571%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 14.28571429%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 28.57142857%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 42.85714286%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 57.14285714%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 71.42857143%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 85.71428571%;
  }
  .aem-Grid.aem-Grid--tablet--7 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 12.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 37.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 62.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 87.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 12.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 37.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 62.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 87.5%;
  }
  .aem-Grid.aem-Grid--tablet--8 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 11.11111111%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 22.22222222%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 44.44444444%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 55.55555556%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 77.77777778%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 88.88888889%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 11.11111111%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 22.22222222%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 44.44444444%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 55.55555556%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 77.77777778%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 88.88888889%;
  }
  .aem-Grid.aem-Grid--tablet--9 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 10%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 20%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 30%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 40%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 60%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 70%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 80%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 90%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 10%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 20%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 30%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 40%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 60%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 70%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 80%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 90%;
  }
  .aem-Grid.aem-Grid--tablet--10 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 9.09090909%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 18.18181818%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 27.27272727%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 36.36363636%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 45.45454545%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 54.54545455%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 63.63636364%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 72.72727273%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 81.81818182%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 90.90909091%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--tablet--11 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 9.09090909%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 18.18181818%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 27.27272727%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 36.36363636%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 45.45454545%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 54.54545455%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 63.63636364%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 72.72727273%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 81.81818182%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 90.90909091%;
  }
  .aem-Grid.aem-Grid--tablet--11 > .aem-GridColumn.aem-GridColumn--offset--tablet--11 {
    margin-left: 100%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--1 {
    float: left;
    clear: none;
    width: 8.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--2 {
    float: left;
    clear: none;
    width: 16.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--3 {
    float: left;
    clear: none;
    width: 25%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--4 {
    float: left;
    clear: none;
    width: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--5 {
    float: left;
    clear: none;
    width: 41.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--6 {
    float: left;
    clear: none;
    width: 50%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--7 {
    float: left;
    clear: none;
    width: 58.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--8 {
    float: left;
    clear: none;
    width: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--9 {
    float: left;
    clear: none;
    width: 75%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--10 {
    float: left;
    clear: none;
    width: 83.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--11 {
    float: left;
    clear: none;
    width: 91.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--tablet--12 {
    float: left;
    clear: none;
    width: 100%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--0 {
    margin-left: 0%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--1 {
    margin-left: 8.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--2 {
    margin-left: 16.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--3 {
    margin-left: 25%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--4 {
    margin-left: 33.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--5 {
    margin-left: 41.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--6 {
    margin-left: 50%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--7 {
    margin-left: 58.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--8 {
    margin-left: 66.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--9 {
    margin-left: 75%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--10 {
    margin-left: 83.33333333%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--11 {
    margin-left: 91.66666667%;
  }
  .aem-Grid.aem-Grid--tablet--12 > .aem-GridColumn.aem-GridColumn--offset--tablet--12 {
    margin-left: 100%;
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--tablet--newline {
    /* newline behavior */
    display: block;
    clear: both !important;
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--tablet--none {
    /* none behavior */
    display: block;
    clear: none !important;
    float: left;
  }
  .aem-Grid > .aem-GridColumn.aem-GridColumn--tablet--hide {
    /* hide behavior */
    display: none;
  }
}
/* force showing hidden components in unhide mode */
.aem-GridShowHidden > .cmp-container > .aem-Grid > .aem-GridColumn {
  display: block !important;
}