@media screen and (max-width: 1450px) {
}

@media screen and (max-width: 1400px) {
 
}

@media screen and (max-width: 1350px) {
}

@media screen and (max-width: 1300px) {
   

}

@media screen and (max-width: 1250px) {
  ._hero_area{
    padding: 152px 0 0px;
    position: relative;
}
._loyalty_area .loyalty_box::after{
  bottom: 0;
  right: 0;
}
._travel_st_area .container::before{
  bottom: 0;
}
._security_area{
  margin-top: 0;
}
.simple_pay_area_inner ul {
    padding-left: 0;
    margin-top: 20px;
}
._travel_st_area{
  overflow: hidden;
}
._travel_st_area::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../images/travel_bg.png); 
    background-size: 300%; 
    
}
.simple_pay_area_inner{
    padding-left: 0;

}
._debit_area{
  padding: 0 0 100px 0;
}
._debit_area::after { 
    height: 80%;

}
}

@media screen and (max-width: 1200px) {
  ._hero_area_inner{
    padding-left: 0;
    margin-bottom: 22px;
  }
}

@media screen and (max-width: 1150px) {
}

@media screen and (max-width: 1100px) {
    .hero_area_inner{
    width: 700px;
    height: 700px;
  }
  .hero_area_inner img { 
    max-width: 321px;
}
.hero_area_inner1 h1{
  font-size: 35px;
}
}

@media screen and (max-width: 1098px) {
}

@media screen and (max-width: 992px) {
  .navbar-toggler {
    background: var(--theam_color) !important;
    color: white !important;
    border-color: #7428d7 !important;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
  }
  .footer_headding{
    width: 100%;
  }
  .navbar-expand-lg .navbar-nav{
    flex-direction: row;
  }
 
  .commen_card_vactor{
    height: fit-content;
    margin-top: 50px;
  }
  .reward_bx{
 flex-wrap: wrap;
 justify-content: center;
 gap: 40px;
}
 
.smart_privet_k_area_commen_bx p{
   font-size: 17px;
   line-height: 27px;
}
 .smart_privet_k_area_commen_bx1 h3{
  font-size: 50px;
 }
 .smart_privet_k_area_commen_bx1 span{
   font-size: 17px;
   line-height: 27px;
 }
  .hero_area_inner1 h1{
  font-size: 30px;
}
  .hero_area{
    padding: 230px 0 100px ;
  }
      .hero_area_inner{
    width: 500px;
    height: 500px;
  }
  .hero_area_inner img { 
    max-width: 221px;
}
.hero_area{
  overflow-x: hidden;
}
  .trusted_area_bx{
    justify-content: center;
    margin-top: 50px;
  }
    .trusted_area_bx h3{
width: 47%;
  }
  .transaction_bx {
    overflow-x: scroll;
  }
  .transaction {
    min-width: 992px;
  }
  .nav_cmn_bx {
    padding-left: 0;
  }

  .navbar-collapse {
    padding: 40px 15px;
  }

  nav .nv_first_bx {
    width: 100%;
  }

  .nv_third_bx a {
    text-align: left;
  }

  .nv_third_bx a:hover {
    border: 0 !important;
  }

  .navbar-toggler i {
    color: white !important;
  }

  .navbar-toggler-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav_cmn_bx {
    flex-direction: column;
  }

  .navclose {
    width: 30px !important;
    height: 30px !important;
    border-radius: 100px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .navclose i {
    font-size: 16px;
  }

  .navbar-collapse {
    position: fixed;
    top: 0;
    background: var(--gray_color) !important;
    z-index: 22;
    left: 0;
    padding: 40px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
  }
  .secound_nv ul {
    flex-direction: column;
    width: 100%;
  }
  .secound_nv ul li,
  .secound_nv ul li a,
  .secound_nv {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .nv_secound_bx ul {
    width: 100%;
    flex-direction: row;
    padding-left: 20px !important;
    margin-left: 0px !important;
  }

  .nv_third_bx {
    width: 100%;
  }

  .nv_secound_bx {
    width: 100%;
  }

  .nv_third_bx {
    width: 100% !important;
  }

  .nv_third_bx a {
    width: 100% !important;
    padding-left: 20px !important;
  }
  .navbar-toggler-icon {
    background-image: none;
  }
  body::before {
    width: 100%;
  }
  .login_area_inner p {
    line-height: 26px;
  }
  .container_dash {
    max-width: 720px;
    margin: auto;
    padding-right: calc(1.5rem * 0.5);
    padding-left: calc(1.5rem * 0.5);
  }
    .navbar .commenr_btn span{
    display: none;
  }
    .navbar .commenr_btn{
      position: relative;
    }
    .navbar .commenr_btn::after{
      position: absolute;
    content: "";
      border: 2px dashed #74a8fd;
      width: 80%;
      height: 80%;
      border-radius: 100%;
          animation: sealrotation 20s linear infinite;

    }
    @keyframes sealrotation {
      100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
    }
  .navbar .commenr_btn i{
    display: block;
        animation: jello-horizontal infinite 1s both;
       
  }
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
}
40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
}
50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
}
65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
}
75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
}
100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
}
  .navbar-nav a.commenr_btn{
 min-width: 40px;
    min-height: 40px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    .navbar-nav a.commenr_btn_border{
 min-width: 40px;
    min-height: 40px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }

      .navbar .commenr_btn_border span{
    display: none;
  }
    .navbar .commenr_btn_border{
      position: relative;
    }
   
  .navbar .commenr_btn i{
    display: block; 
       
  }
 
.navbar .commenr_btn_border i{
  display: block;
  color: #fff !important;
}
.lang-toggle>span{
  display: none;
}
.lang-toggle i{
font-size: 22px;
    color: white;
}
.lang-toggle i.fa-angle-down{
  display: none;
}
._hero_area_counts{
  gap: 20px;
  justify-content: space-between;
}
._hero_area_counts ._bx_in b{
  font-size: 20px;
  margin-bottom: 5px;
}
._hero_area_counts ._bx_in span{
  font-size: 14px;
}
.navbar-expand-lg .navbar-nav{
 
        background: #0601fd;
        border-radius: 20px;
        gap: 5px;
        padding-left: 19px;
        padding-right: 11px;
        height: 50px;
 
}
}
@media screen and (max-width: 768px) {
   ._hero_area::before { 
    width: 300px;
    height: 550.42px; 
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
}
._hero_area_inner h1 { 
    font-size: 50px;
    line-height: 110%; 
}
.simple_pay_area_inner h3{
   font-size: 50px;
    line-height: 110%; 
}
._hero_area_inner p{
  margin: 20px 0;
}
._debit_area_inner h2{
   font-size: 50px;
    line-height: 110%; 
}
._apps_area_inner h2{
     font-size: 50px;
    line-height: 110%; 
}
._travel_st_area h2{
     font-size: 50px;
    line-height: 110%;  
}
._security_area_inner1 h2{ 

    font-size: 40px;
    line-height: 110%;  
}
._loyalty_area .loyalty_content h2{
   font-size: 50px;
    line-height: 110%;  
}
._loyalty_area .loyalty_box::after{
  width: 300px;
  height: 300px;
}
}

