@media (max-width: 1250px) {
    .navbar-nav .dropdown-menu {
         position: static; 
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: column !important;
    }
  .navbar-expand-lg .navbar-collapse {
    display: none !important;
  }

  .navbar-expand-lg .navbar-toggler {
    display: block !important;
  }

  .navbar-expand-lg.navbar .navbar-collapse.collapse.show {
    display: block !important;
  }
  
      /* Mobile Fullscreen Navbar */
    
    #navbar .navbar-collapse {
        position: absolute;
        top: -30px;
        left: -16px;
        width: 100vw;
        height: 85vh;
        background: #e8f3f5; 
        padding: 6rem 3.2rem;
        z-index: 1050;
        transform: translateY(-100%);
    }
    
    #navbar .navbar-collapse > * {
        max-height: calc(80vh - 6.5rem);
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none; 
    }
      
    #navbar .navbar-collapse > *::-webkit-scrollbar {
        display: none;
    }
    
    #navbar .navbar-collapse.collapsing {
        transition: none !important;
    }
    
    #navbar .navbar-collapse.show {
        transform: translateY(0);
    }
    
    #navbar .navbar-toggler{
        border:none;
    }
    
    #navbar .navbar-toggler:focus, #navbar .nav-link:focus-visible{
        box-shadow:none !important;
    }
    
    #navbar .navbar-toggler[aria-expanded="true"], .navbar-brand {
        position: relative;
        z-index: 1100;
    }
    
    #navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon  {
        background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33%2c37%2c41%2c0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
        background-size: 150%;
    }
    
    #navbar .nav-link{
        font-size: 16px;
        letter-spacing:0 !important;
        line-height: 140%;
        padding:1rem;
        font-weight: bold;
        transition: none !important;
    }
    
    #navbar .nav-link i {
        margin-top:0px !important;
    }
    
    #navbar .nav-item.dropdown, #navbar .dropdown-item{
        border:none;
    }
    
    #navbar .dropdown-item{
        padding: 12px;
    }
    
    .nav-button{
        display:none;
        position: fixed;
        border-top: 1px solid #ddd;
        width: 100vw;
        height:15vh;
        left: 0;
        bottom: 0;
        background-color: #e8f3f5;
        z-index: 1050;
    }
    
    /*.nav-button .btn-custom{*/
    /*    padding:20px !important;*/
    /*}*/
    
    #navbar .navbar-toggler-icon{
        background-size:150%;
    }
}

/* ==========================================
   CUSTOM BREAKPOINT: xlg (≥1230px)
   Use classes like d-xlg-flex, px-xlg-4, me-xlg-3, etc.
   ========================================== */

/* Display utilities */
@media (min-width: 1250px) {
  .d-xlg-none { display: none !important; }
  .d-xlg-inline { display: inline !important; }
  .d-xlg-inline-block { display: inline-block !important; }
  .d-xlg-block { display: block !important; }
  .d-xlg-flex { display: flex !important; }
  .d-xlg-inline-flex { display: inline-flex !important; }
}

/* Margin utilities */
@media (min-width: 1250px) {
  .m-xlg-0 { margin: 0 !important; }
  .m-xlg-1 { margin: .25rem !important; }
  .m-xlg-2 { margin: .5rem !important; }
  .m-xlg-3 { margin: 1rem !important; }
  .m-xlg-4 { margin: 1.5rem !important; }
  .m-xlg-5 { margin: 3rem !important; }

  .mt-xlg-0 { margin-top: 0 !important; }
  .mt-xlg-1 { margin-top: .25rem !important; }
  .mt-xlg-2 { margin-top: .5rem !important; }
  .mt-xlg-3 { margin-top: 1rem !important; }
  .mt-xlg-4 { margin-top: 1.5rem !important; }
  .mt-xlg-5 { margin-top: 3rem !important; }

  .me-xlg-0 { margin-right: 0 !important; }
  .me-xlg-1 { margin-right: .25rem !important; }
  .me-xlg-2 { margin-right: .5rem !important; }
  .me-xlg-3 { margin-right: 1rem !important; }
  .me-xlg-4 { margin-right: 1.5rem !important; }
  .me-xlg-5 { margin-right: 3rem !important; }

  .ms-xlg-0 { margin-left: 0 !important; }
  .ms-xlg-1 { margin-left: .25rem !important; }
  .ms-xlg-2 { margin-left: .5rem !important; }
  .ms-xlg-3 { margin-left: 1rem !important; }
  .ms-xlg-4 { margin-left: 1.5rem !important; }
  .ms-xlg-5 { margin-left: 3rem !important; }
  
  .mx-xlg-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-xlg-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
  .mx-xlg-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
  .mx-xlg-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-xlg-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-xlg-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

  .mx-xlg-auto { margin-left: auto !important; margin-right: auto !important; }
}

