@media only screen and (max-width: 992px) {
  .rounded-pill.navbar {
    border-radius: var(--bs-border-radius-xl) !important;
  }

  .content-border-left,
  .content-border-right {
    border: none;
  }

  .content-border-left {
    border-bottom: 1.5px solid #93c8d0;
  }

  .content-border-right {
    border-top: 1.5px solid #93c8d0;
  }

  .section-with-divider {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    display: flex;
    justify-content: center;
  }

  .rte-section-bg-image {
    min-height: 650px;
    background-size: 350px auto !important;
  }

  .rte-section-bg-image p {
    width: 65%;
  }

  .save-invest-feature-card,
  .shop-feature-card {
    padding-left: 15%;
    padding-right: 15%;
  }

  #two-ways-container {
    min-height: 350px !important;
  }

  #points-container {
    min-height: 400px !important;
    background-size: auto 75% !important;
  }

  #partner-logo-main {
    height: 580px !important;
  }

  .react-embed .swiper {
    height: 65vh !important;
  }

  .react-embed .swiper-wrapper {
    min-height: 55vh !important;
    height: 55vh;
  }

  .item-spacer {
    display: none;
  }

  .modal-semi-fullscreen {
    width: 95vw;
  }
  .modal-semi-fullscreen .modal-body {
    background-image: none !important;
  }

  .payment-distribution-container {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .bnpl-section-buy-tyme-container {
    padding: 5rem;
    align-items: start !important;
    background-size: auto 75% !important;
    background-position: bottom right !important;
  }
  .bnpl-rte {
    width: 100% !important;
  }

  .divide-cost-rte {
    display: flex !important;
    justify-content: start !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .bnpl-section-divide-cost-container {
    min-height: 800px !important;
    background-position: 90% 100% !important;
  }

  .media-news-featured-img,
  .media-featured-img {
    border-radius: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  .media-news-featured-content {
    border-radius: 0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  /* Elements/Sections with inline-bg image */
  .img-inline-bg {
    background-size: 110% !important;
  }
}

.banner-content-wrapper {
  width: 45%;
}

.banner-content-wrapper p {
  width: 100%;
}

/* For mobile devices (up to 767px) */
@media screen and (max-width: 767px) {
  .responsive-banner .text-content-wrapper,
  .responsive-section .text-content-wrapper {
    width: 85%;
  }

  #carousel-tile-slider .feature-card {
    width: 300px !important;
  }

  #carousel-tile-slider .feature-card .btn {
    transform: translate(-10%, 0);
  }

  .reverse-feature-card .btn {
    transform: translate(-10%, 0);
  }

  .rte-section-bg-image {
    min-height: 590px;
    background-size: 80% auto !important;
    display: flex;
    align-items: start;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .shop-responsive-section {
    min-height: 450px !important;
  }

  .rte-section-bg-image p {
    width: 100%;
  }

  .shop-card {
    background-size: 55% auto !important;
  }

  .shop-card p {
    width: 55%;
  }

  .shop-info-card-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .save-invest-feature-card,
  .shop-feature-card {
    padding-left: 0;
    padding-right: 0;
  }

  .save-invest-feature-card img,
  .shop-feature-card img {
    aspect-ratio: 480 / 252;
    height: auto !important;
    width: 100% !important;
    object-fit: cover;
    object-position: top center !important;
  }

  .save-invest-feature-card .card-body,
  .shop-feature-card .card-body {
    min-height: 140px !important;
  }

  .partners-button-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .partners-button-container p {
    margin: 0 !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
  }

  #two-ways-container {
    min-height: 600px !important;
    background-size: auto 70% !important;
    background-position: bottom center;
    align-items: start;
    padding-top: 3rem;
  }

  #ready-jet-set-container,
  #points-container {
    align-items: start;
    padding-top: 3rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-size: contain !important;
  }

  #ready-jet-set-container {
    min-height: 400px !important;
  }

  #points-container {
    min-height: 580px !important;
  }

  .react-embed .swiper-wrapper .card-article img {
    min-height: 220px;
    max-height: 220px;
  }

  .bnpl-rte {
    width: 100% !important;
  }

  .bnpl-section-buy-tyme-container {
    padding: 5rem;
    align-items: start !important;
    min-height: 750px !important;
    background-size: 180% auto !important;
    background-position: bottom right !important;
  }

  .bnpl-section-divide-cost-container {
    min-height: 800px !important;
    background-size: 120% auto !important;
    background-position: center 100% !important;
  }

  .divide-cost-rte {
    display: flex !important;
    justify-content: start !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Elements/Sections with inline-bg image */
  .img-inline-bg {
    background-size: 100% !important;
  }

  .service-carousel {
    object-position: 80% center;
  }

  #media-featured-root .swiper-wrapper {
    min-height: 100vh !important;
    height: 100vh !important;
  }

  .media-story {
    min-width: 300px !important;
  }

  .media-featured-item {
    max-width: 300px !important;
    padding: 10px !important;
  }

  .media-featured-div {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  #media-stories-root .swiper-wrapper {
    min-height: 100vh !important;
    height: 100vh !important;
  }

  #media-stories-root .card {
    max-width: 320px !important;
  }

  .banner-content-wrapper {
    width: 100%;
  }
}