@media screen and (max-width: 550px) {
  ._hero_area_inner h1 { 
    font-size: 40px;
    line-height: 110%; 
}
._loyalty_area .loyalty_box{
  padding: 40px;
}
._security_area_inner1 h2{ 

    font-size: 35px;
    line-height: 110%;  
}
._security_area{

padding:0 0  50px 0;
}
._travel_st_area h2{
      font-size: 40px;
    line-height: 110%; 
}
._apps_area_inner h2{
     font-size: 40px;
    line-height: 110%; 
}
._debit_area_inner h2{
     font-size: 40px;
    line-height: 110%; 
}
._debit_area_inner ul li{
  flex-wrap: wrap;
  line-height: 27px; 
  text-align: left;
  justify-content: start;
  font-size: 16px;
}
.simple_pay_area_inner h3{
    font-size: 40px;
    line-height: 110%; 
}
._hero_area_inner p{
  margin: 20px 0;
  font-size: 16px;
}
.simple_pay_area_inner ul li {
    margin-bottom: 10px;
}
._debit_area_inner{
  padding-top: 0;
}
    ._debit_area {
        padding: 0 0 50px 0;
    }
    ._debit_area_inner ul{
      margin-top: 22px;
    }
}

@media screen and (max-width: 550px) {
            .navbar-brand img {
            width: 150px;
        }
        ._travel_st_area::after{
          top: 90px;
        }
        ._security_area_inner1 p{
          font-size: 15px;
          padding: 15px 0;
          line-height: 26px;
        }
        ._security_area_inner1 ul li{
          font-size: 16px;
        }
            ._loyalty_area .loyalty_content h2 {
        font-size: 40px;
        line-height: 110%;
    }
}


@media screen and (max-width: 450px){
  .simple_pay_area_inner h3{
    font-size: 35px;
    line-height: 110%; 
}
._loyalty_area .loyalty_box{
  padding: 30px;
}
._security_area_inner1 h2{ 

    font-size: 30px;
    line-height: 110%;  
}
._debit_area_inner h2{
  font-size: 35px;
    line-height: 110%; 
}
._travel_st_area h2{
        font-size: 35px;
    line-height: 110%; 
}
._apps_area_inner h2{
     font-size: 35px;
    line-height: 110%; 
}
   
}


@media screen and (max-width: 375px) {
        .simple_pay_area_inner h3{
    font-size: 30px;
    line-height: 110%; 
}
._security_area_inner1 h2{ 

    font-size: 25px;
    line-height: 110%;  
}
._debit_area_inner h2{
  font-size: 30px;
    line-height: 110%; 
}
._apps_area_inner h2{
     font-size: 30px;
    line-height: 110%; 
}
._travel_st_area h2{
     font-size: 30px;
    line-height: 110%; 
}
}

@media screen and (max-width: 325px) {
}