/* Padding utilities */
@media (min-width: 1250px) {
  .p-xlg-0 { padding: 0 !important; }
  .p-xlg-1 { padding: .25rem !important; }
  .p-xlg-2 { padding: .5rem !important; }
  .p-xlg-3 { padding: 1rem !important; }
  .p-xlg-4 { padding: 1.5rem !important; }
  .p-xlg-5 { padding: 3rem !important; }
  
  .ps-xlg-0 { padding-left: 0 !important; }
  .ps-xlg-1 { padding-left: .25rem !important; }
  .ps-xlg-2 { padding-left: .5rem !important; }
  .ps-xlg-3 { padding-left: 1rem !important; }
  .ps-xlg-4 { padding-left: 1.5rem !important; }
  .ps-xlg-5 { padding-left: 3rem !important; }

  .px-xlg-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-xlg-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
  .px-xlg-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
  .px-xlg-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-xlg-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-xlg-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

  .py-xlg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-xlg-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
  .py-xlg-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  .py-xlg-3 { padding-top: .7rem !important; padding-bottom: .7rem !important; }
  .py-xlg-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-xlg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* Flex utilities */
@media (min-width: 1250px) {
  .flex-xlg-row { flex-direction: row !important; }
  .flex-xlg-column { flex-direction: column !important; }
  .justify-content-xlg-center { justify-content: center !important; }
  .justify-content-xlg-between { justify-content: space-between !important; }
  .align-items-xlg-center { align-items: center !important; }
}

/* Navbar expand at 1230px */
@media (min-width: 1250px) {
  .navbar-expand-xlg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xlg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xlg .navbar-toggler {
    display: none;
  }
  .navbar-expand-xlg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  
  #navbar .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


@media screen and (max-width: 1024px){
    
    .your-money-wrapper .text-content-wrapper > h3 span, .your-money-wrapper .text-content-wrapper > p span {
      color: white !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    
  .activate-sbs {
      background-size: 120px 65% !important;
  }
  
  .select-sbs {
      background-size: 110px 65% !important;
  }
  
  .visit-sbs {
      background-size: 200px !important;
  }
  
  .downpayment-sbs{
      background-size: 160px 55% !important;
  }
  
  .bnpl-section-buy-tyme-container{
      background-position: right bottom !important;
  }
  

}

@media only screen and (max-width: 992px) {
    
    .modal-semi-fullscreen .modal-body {
      background-size: 90% !important;
    }
   .security-wrapper{
        background-size:contain !important;
   }
   
   .account-opening-wrapper{
       background-size: contain !important;
   }
   
    
  .rounded-pill {
    border-radius: var(--bs-border-radius-xxl) !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;
  }
  

  
  .payment-distribution-container {
      min-height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
 
  
  .bnpl-section-divide-cost-container {
      background-size: 50% auto !important;
  }
  
    .visit-sbs {
        background-size: contain !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% 45% !important;
    }
    
    /*#waitlist-iframe {*/
    /*    height: 150vh; */
    /*    width: 80vw;*/
    /*}*/
    #waitlist-iframe {
        height: 1200px; 
        width: 80vw;
    }
    
    #dynamic-iframe {
        height: 3200px; 
        width: 80vw;
    }
    
    .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-size: 120% auto !important;*/
      background-position: 90% 100% !important;
  }

    #media-stories-root img{
      height: 200px !important;
    }
        
    
    
    .bnpl-section-buy-tyme-container{
      background-position: 90% 100% !important;
      background-size: 35% !important;
    }
    
    .moretyme-banner {
        position: relative; 
        overflow: hidden; 
    } 
    .moretyme-banner::before { 
        content: ""; 
        position: absolute; inset: 0; 
        background: linear-gradient(177deg, rgba(0, 0, 0, 0) 32.06%, #060606); 
        z-index: 1; 
        
    } 
    .moretyme-banner > * { 
        position: relative; 
        z-index: 2; 
    }
    
}
    

/* For mobile devices (up to 767px) */
@media screen and (max-width: 767px) {
    .account-opening-wrapper, .bank-account-wrapper{
        min-height:750px;
        background-size: 150% !important;
    }
    
    .account-opening-img{
        background-position: -15% 100%!important;
    }
    
    .move-money-wrapper{
        min-height:700px;
        background-size: 140% !important;
    }    
   .make-transfer{
        background-position: 30px bottom !important;
    }
   
    .scan-qr{
        background-position: 110% 100% !important;
    }
    
    .account-opening-mobile{
      min-height: 650px !important;
    }
    
    .security-wrapper{
         min-height:550px;
    }
    
    .multi-currency-wrapper{
        min-height: 60vh;
    }
    
    .save-smart-wrapper{
        min-height: 600px; 
    }
    
    .bank-account-img{
        background-position: -20% 100%!important;
    }
    
    .need-account-img{
        background-position: 125% bottom !important;
    }
    
    /*.save-smart-wrapper .text-content-wrapper span {*/
    /*  color: #000 !important;*/
    /*}*/
    .responsive-banner .text-content-wrapper
    /*.responsive-section .text-content-wrapper*/
    {
        width: 85%;
    }
    
    .text-content-wrapper-2{
        width: 100%;
    }
    
    #carousel-tile-slider .feature-card {
        width: 350px !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;
  }
  
  .shop-feature-card img {
      height: 320px !important;
      width: 100% !important;
      object-position: 50% 50% !important;
  }
  
  .save-invest-feature-card .card-body,
  .shop-feature-card .card-body {
      min-height: 200px !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;
    }
    
    .payment-distribution-main {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    
    .bnpl-rte {
        width: 100% !important;
    }
    
  
  .bnpl-section-divide-cost-container {
      min-height:800px;
      /*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% 45% !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;
    }
    

    #iframeModal .modal-body {
        padding: 15px !important; /* or adjust to your preferred padding */
    }
    
    #dynamic-iframe {
        height: 3600px;
        width: 95vw;
    }
    
    #waitlist-iframe {
        height: 1500px; 
        width: 90vw;
    }
    
    .activate-sbs p {
        width:50%;
    }
    
    
    .visit-sbs p {
        width:50%;
    }
    
    .select-sbs p {
        width:50%;
    }
    
    
    .scan-sbs p {
        width:50%;
    }
    
    .downpayment-sbs p {
        width:50%;
    }
    
    .video-bg{
        bottom:-150px;
        object-fit: contain !important;
        width:180% !important;
    }
    
    .video-globe{
        bottom:-180px;
        left:-85% !important;
        object-fit: contain !important;
        width:180% !important;
    }
    
    .bnpl-section-buy-tyme-container{
      background-position: center bottom !important;
      background-size: 230px !important;
    }
}