/* Tablet - for the internal display when unfolded */
@media screen and (min-width: 431px) and (max-width: 690px) {
  .responsive-banner .text-content-wrapper,
  .responsive-section .text-content-wrapper {
    width: 60%;
  }

  .banner-content-wrapper {
    width: 100%%;
  }
}

/* For tablets (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .responsive-banner .text-content-wrapper,
  .responsive-section .text-content-wrapper {
    width: 65%;
  }

  .banner-content-wrapper {
    width: 85%;
  }
}

/* For desktops (1025px and above) */
@media screen and (min-width: 1025px) {
  .responsive-banner .text-content-wrapper,
  .responsive-section .text-content-wrapper {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 0px;
  }
  
  .b2b-retail-hero .banner-content-wrapper{
     width:60%;
  }
}

/* CUSTOM BOOTSTRAP CLASSES */
 /* .container--main {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
} 

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

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

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

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

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

@media (min-width: 1600px) {
  .container--main {
    max-width: 1500px;
  }
}

@media (min-width: 1750px) {
  .container--main {
    max-width: 1650px;
  }
}  */

.container--main {
 width: 100%;
 max-width: 1650px;
 padding-right: calc(var(--bs-gutter-x) * 0.5);
 padding-left: calc(var(--bs-gutter-x) * 0.5);
 margin-right: auto;
 margin-left: auto;
 --bs-gutter-x: 1.5rem;
 --bs-gutter-y: 0;
}

/* 320px to 767px: screen width minus 32px (16px on each side) */
@media (min-width: 320px) and (max-width: 767px) {
 .container--main {
    width: calc(100% - 2rem) !important; /* 100vw - 32px */
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
}

@media (min-width: 768px) and (max-width: 991px) {
  .container--main {
    width: calc(100% - 2rem) !important; /* 100vw - 80px */
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
}

/* 768px to 1279px: screen width minus 80px (40px on each side) */
@media (min-width: 992px) and (max-width: 1279px) {
 .container--main {
    width: calc(100% - 11.75rem) !important; /* 100vw - 80px */
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
}

/* 1280px to 1599px: screen width minus 112px (56px on each side) */
@media (min-width: 1280px) and (max-width: 1599px) {
 .container--main {
    width: calc(100% - 11.75rem) !important; /* 100vw - 112px */
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
}

/* Optional: 1600px and above */
@media (min-width: 1600px) {
 .container--main {
    width: calc(100% - 11.75rem) !important; /* 100vw - 112px */
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
}

/*.container--main {*/
/*  width: 100%;*/
/*  margin-right: auto;*/
/*  margin-left: auto;*/
/*  --bs-gutter-y: 0;*/
  
  /* Mobile: 16px */
/*  --bs-gutter-x: 16px;*/
/*  padding-right: var(--bs-gutter-x);*/
/*  padding-left: var(--bs-gutter-x);*/
/*}*/

/* Tablet: 40px */
/*@media (min-width: 768px) {*/
/*  .container--main {*/
/*    --bs-gutter-x: 40px;*/
/*  }*/
/*}*/

/* Laptop/Desktop: 56px */
/*@media (min-width: 1280px) {*/
/*  .container--main {*/
/*    --bs-gutter-x: 56px;*/
/*  }*/
/*}*/



/* MEDIA QUERIES FOR DEVICE HEIGHT CONSIDERATION */
@media (max-height: 667px) {
  .responsive-section {
    min-height: 100vh !important;
  }
}

@media (min-height: 668px) and (max-height: 767px) {
  .responsive-section {
    min-height: calc(100vh - 250px) !important;
  }
}

/* Hero banner fix for small device */
@media screen and (max-width: 991px) {
  .hero-banner-image {
    position: relative;
    z-index: 0; /* establish stacking context */
  }

  .hero-banner-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6); /* white overlay */
    z-index: 0; /* behind text */
    pointer-events: none;
  }

  .hero-banner-image > * {
    position: relative;
    z-index: 1; /* bring text above overlay */
  }

  .hero-banner h1,
  .hero-banner p {
    text-align: center !important;
  }
}