/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Extra Small device (Portrait phones, maximum width 575.92) */
@media (max-width: 575.98px) {
  .w-xs-50 {
    width: 50%;
  }

  .w-xs-56 {
    width: 56%;
  }

  .w-xs-60 {
    width: 60%;
  }

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

  .hero__small-image {
    height: 8rem;
    width: auto;
    top: 4%;
    right: 0;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .w-sm-60 {
    width: 60%;
  }

  .w-sm-54 {
    width: 54%;
  }

  .w-sm-56 {
    width: 56%;
  }

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

  .header-logo {
    height: 3.75rem;
  }

  .hero__small-image {
    height: 11rem;
    width: auto;
    top: -8%;
    right: 0;
  }

  .font--sm-base {
    font-size: 1rem;
  }

  .crypto-price__icon {
    height: 30px;
  }

  .swap-asset__small-img {
    height: 8rem;
  }

  .fw-sm-bold {
    font-weight: bold;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  .font--lg-3xl {
    font-size: 3rem;
  }

  .font--md-3xxl {
    font-size: 3.5rem;
  }

  .font--md-2xl {
    font-size: 2rem;
  }

  .hero__large-image {
    height: 21rem;
    right: -3%;
    top: 0%;
    object-fit: contain;
  }

  .wallet__img--large-screen {
    height: 21rem;
    top: 18%;
    left: -22px;
  }

  .w-md-auto {
    width: auto !important;
  }

  .w-md-40 {
    width: 40%;
  }

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

  .w-md-60 {
    width: 60%;
  }

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

  .w-md-90 {
    width: 90%;
  }

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

  .simp-sec-trans__btn {
    position: absolute;
    bottom: -2rem;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .rounded-md-4 {
    border-radius: 1rem;
  }

  .mb-md-10 {
    margin-bottom: 10rem;
  }

  .bg-md-white {
    background-color: white;
  }

  .bg--md-new-bg {
    background-color: #E9F2FF;
  }

  .py-md-5rem {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .list-md-unstyled {
    list-style-type: none;
  }

  .currency__white-border {
    border-bottom: none;
    border-right: 3px solid white;
  }

  .border--top-sm-new-green {
    border-top: none;
  }

  .mt-md-30 {
    margin-top: 30rem !important;
  }

  .border--left-md-new-green {
    border-left: 3px solid #00D7B5;
  }

  .swap-asset__small-img {
    height: 9rem;
  }

  .why-dubapay__bg-img {
    background-image: url('/assets/images/index/map-back-safetybox.png');
    object-fit: contain;
    background-repeat: no-repeat;
    background-size: 96%;
    background-position: bottom;
    height: 29rem;
  }

}



/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  .font--lg-2xl {
    font-size: 2.5rem;
  }

  .font--lg-3xl {
    font-size: 3rem;
  }

  .font--lg-3xxl {
    font-size: 3.5rem;
  }

  .hero__large-image {
    height: 25rem;
    right: -3%;
    top: 0%;
    object-fit: contain;
  }

  .footer--map-img {
    height: 256px;
    width: auto;
  }

  .footer__connection-line {
    height: 1.5px;
    width: 212px;
    background-color: #00D7B5;
    rotate: -14deg;
    top: 33%;
    left: 36%;
  }

  .wallet__img--large-screen {
    height: 29rem;
    top: 14%;
    left: -55px;
  }

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

  .w-lg-60 {
    width: 60%;
  }

  .w-lg-70 {
    width: 70%;
  }

  .w-lg-80 {
    width: 80%;
  }

  .w-lg-84 {
    width: 84%;
  }

  .w-lg-88 {
    width: 88%;
  }

  .w-lg-90 {
    width: 90%;
  }

  .text__swiper {
    width: 60%;
    height: 100%;
  }

  .lg-fs-4 {
    font-size: calc(1.275rem + .3vw) !important;
  }

  .border--left-lg-new-green {
    border-left: 3px solid #00D7B5;
  }

  .bg--lg-default-blue {
    background-color: #0047AB;
  }

  .bg--max-lg-default-blue {
    background-color: transparent;
  }

  .rounded-lg-0 {
    border-radius: 0px !important;
  }

  .bg-lg-white {
    background-color: white;
  }
}



/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .font--xl-4xl {
    font-size: 4rem;
  }

  .font--xl-3xxl {
    font-size: 3.5rem;
  }

  .text-xl-4xxl {
    font-size: 4.5rem;
  }

  .hero__large-image {
    height: 28rem;
    right: -8%;
    top: 4%;
    object-fit: contain;
  }

  .footer--map-img {
    height: 300px;
    width: auto;
  }

  .footer__connection-line {
    height: 1.5px;
    width: 249px;
    background-color: #00D7B5;
    rotate: -14deg;
    top: 31%;
    left: 36%;
  }

  .wallet__img--large-screen {
    height: 34rem;
    top: -31%;
    left: -42px;
  }

  .w-xl-70 {
    width: 70%;
  }

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

  .why-dubapay__bg-img {
    background-image: url('/assets/images/index/map-back-safetybox.png');
    object-fit: contain;
    background-repeat: no-repeat;
    background-size: 96%;
    background-position: bottom;
    height: 29rem;
  }

  .why-dubapay__left-img {
    position: absolute;
    width: 22rem;
    top: 1.25rem;
    left: -3.37rem;
    transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .why-dubapay__right-img {
    position: absolute;
    width: 22rem;
    top: 1.25rem;
    right: -1rem;
    transition: right 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .font--xxl-5xl {
    font-size: 5rem;
  }

  .hero__large-image {
    height: 34rem;
    right: -9%;
    top: -10%;
    object-fit: contain;
  }

  .footer--map-img {
    height: 320px;
    width: auto;
  }

  .footer__connection-line {
    height: 1.5px;
    width: 285px;
    background-color: #00D7B5;
    rotate: -14deg;
    top: 29%;
    left: 36%;
  }

  .wallet__img--large-screen {
    height: 37rem;
    top: -42%;
    left: -6px;
  }

  .w-xxl-60 {
    width: 60%;
  }

  .why-dubapay__left-img {
    position: absolute;
    width: 25rem;
    top: 0;
    left: -3.37rem;
    transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .why-dubapay__right-img {
    position: absolute;
    width: 25rem;
    top: 0;
    right: -1rem;
    transition: right 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }
}

/* =============================== */
/*      Custom Modification        */
/* =============================== */

@media (max-width:348px) {
  .hero__small-image {
    height: 5rem;
    width: auto;
    top: -2%;
    right: 0%;
  }

  .annual-percent__img--small {
    height: 7rem;
    top: 7rem;
    right: 10%;
  }

  .swap-asset__small-img {
    height: 5rem;
  }

  .w-xxs-92 {
    width: 92%;
  }
}

@media (max-width:370px) {
  .xxs-font-xs {
    font-size: .8rem !important;
  }
}

@media (max-width:767.98px) {
  .max-md--bg-white {
    background-color: white;
  }

  .why-dubapay__bg-img {
    background-image: url('/assets/images/index/map-back-safetybox-Mob.png');
    object-fit: contain;
    background-repeat: no-repeat;
    background-size: 96%;
    background-position: center;
  }
}