/* 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%;
    }
    
    .text-content-wrapper-2{
        width: 100%;
    }
    
    #waitlist-iframe {
        height: 1250px; 
        width: 90vw;
    }
    
    .video-bg, .video-globe{
        bottom:-150px;
        object-fit: contain !important;
    }

    
}

/* For tablets (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    .modal-semi-fullscreen .modal-body {
      background-size: 85% !important;
    }
    .account-opening-wrapper, .bank-account-wrapper{
        min-height:450px;
        background-size: contain !important;
    }
    
    .move-money-wrapper{
        min-height:450px;
    }
    
    .bank-account-wrapper{
        background-position: -90px bottom !important;
    }
    
    
    .bank-account-img{
        background-position: 20px bottom !important;
    }
    .video-globe{
        object-fit:contain !important;
    }
    
    .responsive-banner .text-content-wrapper
    /*.responsive-section .text-content-wrapper */
    {
        width: 65%;
    }
    
    
    .text-wrapper-tablet{
        width: 50% !important;
    }
    
    .text-content-wrapper-2{
        width: 100%;
    }
    
    .logo-box img{
        width:85% !important;
    }
    
    
    
}

/* For desktops (1025px and above) */
@media screen and (min-width: 1025px) {
    .responsive-banner .text-content-wrapper,
    .responsive-section .text-content-wrapper,
    .text-content-wrapper-2
    {
        width: 48%;
    }
    
    .bank-account-wrapper{
        background-position: -150px !important;
    }
    
    .video-wrapper{
        min-height:100vh !important;
    }
    
}


/* CUSTOM BOOTSTRAP CLASSES */
.container--main {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .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: 1220px;
  }
}

@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;
  }
}

@media (max-width: 576px) {
    
    .bnpl-section-divide-cost-container {
        background-size: 250px auto !important;
    }
    
    .bnpl-rte p, .bnpl-rte h3 {
        text-align: center;
    }
    
}


@media (max-width: 480px) {
    .security-wrapper{
         min-height:450px;
    }
    
    .save-smart-wrapper{
        min-height: 500px; 
    }
    
    .move-money-wrapper{
        min-height:700px;
        background-size: 180% !important;
   }
   
     .make-transfer{
         background-position: 20px bottom!important;
        background-size: 160% !important;
    }
   
   .scan-qr{
       background-size: 140% !important;
       background-position: 145% bottom!important;
   }
    
    .multi-currency-wrapper{
        min-height: 50vh !important;
    }
    
    .account-opening-mobile{
      min-height: 550px !important;
      background-size:150% !important;
    }
    
    .bank-account-img{
        background-position:5px 100% !important;
        background-size:180% !important;
    }
    
    .video-bg{
        bottom: 0px;
        height: auto !important;
    }
    
    .bnpl-section-divide-cost-container {
        background-size: 250px auto !important;
    }
    
    
    .visit-sbs{
        background-size: 200px !important;
    }
    
    .activate-sbs {
      background-size: 150px 90% !important;
      
    }
    
    .select-sbs {
      background-size: 130px 90% !important;
      
    }
    
    .downpayment-sbs{
        background-size:160px 50% !important;
    }
    
    #waitlist-iframe {
        height: 1300px; 
        width: 90vw;
    }
    
    #dynamic-iframe {
        height: 3400px; 
        width: 95vw;
    }
    

}


@media (max-width: 420px) {
    .downpayment-sbs{
        background-position:95% 75% !important;
    }
    
}



@media (max-width: 375px) {
    
    .video-bg-container{
        min-height:650px;
    }
    
    .need-account-img{
        min-height:650px;
    }
    
    .save-smart-wrapper{
        min-height: 420px; 
    }
    
    #dynamic-iframe {
        height: 3800px; 
        width: 95vw;
    }
    
    
    .downpayment-sbs{
        background-position: 92% 70% !important;
        background-size:150px 50% !important;
    }
    
    .bnpl-section-divide-cost-container {
        background-size: 230px auto !important;
    }
    
}


/* MEDIA QUERIES FOR DEVICE HEIGHT CONSIDERATION */


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


/*Buttons*/
/* Small devices (phones) */
@media (max-width: 767px) {
  .btn-custom {
    padding: 12px 22px;
    font-size: 13px !important;
  }
  .btn-icon-mask{
      width: 18px;
      height:18px;
  }
  
   .link-custom{
     font-size:14px !important;
 }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
  .btn-custom {
    padding: 12px 22px;
    font-size: 16px !important;
  }

  .btn-icon-mask{
      width: 20px;
      height:20px;
  }
  
 .link-custom{
     font-size:16px !important;
 }
}

/* Large devices (desktops) */
@media (min-width: 1024px) {
  .btn-custom {
    padding: 12px 22px;
    font-size: 16px !important;
  }
  
   .link-custom{
     font-size:18px !important;
 }
}